软件设计与体系结构第三次实验—

一、后端

二、前端

三、运行结果

概述：本次实验中我们选择使用实现REST API，在web上实现登录、签到以及查询签到结果的功能。

一、后端

本次实验在第二次实验（设计模式）的基础上进行了极大的改进，通过spring框架使用XML配置的方式实现设计模式中的简单工厂模式，并且使用apache的dbutils中的QueryRunner对数据库进行操作，减少了操作数据库时的复杂操作。简单工厂模式的配置如下：

需要获取对象时首先获取配置文件bean.xml，并使用spring提供的getBean方法获取对象（其中的参数”service”对应上图配置文件中的<bean id=”service”>）：

此外，工程严格按照业务逻辑层（service）、数据访问层（dao）、控制层（controller）的模式进行了修改，将业务与数据库的操作划分开来，并使用接口来相互连接，减少了代码的耦合度。代码路径如下：

本组在控制层中实现REST API的调用，包括Get方法和Post方法的声明，在Postman上通过网址进行成功调用后，将后端与前端进行连接。实现Get方法和Post方法如下：

在后端测试无误后与前端进行连接。

二、前端

前端采用vue编写，使用axios与后端进行连接。前端主要分为五个页面，分别是登录页面，导航页面，签到页面，查询签到记录页面和教室页面。前端项目目录结构如下：

前端与后端连接采用axios，以登录方法举例。前端使用axios指定后端url，并将页面文本框中的数据传输到后端，后端判断用户名和密码是否合法，若用户名和密码合法则跳转至导航页面。

前端与后端连接需要解决跨域问题。在vue项目中config\index.js文件中找到proxyTable作相应修改，并在后端控制器代码中加入@CrossOrigin来解决跨域问题。

三、运行结果

登录http://localhost:8081后进入系统的登陆界面

登录成功后进入导航界面，有签到和查询签到记录两个模块：

点击签到界面，可以输入课程号、学号、第几周进行签到，此时会调用Post方法向服务器请求签到：

再进入查询模块，输入学号后会将查询结果以表格的形式显示在网页上，可以发现刚才签到的数据已经写入数据库并被查询了出来：

与数据库结果显示一致：

资源下载地址：软件设计与体系结构第三次实验.zip-Java文档类资源-CSDN下载