Web技术大作业

一、 大作业任务概述

采用 SSM 框架来实现一个基于 Web 的用户管理系统，要求具有以下功能: (1)提供用户注册，修改个人资料，修改密码，以及登陆，注销等功能， 要实现响应式布局， 当屏幕的分辨 率小于 800px 时，左侧的 left 菜单自动隐藏。
(2)实现用户的信息管理，包括所有用户的信息列表展示，查询，编辑和删除。
(3)实现文章的信息管理，一个用户可以发表多篇文章。文章管理的首页展示一个 统计信息， 既有列表统计，也有图表显示。点击 进入文章管理进去，可以对所 选用户的文章进行管理， 包括对文章信息的 CRUD 操作。

二、 系统分析与设计(包括需求分析，总体设计与详细设计，具体体现 MVC 设计模式的应用)

2.1 需求分析

2.1.1 标题功能需求

(1) 登录功能，要求输入正确的账号密码，能进入主界面，错误的账号密码进行错误提示。
(2) 注册功能，输入姓名，密码，确认密码。要求输入两次密码保持一致。用户注册后直接进入主
界面，无需重复登录。
(3) 个人信息管理功能，可以查看自己的个人信息，并修改自己的个人信息。
(4) 修改密码功能，用户可修改自己的密码。要求输入正确的旧密码才可修改密码。
(5) 注销功能，确定注销后，直接返回到登录界面。
(6) 用户管理，点击用户管理后，界面中央显示所有用户信息。
(7) 编辑用户信息，可选则对应的用户后面的操作，进行编辑用户信息或者删除该用户。
(8) 用户信息动态查询，可在用户信息列表上方输入框中键入相关信息，下面用户信息列表动态更
新。
(9) 新增用户，管理员可新添加一个用户信息。
(10)文章管理管理系统，点击文章管理后，界面中央将会出现用户文章信息列表，和用户文章的柱
状图。
(11)点击某个用户后面的“进入文章管理”会进入该用户的文章管理界面。 (12)用户文章管理界面，可看到对应用户的相关信息，和文章信息。可为用户新增，修改，删除文
章。
2.1.2 非功能需求
(1) 拦截器功能，在没用登录前将拦截用户访问主界面，并返回到登录界面，提示用户进行登录。
1

武汉理工大学计算机科学与技术学院《WEB 技术》
(2) 局部刷新，防止界面跳转造成页面闪烁，故当选中对应功能时，只进行局部刷新。
(3) 异步通信，无需界面跳转，直接与后台进行网络通信。无需刷新界面，直接动态更新界面。

2.2 总统设计

系统采用 MVC 三层架构，前后端相互分离。利用 ajax 进行网络通信，后端将数据封装在 AjaxResult 类中，ajax 自动转为 json 进行数据获取。
后端实验 springboot 框架，使用 mybatis 连接数据库。 前端使用界面使用 bootstrap 库，js 用到了 jquery 库以及 chart 库。

2.3 详细设计

2.3.1 后端设计
a) 前端控制层，利用@Controller注解标注为controller类。这里仅仅做接收数据和返回数 据。
b) 数据服务层，利用@Service注解标注为Service类，这里做数据处理，如数据类型转换， 数据比对等等。
c) 数据库接口层，利用@mapper注解标注此为maybatis的mapper类，这里只负责对数据进 行持久化，即写入数据库。
d) 实体类层，使用@Component标注为实体类，与数据库中的表进行对应。
e) 工具层，包含生成id工具和返回结构封装类。
f) 配置层，包含页面映射配置和拦截器配置。
2.3.2 前端设计
(1) 界面设计 界面分成三部分，左边导航，上边头部，以及中间主题。
(2) 界面内容
a) 左边导航中包含主页和功能模块，功能模块中包含个人中心，用户管理和文章管理。 b) 顶部包含个人信息，修改密码，以及注销。
c) 文章管理包含用户文章列表，和用户文章统计图。

三、 系统开发与实现(包括前端页面实现，CSS样式实现，JavaScript脚 本实现，以及服务器端 SSM 框架的应用，可以贴关键代码和界面截图)

3.1 服务器端 SSM 框架应用 3.1.1 后端核心代码
2

武汉理工大学计算机科学与技术学院《WEB 技术》 (1) 拦截器配置以及页面映射配置如下图 3.1.1 和图 3.1.2，
(2) 返回结果封装类如下图 3.1.3
图 3.1.1
图 3.1.2
图 3.1.3
3

武汉理工大学计算机科学与技术学院《WEB 技术》
(3) 实体类代码如下图 3.1.4 图 3.1.5 和图 3.1.6(数据库中共计三张表，对应此三个实体类)
图 3.1.4 图 3.1.5 图 3.1.6 (4) 项目配置如下图 3.1.7
图 3.1.7
3.1.2 后端具体实现流程。
(1) 在 controller 中，每个函数前添加@RequestMapping()，用来处理一个对应的网络请求。当前 端发生网络请求时，会自动被对应函数接收，如携带数据，将通过@RequestParam()，接收。对 于接收到的参数，controller 不做任何处理，在每个 controller 中都会有一个通过自动注入 实现的 service 对象，controller 将数据交付给该对象。
(2) Service 接收到 controller 对象时，会做出相应的处理，如数据格式的转换，数据判断等。 在新增用户或者注册等操作时，service 也会构造出相关的对象。在数据处理好后，service 会 将数据交给 mapper。
(3) Mapper 在收到数据后，执行队应的 sql 语句，将数据进行持久化并返回执行结果。或者从数据 库中查询相关数据，并返回。
(4) Service 接到 mapper 结果后，再次对结果进行处理，然后直接将需要交付给前端的数据封装在 一个 AjaxResult 中，返回给 controller.
(5) Controller，接收到 service 的数据后，直接返回到前端。
4

武汉理工大学计算机科学与技术学院《WEB 技术》

3.2 前端实现

3.2.1 前端界面实现
(1) 登录界面 如下，图 3.2.1 为直接访问主界面后被拦截返回到登录界面，图 3.2.2 为错误账号密 码登录。
图 3.2.1
(2) 注册界面如下图 3.2.3
图 3.2.2
图 3.2.3
5

(5) 用户管理界面如下图 3.2.6
(6) 新增用户如下图 3.2.7
武汉理工大学计算机科学与技术学院《WEB 技术》
(3) 主界面如下图 3.2.4
(4) 修改个人信息界面如下图 3.2.5
图 3.2.4
图 3.2.5
图 3.2.6
3.2.7
6

武汉理工大学计算机科学与技术学院《WEB 技术》
(7) 编辑用户如下图 3.2.8
(8) 文章管理界面如下图 3.2.9
图 3.2.8
(9) 用户文章管理如下图 3.2.10
图 3.2.9
图 3.2.10
7

武汉理工大学计算机科学与技术学院《WEB 技术》 (10)编辑文章如下图 3.2.11
(11)新增文章如下图 3.2.12
图 3.2.11
3.2.1 前后通信实现
(1) 自定义封装了一个函数如下:
图 3.2.12
8

武汉理工大学计算机科学与技术学院《WEB 技术》
(2) 当需要向后的发起请求时，直接调用此函数，并传递相关参数即可。实现如下所示:
(3) 当登录、注册或者刷新界面来实现更新 serssion 时，不使用 ajax 通信，直接进行 form 提交如 下所示。
3.2.2 动态更新界面实现
(1) Js 生成表格实现 下面为动态添加文章信息表的行的实现函数。
9

(2) Js 进行动态查询实现 下面为用户信息动态查询的实现
(3) 更新右边主体内容
武汉理工大学计算机科学与技术学院《WEB 技术》
(4) 左边导航栏控制如下
10

武汉理工大学计算机科学与技术学院《WEB 技术》
(5) 生成统计图实现如下

四、 大作业小结(对大作业以及课程的体会)

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%