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

本章通过名片管理系统的设计与实现，讲述如何使用SSM框架来实现一个Web应用。通过本章的学习，掌握SSM框架应用开发的流程、方法以及技术

01、系统设计

1●系统功能需求

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

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

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

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

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

2●系统模块划分

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

■ 图4.1 名片管理系统

02、数据库设计

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

1●数据库概念结构设计

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

1．用户

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

2．名片

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

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

■ 图4.2 数据库概念结构图

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

2●数据库逻辑结构设计

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

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

■ 表4.1 用户信息表

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

■ 表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 添加名片页面

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

6●名片管理主页面

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

■ 图4.4 名片管理主页面

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

■ 图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所示。

■ 图4.6 updateCard.jsp页面

8●删除名片

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

05、用户相关

1●Controller实现

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

2●Service实现

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

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

@Service
public 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 注册页面

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

6●登录

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

■ 图4.8 登录界面

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

7●修改密码

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

■ 图4.9 密码修改页面

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

8●安全退出

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

06、小结

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