简介： 全栈开发实战｜​名片管理系统的设计与实现（SSM + JSP）

01、系统设计

1●系统功能需求

名片管理系统是针对注册用户使用的系统。系统提供的功能如下：

1．非注册用户可以注册为注册用户。

2．成功注册的用户，可以登录系统。

3．成功登录的用户，可以添加、修改、删除以及浏览自己客户的名片信息。

4．成功登录的用户，可以修改密码

2●系统模块划分

用户登录成功后，进入管理主页面（main.jsp）可以对自己的客户名片进行管理。系统模块划分，如图 4.1 所示。

02、数据库设计

系统采用加载纯 Java 数据库驱动程序的方式连接 MySQL5.x 数据库。在 MySQL5.x 的数据库 ch4 中，共创建两张与系统相关的数据表：usertable 和 cardtable。

1●数据库概念结构设计

根据系统设计与分析，可以设计出如下数据结构：

1．用户

包括 ID、用户名以及密码，注册用户名唯一。

2．名片

包括 ID、名称、电话、邮箱、单位、职务、地址、Logo 以及所属用户。其中，ID 唯一，“所属用户”与“1．用户”的用户 ID 关联。

根据以上数据结构，结合数据库设计特点，可画出如图 4.2 所示的数据库概念结构图。

其中，ID 为正整数，值是从 1 开始递增的序列。

2●数据库逻辑结构设计

将数据库概念结构图转换为 MySQL 数据库所支持的实际数据模型，即数据库的逻辑结构。

用户信息表（usertable）的设计，如表 4.1 所示。

名片信息表（cardtable）的设计，如表 4.2 所示。

03、系统管理

1●JSP 页面管理

为方便管理，在/WebContent/static 目录下存放与系统相关的静态资源，如 BootStrap 相关的 CSS 与 JS；在/WEB-INF/jsp 目录下存放与系统相关的 JSP 页面。

04、名片管理

1●Controller 实现

在本系统中，与名片管理相关的功能包括添加、修改、删除、查询等，由控制器类 CardController 负责处理。由系统功能需求可知，用户必须成功登录才能管理自己的名片，所以，CardController 处理添加、修改、删除、查询名片等功能前，需要进行登录权限验证。在 CardController 中，使用 @ModelAttribute 注解的方法进行登录权限验证。

2●Service 实现

在本系统中，与名片管理相关的功能包括添加、修改、删除、查询等，由控制器类 CardController 负责处理。由系统功能需求可知，用户必须成功登录才能管理自己的名片，所以，CardController 处理添加、修改、删除、查询名片等功能前，需要进行登录权限验证。在 CardController 中，使用 @ModelAttribute 注解的方法进行登录权限验证。

3●Dao 实现

Dao 层是数据访问层，即 @Repository 注解的数据操作接口（接口中的方法与 SQL 映射文件中元素的 id 对应），与名片管理相关的数据访问层为 CardMapper。

4●SQL 映射文件

SQL 映射文件的 namespace 属性与数据操作接口对应。与名片管理功能相关的 SQL 映射文件是 CardMapper.xml（位于 dao 包中）

5●添加名片

首先，用户登录成功后，进入名片管理系统的主页面。然后，用户在名片管理主页面单击“添加名片”超链接打开添加名片页面。最后，用户输入客户名片的姓名、电话、E-Mail、单位、职务、地址、Logo 后，单击“添加”按钮实现添加。如果成功，则跳转到名片管理主页面；如果失败，则回到添加名片页面。

addCard.jsp 页面实现添加名片信息的输入界面，如图 4.3 所示。

单击图 4.3 中“添加”按钮，将添加请求通过“card/addCard?act=add”提交给控制器类 CardController（4.5.2 节）的 addCard 方法进行添加功能处理。添加成功跳转到名片管理主页面；添加失败回到添加名片页面。

6●名片管理主页面

用户登录成功后，进入名片管理系统的主页面（main.jsp），运行效果如图 4.4 所示。

在主页面中单击“详情”超链接，打开名片详细信息页面 detail.jsp。“详情”超链接的目标地址是个 url 请求。该请求路径为“card/detail?id=${card.id}&act=detail”。根据请求路径找到对应控制器类 CardController 的 detail 方法处理查询一个名片功能。根据动作类型（“修改”以及“详情”），将查询结果转发到不同视图。名片详细信息页面 cardDetail.jsp 运行效果如图 4.5 所示。

7●修改名片

单击名片管理主页面中“修改”超链接，打开修改名片信息页面 updateCard.jsp。“修改”超链接的目标地址是 url 请求 card/detail?id=${card.id}&act=update。找到对应控制器类 CardController 的方法 detail，在该方法中，根据动作类型，将查询结果转发给 updateCard.jsp 页面显示。

输入要修改的信息后，单击“修改”按钮，将名片信息提交给控制器类，找到对应控制器类 CardController 的方法 addCard，在 addCard 方法中根据动作类型，执行修改的业务处理。修改成功，进入名片管理主页面。修改失败，回到 updateCard.jsp 页面。

updateCard.jsp 页面的运行效果如图 4.6 所示。

8●删除名片

在名片管理主页面中，单击“删除”超链接，将要删除名片的 ID 通过 Ajax 提交给控制器类。找到对应控制器类 CardController 的方法 delete，在该方法中，执行删除的业务处理。删除成功后，进入管理主页面

05、用户相关

1●Controller 实现

在本系统中，与用户相关的功能包括用户注册、用户登录以及用户检查等，由控制器类 UserController 负责处理。

2●Service 实现

与用户相关的 Service 接口和实现类分别为 UserService 和 UserServiceImpl。控制器获取一个请求后，需要调用 Service 层中业务处理方法，在 Service 层中需要调用 Dao 层。所以，Service 层是控制器层和 Dao 层的桥梁。UserService 接口的代码略。

UserServiceImpl 实现类的核心代码如下：

@Servicepublic class UserServiceImpl implements UserService{  @Autowired  private UserMapper userMapper;  /***   * 检查用户名是否可用   */  @Override  public String checkUname(MyUser myUser) {    List<MyUserTable> userList = userMapper.selectByUname(myUser);    if(userList.size() > 0)      return "no";    return "ok";  }  /**   * 实现注册功能   */  @Override  public String register(MyUser myUser) {    //将明文变成密文    myUser.setUpwd(MD5Util.MD5(myUser.getUpwd()));    if(userMapper.register(myUser) > 0)      return "login";    return "register";  }  /**   * 实现登录功能   */  @Override  public String login(MyUser myUser, Model model, HttpSession session) {    //ValidateCodeController中的rand    String code = (String)session.getAttribute("rand");    if(!code.equalsIgnoreCase(myUser.getCode())) {      model.addAttribute("errorMessage", "验证码错误！");      return "login";    }else {      //将明文变成密文      myUser.setUpwd(MD5Util.MD5(myUser.getUpwd()));      List<MyUserTable> list = userMapper.login(myUser);      if(list.size() > 0){        session.setAttribute("userLogin", list.get(0));        return "redirect:/card/selectAllCardsByPage?currentPage=1";      }else {        model.addAttribute("errorMessage", "用户名或密码错误！");        return "login";      }    }  }}

3●Dao 实现

Dao 层是数据访问层，即 @Repository 注解的数据操作接口（接口中的方法与 SQL 映射文件中元素的 id 对应），与用户相关的数据访问层为 UserMapper。

4●SQL 映射文件

SQL 映射文件的 namespace 属性与数据操作接口对应。与用户相关的 SQL 映射文件是 UserMapper.xml（位于 dao 包中），具体代码如下：

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="dao.UserMapper">  <select id="selectByUname"  resultType="MyUserTable" parameterType="MyUser">    select * from usertable where uname = #{uname}  </select>  <insert id="register" parameterType="MyUser">    insert into usertable (id,uname,upwd) values(null,#{uname},#{upwd})  </insert>  <select id="login" parameterType="MyUser" resultType="MyUserTable">    select * from usertable where uname=#{uname} and upwd=#{upwd}  </select></mapper>

5●注册

在登录页面 login.jsp，单击“注册”链接，打开注册页面 register.jsp，效果如图 4.7 所示。

在图 4.7 所示的注册页面中，输入“姓名”后，系统将通过 Ajax 提交“user/checkUname” 请求检测“姓名”是否可用。输入合法的用户信息后，单击“注册”按钮，实现注册功能。

6●登录

在浏览器中，通过地址 http://localhost:8080/ch4 打开登录页面 login.jsp，效果如图 4.8 所示。

用户输入姓名、密码和验证码后，系统将对姓名、密码和验证码进行验证。如果姓名、密码和验证码同时正确，则登录成功，将用户信息保存到 session 对象，并进入系统管理主页面（main.jsp）；如果输入有误，则提示错误。

7●修改密码

单击名片管理主页面中的“修改密码”菜单，打开密码修改页面 updatePwd.jsp。密码修好页面效果如图 4.9 所示。

在图 4.9 中输入“新密码”后，单击“修改”按钮，将请求通过“card/updatePwd”提交给控制器类。根据请求路径找到对应控制器类 CardController 的 updatePwd 方法处理密码修改请求。这里找控制器类 CardController 处理密码修改，是因为用户必须登录成功后才能修改密码。

8●安全退出

在名片管理主页面中，单击“安全退出”菜单，将返回登录页面。“安全退出”超链接的目标地址是一个请求 card/loginOut，找到控制器类 CardController 的对应处理方法 loginOut。这里找控制器类 CardController 处理安全退出，是因为用户必须登录成功后才能安全退出。

06、小结

本章讲述了名片管理系统的设计与实现。通过我们的学习，不仅掌握 SSM 框架整合开发的流程、方法和技术，还应该熟悉名片管理的业务需求、设计以及实现。