JavaScript前端开发 项目10 综合项目——学生成绩查询.pptx

项目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项目的方式来完成对后台数据的读取并将数据转换