另一方面，采用大任务概要SSM框架实现基于Web的用户管理系统，要求以下功能：(1)提供用户注册、修改个人资料、修改密码、登录、注销等功能为了实现响应布局，如果屏幕分辨率低于800px，左侧的左菜单将自动隐藏。
(2)实现用户信息管理，包括查看、查询、编辑、删除所有用户的信息列表。
)3)实现文章的信息管理，允许一个用户发布多篇文章。 文章管理的首页显示列表统计和图表显示两种统计信息。 点击“进入文章管理”，可以管理所选用户的文章。 也包括文章信息的CRUD操作。
二、系统分析和设计(包括需求分析、总体设计和详细设计，具体体现MVC设计模式的应用) 2.1需求分析2.1.1标题功能需求
)登录功能要求输入正确的账户密码，进入主画面，错误地提示错误的账户密码。
)2)注册功能，输入名称、密码，确认密码。 必须输入两次密码进行匹配。 用户注册后，直接进入主界面
界面，不需要重复登录。
)3)个人信息管理功能可以查看自己的个人信息，修改自己的个人信息。
)4)更改密码的功能，用户可以更改自己的密码。 要更改密码，必须输入正确的旧密码。
)注销功能，注销确定后，直接返回登录画面。
)单击用户管理、用户管理，画面中央会显示所有用户信息。
(7)编辑用户信息，并可选地在对应的用户之后的操作中进行用户信息的编辑或删除。
)8)用户信息动态查询可以在用户信息列表顶部的输入框中输入相关信息，以下用户信息列表会动态更新
崭新的。
(9)添加用户，管理员可以添加新的用户信息。
(10 )点击文章管理系统、文章管理，屏幕中央出现用户文章信息列表和用户文章的支柱
条形图。
(11 )点击某用户后面的"进入文章管理"，进入该用户的文章管理界面。 ) 12 )用户文章管理画面能够看到与对应用户相关的信息和文章信息。 可以为用户添加、修改和删除语句
点击
2.1.2非功能需求
)拦截器功能在未使用登录时阻止用户访问主画面，返回登录画面，提示用户登录。
1
武汉理工大学计算机科学技术学院《WEB 技术》
)部分刷新为了防止画面迁移引起的页面闪烁，当选对应功能时，只进行部分刷新。
)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框架的应用，可以贴键码和界面截图
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张表，与这3个实体体系相对应) )。
图3.1.4图3.1.5图3.1.6(4)项目布置如下图3.1.7
图3.1.7
3.1.2后端具体流程的实现。
(1)在controller中，在各函数之前添加@RequestMapping )，处理对应的网络请求。 当前端发出网络请求时，它会自动被相应的函数接收，并在携带数据时通过@Reques
tParam()，接收。对 于接收到的参数，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) 生成统计图实现如下
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%