企业管理系统定制开发从零开始—仿牛客网讨论社区项目（一）

企业管理系统定制开发主要技术架构：

SpringBoot Spring SpringMVC Redis Kakfa Elasticsearch Spring Security Spring Actator

1.企业管理系统定制开发配置项目环境

        在中或者Idea企业管理系统定制开发中初始化一个SpringBoot企业管理系统定制开发项目并导出

        使用Idea企业管理系统定制开发打开导出的项目

2.MyBatis配置

 企业管理系统定制开发各个层之间的关系如下

       在搜索MySql Maven配置文件，在resources企业管理系统定制开发文件包内的pom.xml企业管理系统定制开发文件中导入相关的配置文件依赖，并在application.properties企业管理系统定制开发文件中配置相关的参数。

  1. # ServerProperties
  2. server.port=8080
  3. server.servlet.context-path=/community
  4.  
  5. # ThymeleafProperties
  6. spring.thymeleaf.cache=false
  7.  
  8. # DataSourceProperties
  9. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
  10. spring.datasource.url=jdbc:mysql://localhost:3306/community?characterEncoding=utf-8&useSSL=false&serverTimezone=Hongkong
  11. #企业管理系统定制开发数据库的名称、密码等
  12. spring.datasource.username=root
  13. spring.datasource.password=123456
  14. spring.datasource.type=com.zaxxer.hikari.HikariDataSource
  15. #企业管理系统定制开发最大连接数、企业管理系统定制开发超时时间等
  16. spring.datasource.hikari.maximum-pool-size=15
  17. spring.datasource.hikari.minimum-idle=5
  18. spring.datasource.hikari.idle-timeout=30000
  19.  
  20. # MybatisProperties
  21. #mapper扫描路径
  22. mybatis.mapper-locations=classpath:mapper/*.xml
  23. #在communtiy企业管理系统定制开发下创建实体类
  24. mybatis.type-aliases-package=com.nowcoder.community.entity
  25. mybatis.configuration.useGeneratedKeys=true
  26. mybatis.configuration.mapUnderscoreToCamelCase=true

        在community企业管理系统定制开发企业管理系统定制开发文件下创建config entity文件包，在resources文件下创建mapper文件包

        在entity文件下创建User类

  1. public class User {
  2.  
  3.     private int id;
  4.     private String username;
  5.     private String password;
  6.     private String salt;
  7.     private String email;
  8.     private int type;
  9.     private int status;
  10.     private String activationCode;
  11.     private String headerUrl;
  12.     private Date createTime;
  13.  
  14.     public int getId() {
  15.         return id;
  16.     }
  17.  
  18.     public void setId(int id) {
  19.         this.id = id;
  20.     }
  21.  
  22.     public String getUsername() {
  23.         return username;
  24.     }
  25.  
  26.     public void setUsername(String username) {
  27.         this.username = username;
  28.     }
  29.  
  30.     public String getPassword() {
  31.         return password;
  32.     }
  33.  
  34.     public void setPassword(String password) {
  35.         this.password = password;
  36.     }
  37.  
  38.     public String getSalt() {
  39.         return salt;
  40.     }
  41.  
  42.     public void setSalt(String salt) {
  43.         this.salt = salt;
  44.     }
  45.  
  46.     public String getEmail() {
  47.         return email;
  48.     }
  49.  
  50.     public void setEmail(String email) {
  51.         this.email = email;
  52.     }
  53.  
  54.     public int getType() {
  55.         return type;
  56.     }
  57.  
  58.     public void setType(int type) {
  59.         this.type = type;
  60.     }
  61.  
  62.     public int getStatus() {
  63.         return status;
  64.     }
  65.  
  66.     public void setStatus(int status) {
  67.         this.status = status;
  68.     }
  69.  
  70.     public String getActivationCode() {
  71.         return activationCode;
  72.     }
  73.  
  74.     public void setActivationCode(String activationCode) {
  75.         this.activationCode = activationCode;
  76.     }
  77.  
  78.     public String getHeaderUrl() {
  79.         return headerUrl;
  80.     }
  81.  
  82.     public void setHeaderUrl(String headerUrl) {
  83.         this.headerUrl = headerUrl;
  84.     }
  85.  
  86.     public Date getCreateTime() {
  87.         return createTime;
  88.     }
  89.  
  90.     public void setCreateTime(Date createTime) {
  91.         this.createTime = createTime;
  92.     }
  93.  
  94.     @Override
  95.     public String toString() {
  96.         return "User{" +
  97.                 "id=" + id +
  98.                 ", username='" + username + '\'' +
  99.                 ", password='" + password + '\'' +
  100.                 ", salt='" + salt + '\'' +
  101.                 ", email='" + email + '\'' +
  102.                 ", type=" + type +
  103.                 ", status=" + status +
  104.                 ", activationCode='" + activationCode + '\'' +
  105.                 ", headerUrl='" + headerUrl + '\'' +
  106.                 ", createTime=" + createTime +
  107.                 '}';
  108.     }
  109.  
  110. }

在dao文件下创建UserMapper接口访问数据库

  1. @Mapper
  2. public interface UserMapper {
  3.  
  4.     User selectById(int id);
  5.  
  6.     User selectByName(String username);
  7.  
  8.     User selectByEmail(String email);
  9.  
  10.     int insertUser(User user);
  11.  
  12.     int updateStatus(int id, int status);
  13.  
  14.     int updateHeader(int id, String headerUrl);
  15.  
  16.     int updatePassword(int id, String password);
  17.  
  18. }

        使用Mapper注解，并在mapper文件下创建user-mapp.xml，使得方法与Sql语句相关联，Mybatis 的xml配置可以在官网找到相关的配置。

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper
  3.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  4.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  5. <mapper namespace="com.nowcoder.community.dao.UserMapper">
  6.  
  7.     <sql id="insertFields">
  8.         username, password, salt, email, type, status, activation_code, header_url, create_time
  9.     </sql>
  10.  
  11.     <sql id="selectFields">
  12.         id, username, password, salt, email, type, status, activation_code, header_url, create_time
  13.     </sql>
  14.  
  15.     <select id="selectById" resultType="User">
  16.         select <include refid="selectFields"></include>
  17.         from user
  18.         where id = #{id}
  19.     </select>
  20.  
  21.     <select id="selectByName" resultType="User">
  22.         select <include refid="selectFields"></include>
  23.         from user
  24.         where username = #{username}
  25.     </select>
  26.  
  27.     <select id="selectByEmail" resultType="User">
  28.         select <include refid="selectFields"></include>
  29.         from user
  30.         where email = #{email}
  31.     </select>
  32.  
  33.     <insert id="insertUser" parameterType="User" keyProperty="id">
  34.         insert into user (<include refid="insertFields"></include>)
  35.         values(#{username}, #{password}, #{salt}, #{email}, #{type}, #{status}, #{activationCode}, #{headerUrl}, #{createTime})
  36.     </insert>
  37.  
  38.     <update id="updateStatus">
  39.         update user set status = #{status} where id = #{id}
  40.     </update>
  41.  
  42.     <update id="updateHeader">
  43.         update user set header_url = #{headerUrl} where id = #{id}
  44.     </update>
  45.  
  46.     <update id="updatePassword">
  47.         update user set password = #{password} where id = #{id}
  48.     </update>
  49.  
  50. </mapper>

        可以使用@Test注解测试相关方法是否正常使用

3.开发社区首页功能：

3.1 开发社区首页显示前10个帖子

        在Entity创建DiscussPost类，用于表示发送的相关数据，并在dao文件中创建DiscussPostMapper接口

  1. public class DiscussPost {
  2.  
  3.     private int id;
  4.     private int userId;
  5.     private String title;
  6.     private String content;
  7.     private int type;
  8.     private int status;
  9.     private Date createTime;
  10.     private int commentCount;
  11.     private double score;
  12.  
  13.     public int getId() {
  14.         return id;
  15.     }
  16.  
  17.     public void setId(int id) {
  18.         this.id = id;
  19.     }
  20.  
  21.     public int getUserId() {
  22.         return userId;
  23.     }
  24.  
  25.     public void setUserId(int userId) {
  26.         this.userId = userId;
  27.     }
  28.  
  29.     public String getTitle() {
  30.         return title;
  31.     }
  32.  
  33.     public void setTitle(String title) {
  34.         this.title = title;
  35.     }
  36.  
  37.     public String getContent() {
  38.         return content;
  39.     }
  40.  
  41.     public void setContent(String content) {
  42.         this.content = content;
  43.     }
  44.  
  45.     public int getType() {
  46.         return type;
  47.     }
  48.  
  49.     public void setType(int type) {
  50.         this.type = type;
  51.     }
  52.  
  53.     public int getStatus() {
  54.         return status;
  55.     }
  56.  
  57.     public void setStatus(int status) {
  58.         this.status = status;
  59.     }
  60.  
  61.     public Date getCreateTime() {
  62.         return createTime;
  63.     }
  64.  
  65.     public void setCreateTime(Date createTime) {
  66.         this.createTime = createTime;
  67.     }
  68.  
  69.     public int getCommentCount() {
  70.         return commentCount;
  71.     }
  72.  
  73.     public void setCommentCount(int commentCount) {
  74.         this.commentCount = commentCount;
  75.     }
  76.  
  77.     public double getScore() {
  78.         return score;
  79.     }
  80.  
  81.     public void setScore(double score) {
  82.         this.score = score;
  83.     }
  84.  
  85.     @Override
  86.     public String toString() {
  87.         return "DiscussPost{" +
  88.                 "id=" + id +
  89.                 ", userId=" + userId +
  90.                 ", title='" + title + '\'' +
  91.                 ", content='" + content + '\'' +
  92.                 ", type=" + type +
  93.                 ", status=" + status +
  94.                 ", createTime=" + createTime +
  95.                 ", commentCount=" + commentCount +
  96.                 ", score=" + score +
  97.                 '}';
  98.     }
  99. }
  1. @Mapper
  2. public interface DiscussPostMapper {
  3.  
  4.     
  5.     // 考虑到后期分页功能加入offset 和 limit变量
  6.     // @Param注解用于给参数取别名,
  7.     // 如果只有一个参数,并且在<if>里使用,则必须加别名.
  8.  
  9.  
  10.     List<DiscussPost> selectDiscussPosts(int userId, int offset, int limit);
  11.     int selectDiscussPostRows(@Param("userId") int userId);
  12.  
  13. }

        在mapper文件下创建相关的xml文件用于数据库操作

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper
  3.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  4.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  5. <mapper namespace="com.nowcoder.community.dao.DiscussPostMapper">
  6.  
  7.     <sql id="selectFields">
  8.         id, user_id, title, content, type, status, create_time, comment_count, score
  9.     </sql>
  10.  
  11.     <select id="selectDiscussPosts" resultType="DiscussPost">
  12.         select <include refid="selectFields"></include>
  13.         from discuss_post
  14.         where status != 2
  15.         <if test="userId!=0">
  16.             and user_id = #{userId}
  17.         </if>
  18.         order by type desc, create_time desc
  19.         limit #{offset}, #{limit}
  20.     </select>
  21.  
  22.     <select id="selectDiscussPostRows" resultType="int">
  23.         select count(id)
  24.         from discuss_post
  25.         where status != 2
  26.         <if test="userId!=0">
  27.             and user_id = #{userId}
  28.         </if>
  29.     </select>
  30.  
  31. </mapper>

        在service文件下创建DiscussPostService类，用于服务层使用（使用@Service注解）

  1. @Service
  2. public class DiscussPostService {
  3.  
  4.     @Autowired
  5.     private DiscussPostMapper discussPostMapper;
  6.  
  7.     public List<DiscussPost> findDiscussPosts(int userId, int offset, int limit) {
  8.         return discussPostMapper.selectDiscussPosts(userId, offset, limit);
  9.     }
  10.  
  11.     public int findDiscussPostRows(int userId) {
  12.         return discussPostMapper.selectDiscussPostRows(userId);
  13.     }
  14.  
  15. }

        将静态资源（css image js等文件）放到static文件下，将模板文件（site index.html）放到templates文件下。

        接下来开发视图层，新建一个HomeController在controller文件下使用@Controller注解

  1. //Controller访问路径可以省略
  2. @Controller
  3. public class HomeController {
  4.  
  5.     //注入对象
  6.     @Autowired
  7.     private DiscussPostService discussPostService;
  8.  
  9.     @Autowired
  10.     private UserService userService;
  11.  
  12.     //使用GET方法
  13.     @RequestMapping(path = "/index", method = RequestMethod.GET)
  14.  
  15.  
  16.         List<DiscussPost> list = discussPostService.findDiscussPosts(0, page.getOffset(), page.getLimit());
  17.         List<Map<String, Object>> discussPosts = new ArrayList<>();
  18.         if (list != null) {
  19.             for (DiscussPost post : list) {
  20.                 Map<String, Object> map = new HashMap<>();
  21.                 map.put("post", post);
  22.                 User user = userService.findUserById(post.getUserId());
  23.                 map.put("user", user);
  24.                 discussPosts.add(map);
  25.             }
  26.         }
  27.         model.addAttribute("discussPosts", discussPosts);
  28.         return "/index";
  29.     }
  30.  
  31. }

        更改Index.html文件，使用Thymeleaf对其中相对路径进行更改，并显示相关的帖子。

  1. <ul class="list-unstyled">
  2. 					<li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${discussPosts}">
  3. 						<a href="site/profile.html">
  4. 							<img th:src="${map.user.headerUrl}" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
  5. 						</a>
  6. 						<div class="media-body">
  7. 							<h6 class="mt-0 mb-3">
  8. 								<a href="#" th:utext="${map.post.title}">备战春招，面试刷题跟他复习，一个月全搞定！</a>
  9. 								<span class="badge badge-secondary bg-primary" th:if="${map.post.type==1}">置顶</span>
  10. 								<span class="badge badge-secondary bg-danger" th:if="${map.post.status==1}">精华</span>
  11. 							</h6>
  12. 							<div class="text-muted font-size-12">
  13. 								<u class="mr-3" th:utext="${map.user.username}">寒江雪</u> 发布于 <b th:text="${#dates.format(map.post.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b>
  14. 								<ul class="d-inline float-right">
  15. 									<li class="d-inline ml-2">赞 11</li>
  16. 									<li class="d-inline ml-2">|</li>
  17. 									<li class="d-inline ml-2">回帖 7</li>
  18. 								</ul>
  19. 							</div>
  20. 						</div>						
  21. 					</li>
  22. 				</ul>

        完整的HTML文件如下：

  1. <!doctype html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. 	<link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
  7. 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
  8. 	<link rel="stylesheet" th:href="@{/css/global.css}" />
  9. 	<title>牛客网-首页</title>
  10. </head>
  11. <body>	
  12. 	<div class="nk-container">
  13. 		<!-- 头部 -->
  14. 		<header class="bg-dark sticky-top">
  15. 			<div class="container">
  16. 				<!-- 导航 -->
  17. 				<nav class="navbar navbar-expand-lg navbar-dark">
  18. 					<!-- logo -->
  19. 					<a class="navbar-brand" href="#"></a>
  20. 					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  21. 						<span class="navbar-toggler-icon"></span>
  22. 					</button>
  23. 					<!-- 功能 -->
  24. 					<div class="collapse navbar-collapse" id="navbarSupportedContent">
  25. 						<ul class="navbar-nav mr-auto">
  26. 							<li class="nav-item ml-3 btn-group-vertical">
  27. 								<a class="nav-link" href="index.html">首页</a>
  28. 							</li>
  29. 							<li class="nav-item ml-3 btn-group-vertical">
  30. 								<a class="nav-link position-relative" href="site/letter.html">消息<span class="badge badge-danger">12</span></a>
  31. 							</li>
  32. 							<li class="nav-item ml-3 btn-group-vertical">
  33. 								<a class="nav-link" href="site/register.html">注册</a>
  34. 							</li>
  35. 							<li class="nav-item ml-3 btn-group-vertical">
  36. 								<a class="nav-link" href="site/login.html">登录</a>
  37. 							</li>
  38. 							<li class="nav-item ml-3 btn-group-vertical dropdown">
  39. 								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  40. 									<img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle" style="width:30px;"/>
  41. 								</a>
  42. 								<div class="dropdown-menu" aria-labelledby="navbarDropdown">
  43. 									<a class="dropdown-item text-center" href="site/profile.html">个人主页</a>
  44. 									<a class="dropdown-item text-center" href="site/setting.html">账号设置</a>
  45. 									<a class="dropdown-item text-center" href="site/login.html">退出登录</a>
  46. 									<div class="dropdown-divider"></div>
  47. 									<span class="dropdown-item text-center text-secondary">nowcoder</span>
  48. 								</div>
  49. 							</li>
  50. 						</ul>
  51. 						<!-- 搜索 -->
  52. 						<form class="form-inline my-2 my-lg-0" action="site/search.html">
  53. 							<input class="form-control mr-sm-2" type="search" aria-label="Search" />
  54. 							<button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
  55. 						</form>
  56. 					</div>
  57. 				</nav>
  58. 			</div>
  59. 		</header>
  60.  
  61. 		<!-- 内容 -->
  62. 		<div class="main">
  63. 			<div class="container">
  64. 				<div class="position-relative">
  65. 					<!-- 筛选条件 -->
  66. 					<ul class="nav nav-tabs mb-3">
  67. 						<li class="nav-item">
  68. 							<a class="nav-link active" href="#">最新</a>
  69. 						</li>
  70. 						<li class="nav-item">
  71. 							<a class="nav-link" href="#">最热</a>
  72. 						</li>
  73. 					</ul>
  74. 					<button type="button" class="btn btn-primary btn-sm position-absolute rt-0" data-toggle="modal" data-target="#publishModal">我要发布</button>
  75. 				</div>
  76. 				<!-- 弹出框 -->
  77. 				<div class="modal fade" id="publishModal" tabindex="-1" role="dialog" aria-labelledby="publishModalLabel" aria-hidden="true">
  78. 					<div class="modal-dialog modal-lg" role="document">
  79. 						<div class="modal-content">
  80. 							<div class="modal-header">
  81. 								<h5 class="modal-title" id="publishModalLabel">新帖发布</h5>
  82. 								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
  83. 									<span aria-hidden="true">&times;</span>
  84. 								</button>
  85. 							</div>
  86. 							<div class="modal-body">
  87. 								<form>
  88. 									<div class="form-group">
  89. 										<label for="recipient-name" class="col-form-label">标题：</label>
  90. 										<input type="text" class="form-control" id="recipient-name">
  91. 									</div>
  92. 									<div class="form-group">
  93. 										<label for="message-text" class="col-form-label">正文：</label>
  94. 										<textarea class="form-control" id="message-text" rows="15"></textarea>
  95. 									</div>
  96. 								</form>
  97. 							</div>
  98. 							<div class="modal-footer">
  99. 								<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
  100. 								<button type="button" class="btn btn-primary" id="publishBtn">发布</button>
  101. 							</div>
  102. 						</div>
  103. 					</div>
  104. 				</div>
  105. 				<!-- 提示框 -->
  106. 				<div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true">
  107. 					<div class="modal-dialog modal-lg" role="document">
  108. 						<div class="modal-content">
  109. 							<div class="modal-header">
  110. 								<h5 class="modal-title" id="hintModalLabel">提示</h5>
  111. 							</div>
  112. 							<div class="modal-body" id="hintBody">
  113. 								发布完毕!
  114. 							</div>
  115. 						</div>
  116. 					</div>
  117. 				</div>
  118. 				
  119. 				<!-- 帖子列表 -->
  120. 				<ul class="list-unstyled">
  121. 					<li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${discussPosts}">
  122. 						<a href="site/profile.html">
  123. 							<img th:src="${map.user.headerUrl}" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
  124. 						</a>
  125. 						<div class="media-body">
  126. 							<h6 class="mt-0 mb-3">
  127. 								<a href="#" th:utext="${map.post.title}">备战春招，面试刷题跟他复习，一个月全搞定！</a>
  128. 								<span class="badge badge-secondary bg-primary" th:if="${map.post.type==1}">置顶</span>
  129. 								<span class="badge badge-secondary bg-danger" th:if="${map.post.status==1}">精华</span>
  130. 							</h6>
  131. 							<div class="text-muted font-size-12">
  132. 								<u class="mr-3" th:utext="${map.user.username}">寒江雪</u> 发布于 <b th:text="${#dates.format(map.post.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b>
  133. 								<ul class="d-inline float-right">
  134. 									<li class="d-inline ml-2">赞 11</li>
  135. 									<li class="d-inline ml-2">|</li>
  136. 									<li class="d-inline ml-2">回帖 7</li>
  137. 								</ul>
  138. 							</div>
  139. 						</div>						
  140. 					</li>
  141. 				</ul>
  142. 				<!-- 分页 -->
  143. 				<nav class="mt-5" th:if="${page.rows>0}">
  144. 					<ul class="pagination justify-content-center">
  145. 						<li class="page-item">
  146. 							<a class="page-link" th:href="@{${page.path}(current=1)}">首页</a>
  147. 						</li>
  148. 						<li th:class="|page-item ${page.current==1?'disabled':''}|">
  149. 							<a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一页</a></li>
  150. 						<li th:class="|page-item ${i==page.current?'active':''}|" th:each="i:${#numbers.sequence(page.from,page.to)}">
  151. 							<a class="page-link" href="#" th:text="${i}">1</a>
  152. 						</li>
  153. 						<li th:class="|page-item ${page.current==page.total?'disabled':''}|">
  154. 							<a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一页</a>
  155. 						</li>
  156. 						<li class="page-item">
  157. 							<a class="page-link" th:href="@{${page.path}(current=${page.total})}">末页</a>
  158. 						</li>
  159. 					</ul>
  160. 				</nav>
  161. 			</div>
  162. 		</div>
  163.  
  164. 		<!-- 尾部 -->
  165. 		<footer class="bg-dark">
  166. 			<div class="container">
  167. 				<div class="row">
  168. 					<!-- 二维码 -->
  169. 					<div class="col-4 qrcode">
  170. 						<img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail" style="width:136px;" />
  171. 					</div>
  172. 					<!-- 公司信息 -->
  173. 					<div class="col-8 detail-info">
  174. 						<div class="row">
  175. 							<div class="col">
  176. 								<ul class="nav">
  177. 									<li class="nav-item">
  178. 										<a class="nav-link text-light" href="#">关于我们</a>
  179. 									</li>
  180. 									<li class="nav-item">
  181. 										<a class="nav-link text-light" href="#">加入我们</a>
  182. 									</li>
  183. 									<li class="nav-item">
  184. 										<a class="nav-link text-light" href="#">意见反馈</a>
  185. 									</li>
  186. 									<li class="nav-item">
  187. 										<a class="nav-link text-light" href="#">企业服务</a>
  188. 									</li>
  189. 									<li class="nav-item">
  190. 										<a class="nav-link text-light" href="#">联系我们</a>
  191. 									</li>
  192. 									<li class="nav-item">
  193. 										<a class="nav-link text-light" href="#">免责声明</a>
  194. 									</li>
  195. 									<li class="nav-item">
  196. 										<a class="nav-link text-light" href="#">友情链接</a>
  197. 									</li>
  198. 								</ul>
  199. 							</div>
  200. 						</div>
  201. 						<div class="row">
  202. 							<div class="col">
  203. 								<ul class="nav btn-group-vertical company-info">
  204. 									<li class="nav-item text-white-50">
  205. 										公司地址：北京市朝阳区大屯路东金泉时代3-2708北京牛客科技有限公司
  206. 									</li>
  207. 									<li class="nav-item text-white-50">
  208. 										联系方式：010-60728802(电话)&nbsp;&nbsp;&nbsp;&nbsp;admin@nowcoder.com
  209. 									</li>
  210. 									<li class="nav-item text-white-50">
  211. 										牛客科技©2018 All rights reserved
  212. 									</li>
  213. 									<li class="nav-item text-white-50">
  214. 										京ICP备14055008号-4 &nbsp;&nbsp;&nbsp;&nbsp;
  215. 										<img src="http://static.nowcoder.com/company/images/res/ghs.png" style="width:18px;" />
  216. 										京公网安备 11010502036488号
  217. 									</li>
  218. 								</ul>
  219. 							</div>
  220. 						</div>
  221. 					</div>
  222. 				</div>
  223. 			</div>
  224. 		</footer>
  225. 	</div>
  226.  
  227. 	<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
  228. 	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
  229. 	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
  230. 	<script th:src="@{/js/global.js}"></script>
  231. 	<script th:src="@{js/index.js}"></script>
  232. </body>
  233. </html>

3.2开发分页组件，分页显示所有帖子

        在entity文件下创建page类，用于记录分页数据

  1. /**
  2.  * 封装分页相关的信息.
  3.  */
  4. public class Page {
  5.  
  6.     // 当前页码
  7.     private int current = 1;
  8.     // 显示上限
  9.     private int limit = 10;
  10.     // 数据总数(用于计算总页数)
  11.     private int rows;
  12.     // 查询路径(用于复用分页链接)
  13.     private String path;
  14.  
  15.     public int getCurrent() {
  16.         return current;
  17.     }
  18.  
  19.     public void setCurrent(int current) {
  20.         if (current >= 1) {
  21.             this.current = current;
  22.         }
  23.     }
  24.  
  25.     public int getLimit() {
  26.         return limit;
  27.     }
  28.  
  29.     public void setLimit(int limit) {
  30.         if (limit >= 1 && limit <= 100) {
  31.             this.limit = limit;
  32.         }
  33.     }
  34.  
  35.     public int getRows() {
  36.         return rows;
  37.     }
  38.  
  39.     public void setRows(int rows) {
  40.         if (rows >= 0) {
  41.             this.rows = rows;
  42.         }
  43.     }
  44.  
  45.     public String getPath() {
  46.         return path;
  47.     }
  48.  
  49.     public void setPath(String path) {
  50.         this.path = path;
  51.     }
  52.  
  53.     /**
  54.      * 获取当前页的起始行
  55.      *
  56.      * @return
  57.      */
  58.     public int getOffset() {
  59.         // current * limit - limit
  60.         return (current - 1) * limit;
  61.     }
  62.  
  63.     /**
  64.      * 获取总页数
  65.      *
  66.      * @return
  67.      */
  68.     public int getTotal() {
  69.         // rows / limit [+1]
  70.         if (rows % limit == 0) {
  71.             return rows / limit;
  72.         } else {
  73.             return rows / limit + 1;
  74.         }
  75.     }
  76.  
  77.     /**
  78.      * 获取起始页码
  79.      *
  80.      * @return
  81.      */
  82.     public int getFrom() {
  83.         int from = current - 2;
  84.         return from < 1 ? 1 : from;
  85.     }
  86.  
  87.     /**
  88.      * 获取结束页码
  89.      *
  90.      * @return
  91.      */
  92.     public int getTo() {
  93.         int to = current + 2;
  94.         int total = getTotal();
  95.         return to > total ? total : to;
  96.     }
  97.  
  98. }

        更改HomeController，加入分页的方法。

  1. //Controller访问路径可以省略
  2. @Controller
  3. public class HomeController {
  4.  
  5.     //注入对象
  6.     @Autowired
  7.     private DiscussPostService discussPostService;
  8.  
  9.     @Autowired
  10.     private UserService userService;
  11.  
  12.     //使用GET方法
  13.     @RequestMapping(path = "/index", method = RequestMethod.GET)
  14.  
  15.     public String getIndexPage(Model model, Page page) {
  16.         // 方法调用钱,SpringMVC会自动实例化Model和Page,并将Page注入Model.
  17.         // 所以,在thymeleaf中可以直接访问Page对象中的数据.
  18.         page.setRows(discussPostService.findDiscussPostRows(0));
  19.         page.setPath("/index");
  20.  
  21.         List<DiscussPost> list = discussPostService.findDiscussPosts(0, page.getOffset(), page.getLimit());
  22.         List<Map<String, Object>> discussPosts = new ArrayList<>();
  23.         if (list != null) {
  24.             for (DiscussPost post : list) {
  25.                 Map<String, Object> map = new HashMap<>();
  26.                 map.put("post", post);
  27.                 User user = userService.findUserById(post.getUserId());
  28.                 map.put("user", user);
  29.                 discussPosts.add(map);
  30.             }
  31.         }
  32.         model.addAttribute("discussPosts", discussPosts);
  33.         return "/index";
  34.     }
  35.  
  36. }

        在更改Index.html问件中分页的方法

  1. <!-- 分页 -->
  2. 				<nav class="mt-5" th:if="${page.rows>0}">
  3. 					<ul class="pagination justify-content-center">
  4. 						<li class="page-item">
  5. 							<a class="page-link" th:href="@{${page.path}(current=1)}">首页</a>
  6. 						</li>
  7. 						<li th:class="|page-item ${page.current==1?'disabled':''}|">
  8. 							<a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一页</a></li>
  9. 						<li th:class="|page-item ${i==page.current?'active':''}|" th:each="i:${#numbers.sequence(page.from,page.to)}">
  10. 							<a class="page-link" href="#" th:text="${i}">1</a>
  11. 						</li>
  12. 						<li th:class="|page-item ${page.current==page.total?'disabled':''}|">
  13. 							<a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一页</a>
  14. 						</li>
  15. 						<li class="page-item">
  16. 							<a class="page-link" th:href="@{${page.path}(current=${page.total})}">末页</a>
  17. 						</li>
  18. 					</ul>
  19. 				</nav>
  20. 			</div>
  21. 		</div>

效果图如下：

4.开发社区登录模块

4.1邮件发送

           在搜索Spring Mail配置文件并加入到poml文件中，在application.properties文件中配置Mail的参数。

  1. # ServerProperties
  2. server.port=8080
  3. server.servlet.context-path=/community
  4.  
  5. # ThymeleafProperties
  6. spring.thymeleaf.cache=false
  7.  
  8. # DataSourceProperties
  9. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
  10. spring.datasource.url=jdbc:mysql://localhost:3306/community?characterEncoding=utf-8&useSSL=false&serverTimezone=Hongkong
  11. spring.datasource.username=root
  12. spring.datasource.password=lihonghe
  13. spring.datasource.type=com.zaxxer.hikari.HikariDataSource
  14. spring.datasource.hikari.maximum-pool-size=15
  15. spring.datasource.hikari.minimum-idle=5
  16. spring.datasource.hikari.idle-timeout=30000
  17.  
  18. # MybatisProperties
  19. mybatis.mapper-locations=classpath:mapper/*.xml
  20. mybatis.type-aliases-package=com.nowcoder.community.entity
  21. mybatis.configuration.useGeneratedKeys=true
  22. mybatis.configuration.mapUnderscoreToCamelCase=true
  23.  
  24.  
  25. # MailProperties
  26. spring.mail.host=smtp.sina.com
  27. spring.mail.port=465
  28. #自己的邮箱
  29. spring.mail.username=nowcoder@sina.com
  30. spring.mail.password=nowcoder123
  31. spring.mail.protocol=smtps
  32. spring.mail.properties.mail.smtp.ssl.enable=true

        如果发送不了邮件，需要在个人邮箱的网站设置启用授权码，验证手机，并修改properties文件中关于Email的配置

  1. # MailProperties
  2. spring.mail.host=smtp.sina.com
  3. #spring.mail.port=465
  4. spring.mail.username=nowcoder@sina.com
  5. spring.mail.password=3398c6c71399f9fe
  6. #spring.mail.protocol=smtps
  7. #spring.mail.properties.mail.smtp.ssl.enable=true
  8. spring.mail.properties.mail.smtl.auth=true

        在community文件下创建util工具文件包，并在util包中创建MailClient类使用@Component注解，并创建发送邮件的方法。

  1. @Component
  2. public class MailClient {
  3.  
  4.     private static final Logger logger = LoggerFactory.getLogger(MailClient.class);
  5.  
  6.     @Autowired
  7.     private JavaMailSender mailSender;
  8.     
  9.     //从配置文件中获取值
  10.     @Value("${spring.mail.username}")
  11.     private String from;
  12.  
  13.     public void sendMail(String to, String subject, String content) {
  14.         try {
  15.             MimeMessage message = mailSender.createMimeMessage();
  16.             MimeMessageHelper helper = new MimeMessageHelper(message);
  17.             helper.setFrom(from);
  18.             helper.setTo(to);
  19.             helper.setSubject(subject);
  20.             helper.setText(content, true);
  21.             mailSender.send(helper.getMimeMessage());
  22.         } catch (MessagingException e) {
  23.             logger.error("发送邮件失败:" + e.getMessage());
  24.         }
  25.     }
  26.  
  27. }

4.2注册功能

        在Controller层下创建LoginController类，实现登录界面跳转到注册页面，使用@Controller注解。

  1. @Controller
  2. public class LoginController implements CommunityConstant {
  3.  
  4.     @RequestMapping(path = "/register", method = RequestMethod.GET)
  5.     public String getRegisterPage() {
  6.         return "/site/register";
  7.     }
  8.  
  9.     @RequestMapping(path = "/login", method = RequestMethod.GET)
  10.     public String getLoginPage() {
  11.         return "/site/login";
  12.     }
  13. }
  14.

         使用模板引擎thymeleaf修改注册页面regist.html。

  1. <!doctype html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. 	<link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
  7. 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
  8. 	<link rel="stylesheet" th:href="@{/css/global.css}" />
  9. 	<link rel="stylesheet" th:href="@{/css/login.css}" />
  10. 	<title>牛客网-注册</title>
  11. </head>
  12. <body>
  13. 	<div class="nk-container">
  14. 		<!-- 头部 -->
  15. 		<header class="bg-dark sticky-top" th:replace="index::header">
  16. 			<div class="container">
  17. 				<!-- 导航 -->
  18. 				<nav class="navbar navbar-expand-lg navbar-dark">
  19. 					<!-- logo -->
  20. 					<a class="navbar-brand" href="#"></a>
  21. 					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  22. 						<span class="navbar-toggler-icon"></span>
  23. 					</button>
  24. 					<!-- 功能 -->
  25. 					<div class="collapse navbar-collapse" id="navbarSupportedContent">
  26. 						<ul class="navbar-nav mr-auto">
  27. 							<li class="nav-item ml-3 btn-group-vertical">
  28. 								<a class="nav-link" href="../index.html">首页</a>
  29. 							</li>
  30. 							<li class="nav-item ml-3 btn-group-vertical">
  31. 								<a class="nav-link position-relative" href="letter.html">消息<span class="badge badge-danger">12</span></a>
  32. 							</li>
  33. 							<li class="nav-item ml-3 btn-group-vertical">
  34. 								<a class="nav-link" href="register.html">注册</a>
  35. 							</li>
  36. 							<li class="nav-item ml-3 btn-group-vertical">
  37. 								<a class="nav-link" href="login.html">登录</a>
  38. 							</li>
  39. 							<li class="nav-item ml-3 btn-group-vertical dropdown">
  40. 								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  41. 									<img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle" style="width:30px;"/>
  42. 								</a>
  43. 								<div class="dropdown-menu" aria-labelledby="navbarDropdown">
  44. 									<a class="dropdown-item text-center" href="profile.html">个人主页</a>
  45. 									<a class="dropdown-item text-center" href="setting.html">账号设置</a>
  46. 									<a class="dropdown-item text-center" href="login.html">退出登录</a>
  47. 									<div class="dropdown-divider"></div>
  48. 									<span class="dropdown-item text-center text-secondary">nowcoder</span>
  49. 								</div>
  50. 							</li>
  51. 						</ul>
  52. 						<!-- 搜索 -->
  53. 						<form class="form-inline my-2 my-lg-0" action="search.html">
  54. 							<input class="form-control mr-sm-2" type="search" aria-label="Search" />
  55. 							<button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
  56. 						</form>
  57. 					</div>
  58. 				</nav>
  59. 			</div>
  60. 		</header>
  61.  
  62. 		<!-- 内容 -->
  63. 		<div class="main">
  64. 			<div class="container pl-5 pr-5 pt-3 pb-3 mt-3 mb-3">
  65. 				<h3 class="text-center text-info border-bottom pb-3">注&nbsp;&nbsp;册</h3>
  66. 				<form class="mt-5" method="post" th:action="@{/register}">
  67. 					<div class="form-group row">
  68. 						<label for="username" class="col-sm-2 col-form-label text-right">账号:</label>
  69. 						<div class="col-sm-10">
  70. 							<input type="text"
  71. 								   th:class="|form-control ${usernameMsg!=null?'is-invalid':''}|"
  72. 								   th:value="${user!=null?user.username:''}"
  73. 								   id="username" name="username" placeholder="请输入您的账号!" required>
  74. 							<div class="invalid-feedback" th:text="${usernameMsg}">
  75. 								该账号已存在!
  76. 							</div>
  77. 						</div>
  78. 					</div>
  79. 					<div class="form-group row mt-4">
  80. 						<label for="password" class="col-sm-2 col-form-label text-right">密码:</label>
  81. 						<div class="col-sm-10">
  82. 							<input type="password"
  83. 								   th:class="|form-control ${passwordMsg!=null?'is-invalid':''}|"
  84. 								   th:value="${user!=null?user.password:''}"
  85. 								   id="password" name="password" placeholder="请输入您的密码!" required>
  86. 							<div class="invalid-feedback" th:text="${passwordMsg}">
  87. 								密码长度不能小于8位!
  88. 							</div>							
  89. 						</div>
  90. 					</div>
  91. 					<div class="form-group row mt-4">
  92. 						<label for="confirm-password" class="col-sm-2 col-form-label text-right">确认密码:</label>
  93. 						<div class="col-sm-10">
  94. 							<input type="password" class="form-control"
  95. 								   th:value="${user!=null?user.password:''}"
  96. 								   id="confirm-password" placeholder="请再次输入密码!" required>
  97. 							<div class="invalid-feedback">
  98. 								两次输入的密码不一致!
  99. 							</div>
  100. 						</div>
  101. 					</div>
  102. 					<div class="form-group row">
  103. 						<label for="email" class="col-sm-2 col-form-label text-right">邮箱:</label>
  104. 						<div class="col-sm-10">
  105. 							<input type="email"
  106. 								   th:class="|form-control ${emailMsg!=null?'is-invalid':''}|"
  107. 								   th:value="${user!=null?user.email:''}"
  108. 								   id="email" name="email" placeholder="请输入您的邮箱!" required>
  109. 							<div class="invalid-feedback" th:text="${emailMsg}">
  110. 								该邮箱已注册!
  111. 							</div>
  112. 						</div>
  113. 					</div>
  114. 					<div class="form-group row mt-4">
  115. 						<div class="col-sm-2"></div>
  116. 						<div class="col-sm-10 text-center">
  117. 							<button type="submit" class="btn btn-info text-white form-control">立即注册</button>
  118. 						</div>
  119. 					</div>
  120. 				</form>				
  121. 			</div>
  122. 		</div>
  123.  
  124. 		<!-- 尾部 -->
  125. 		<footer class="bg-dark">
  126. 			<div class="container">
  127. 				<div class="row">
  128. 					<!-- 二维码 -->
  129. 					<div class="col-4 qrcode">
  130. 						<img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail" style="width:136px;" />
  131. 					</div>
  132. 					<!-- 公司信息 -->
  133. 					<div class="col-8 detail-info">
  134. 						<div class="row">
  135. 							<div class="col">
  136. 								<ul class="nav">
  137. 									<li class="nav-item">
  138. 										<a class="nav-link text-light" href="#">关于我们</a>
  139. 									</li>
  140. 									<li class="nav-item">
  141. 										<a class="nav-link text-light" href="#">加入我们</a>
  142. 									</li>
  143. 									<li class="nav-item">
  144. 										<a class="nav-link text-light" href="#">意见反馈</a>
  145. 									</li>
  146. 									<li class="nav-item">
  147. 										<a class="nav-link text-light" href="#">企业服务</a>
  148. 									</li>
  149. 									<li class="nav-item">
  150. 										<a class="nav-link text-light" href="#">联系我们</a>
  151. 									</li>
  152. 									<li class="nav-item">
  153. 										<a class="nav-link text-light" href="#">免责声明</a>
  154. 									</li>
  155. 									<li class="nav-item">
  156. 										<a class="nav-link text-light" href="#">友情链接</a>
  157. 									</li>
  158. 								</ul>
  159. 							</div>
  160. 						</div>
  161. 						<div class="row">
  162. 							<div class="col">
  163. 								<ul class="nav btn-group-vertical company-info">
  164. 									<li class="nav-item text-white-50">
  165. 										公司地址：北京市朝阳区大屯路东金泉时代3-2708北京牛客科技有限公司
  166. 									</li>
  167. 									<li class="nav-item text-white-50">
  168. 										联系方式：010-60728802(电话)&nbsp;&nbsp;&nbsp;&nbsp;admin@nowcoder.com
  169. 									</li>
  170. 									<li class="nav-item text-white-50">
  171. 										牛客科技©2018 All rights reserved
  172. 									</li>
  173. 									<li class="nav-item text-white-50">
  174. 										京ICP备14055008号-4 &nbsp;&nbsp;&nbsp;&nbsp;
  175. 										<img src="http://static.nowcoder.com/company/images/res/ghs.png" style="width:18px;" />
  176. 										京公网安备 11010502036488号
  177. 									</li>
  178. 								</ul>
  179. 							</div>
  180. 						</div>
  181. 					</div>
  182. 				</div>
  183. 			</div>
  184. 		</footer>
  185. 	</div>
  186.  
  187. 	<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
  188. 	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
  189. 	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
  190. 	<script th:src="@{/js/global.js}"></script>
  191. 	<script th:src="@{/js/register.js}"></script>
  192. </body>
  193. </html>

         在搜索commons lang配置文件并加入到poml文件中。在properties文件中加入community的路径。

  1. # community
  2. community.path.domain=http://localhost:8080

在util中添加CommunityUtil工具类，方便生成密码。

  1. public class CommunityUtil {
  2.  
  3.     // 生成随机字符串
  4.     public static String generateUUID() {
  5.         return UUID.randomUUID().toString().replaceAll("-", "");
  6.     }
  7.  
  8.     // MD5加密
  9.     // hello -> abc123def456
  10.     // hello + 3e4a8 -> abc123def456abc
  11.     public static String md5(String key) {
  12.         if (StringUtils.isBlank(key)) {
  13.             return null;
  14.         }
  15.         return DigestUtils.md5DigestAsHex(key.getBytes());
  16.     }
  17.  
  18. }

        在Service中更新UserService类，用于注册用户业务，并更新激活页面activation.html。

  1. @Service
  2. public class UserService implements CommunityConstant {
  3.  
  4.     @Autowired
  5.     private UserMapper userMapper;
  6.  
  7.     @Autowired
  8.     private MailClient mailClient;
  9.  
  10.     @Autowired
  11.     private TemplateEngine templateEngine;
  12.  
  13.     @Value("${community.path.domain}")
  14.     private String domain;
  15.  
  16.     @Value("${server.servlet.context-path}")
  17.     private String contextPath;
  18.  
  19.     @Autowired
  20.     private LoginTicketMapper loginTicketMapper;
  21.  
  22.     public User findUserById(int id) {
  23.         return userMapper.selectById(id);
  24.     }
  25.  
  26.     public Map<String, Object> register(User user) {
  27.         Map<String, Object> map = new HashMap<>();
  28.  
  29.         // 空值处理
  30.         if (user == null) {
  31.             throw new IllegalArgumentException("参数不能为空!");
  32.         }
  33.         if (StringUtils.isBlank(user.getUsername())) {
  34.             map.put("usernameMsg", "账号不能为空!");
  35.             return map;
  36.         }
  37.         if (StringUtils.isBlank(user.getPassword())) {
  38.             map.put("passwordMsg", "密码不能为空!");
  39.             return map;
  40.         }
  41.         if (StringUtils.isBlank(user.getEmail())) {
  42.             map.put("emailMsg", "邮箱不能为空!");
  43.             return map;
  44.         }
  45.  
  46.         // 验证账号
  47.         User u = userMapper.selectByName(user.getUsername());
  48.         if (u != null) {
  49.             map.put("usernameMsg", "该账号已存在!");
  50.             return map;
  51.         }
  52.  
  53.         // 验证邮箱
  54.         u = userMapper.selectByEmail(user.getEmail());
  55.         if (u != null) {
  56.             map.put("emailMsg", "该邮箱已被注册!");
  57.             return map;
  58.         }
  59.  
  60.         // 注册用户
  61.         user.setSalt(CommunityUtil.generateUUID().substring(0, 5));
  62.         user.setPassword(CommunityUtil.md5(user.getPassword() + user.getSalt()));
  63.         user.setType(0);
  64.         user.setStatus(0);
  65.         user.setActivationCode(CommunityUtil.generateUUID());
  66.         user.setHeaderUrl(String.format("http://images.nowcoder.com/head/%dt.png", new Random().nextInt(1000)));
  67.         user.setCreateTime(new Date());
  68.         userMapper.insertUser(user);
  69.  
  70.         // 激活邮件
  71.         Context context = new Context();
  72.         context.setVariable("email", user.getEmail());
  73.         // http://localhost:8080/community/activation/101/code
  74.         String url = domain + contextPath + "/activation/" + user.getId() + "/" + user.getActivationCode();
  75.         context.setVariable("url", url);
  76.         String content = templateEngine.process("/mail/activation", context);
  77.         mailClient.sendMail(user.getEmail(), "激活账号", content);
  78.  
  79.         return map;
  80.     }
  81.  
  82.     public int activation(int userId, String code) {
  83.         User user = userMapper.selectById(userId);
  84.         if (user.getStatus() == 1) {
  85.             return ACTIVATION_REPEAT;
  86.         } else if (user.getActivationCode().equals(code)) {
  87.             userMapper.updateStatus(userId, 1);
  88.             return ACTIVATION_SUCCESS;
  89.         } else {
  90.             return ACTIVATION_FAILURE;
  91.         }
  92.     }
  93.  
  94.     public Map<String, Object> login(String username, String password, int expiredSeconds) {
  95.         Map<String, Object> map = new HashMap<>();
  96.  
  97.         // 空值处理
  98.         if (StringUtils.isBlank(username)) {
  99.             map.put("usernameMsg", "账号不能为空!");
  100.             return map;
  101.         }
  102.         if (StringUtils.isBlank(password)) {
  103.             map.put("passwordMsg", "密码不能为空!");
  104.             return map;
  105.         }
  106.  
  107.         // 验证账号
  108.         User user = userMapper.selectByName(username);
  109.         if (user == null) {
  110.             map.put("usernameMsg", "该账号不存在!");
  111.             return map;
  112.         }
  113.  
  114.         // 验证状态
  115.         if (user.getStatus() == 0) {
  116.             map.put("usernameMsg", "该账号未激活!");
  117.             return map;
  118.         }
  119.  
  120.         // 验证密码
  121.         password = CommunityUtil.md5(password + user.getSalt());
  122.         if (!user.getPassword().equals(password)) {
  123.             map.put("passwordMsg", "密码不正确!");
  124.             return map;
  125.         }
  126.  
  127.         // 生成登录凭证
  128.         LoginTicket loginTicket = new LoginTicket();
  129.         loginTicket.setUserId(user.getId());
  130.         loginTicket.setTicket(CommunityUtil.generateUUID());
  131.         loginTicket.setStatus(0);
  132.         loginTicket.setExpired(new Date(System.currentTimeMillis() + expiredSeconds * 1000));
  133.         loginTicketMapper.insertLoginTicket(loginTicket);
  134.  
  135.         map.put("ticket", loginTicket.getTicket());
  136.         return map;
  137.     }
  138.  
  139.  
  140. }
  1. <!doctype html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
  6.     <title>牛客网-激活账号</title>
  7. </head>
  8. <body>
  9. 	<div>
  10. 		<p>
  11. 			<b th:text="${email}">xxx@xxx.com</b>, 您好!
  12. 		</p>
  13. 		<p>
  14. 			您正在注册牛客网, 这是一封激活邮件, 请点击 
  15. 			<a th:href="${url}">此链接</a>,
  16. 			激活您的牛客账号!
  17. 		</p>
  18. 	</div>
  19. </body>
  20. </html>

        注册之后需要更新LoginController，处理注册完成的请求。

  1. @Controller
  2. public class LoginController implements CommunityConstant {
  3.  
  4.     private static final Logger logger = LoggerFactory.getLogger(LoginController.class);
  5.  
  6.     @Autowired
  7.     private UserService userService;
  8.  
  9.     @Autowired
  10.     private Producer kaptchaProducer;
  11.  
  12.     @Value("${server.servlet.context-path}")
  13.     private String contextPath;
  14.  
  15.     @RequestMapping(path = "/register", method = RequestMethod.GET)
  16.     public String getRegisterPage() {
  17.         return "/site/register";
  18.     }
  19.  
  20.     @RequestMapping(path = "/login", method = RequestMethod.GET)
  21.     public String getLoginPage() {
  22.         return "/site/login";
  23.     }
  24.  
  25.     @RequestMapping(path = "/register", method = RequestMethod.POST)
  26.     public String register(Model model, User user) {
  27.         Map<String, Object> map = userService.register(user);
  28.         if (map == null || map.isEmpty()) {
  29.             model.addAttribute("msg", "注册成功,我们已经向您的邮箱发送了一封激活邮件,请尽快激活!");
  30.             model.addAttribute("target", "/index");
  31.             return "/site/operate-result";
  32.         } else {
  33.             model.addAttribute("usernameMsg", map.get("usernameMsg"));
  34.             model.addAttribute("passwordMsg", map.get("passwordMsg"));
  35.             model.addAttribute("emailMsg", map.get("emailMsg"));
  36.             return "/site/register";
  37.         }
  38.     }
  39.  
  40.     
  41. }

        更新operate-result页面。

  1. <!doctype html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. 	<link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
  7. 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
  8. 	<link rel="stylesheet" th:href="@{/css/global.css}" />
  9. 	<title>牛客网-操作结果</title>
  10. </head>
  11. <body class="bg-white">
  12. 	<div class="nk-container">
  13. 		<!-- 头部 -->
  14. 		<header class="bg-dark sticky-top" th:replace="index::header">
  15. 			<div class="container">
  16. 				<!-- 导航 -->
  17. 				<nav class="navbar navbar-expand-lg navbar-dark">
  18. 					<!-- logo -->
  19. 					<a class="navbar-brand" href="#"></a>
  20. 					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  21. 						<span class="navbar-toggler-icon"></span>
  22. 					</button>
  23. 					<!-- 功能 -->
  24. 					<div class="collapse navbar-collapse" id="navbarSupportedContent">
  25. 						<ul class="navbar-nav mr-auto">
  26. 							<li class="nav-item ml-3 btn-group-vertical">
  27. 								<a class="nav-link" href="../index.html">首页</a>
  28. 							</li>
  29. 							<li class="nav-item ml-3 btn-group-vertical">
  30. 								<a class="nav-link position-relative" href="letter.html">消息<span class="badge badge-danger">12</span></a>
  31. 							</li>
  32. 							<li class="nav-item ml-3 btn-group-vertical">
  33. 								<a class="nav-link" href="register.html">注册</a>
  34. 							</li>
  35. 							<li class="nav-item ml-3 btn-group-vertical">
  36. 								<a class="nav-link" href="login.html">登录</a>
  37. 							</li>
  38. 							<li class="nav-item ml-3 btn-group-vertical dropdown">
  39. 								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  40. 									<img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle" style="width:30px;"/>
  41. 								</a>
  42. 								<div class="dropdown-menu" aria-labelledby="navbarDropdown">
  43. 									<a class="dropdown-item text-center" href="profile.html">个人主页</a>
  44. 									<a class="dropdown-item text-center" href="setting.html">账号设置</a>
  45. 									<a class="dropdown-item text-center" href="login.html">退出登录</a>
  46. 									<div class="dropdown-divider"></div>
  47. 									<span class="dropdown-item text-center text-secondary">nowcoder</span>
  48. 								</div>
  49. 							</li>
  50. 						</ul>
  51. 						<!-- 搜索 -->
  52. 						<form class="form-inline my-2 my-lg-0" action="search.html">
  53. 							<input class="form-control mr-sm-2" type="search" aria-label="Search" />
  54. 							<button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
  55. 						</form>
  56. 					</div>
  57. 				</nav>
  58. 			</div>
  59. 		</header>
  60.  
  61. 		<!-- 内容 -->
  62. 		<div class="main">
  63. 			<div class="container mt-5">
  64. 				<div class="jumbotron">
  65. 					<p class="lead" th:text="${msg}">您的账号已经激活成功,可以正常使用了!</p>
  66. 					<hr class="my-4">
  67. 					<p>
  68. 						系统会在 <span id="seconds" class="text-danger">8</span> 秒后自动跳转,
  69. 						您也可以点此 <a id="target" th:href="@{${target}}" class="text-primary">链接</a>, 手动跳转!
  70. 					</p>
  71. 				</div>
  72. 			</div>
  73. 		</div>
  74.  
  75. 		<!-- 尾部 -->
  76. 		<footer class="bg-dark">
  77. 			<div class="container">
  78. 				<div class="row">
  79. 					<!-- 二维码 -->
  80. 					<div class="col-4 qrcode">
  81. 						<img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail" style="width:136px;" />
  82. 					</div>
  83. 					<!-- 公司信息 -->
  84. 					<div class="col-8 detail-info">
  85. 						<div class="row">
  86. 							<div class="col">
  87. 								<ul class="nav">
  88. 									<li class="nav-item">
  89. 										<a class="nav-link text-light" href="#">关于我们</a>
  90. 									</li>
  91. 									<li class="nav-item">
  92. 										<a class="nav-link text-light" href="#">加入我们</a>
  93. 									</li>
  94. 									<li class="nav-item">
  95. 										<a class="nav-link text-light" href="#">意见反馈</a>
  96. 									</li>
  97. 									<li class="nav-item">
  98. 										<a class="nav-link text-light" href="#">企业服务</a>
  99. 									</li>
  100. 									<li class="nav-item">
  101. 										<a class="nav-link text-light" href="#">联系我们</a>
  102. 									</li>
  103. 									<li class="nav-item">
  104. 										<a class="nav-link text-light" href="#">免责声明</a>
  105. 									</li>
  106. 									<li class="nav-item">
  107. 										<a class="nav-link text-light" href="#">友情链接</a>
  108. 									</li>
  109. 								</ul>
  110. 							</div>
  111. 						</div>
  112. 						<div class="row">
  113. 							<div class="col">
  114. 								<ul class="nav btn-group-vertical company-info">
  115. 									<li class="nav-item text-white-50">
  116. 										公司地址：北京市朝阳区大屯路东金泉时代3-2708北京牛客科技有限公司
  117. 									</li>
  118. 									<li class="nav-item text-white-50">
  119. 										联系方式：010-60728802(电话)&nbsp;&nbsp;&nbsp;&nbsp;admin@nowcoder.com
  120. 									</li>
  121. 									<li class="nav-item text-white-50">
  122. 										牛客科技©2018 All rights reserved
  123. 									</li>
  124. 									<li class="nav-item text-white-50">
  125. 										京ICP备14055008号-4 &nbsp;&nbsp;&nbsp;&nbsp;
  126. 										<img src="http://static.nowcoder.com/company/images/res/ghs.png" style="width:18px;" />
  127. 										京公网安备 11010502036488号
  128. 									</li>
  129. 								</ul>
  130. 							</div>
  131. 						</div>
  132. 					</div>
  133. 				</div>
  134. 			</div>
  135. 		</footer>
  136. 	</div>
  137.  
  138. 	<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
  139. 	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
  140. 	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
  141. 	<script>
  142. 		$(function(){
  143. 			setInterval(function(){
  144. 				var seconds = $("#seconds").text();
  145. 				$("#seconds").text(--seconds);
  146. 				if(seconds == 0) {
  147. 					location.href = $("#target").attr("href");
  148. 				}
  149. 			}, 1000);
  150. 		});
  151. 	</script>
  152. </body>
  153. </html>

在utill中创建一个CommunityConstant接口，用于表示注册状态码。

  1. public interface CommunityConstant {
  2.  
  3.     /**
  4.      * 激活成功
  5.      */
  6.     int ACTIVATION_SUCCESS = 0;
  7.  
  8.     /**
  9.      * 重复激活
  10.      */
  11.     int ACTIVATION_REPEAT = 1;
  12.  
  13.     /**
  14.      * 激活失败
  15.      */
  16.     int ACTIVATION_FAILURE = 2;
  17.  
  18.     /**
  19.      * 默认状态的登录凭证的超时时间
  20.      */
  21.     int DEFAULT_EXPIRED_SECONDS = 3600 * 12;
  22.  
  23.     /**
  24.      * 记住状态的登录凭证超时时间
  25.      */
  26.     int REMEMBER_EXPIRED_SECONDS = 3600 * 24 * 100;
  27.  
  28. }

        更新LoginController的功能，并更改Index.html文件相对应位置的模板参数。

  1. @Controller
  2. public class LoginController implements CommunityConstant {
  3.  
  4.     private static final Logger logger = LoggerFactory.getLogger(LoginController.class);
  5.  
  6.     @Autowired
  7.     private UserService userService;
  8.  
  9.     @Autowired
  10.     private Producer kaptchaProducer;
  11.  
  12.     @Value("${server.servlet.context-path}")
  13.     private String contextPath;
  14.  
  15.     @RequestMapping(path = "/register", method = RequestMethod.GET)
  16.     public String getRegisterPage() {
  17.         return "/site/register";
  18.     }
  19.  
  20.     @RequestMapping(path = "/login", method = RequestMethod.GET)
  21.     public String getLoginPage() {
  22.         return "/site/login";
  23.     }
  24.  
  25.     @RequestMapping(path = "/register", method = RequestMethod.POST)
  26.     public String register(Model model, User user) {
  27.         Map<String, Object> map = userService.register(user);
  28.         if (map == null || map.isEmpty()) {
  29.             model.addAttribute("msg", "注册成功,我们已经向您的邮箱发送了一封激活邮件,请尽快激活!");
  30.             model.addAttribute("target", "/index");
  31.             return "/site/operate-result";
  32.         } else {
  33.             model.addAttribute("usernameMsg", map.get("usernameMsg"));
  34.             model.addAttribute("passwordMsg", map.get("passwordMsg"));
  35.             model.addAttribute("emailMsg", map.get("emailMsg"));
  36.             return "/site/register";
  37.         }
  38.     }
  39.  
  40.     // http://localhost:8080/community/activation/101/code
  41.     @RequestMapping(path = "/activation/{userId}/{code}", method = RequestMethod.GET)
  42.     public String activation(Model model, @PathVariable("userId") int userId, @PathVariable("code") String code) {
  43.         int result = userService.activation(userId, code);
  44.         if (result == ACTIVATION_SUCCESS) {
  45.             model.addAttribute("msg", "激活成功,您的账号已经可以正常使用了!");
  46.             model.addAttribute("target", "/login");
  47.         } else if (result == ACTIVATION_REPEAT) {
  48.             model.addAttribute("msg", "无效操作,该账号已经激活过了!");
  49.             model.addAttribute("target", "/index");
  50.         } else {
  51.             model.addAttribute("msg", "激活失败,您提供的激活码不正确!");
  52.             model.addAttribute("target", "/index");
  53.         }
  54.         return "/site/operate-result";
  55.     }
  56.  
  57.  
  58. }

4.3会话管理

         使用Cookie保存一些信息，可以使用浏览器插件查看Cookie(F12控制台)

         有关Cookie的一个小示例：

  1. // cookie示例
  2.  
  3.     @RequestMapping(path = "/cookie/set", method = RequestMethod.GET)
  4.     @ResponseBody
  5.     public String setCookie(HttpServletResponse response) {
  6.         // 创建cookie
  7.         Cookie cookie = new Cookie("code", CommunityUtil.generateUUID());
  8.         // 设置cookie生效的范围
  9.         cookie.setPath("/community/alpha");
  10.         // 设置cookie的生存时间
  11.         cookie.setMaxAge(60 * 10);
  12.         // 发送cookie
  13.         response.addCookie(cookie);
  14.  
  15.         return "set cookie";
  16.     }
  17.  
  18.     @RequestMapping(path = "/cookie/get", method = RequestMethod.GET)
  19.     @ResponseBody
  20.     public String getCookie(@CookieValue("code") String code) {
  21.         System.out.println(code);
  22.         return "get cookie";
  23.     }
  24.  
  25.     // session示例
  26.  
  27.     @RequestMapping(path = "/session/set", method = RequestMethod.GET)
  28.     @ResponseBody
  29.     public String setSession(HttpSession session) {
  30.         session.setAttribute("id", 1);
  31.         session.setAttribute("name", "Test");
  32.         return "set session";
  33.     }
  34.  
  35.     @RequestMapping(path = "/session/get", method = RequestMethod.GET)
  36.     @ResponseBody
  37.     public String getSession(HttpSession session) {
  38.         System.out.println(session.getAttribute("id"));
  39.         System.out.println(session.getAttribute("name"));
  40.         return "get session";
  41.     }

cookie和session的区别

后期可以考虑将Session数据传输到redis数据库中，用于保存一些登陆凭证

4.4生成验证码

        验证码使用Kaptcha jar包用于随机生成字符和图片。 在搜索Kaptcha配置文件，在resources文件包内的pom.xml文件中导入相关的配置文件依赖。在community目录下创建config文件包并创建KaptchaConfig配置类，使用@Configuration注解。

  1. @Configuration
  2. public class KaptchaConfig {
  3.  
  4.     @Bean
  5.     public Producer kaptchaProducer() {
  6.         Properties properties = new Properties();
  7.         properties.setProperty("kaptcha.image.width", "100");
  8.         properties.setProperty("kaptcha.image.height", "40");
  9.         properties.setProperty("kaptcha.textproducer.font.size", "32");
  10.         properties.setProperty("kaptcha.textproducer.font.color", "0,0,0");
  11.         properties.setProperty("kaptcha.textproducer.char.string", "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYAZ");
  12.         properties.setProperty("kaptcha.textproducer.char.length", "4");
  13.         properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");
  14.  
  15.         DefaultKaptcha kaptcha = new DefaultKaptcha();
  16.         Config config = new Config(properties);
  17.         kaptcha.setConfig(config);
  18.         return kaptcha;
  19.     }
  20.  
  21. }

        在LoginController文件中完善验证码功能，并完善登陆页面.html文件中验证码的模板，并实现刷新验证码的功能。

  1.  @RequestMapping(path = "/kaptcha", method = RequestMethod.GET)
  2.     public void getKaptcha(HttpServletResponse response, HttpSession session) {
  3.         // 生成验证码
  4.         String text = kaptchaProducer.createText();
  5.         BufferedImage image = kaptchaProducer.createImage(text);
  6.  
  7.         // 将验证码存入session
  8.         session.setAttribute("kaptcha", text);
  9.  
  10.         // 将突图片输出给浏览器
  11.         response.setContentType("image/png");
  12.         try {
  13.             OutputStream os = response.getOutputStream();
  14.             ImageIO.write(image, "png", os);
  15.         } catch (IOException e) {
  16.             logger.error("响应验证码失败:" + e.getMessage());
  17.         }
  18.     }
  19.  
  20.     @RequestMapping(path = "/login", method = RequestMethod.POST)
  21.     public String login(String username, String password, String code, boolean rememberme,
  22.                         Model model, HttpSession session, HttpServletResponse response) {
  23.         // 检查验证码
  24.         String kaptcha = (String) session.getAttribute("kaptcha");
  25.         if (StringUtils.isBlank(kaptcha) || StringUtils.isBlank(code) || !kaptcha.equalsIgnoreCase(code)) {
  26.             model.addAttribute("codeMsg", "验证码不正确!");
  27.             return "/site/login";
  28.         }

        刷新验证码方法：

  1. <script>
  2. 	function refresh_kaptcha() {
  3. 		var path = CONTEXT_PATH + "/kaptcha?p=" + Math.random();
  4. 		$("#kaptcha").attr("src", path);
  5. 	}
  6. </script>

4.5登录、退出功能

密码使用MD5加密

         数据库中有关于登录凭证的ticket，使用这个ticket作为登陆凭证。涉及到数据库的操作，就要处理LoginTicketMapper。

LoginTicketMapper(这里是mapper的另外一种写法，不用再resource里面创建mapper文件):

  1. @Mapper
  2. public interface LoginTicketMapper {
  3.  
  4.     @Insert({
  5.             "insert into login_ticket(user_id,ticket,status,expired) ",
  6.             "values(#{userId},#{ticket},#{status},#{expired})"
  7.     })
  8.     @Options(useGeneratedKeys = true, keyProperty = "id")
  9.     int insertLoginTicket(LoginTicket loginTicket);
  10.  
  11.     @Select({
  12.             "select id,user_id,ticket,status,expired ",
  13.             "from login_ticket where ticket=#{ticket}"
  14.     })
  15.     LoginTicket selectByTicket(String ticket);
  16.  
  17.     @Update({
  18.             "<script>",
  19.             "update login_ticket set status=#{status} where ticket=#{ticket} ",
  20.             "<if test=\"ticket!=null\"> ",
  21.             "and 1=1 ",
  22.             "</if>",
  23.             "</script>"
  24.     })
  25.     int updateStatus(String ticket, int status);
  26.  
  27. }

        在UserService中增加登陆的方法，并在login.html中增加相应的修改：

  1. public Map<String, Object> login(String username, String password, int expiredSeconds) {
  2.         Map<String, Object> map = new HashMap<>();
  3.  
  4.         // 空值处理
  5.         if (StringUtils.isBlank(username)) {
  6.             map.put("usernameMsg", "账号不能为空!");
  7.             return map;
  8.         }
  9.         if (StringUtils.isBlank(password)) {
  10.             map.put("passwordMsg", "密码不能为空!");
  11.             return map;
  12.         }
  13.  
  14.         // 验证账号
  15.         User user = userMapper.selectByName(username);
  16.         if (user == null) {
  17.             map.put("usernameMsg", "该账号不存在!");
  18.             return map;
  19.         }
  20.  
  21.         // 验证状态
  22.         if (user.getStatus() == 0) {
  23.             map.put("usernameMsg", "该账号未激活!");
  24.             return map;
  25.         }
  26.  
  27.         // 验证密码
  28.         password = CommunityUtil.md5(password + user.getSalt());
  29.         if (!user.getPassword().equals(password)) {
  30.             map.put("passwordMsg", "密码不正确!");
  31.             return map;
  32.         }
  33.  
  34.         // 生成登录凭证
  35.         LoginTicket loginTicket = new LoginTicket();
  36.         loginTicket.setUserId(user.getId());
  37.         loginTicket.setTicket(CommunityUtil.generateUUID());
  38.         loginTicket.setStatus(0);
  39.         loginTicket.setExpired(new Date(System.currentTimeMillis() + expiredSeconds * 1000));
  40.         loginTicketMapper.insertLoginTicket(loginTicket);
  41.  
  42.         map.put("ticket", loginTicket.getTicket());
  43.         return map;
  44.     }

        增加Controller层中的登录方法：

  1. @RequestMapping(path = "/login", method = RequestMethod.POST)
  2.     public String login(String username, String password, String code, boolean rememberme,
  3.                         Model model, HttpSession session, HttpServletResponse response) {
  4.         // 检查验证码
  5.         String kaptcha = (String) session.getAttribute("kaptcha");
  6.         if (StringUtils.isBlank(kaptcha) || StringUtils.isBlank(code) || !kaptcha.equalsIgnoreCase(code)) {
  7.             model.addAttribute("codeMsg", "验证码不正确!");
  8.             return "/site/login";
  9.         }
  10.  
  11.         // 检查账号,密码
  12.         int expiredSeconds = rememberme ? REMEMBER_EXPIRED_SECONDS : DEFAULT_EXPIRED_SECONDS;
  13.         Map<String, Object> map = userService.login(username, password, expiredSeconds);
  14.         if (map.containsKey("ticket")) {
  15.             Cookie cookie = new Cookie("ticket", map.get("ticket").toString());
  16.             cookie.setPath(contextPath);
  17.             cookie.setMaxAge(expiredSeconds);
  18.             response.addCookie(cookie);
  19.             return "redirect:/index";
  20.         } else {
  21.             model.addAttribute("usernameMsg", map.get("usernameMsg"));
  22.             model.addAttribute("passwordMsg", map.get("passwordMsg"));
  23.             return "/site/login";
  24.         }
  25.     }
  26.  
  27.     @RequestMapping(path = "/logout", method = RequestMethod.GET)
  28.     public String logout(@CookieValue("ticket") String ticket) {
  29.         userService.logout(ticket);
  30.         return "redirect:/login";
  31.     }

4.6显示登陆信息

        使用拦截器实现        

在controller层下创建Interceptor文件包，

拦截器的方法

  1.  // 在Controller之前执行
  2.     @Override
  3.     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
  4.         logger.debug("preHandle: " + handler.toString());
  5.         return true;
  6.     }
  7.  
  8.     // 在Controller之后执行
  9.     @Override
  10.     public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
  11.         logger.debug("postHandle: " + handler.toString());
  12.     }
  13.  
  14.     // 在TemplateEngine之后执行
  15.     @Override
  16.     public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
  17.         logger.debug("afterCompletion: " + handler.toString());
  18.     }

在cpnfig文件下创建配置类WebMvcConfig，配置拦截器。

  1. @Configuration
  2. public class WebMvcConfig implements WebMvcConfigurer {
  3.  
  4.     //测试拦截器方法
  5.     @Autowired
  6.     private AlphaInterceptor alphaInterceptor;
  7.  
  8.     @Autowired
  9.     private LoginTicketInterceptor loginTicketInterceptor;
  10.  
  11.     @Autowired
  12.     private LoginRequiredInterceptor loginRequiredInterceptor;
  13.  
  14.     @Override
  15.     public void addInterceptors(InterceptorRegistry registry) {
  16.         registry.addInterceptor(alphaInterceptor)
  17.                 .excludePathPatterns("/**/*.css", "/**/*.js", "/**/*.png", "/**/*.jpg", "/**/*.jpeg")
  18.                 .addPathPatterns("/register", "/login");
  19.  
  20.         registry.addInterceptor(loginTicketInterceptor)
  21.                 .excludePathPatterns("/**/*.css", "/**/*.js", "/**/*.png", "/**/*.jpg", "/**/*.jpeg");
  22.  
  23.     }
  24.  
  25. }

在请求开始之前查询登录用户：

在Interceptor文件下创建LoginTicketInterceptor，实现拦截器的方法。

  1. @Component
  2. public class LoginTicketInterceptor implements HandlerInterceptor {
  3.  
  4.     @Autowired
  5.     private UserService userService;
  6.  
  7.     @Autowired
  8.     private HostHolder hostHolder;
  9.  
  10.     @Override
  11.     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
  12.         // 从cookie中获取凭证
  13.         String ticket = CookieUtil.getValue(request, "ticket");
  14.  
  15.         if (ticket != null) {
  16.             // 查询凭证
  17.             LoginTicket loginTicket = userService.findLoginTicket(ticket);
  18.             // 检查凭证是否有效
  19.             if (loginTicket != null && loginTicket.getStatus() == 0 && loginTicket.getExpired().after(new Date())) {
  20.                 // 根据凭证查询用户
  21.                 User user = userService.findUserById(loginTicket.getUserId());
  22.                 // 在本次请求中持有用户
  23.                 hostHolder.setUser(user);
  24.             }
  25.         }
  26.  
  27.         return true;
  28.     }
  29.  
  30.     @Override
  31.     public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
  32.         User user = hostHolder.getUser();
  33.         if (user != null && modelAndView != null) {
  34.             modelAndView.addObject("loginUser", user);
  35.         }
  36.     }
  37.  
  38.     @Override
  39.     public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
  40.         hostHolder.clear();
  41.     }
  42. }

        在Util文件中创建Cookie工具，以及HostHolder工具用于代替session对象。完成过后修改相应的html文件。

  1. public class CookieUtil {
  2.  
  3.     public static String getValue(HttpServletRequest request, String name) {
  4.         if (request == null || name == null) {
  5.             throw new IllegalArgumentException("参数为空!");
  6.         }
  7.  
  8.         Cookie[] cookies = request.getCookies();
  9.         if (cookies != null) {
  10.             for (Cookie cookie : cookies) {
  11.                 if (cookie.getName().equals(name)) {
  12.                     return cookie.getValue();
  13.                 }
  14.             }
  15.         }
  16.  
  17.         return null;
  18.     }
  19.  
  20. }
  1. /**
  2.  * 持有用户信息,用于代替session对象.
  3.  */
  4. @Component
  5. public class HostHolder {
  6.  
  7.     private ThreadLocal<User> users = new ThreadLocal<>();
  8.  
  9.     public void setUser(User user) {
  10.         users.set(user);
  11.     }
  12.  
  13.     public User getUser() {
  14.         return users.get();
  15.     }
  16.  
  17.     public void clear() {
  18.         users.remove();
  19.     }
  20.  
  21. }

4.7账号设置

        用户自己上传头像，请求必须是POST请求，表单：enctype = "multipart/form-data",SpringMVC通过MutipartFile上传文件。

        创建Usercontroller

  1. @Controller
  2. @RequestMapping("/user")
  3. public class UserController {
  4.  
  5.     private static final Logger logger = LoggerFactory.getLogger(UserController.class);
  6.  
  7.     @Value("${community.path.upload}")
  8.     private String uploadPath;
  9.  
  10.     @Value("${community.path.domain}")
  11.     private String domain;
  12.  
  13.     @Value("${server.servlet.context-path}")
  14.     private String contextPath;
  15.  
  16.     @Autowired
  17.     private UserService userService;
  18.  
  19.     @Autowired
  20.     private HostHolder hostHolder;
  21.  
  22.     @LoginRequired
  23.     @RequestMapping(path = "/setting", method = RequestMethod.GET)
  24.     public String getSettingPage() {
  25.         return "/site/setting";
  26.     }
  27.  
  28.     @LoginRequired
  29.     @RequestMapping(path = "/upload", method = RequestMethod.POST)
  30.     public String uploadHeader(MultipartFile headerImage, Model model) {
  31.         if (headerImage == null) {
  32.             model.addAttribute("error", "您还没有选择图片!");
  33.             return "/site/setting";
  34.         }
  35.  
  36.         String fileName = headerImage.getOriginalFilename();
  37.         String suffix = fileName.substring(fileName.lastIndexOf("."));
  38.         if (StringUtils.isBlank(suffix)) {
  39.             model.addAttribute("error", "文件的格式不正确!");
  40.             return "/site/setting";
  41.         }
  42.  
  43.         // 生成随机文件名
  44.         fileName = CommunityUtil.generateUUID() + suffix;
  45.         // 确定文件存放的路径
  46.         File dest = new File(uploadPath + "/" + fileName);
  47.         try {
  48.             // 存储文件
  49.             headerImage.transferTo(dest);
  50.         } catch (IOException e) {
  51.             logger.error("上传文件失败: " + e.getMessage());
  52.             throw new RuntimeException("上传文件失败,服务器发生异常!", e);
  53.         }
  54.  
  55.         // 更新当前用户的头像的路径(web访问路径)
  56.         // http://localhost:8080/community/user/header/xxx.png
  57.         User user = hostHolder.getUser();
  58.         String headerUrl = domain + contextPath + "/user/header/" + fileName;
  59.         userService.updateHeader(user.getId(), headerUrl);
  60.  
  61.         return "redirect:/index";
  62.     }
  63.  
  64.     @RequestMapping(path = "/header/{fileName}", method = RequestMethod.GET)
  65.     public void getHeader(@PathVariable("fileName") String fileName, HttpServletResponse response) {
  66.         // 服务器存放路径
  67.         fileName = uploadPath + "/" + fileName;
  68.         // 文件后缀
  69.         String suffix = fileName.substring(fileName.lastIndexOf("."));
  70.         // 响应图片
  71.         response.setContentType("image/" + suffix);
  72.         try (
  73.                 FileInputStream fis = new FileInputStream(fileName);
  74.                 OutputStream os = response.getOutputStream();
  75.         ) {
  76.             byte[] buffer = new byte[1024];
  77.             int b = 0;
  78.             while ((b = fis.read(buffer)) != -1) {
  79.                 os.write(buffer, 0, b);
  80.             }
  81.         } catch (IOException e) {
  82.             logger.error("读取头像失败: " + e.getMessage());
  83.         }
  84.     }
  85.  
  86. }

配置setting.html的静态资源路径

  1. <!doctype html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. 	<link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
  7. 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
  8. 	<link rel="stylesheet" th:href="@{/css/global.css}" />
  9. 	<link rel="stylesheet" th:href="@{/css/login.css}" />
  10. 	<title>牛客网-账号设置</title>
  11. </head>
  12. <body>
  13. 	<div class="nk-container">
  14. 		<!-- 头部 -->
  15. 		<header class="bg-dark sticky-top" th:replace="index::header">
  16. 			<div class="container">
  17. 				<!-- 导航 -->
  18. 				<nav class="navbar navbar-expand-lg navbar-dark">
  19. 					<!-- logo -->
  20. 					<a class="navbar-brand" href="#"></a>
  21. 					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  22. 						<span class="navbar-toggler-icon"></span>
  23. 					</button>
  24. 					<!-- 功能 -->
  25. 					<div class="collapse navbar-collapse" id="navbarSupportedContent">
  26. 						<ul class="navbar-nav mr-auto">
  27. 							<li class="nav-item ml-3 btn-group-vertical">
  28. 								<a class="nav-link" href="../index.html">首页</a>
  29. 							</li>
  30. 							<li class="nav-item ml-3 btn-group-vertical">
  31. 								<a class="nav-link position-relative" href="letter.html">消息<span class="badge badge-danger">12</span></a>
  32. 							</li>
  33. 							<li class="nav-item ml-3 btn-group-vertical">
  34. 								<a class="nav-link" href="register.html">注册</a>
  35. 							</li>
  36. 							<li class="nav-item ml-3 btn-group-vertical">
  37. 								<a class="nav-link" href="login.html">登录</a>
  38. 							</li>
  39. 							<li class="nav-item ml-3 btn-group-vertical dropdown">
  40. 								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  41. 									<img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle" style="width:30px;"/>
  42. 								</a>
  43. 								<div class="dropdown-menu" aria-labelledby="navbarDropdown">
  44. 									<a class="dropdown-item text-center" href="profile.html">个人主页</a>
  45. 									<a class="dropdown-item text-center" href="setting.html">账号设置</a>
  46. 									<a class="dropdown-item text-center" href="login.html">退出登录</a>
  47. 									<div class="dropdown-divider"></div>
  48. 									<span class="dropdown-item text-center text-secondary">nowcoder</span>
  49. 								</div>
  50. 							</li>
  51. 						</ul>
  52. 						<!-- 搜索 -->
  53. 						<form class="form-inline my-2 my-lg-0" action="search.html">
  54. 							<input class="form-control mr-sm-2" type="search" aria-label="Search" />
  55. 							<button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
  56. 						</form>
  57. 					</div>
  58. 				</nav>
  59. 			</div>
  60. 		</header>
  61.  
  62. 		<!-- 内容 -->
  63. 		<div class="main">
  64. 			<div class="container p-5 mt-3 mb-3">
  65. 				<!-- 上传头像 -->
  66. 				<h6 class="text-left text-info border-bottom pb-2">上传头像</h6>
  67. 				<form class="mt-5" method="post" enctype="multipart/form-data" th:action="@{/user/upload}">
  68. 					<div class="form-group row mt-4">
  69. 						<label for="head-image" class="col-sm-2 col-form-label text-right">选择头像:</label>
  70. 						<div class="col-sm-10">
  71. 							<div class="custom-file">
  72. 								<input type="file" th:class="|custom-file-input ${error!=null?'is-invalid':''}|"
  73. 									   id="head-image" name="headerImage" lang="es" required="">
  74. 								<label class="custom-file-label" for="head-image" data-browse="文件">选择一张图片</label>
  75. 								<div class="invalid-feedback" th:text="${error}">
  76. 									该账号不存在!
  77. 								</div>
  78. 							</div>
  79. 						</div>
  80. 					</div>
  81. 					<div class="form-group row mt-4">
  82. 						<div class="col-sm-2"></div>
  83. 						<div class="col-sm-10 text-center">
  84. 							<button type="submit" class="btn btn-info text-white form-control">立即上传</button>
  85. 						</div>
  86. 					</div>
  87. 				</form>
  88. 				<!-- 修改密码 -->
  89. 				<h6 class="text-left text-info border-bottom pb-2 mt-5">修改密码</h6>
  90. 				<form class="mt-5">				
  91. 					<div class="form-group row mt-4">
  92. 						<label for="old-password" class="col-sm-2 col-form-label text-right">原密码:</label>
  93. 						<div class="col-sm-10">
  94. 							<input type="password" class="form-control" id="old-password" placeholder="请输入原始密码!" required>
  95. 							<div class="invalid-feedback">
  96. 								密码长度不能小于8位!
  97. 							</div>							
  98. 						</div>
  99. 					</div>
  100. 					<div class="form-group row mt-4">
  101. 						<label for="new-password" class="col-sm-2 col-form-label text-right">新密码:</label>
  102. 						<div class="col-sm-10">
  103. 							<input type="password" class="form-control" id="new-password" placeholder="请输入新的密码!" required>
  104. 							<div class="invalid-feedback">
  105. 								密码长度不能小于8位!
  106. 							</div>							
  107. 						</div>
  108. 					</div>
  109. 					<div class="form-group row mt-4">
  110. 						<label for="confirm-password" class="col-sm-2 col-form-label text-right">确认密码:</label>
  111. 						<div class="col-sm-10">
  112. 							<input type="password" class="form-control" id="confirm-password" placeholder="再次输入新密码!" required>
  113. 							<div class="invalid-feedback">
  114. 								两次输入的密码不一致!
  115. 							</div>								
  116. 						</div>
  117. 					</div>				
  118. 					<div class="form-group row mt-4">
  119. 						<div class="col-sm-2"></div>
  120. 						<div class="col-sm-10 text-center">
  121. 							<button type="submit" class="btn btn-info text-white form-control">立即保存</button>
  122. 						</div>
  123. 					</div>
  124. 				</form>				
  125. 			</div>
  126. 		</div>
  127.  
  128. 		<!-- 尾部 -->
  129. 		<footer class="bg-dark">
  130. 			<div class="container">
  131. 				<div class="row">
  132. 					<!-- 二维码 -->
  133. 					<div class="col-4 qrcode">
  134. 						<img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail" style="width:136px;" />
  135. 					</div>
  136. 					<!-- 公司信息 -->
  137. 					<div class="col-8 detail-info">
  138. 						<div class="row">
  139. 							<div class="col">
  140. 								<ul class="nav">
  141. 									<li class="nav-item">
  142. 										<a class="nav-link text-light" href="#">关于我们</a>
  143. 									</li>
  144. 									<li class="nav-item">
  145. 										<a class="nav-link text-light" href="#">加入我们</a>
  146. 									</li>
  147. 									<li class="nav-item">
  148. 										<a class="nav-link text-light" href="#">意见反馈</a>
  149. 									</li>
  150. 									<li class="nav-item">
  151. 										<a class="nav-link text-light" href="#">企业服务</a>
  152. 									</li>
  153. 									<li class="nav-item">
  154. 										<a class="nav-link text-light" href="#">联系我们</a>
  155. 									</li>
  156. 									<li class="nav-item">
  157. 										<a class="nav-link text-light" href="#">免责声明</a>
  158. 									</li>
  159. 									<li class="nav-item">
  160. 										<a class="nav-link text-light" href="#">友情链接</a>
  161. 									</li>
  162. 								</ul>
  163. 							</div>
  164. 						</div>
  165. 						<div class="row">
  166. 							<div class="col">
  167. 								<ul class="nav btn-group-vertical company-info">
  168. 									<li class="nav-item text-white-50">
  169. 										公司地址：北京市朝阳区大屯路东金泉时代3-2708北京牛客科技有限公司
  170. 									</li>
  171. 									<li class="nav-item text-white-50">
  172. 										联系方式：010-60728802(电话)&nbsp;&nbsp;&nbsp;&nbsp;admin@nowcoder.com
  173. 									</li>
  174. 									<li class="nav-item text-white-50">
  175. 										牛客科技©2018 All rights reserved
  176. 									</li>
  177. 									<li class="nav-item text-white-50">
  178. 										京ICP备14055008号-4 &nbsp;&nbsp;&nbsp;&nbsp;
  179. 										<img src="http://static.nowcoder.com/company/images/res/ghs.png" style="width:18px;" />
  180. 										京公网安备 11010502036488号
  181. 									</li>
  182. 								</ul>
  183. 							</div>
  184. 						</div>
  185. 					</div>
  186. 				</div>
  187. 			</div>
  188. 		</footer>
  189. 	</div>
  190.  
  191. 	<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
  192. 	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
  193. 	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
  194. 	<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js" crossorigin="anonymous"></script>
  195. 	<script th:src="@{/js/global.js}"></script>
  196. 	<script>
  197. 		$(function(){
  198. 			bsCustomFileInput.init();
  199. 		});
  200. 	</script>
  201. </body>
  202. </html>

修改配置文件中，上传文件的保存位置。

community.path.upload=d:/work/data/upload

4.8检查登陆状态

        防止未登录访问某些资源，可以使用拦截器和注解。

       使用注解，在community创建annotation文件创建Login注解。

  1. @Target(ElementType.METHOD)
  2. @Retention(RetentionPolicy.RUNTIME)
  3. public @interface LoginRequired {
  4.  
  5.  
  6.  
  7. }

        给Usercontroller中的方法，加入@LoginRequire注解，并创建拦截器拦截带注解的方法。

创建一个新的拦截器LoginRequireInterceptor。

  1. @Component
  2. public class LoginRequiredInterceptor implements HandlerInterceptor {
  3.  
  4.     @Autowired
  5.     private HostHolder hostHolder;
  6.  
  7.     @Override
  8.     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
  9.         //保证拦截的是方法
  10.         if (handler instanceof HandlerMethod) {
  11.             HandlerMethod handlerMethod = (HandlerMethod) handler;
  12.             Method method = handlerMethod.getMethod();
  13.             LoginRequired loginRequired = method.getAnnotation(LoginRequired.class);
  14.             if (loginRequired != null && hostHolder.getUser() == null) {
  15.                 response.sendRedirect(request.getContextPath() + "/login");
  16.                 return false;
  17.             }
  18.         }
  19.         return true;
  20.     }
  21. }

项目代码及相关资源：

麻烦点点小星星！！！！！！

CSDN下载需要积分

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发