- 1、本文档共16页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
项目10 综合项目——学生成绩查询; 期末考试结束,李老师正忙着开发学院的学生成绩管理系统,希望张华能够参与进来。系统要在单击“学生考试成绩”超链接后,在不刷新页面的情况下,触发后台MySQL数据库查询操作,并将查询出来的结果在前端页面以列表的形式显示出来,效果如图10-1所示。;根据项目要求,本项目主要分为前端和后台两部分交互操作。前端主要通过AJAX技术将获得的数据信息在不刷新页面的情况下以列表的形式显示出来,这一过程需要用HTML表格来控制页面的基本布局,通过AJAX技术来处理数据,并动态地将数据显示在表格中。后台主要通过Java的Maven项目来读取数据库数据,并将数据以JSON格式通过Servlet容器传递到前端。
按照以上的项目分析,项目实现需要如下技术支撑。
(1)Java 1.8或者更高稳定版本。
(2)Tomcat 8.0以上版本。
(3)Maven 3.x以上版本。
(4)MySQL数据库。
(5)AJAX技术。
(6)IDEA开发环境。
(7)BeanUtils、DBUtils、Druid等各种支持JAR包或依赖的技术。; 本项目的后台数据使用IDEA+Maven项目的方式来处理。IDEA和Maven的相关知识,读者可以参考相关资料进行了解,本书不多做介绍。
具体操作步骤如下。
(1)创建MySQL数据库mydb,在mydb数据库内创建数据表stuscore用来保存学生的基本成绩,插入几条记录,如图10-2所示。;(2)打开IDEA集成开发工具,新建一个Maven项目,项目名称为ajax。在打开的“New Project”对话框中左侧的“New Project”栏中选择“Maven”命令,在右侧的“Project SDK”下拉列表中选择自己本地主机上安装的Java版本,为了方便,我们选择IDEA提供的Maven Web模板“org.opache.maven.archetypes: maven-archetype-webapp”选项,如图10-3所示。;(3)单击“Next”按钮,在弹出的“New Project”对话框中的“GroupId”和“ArtifactId”文本框中分别填写“com.ryjiaoyu”和“ajax”,如图10-4所示。;(4)单击“Next”按钮,等项目下载完所有依赖后,项目就创建好了,如图10-5所示;(5)在pom.xml文件中添加相关依赖,因为用到了Tomcat容器、Druid数据库连接池、DBUtils和JSON等,所以需要提供Servlet、Druid、DBUtils、JSON等依赖,具体内容如下所示。;(6)在resources文件夹下创建数据库连接池配置文件,通过配置文件可以与本地数据库建立连接,配置内容如图10-6所示。
(7)为了提高项目的可读性和可维护性,我们创建一个MVC框架,具体框架如图10-7所示。;(8)在工具层创建通用数据库连接工具类JDBCUtils。在连接数据库时,我们用的是Druid数据库连接池来连接数据库mydb,首先通过Properties类加载druid.properties配置文件以获得连接。具体代码如下。
在实体层中创建与数据表stucore的字段相对应的JavaBean类Stu。
;(9)在dao层中创建StuDao类,并创建Druid数据库连接池连接工具类,创建用于查询的findAll()方法,代码如图10-8、图10-9所示。;(10)在com.ryjiaoyu.servlet层中创建AjaxServlet,获得前端AJAX发送的请求,并将dao层查询结果通过JackSon的writeValueAsString()方法转换成JSON字符串发送到前端AJAX,如图10-10所示。;(11)在文件目录src/main/webapps下创建ryjiaoyu.html文件,创建查询表格。style代码如下所示。
(12)在query.html的head标签内添加script标签,实现AJAX无须刷新获得后台数据,并以表格形式显示出来,代码如图10-11所示。;(13)启动Tomcat服务器,在浏览器地址栏中输入“localhost:8080/ryjiaoyu.html”,在出现的页面中单击“学生考试成绩”超链接,将获得的学生成绩信息显示在浏览器上,如图10-1所示。; 本项目是当前流行的前后端数据交互的一个典型案例,在前端单击一个查询超链接,通过AJAX技术与后台服务器进行交互。AJAX技术可以与Apache、Tomcat等多种服务器进行交互,读取服务器数据的方式也有多种,这里使用了流行的IDEA集合开发环境、Java、Tomcat、Maven项目的方式来完成对后台数据的读取并将数据转换
您可能关注的文档
- JavaScript前端开发 项目7 故宫轮播图——BOM对象.pptx
- JavaScript前端开发 项目8 滑块验证码——事件和事件处理.pptx
- JavaScript前端开发 项目9 异步获取用户信息——AJAX技术.pptx
- 第2章_智能制造系统.pptx
- 第4章_智能制造软件.pptx
- 第6章_智能制造装备.pptx
- 第八章 金融机构.pptx
- 第二章 财政收入.pptx
- 第九章 金融市场.pptx
- 第六章 政府预算.pptx
- 2024年墨西哥Hoverboard平衡车市场机会及渠道调研报告.pdf
- 2024年墨西哥LED广告牌市场机会及渠道调研报告.pdf
- 2024年墨西哥ICP-OES光谱仪市场机会及渠道调研报告.pdf
- 精美的模板3D--适合个人计划、年终工作总结、个人总结、产品推销、年度报告、财务报表.ppt
- CloudFabric云数据中心网解决方案-分布式Network Overlay网络设计指南.pdf
- 2024小学生寒假的学习计划标准范文(3篇).doc
- 全新签约合作协议模板.docx
- 2023-2024学年度小学六年级班级工作计划格式范本(3篇).doc
- 高中美术老师年度个人工作总结标准范文(3篇).doc
- 2024入职新员工培训计划(3篇).doc
文档评论(0)