从零开始—仿牛客网讨论社区项目（一）
生活随笔
收集整理的這篇文章主要介紹了
从零开始—仿牛客网讨论社区项目（一）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
主要技術架構：
SpringBoot Spring SpringMVC MyBatis Redis Kakfa Elasticsearch Spring Security Spring Actator
1.配置項目環境
在Spring Boot Initializr中或者Idea中初始化一個SpringBoot項目并導出
使用Idea打開導出的項目
2.MyBatis配置
各個層之間的關系如下
在Maven Repository搜索MySql Maven配置文件，在resources文件包內的pom.xml文件中導入相關的配置文件依賴，并在application.properties文件中配置相關的參數。
# ServerProperties server.port=8080 server.servlet.context-path=/community# ThymeleafProperties spring.thymeleaf.cache=false# DataSourceProperties spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/community?characterEncoding=utf-8&useSSL=false&serverTimezone=Hongkong #數據庫的名稱、密碼等 spring.datasource.username=root spring.datasource.password=123456 spring.datasource.type=com.zaxxer.hikari.HikariDataSource #最大連接數、超時時間等 spring.datasource.hikari.maximum-pool-size=15 spring.datasource.hikari.minimum-idle=5 spring.datasource.hikari.idle-timeout=30000# MybatisProperties #mapper掃描路徑 mybatis.mapper-locations=classpath:mapper/*.xml #在communtiy下創建實體類 mybatis.type-aliases-package=com.nowcoder.community.entity mybatis.configuration.useGeneratedKeys=true mybatis.configuration.mapUnderscoreToCamelCase=true在community文件下創建config entity文件包，在resources文件下創建mapper文件包
在entity文件下創建User類
public class User {private int id;private String username;private String password;private String salt;private String email;private int type;private int status;private String activationCode;private String headerUrl;private Date createTime;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getSalt() {return salt;}public void setSalt(String salt) {this.salt = salt;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}public int getType() {return type;}public void setType(int type) {this.type = type;}public int getStatus() {return status;}public void setStatus(int status) {this.status = status;}public String getActivationCode() {return activationCode;}public void setActivationCode(String activationCode) {this.activationCode = activationCode;}public String getHeaderUrl() {return headerUrl;}public void setHeaderUrl(String headerUrl) {this.headerUrl = headerUrl;}public Date getCreateTime() {return createTime;}public void setCreateTime(Date createTime) {this.createTime = createTime;}@Overridepublic String toString() {return "User{" +"id=" + id +", username='" + username + ''' +", password='" + password + ''' +", salt='" + salt + ''' +", email='" + email + ''' +", type=" + type +", status=" + status +", activationCode='" + activationCode + ''' +", headerUrl='" + headerUrl + ''' +", createTime=" + createTime +'}';}}在dao文件下創建UserMapper接口訪問數據庫
@Mapper public interface UserMapper {User selectById(int id);User selectByName(String username);User selectByEmail(String email);int insertUser(User user);int updateStatus(int id, int status);int updateHeader(int id, String headerUrl);int updatePassword(int id, String password);}使用Mapper注解，并在mapper文件下創建user-mapp.xml，使得方法與Sql語句相關聯，Mybatis 的xml配置可以在官網找到相關的配置。
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.nowcoder.community.dao.UserMapper"><sql id="insertFields">username, password, salt, email, type, status, activation_code, header_url, create_time</sql><sql id="selectFields">id, username, password, salt, email, type, status, activation_code, header_url, create_time</sql><select id="selectById" resultType="User">select <include refid="selectFields"></include>from userwhere id = #{id}</select><select id="selectByName" resultType="User">select <include refid="selectFields"></include>from userwhere username = #{username}</select><select id="selectByEmail" resultType="User">select <include refid="selectFields"></include>from userwhere email = #{email}</select><insert id="insertUser" parameterType="User" keyProperty="id">insert into user (<include refid="insertFields"></include>)values(#{username}, #{password}, #{salt}, #{email}, #{type}, #{status}, #{activationCode}, #{headerUrl}, #{createTime})</insert><update id="updateStatus">update user set status = #{status} where id = #{id}</update><update id="updateHeader">update user set header_url = #{headerUrl} where id = #{id}</update><update id="updatePassword">update user set password = #{password} where id = #{id}</update></mapper>可以使用@Test注解測試相關方法是否正常使用
3.開發社區首頁功能：
3.1 開發社區首頁顯示前10個帖子
在Entity創建DiscussPost類，用于表示發送的相關數據，并在dao文件中創建DiscussPostMapper接口
public class DiscussPost {private int id;private int userId;private String title;private String content;private int type;private int status;private Date createTime;private int commentCount;private double score;public int getId() {return id;}public void setId(int id) {this.id = id;}public int getUserId() {return userId;}public void setUserId(int userId) {this.userId = userId;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public String getContent() {return content;}public void setContent(String content) {this.content = content;}public int getType() {return type;}public void setType(int type) {this.type = type;}public int getStatus() {return status;}public void setStatus(int status) {this.status = status;}public Date getCreateTime() {return createTime;}public void setCreateTime(Date createTime) {this.createTime = createTime;}public int getCommentCount() {return commentCount;}public void setCommentCount(int commentCount) {this.commentCount = commentCount;}public double getScore() {return score;}public void setScore(double score) {this.score = score;}@Overridepublic String toString() {return "DiscussPost{" +"id=" + id +", userId=" + userId +", title='" + title + ''' +", content='" + content + ''' +", type=" + type +", status=" + status +", createTime=" + createTime +", commentCount=" + commentCount +", score=" + score +'}';} }@Mapper public interface DiscussPostMapper {// 考慮到后期分頁功能加入offset 和 limit變量// @Param注解用于給參數取別名,// 如果只有一個參數,并且在<if>里使用,則必須加別名.List<DiscussPost> selectDiscussPosts(int userId, int offset, int limit);int selectDiscussPostRows(@Param("userId") int userId);}在mapper文件下創建相關的xml文件用于數據庫操作
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.nowcoder.community.dao.DiscussPostMapper"><sql id="selectFields">id, user_id, title, content, type, status, create_time, comment_count, score</sql><select id="selectDiscussPosts" resultType="DiscussPost">select <include refid="selectFields"></include>from discuss_postwhere status != 2<if test="userId!=0">and user_id = #{userId}</if>order by type desc, create_time desclimit #{offset}, #{limit}</select><select id="selectDiscussPostRows" resultType="int">select count(id)from discuss_postwhere status != 2<if test="userId!=0">and user_id = #{userId}</if></select></mapper>在service文件下創建DiscussPostService類，用于服務層使用（使用@Service注解）
@Service public class DiscussPostService {@Autowiredprivate DiscussPostMapper discussPostMapper;public List<DiscussPost> findDiscussPosts(int userId, int offset, int limit) {return discussPostMapper.selectDiscussPosts(userId, offset, limit);}public int findDiscussPostRows(int userId) {return discussPostMapper.selectDiscussPostRows(userId);}}將靜態資源（css image js等文件）放到static文件下，將模板文件（site index.html）放到templates文件下。
接下來開發視圖層，新建一個HomeController在controller文件下使用@Controller注解
//Controller訪問路徑可以省略 @Controller public class HomeController {//注入對象@Autowiredprivate DiscussPostService discussPostService;@Autowiredprivate UserService userService;//使用GET方法@RequestMapping(path = "/index", method = RequestMethod.GET)List<DiscussPost> list = discussPostService.findDiscussPosts(0, page.getOffset(), page.getLimit());List<Map<String, Object>> discussPosts = new ArrayList<>();if (list != null) {for (DiscussPost post : list) {Map<String, Object> map = new HashMap<>();map.put("post", post);User user = userService.findUserById(post.getUserId());map.put("user", user);discussPosts.add(map);}}model.addAttribute("discussPosts", discussPosts);return "/index";}}更改Index.html文件，使用Thymeleaf對其中相對路徑進行更改，并顯示相關的帖子。
<ul class="list-unstyled"><li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${discussPosts}"><a href="site/profile.html"><img th:src="${map.user.headerUrl}" class="mr-4 rounded-circle" alt="用戶頭像" style="width:50px;height:50px;"></a><div class="media-body"><h6 class="mt-0 mb-3"><a href="#" th:utext="${map.post.title}">備戰春招，面試刷題跟他復習，一個月全搞定！</a><span class="badge badge-secondary bg-primary" th:if="${map.post.type==1}">置頂</span><span class="badge badge-secondary bg-danger" th:if="${map.post.status==1}">精華</span></h6><div class="text-muted font-size-12"><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><ul class="d-inline float-right"><li class="d-inline ml-2">贊 11</li><li class="d-inline ml-2">|</li><li class="d-inline ml-2">回帖 7</li></ul></div></div> </li></ul>完整的HTML文件如下：
<!doctype html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous"><link rel="stylesheet" th:href="@{/css/global.css}" /><title>牛客網-首頁</title> </head> <body> <div class="nk-container"><!-- 頭部 --><header class="bg-dark sticky-top"><div class="container"><!-- 導航 --><nav class="navbar navbar-expand-lg navbar-dark"><!-- logo --><a class="navbar-brand" href="#"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><!-- 功能 --><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="index.html">首頁</a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link position-relative" href="site/letter.html">消息<span class="badge badge-danger">12</span></a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="site/register.html">注冊</a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="site/login.html">登錄</a></li><li class="nav-item ml-3 btn-group-vertical dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle" style="width:30px;"/></a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item text-center" href="site/profile.html">個人主頁</a><a class="dropdown-item text-center" href="site/setting.html">賬號設置</a><a class="dropdown-item text-center" href="site/login.html">退出登錄</a><div class="dropdown-divider"></div><span class="dropdown-item text-center text-secondary">nowcoder</span></div></li></ul><!-- 搜索 --><form class="form-inline my-2 my-lg-0" action="site/search.html"><input class="form-control mr-sm-2" type="search" aria-label="Search" /><button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button></form></div></nav></div></header><!-- 內容 --><div class="main"><div class="container"><div class="position-relative"><!-- 篩選條件 --><ul class="nav nav-tabs mb-3"><li class="nav-item"><a class="nav-link active" href="#">最新</a></li><li class="nav-item"><a class="nav-link" href="#">最熱</a></li></ul><button type="button" class="btn btn-primary btn-sm position-absolute rt-0" data-toggle="modal" data-target="#publishModal">我要發布</button></div><!-- 彈出框 --><div class="modal fade" id="publishModal" tabindex="-1" role="dialog" aria-labelledby="publishModalLabel" aria-hidden="true"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="publishModalLabel">新帖發布</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><form><div class="form-group"><label for="recipient-name" class="col-form-label">標題：</label><input type="text" class="form-control" id="recipient-name"></div><div class="form-group"><label for="message-text" class="col-form-label">正文：</label><textarea class="form-control" id="message-text" rows="15"></textarea></div></form></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary" id="publishBtn">發布</button></div></div></div></div><!-- 提示框 --><div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="hintModalLabel">提示</h5></div><div class="modal-body" id="hintBody">發布完畢!</div></div></div></div><!-- 帖子列表 --><ul class="list-unstyled"><li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${discussPosts}"><a href="site/profile.html"><img th:src="${map.user.headerUrl}" class="mr-4 rounded-circle" alt="用戶頭像" style="width:50px;height:50px;"></a><div class="media-body"><h6 class="mt-0 mb-3"><a href="#" th:utext="${map.post.title}">備戰春招，面試刷題跟他復習，一個月全搞定！</a><span class="badge badge-secondary bg-primary" th:if="${map.post.type==1}">置頂</span><span class="badge badge-secondary bg-danger" th:if="${map.post.status==1}">精華</span></h6><div class="text-muted font-size-12"><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><ul class="d-inline float-right"><li class="d-inline ml-2">贊 11</li><li class="d-inline ml-2">|</li><li class="d-inline ml-2">回帖 7</li></ul></div></div> </li></ul><!-- 分頁 --><nav class="mt-5" th:if="${page.rows>0}"><ul class="pagination justify-content-center"><li class="page-item"><a class="page-link" th:href="@{${page.path}(current=1)}">首頁</a></li><li th:class="|page-item ${page.current==1?'disabled':''}|"><a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一頁</a></li><li th:class="|page-item ${i==page.current?'active':''}|" th:each="i:${#numbers.sequence(page.from,page.to)}"><a class="page-link" href="#" th:text="${i}">1</a></li><li th:class="|page-item ${page.current==page.total?'disabled':''}|"><a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一頁</a></li><li class="page-item"><a class="page-link" th:href="@{${page.path}(current=${page.total})}">末頁</a></li></ul></nav></div></div><!-- 尾部 --><footer class="bg-dark"><div class="container"><div class="row"><!-- 二維碼 --><div class="col-4 qrcode"><img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail" style="width:136px;" /></div><!-- 公司信息 --><div class="col-8 detail-info"><div class="row"><div class="col"><ul class="nav"><li class="nav-item"><a class="nav-link text-light" href="#">關于我們</a></li><li class="nav-item"><a class="nav-link text-light" href="#">加入我們</a></li><li class="nav-item"><a class="nav-link text-light" href="#">意見反饋</a></li><li class="nav-item"><a class="nav-link text-light" href="#">企業服務</a></li><li class="nav-item"><a class="nav-link text-light" href="#">聯系我們</a></li><li class="nav-item"><a class="nav-link text-light" href="#">免責聲明</a></li><li class="nav-item"><a class="nav-link text-light" href="#">友情鏈接</a></li></ul></div></div><div class="row"><div class="col"><ul class="nav btn-group-vertical company-info"><li class="nav-item text-white-50">公司地址：北京市朝陽區大屯路東金泉時代3-2708北京牛客科技有限公司</li><li class="nav-item text-white-50">聯系方式：010-60728802(電話) admin@nowcoder.com</li><li class="nav-item text-white-50">牛客科技?2018 All rights reserved</li><li class="nav-item text-white-50">京ICP備14055008號-4 <img src="http://static.nowcoder.com/company/images/res/ghs.png" style="width:18px;" />京公網安備 11010502036488號</li></ul></div></div></div></div></div></footer></div><script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script><script th:src="@{/js/global.js}"></script><script th:src="@{js/index.js}"></script> </body> </html>3.2開發分頁組件，分頁顯示所有帖子
在entity文件下創建page類，用于記錄分頁數據
/*** 封裝分頁相關的信息.*/ public class Page {// 當前頁碼private int current = 1;// 顯示上限private int limit = 10;// 數據總數(用于計算總頁數)private int rows;// 查詢路徑(用于復用分頁鏈接)private String path;public int getCurrent() {return current;}public void setCurrent(int current) {if (current >= 1) {this.current = current;}}public int getLimit() {return limit;}public void setLimit(int limit) {if (limit >= 1 && limit <= 100) {this.limit = limit;}}public int getRows() {return rows;}public void setRows(int rows) {if (rows >= 0) {this.rows = rows;}}public String getPath() {return path;}public void setPath(String path) {this.path = path;}/*** 獲取當前頁的起始行** @return*/public int getOffset() {// current * limit - limitreturn (current - 1) * limit;}/*** 獲取總頁數** @return*/public int getTotal() {// rows / limit [+1]if (rows % limit == 0) {return rows / limit;} else {return rows / limit + 1;}}/*** 獲取起始頁碼** @return*/public int getFrom() {int from = current - 2;return from < 1 ? 1 : from;}/*** 獲取結束頁碼** @return*/public int getTo() {int to = current + 2;int total = getTotal();return to > total ? total : to;}}更改HomeController，加入分頁的方法。
//Controller訪問路徑可以省略 @Controller public class HomeController {//注入對象@Autowiredprivate DiscussPostService discussPostService;@Autowiredprivate UserService userService;//使用GET方法@RequestMapping(path = "/index", method = RequestMethod.GET)public String getIndexPage(Model model, Page page) {// 方法調用錢,SpringMVC會自動實例化Model和Page,并將Page注入Model.// 所以,在thymeleaf中可以直接訪問Page對象中的數據.page.setRows(discussPostService.findDiscussPostRows(0));page.setPath("/index");List<DiscussPost> list = discussPostService.findDiscussPosts(0, page.getOffset(), page.getLimit());List<Map<String, Object>> discussPosts = new ArrayList<>();if (list != null) {for (DiscussPost post : list) {Map<String, Object> map = new HashMap<>();map.put("post", post);User user = userService.findUserById(post.getUserId());map.put("user", user);discussPosts.add(map);}}model.addAttribute("discussPosts", discussPosts);return "/index";}}在更改Index.html問件中分頁的方法
<!-- 分頁 --><nav class="mt-5" th:if="${page.rows>0}"><ul class="pagination justify-content-center"><li class="page-item"><a class="page-link" th:href="@{${page.path}(current=1)}">首頁</a></li><li th:class="|page-item ${page.current==1?'disabled':''}|"><a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一頁</a></li><li th:class="|page-item ${i==page.current?'active':''}|" th:each="i:${#numbers.sequence(page.from,page.to)}"><a class="page-link" href="#" th:text="${i}">1</a></li><li th:class="|page-item ${page.current==page.total?'disabled':''}|"><a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一頁</a></li><li class="page-item"><a class="page-link" th:href="@{${page.path}(current=${page.total})}">末頁</a></li></ul></nav></div></div>效果圖如下：
4.開發社區登錄模塊
4.1郵件發送
在Maven Repository搜索Spring Mail配置文件并加入到poml文件中，在application.properties文件中配置Mail的參數。
# ServerProperties server.port=8080 server.servlet.context-path=/community# ThymeleafProperties spring.thymeleaf.cache=false# DataSourceProperties spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/community?characterEncoding=utf-8&useSSL=false&serverTimezone=Hongkong spring.datasource.username=root spring.datasource.password=lihonghe spring.datasource.type=com.zaxxer.hikari.HikariDataSource spring.datasource.hikari.maximum-pool-size=15 spring.datasource.hikari.minimum-idle=5 spring.datasource.hikari.idle-timeout=30000# MybatisProperties mybatis.mapper-locations=classpath:mapper/*.xml mybatis.type-aliases-package=com.nowcoder.community.entity mybatis.configuration.useGeneratedKeys=true mybatis.configuration.mapUnderscoreToCamelCase=true# MailProperties spring.mail.host=smtp.sina.com spring.mail.port=465 #自己的郵箱 spring.mail.username=nowcoder@sina.com spring.mail.password=nowcoder123 spring.mail.protocol=smtps spring.mail.properties.mail.smtp.ssl.enable=true如果發送不了郵件，需要在個人郵箱的網站設置啟用授權碼，驗證手機，并修改properties文件中關于Email的配置
# MailProperties spring.mail.host=smtp.sina.com #spring.mail.port=465 spring.mail.username=nowcoder@sina.com spring.mail.password=3398c6c71399f9fe #spring.mail.protocol=smtps #spring.mail.properties.mail.smtp.ssl.enable=true spring.mail.properties.mail.smtl.auth=true在community文件下創建util工具文件包，并在util包中創建MailClient類使用@Component注解，并創建發送郵件的方法。
@Component public class MailClient {private static final Logger logger = LoggerFactory.getLogger(MailClient.class);@Autowiredprivate JavaMailSender mailSender;//從配置文件中獲取值@Value("${spring.mail.username}")private String from;public void sendMail(String to, String subject, String content) {try {MimeMessage message = mailSender.createMimeMessage();MimeMessageHelper helper = new MimeMessageHelper(message);helper.setFrom(from);helper.setTo(to);helper.setSubject(subject);helper.setText(content, true);mailSender.send(helper.getMimeMessage());} catch (MessagingException e) {logger.error("發送郵件失敗:" + e.getMessage());}}}4.2注冊功能
在Controller層下創建LoginController類，實現登錄界面跳轉到注冊頁面，使用@Controller注解。
@Controller public class LoginController implements CommunityConstant {@RequestMapping(path = "/register", method = RequestMethod.GET)public String getRegisterPage() {return "/site/register";}@RequestMapping(path = "/login", method = RequestMethod.GET)public String getLoginPage() {return "/site/login";} }使用模板引擎thymeleaf修改注冊頁面regist.html。
<!doctype html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous"><link rel="stylesheet" th:href="@{/css/global.css}" /><link rel="stylesheet" th:href="@{/css/login.css}" /><title>牛客網-注冊</title> </head> <body><div class="nk-container"><!-- 頭部 --><header class="bg-dark sticky-top" th:replace="index::header"><div class="container"><!-- 導航 --><nav class="navbar navbar-expand-lg navbar-dark"><!-- logo --><a class="navbar-brand" href="#"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><!-- 功能 --><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="../index.html">首頁</a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link position-relative" href="letter.html">消息<span class="badge badge-danger">12</span></a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="register.html">注冊</a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="login.html">登錄</a></li><li class="nav-item ml-3 btn-group-vertical dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle" style="width:30px;"/></a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item text-center" href="profile.html">個人主頁</a><a class="dropdown-item text-center" href="setting.html">賬號設置</a><a class="dropdown-item text-center" href="login.html">退出登錄</a><div class="dropdown-divider"></div><span class="dropdown-item text-center text-secondary">nowcoder</span></div></li></ul><!-- 搜索 --><form class="form-inline my-2 my-lg-0" action="search.html"><input class="form-control mr-sm-2" type="search" aria-label="Search" /><button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button></form></div></nav></div></header><!-- 內容 --><div class="main"><div class="container pl-5 pr-5 pt-3 pb-3 mt-3 mb-3"><h3 class="text-center text-info border-bottom pb-3">注 冊</h3><form class="mt-5" method="post" th:action="@{/register}"><div class="form-group row"><label for="username" class="col-sm-2 col-form-label text-right">賬號:</label><div class="col-sm-10"><input type="text"th:class="|form-control ${usernameMsg!=null?'is-invalid':''}|"th:value="${user!=null?user.username:''}"id="username" name="username" placeholder="請輸入您的賬號!" required><div class="invalid-feedback" th:text="${usernameMsg}">該賬號已存在!</div></div></div><div class="form-group row mt-4"><label for="password" class="col-sm-2 col-form-label text-right">密碼:</label><div class="col-sm-10"><input type="password"th:class="|form-control ${passwordMsg!=null?'is-invalid':''}|"th:value="${user!=null?user.password:''}"id="password" name="password" placeholder="請輸入您的密碼!" required><div class="invalid-feedback" th:text="${passwordMsg}">密碼長度不能小于8位!</div> </div></div><div class="form-group row mt-4"><label for="confirm-password" class="col-sm-2 col-form-label text-right">確認密碼:</label><div class="col-sm-10"><input type="password" class="form-control"th:value="${user!=null?user.password:''}"id="confirm-password" placeholder="請再次輸入密碼!" required><div class="invalid-feedback">兩次輸入的密碼不一致!</div></div></div><div class="form-group row"><label for="email" class="col-sm-2 col-form-label text-right">郵箱:</label><div class="col-sm-10"><input type="email"th:class="|form-control ${emailMsg!=null?'is-invalid':''}|"th:value="${user!=null?user.email:''}"id="email" name="email" placeholder="請輸入您的郵箱!" required><div class="invalid-feedback" th:text="${emailMsg}">該郵箱已注冊!</div></div></div><div class="form-group row mt-4"><div class="col-sm-2"></div><div class="col-sm-10 text-center"><button type="submit" class="btn btn-info text-white form-control">立即注冊</button></div></div></form> </div></div><!-- 尾部 --><footer class="bg-dark"><div class="container"><div class="row"><!-- 二維碼 --><div class="col-4 qrcode"><img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail" style="width:136px;" /></div><!-- 公司信息 --><div class="col-8 detail-info"><div class="row"><div class="col"><ul class="nav"><li class="nav-item"><a class="nav-link text-light" href="#">關于我們</a></li><li class="nav-item"><a class="nav-link text-light" href="#">加入我們</a></li><li class="nav-item"><a class="nav-link text-light" href="#">意見反饋</a></li><li class="nav-item"><a class="nav-link text-light" href="#">企業服務</a></li><li class="nav-item"><a class="nav-link text-light" href="#">聯系我們</a></li><li class="nav-item"><a class="nav-link text-light" href="#">免責聲明</a></li><li class="nav-item"><a class="nav-link text-light" href="#">友情鏈接</a></li></ul></div></div><div class="row"><div class="col"><ul class="nav btn-group-vertical company-info"><li class="nav-item text-white-50">公司地址：北京市朝陽區大屯路東金泉時代3-2708北京牛客科技有限公司</li><li class="nav-item text-white-50">聯系方式：010-60728802(電話) admin@nowcoder.com</li><li class="nav-item text-white-50">牛客科技?2018 All rights reserved</li><li class="nav-item text-white-50">京ICP備14055008號-4 <img src="http://static.nowcoder.com/company/images/res/ghs.png" style="width:18px;" />京公網安備 11010502036488號</li></ul></div></div></div></div></div></footer></div><script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script><script th:src="@{/js/global.js}"></script><script th:src="@{/js/register.js}"></script> </body> </html>在Maven Repository搜索commons lang配置文件并加入到poml文件中。在properties文件中加入community的路徑。
# community community.path.domain=http://localhost:8080在util中添加CommunityUtil工具類，方便生成密碼。
public class CommunityUtil {// 生成隨機字符串public static String generateUUID() {return UUID.randomUUID().toString().replaceAll("-", "");}// MD5加密// hello -> abc123def456// hello + 3e4a8 -> abc123def456abcpublic static String md5(String key) {if (StringUtils.isBlank(key)) {return null;}return DigestUtils.md5DigestAsHex(key.getBytes());}}在Service中更新UserService類，用于注冊用戶業務，并更新激活頁面activation.html。
@Service public class UserService implements CommunityConstant {@Autowiredprivate UserMapper userMapper;@Autowiredprivate MailClient mailClient;@Autowiredprivate TemplateEngine templateEngine;@Value("${community.path.domain}")private String domain;@Value("${server.servlet.context-path}")private String contextPath;@Autowiredprivate LoginTicketMapper loginTicketMapper;public User findUserById(int id) {return userMapper.selectById(id);}public Map<String, Object> register(User user) {Map<String, Object> map = new HashMap<>();// 空值處理if (user == null) {throw new IllegalArgumentException("參數不能為空!");}if (StringUtils.isBlank(user.getUsername())) {map.put("usernameMsg", "賬號不能為空!");return map;}if (StringUtils.isBlank(user.getPassword())) {map.put("passwordMsg", "密碼不能為空!");return map;}if (StringUtils.isBlank(user.getEmail())) {map.put("emailMsg", "郵箱不能為空!");return map;}// 驗證賬號User u = userMapper.selectByName(user.getUsername());if (u != null) {map.put("usernameMsg", "該賬號已存在!");return map;}// 驗證郵箱u = userMapper.selectByEmail(user.getEmail());if (u != null) {map.put("emailMsg", "該郵箱已被注冊!");return map;}// 注冊用戶user.setSalt(CommunityUtil.generateUUID().substring(0, 5));user.setPassword(CommunityUtil.md5(user.getPassword() + user.getSalt()));user.setType(0);user.setStatus(0);user.setActivationCode(CommunityUtil.generateUUID());user.setHeaderUrl(String.format("http://images.nowcoder.com/head/%dt.png", new Random().nextInt(1000)));user.setCreateTime(new Date());userMapper.insertUser(user);// 激活郵件Context context = new Context();context.setVariable("email", user.getEmail());// http://localhost:8080/community/activation/101/codeString url = domain + contextPath + "/activation/" + user.getId() + "/" + user.getActivationCode();context.setVariable("url", url);String content = templateEngine.process("/mail/activation", context);mailClient.sendMail(user.getEmail(), "激活賬號", content);return map;}public int activation(int userId, String code) {User user = userMapper.selectById(userId);if (user.getStatus() == 1) {return ACTIVATION_REPEAT;} else if (user.getActivationCode().equals(code)) {userMapper.updateStatus(userId, 1);return ACTIVATION_SUCCESS;} else {return ACTIVATION_FAILURE;}}public Map<String, Object> login(String username, String password, int expiredSeconds) {Map<String, Object> map = new HashMap<>();// 空值處理if (StringUtils.isBlank(username)) {map.put("usernameMsg", "賬號不能為空!");return map;}if (StringUtils.isBlank(password)) {map.put("passwordMsg", "密碼不能為空!");return map;}// 驗證賬號User user = userMapper.selectByName(username);if (user == null) {map.put("usernameMsg", "該賬號不存在!");return map;}// 驗證狀態if (user.getStatus() == 0) {map.put("usernameMsg", "該賬號未激活!");return map;}// 驗證密碼password = CommunityUtil.md5(password + user.getSalt());if (!user.getPassword().equals(password)) {map.put("passwordMsg", "密碼不正確!");return map;}// 生成登錄憑證LoginTicket loginTicket = new LoginTicket();loginTicket.setUserId(user.getId());loginTicket.setTicket(CommunityUtil.generateUUID());loginTicket.setStatus(0);loginTicket.setExpired(new Date(System.currentTimeMillis() + expiredSeconds * 1000));loginTicketMapper.insertLoginTicket(loginTicket);map.put("ticket", loginTicket.getTicket());return map;}}<!doctype html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="utf-8"><link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/><title>牛客網-激活賬號</title> </head> <body><div><p><b th:text="${email}">xxx@xxx.com</b>, 您好!</p><p>您正在注冊牛客網, 這是一封激活郵件, 請點擊 <a th:href="${url}">此鏈接</a>,激活您的牛客賬號!</p></div> </body> </html>注冊之后需要更新LoginController，處理注冊完成的請求。
@Controller public class LoginController implements CommunityConstant {private static final Logger logger = LoggerFactory.getLogger(LoginController.class);@Autowiredprivate UserService userService;@Autowiredprivate Producer kaptchaProducer;@Value("${server.servlet.context-path}")private String contextPath;@RequestMapping(path = "/register", method = RequestMethod.GET)public String getRegisterPage() {return "/site/register";}@RequestMapping(path = "/login", method = RequestMethod.GET)public String getLoginPage() {return "/site/login";}@RequestMapping(path = "/register", method = RequestMethod.POST)public String register(Model model, User user) {Map<String, Object> map = userService.register(user);if (map == null || map.isEmpty()) {model.addAttribute("msg", "注冊成功,我們已經向您的郵箱發送了一封激活郵件,請盡快激活!");model.addAttribute("target", "/index");return "/site/operate-result";} else {model.addAttribute("usernameMsg", map.get("usernameMsg"));model.addAttribute("passwordMsg", map.get("passwordMsg"));model.addAttribute("emailMsg", map.get("emailMsg"));return "/site/register";}}}更新operate-result頁面。
<!doctype html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous"><link rel="stylesheet" th:href="@{/css/global.css}" /><title>牛客網-操作結果</title> </head> <body class="bg-white"><div class="nk-container"><!-- 頭部 --><header class="bg-dark sticky-top" th:replace="index::header"><div class="container"><!-- 導航 --><nav class="navbar navbar-expand-lg navbar-dark"><!-- logo --><a class="navbar-brand" href="#"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><!-- 功能 --><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="../index.html">首頁</a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link position-relative" href="letter.html">消息<span class="badge badge-danger">12</span></a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="register.html">注冊</a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="login.html">登錄</a></li><li class="nav-item ml-3 btn-group-vertical dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle" style="width:30px;"/></a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item text-center" href="profile.html">個人主頁</a><a class="dropdown-item text-center" href="setting.html">賬號設置</a><a class="dropdown-item text-center" href="login.html">退出登錄</a><div class="dropdown-divider"></div><span class="dropdown-item text-center text-secondary">nowcoder</span></div></li></ul><!-- 搜索 --><form class="form-inline my-2 my-lg-0" action="search.html"><input class="form-control mr-sm-2" type="search" aria-label="Search" /><button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button></form></div></nav></div></header><!-- 內容 --><div class="main"><div class="container mt-5"><div class="jumbotron"><p class="lead" th:text="${msg}">您的賬號已經激活成功,可以正常使用了!</p><hr class="my-4"><p>系統會在 <span id="seconds" class="text-danger">8</span> 秒后自動跳轉,您也可以點此 <a id="target" th:href="@{${target}}" class="text-primary">鏈接</a>, 手動跳轉!</p></div></div></div><!-- 尾部 --><footer class="bg-dark"><div class="container"><div class="row"><!-- 二維碼 --><div class="col-4 qrcode"><img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail" style="width:136px;" /></div><!-- 公司信息 --><div class="col-8 detail-info"><div class="row"><div class="col"><ul class="nav"><li class="nav-item"><a class="nav-link text-light" href="#">關于我們</a></li><li class="nav-item"><a class="nav-link text-light" href="#">加入我們</a></li><li class="nav-item"><a class="nav-link text-light" href="#">意見反饋</a></li><li class="nav-item"><a class="nav-link text-light" href="#">企業服務</a></li><li class="nav-item"><a class="nav-link text-light" href="#">聯系我們</a></li><li class="nav-item"><a class="nav-link text-light" href="#">免責聲明</a></li><li class="nav-item"><a class="nav-link text-light" href="#">友情鏈接</a></li></ul></div></div><div class="row"><div class="col"><ul class="nav btn-group-vertical company-info"><li class="nav-item text-white-50">公司地址：北京市朝陽區大屯路東金泉時代3-2708北京牛客科技有限公司</li><li class="nav-item text-white-50">聯系方式：010-60728802(電話) admin@nowcoder.com</li><li class="nav-item text-white-50">牛客科技?2018 All rights reserved</li><li class="nav-item text-white-50">京ICP備14055008號-4 <img src="http://static.nowcoder.com/company/images/res/ghs.png" style="width:18px;" />京公網安備 11010502036488號</li></ul></div></div></div></div></div></footer></div><script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script><script>$(function(){setInterval(function(){var seconds = $("#seconds").text();$("#seconds").text(--seconds);if(seconds == 0) {location.href = $("#target").attr("href");}}, 1000);});</script> </body> </html>在utill中創建一個CommunityConstant接口，用于表示注冊狀態碼。
public interface CommunityConstant {/*** 激活成功*/int ACTIVATION_SUCCESS = 0;/*** 重復激活*/int ACTIVATION_REPEAT = 1;/*** 激活失敗*/int ACTIVATION_FAILURE = 2;/*** 默認狀態的登錄憑證的超時時間*/int DEFAULT_EXPIRED_SECONDS = 3600 * 12;/*** 記住狀態的登錄憑證超時時間*/int REMEMBER_EXPIRED_SECONDS = 3600 * 24 * 100;}更新LoginController的功能，并更改Index.html文件相對應位置的模板參數。
@Controller public class LoginController implements CommunityConstant {private static final Logger logger = LoggerFactory.getLogger(LoginController.class);@Autowiredprivate UserService userService;@Autowiredprivate Producer kaptchaProducer;@Value("${server.servlet.context-path}")private String contextPath;@RequestMapping(path = "/register", method = RequestMethod.GET)public String getRegisterPage() {return "/site/register";}@RequestMapping(path = "/login", method = RequestMethod.GET)public String getLoginPage() {return "/site/login";}@RequestMapping(path = "/register", method = RequestMethod.POST)public String register(Model model, User user) {Map<String, Object> map = userService.register(user);if (map == null || map.isEmpty()) {model.addAttribute("msg", "注冊成功,我們已經向您的郵箱發送了一封激活郵件,請盡快激活!");model.addAttribute("target", "/index");return "/site/operate-result";} else {model.addAttribute("usernameMsg", map.get("usernameMsg"));model.addAttribute("passwordMsg", map.get("passwordMsg"));model.addAttribute("emailMsg", map.get("emailMsg"));return "/site/register";}}// http://localhost:8080/community/activation/101/code@RequestMapping(path = "/activation/{userId}/{code}", method = RequestMethod.GET)public String activation(Model model, @PathVariable("userId") int userId, @PathVariable("code") String code) {int result = userService.activation(userId, code);if (result == ACTIVATION_SUCCESS) {model.addAttribute("msg", "激活成功,您的賬號已經可以正常使用了!");model.addAttribute("target", "/login");} else if (result == ACTIVATION_REPEAT) {model.addAttribute("msg", "無效操作,該賬號已經激活過了!");model.addAttribute("target", "/index");} else {model.addAttribute("msg", "激活失敗,您提供的激活碼不正確!");model.addAttribute("target", "/index");}return "/site/operate-result";}}4.3會話管理
使用Cookie保存一些信息，可以使用瀏覽器插件查看Cookie(F12控制臺)
有關Cookie的一個小示例：
// cookie示例@RequestMapping(path = "/cookie/set", method = RequestMethod.GET)@ResponseBodypublic String setCookie(HttpServletResponse response) {// 創建cookieCookie cookie = new Cookie("code", CommunityUtil.generateUUID());// 設置cookie生效的范圍cookie.setPath("/community/alpha");// 設置cookie的生存時間cookie.setMaxAge(60 * 10);// 發送cookieresponse.addCookie(cookie);return "set cookie";}@RequestMapping(path = "/cookie/get", method = RequestMethod.GET)@ResponseBodypublic String getCookie(@CookieValue("code") String code) {System.out.println(code);return "get cookie";}// session示例@RequestMapping(path = "/session/set", method = RequestMethod.GET)@ResponseBodypublic String setSession(HttpSession session) {session.setAttribute("id", 1);session.setAttribute("name", "Test");return "set session";}@RequestMapping(path = "/session/get", method = RequestMethod.GET)@ResponseBodypublic String getSession(HttpSession session) {System.out.println(session.getAttribute("id"));System.out.println(session.getAttribute("name"));return "get session";}cookie和session的區別
后期可以考慮將Session數據傳輸到redis數據庫中，用于保存一些登陸憑證
4.4生成驗證碼
驗證碼使用Kaptcha jar包用于隨機生成字符和圖片。在Maven Repository搜索Kaptcha配置文件，在resources文件包內的pom.xml文件中導入相關的配置文件依賴。在community目錄下創建config文件包并創建KaptchaConfig配置類，使用@Configuration注解。
@Configuration public class KaptchaConfig {@Beanpublic Producer kaptchaProducer() {Properties properties = new Properties();properties.setProperty("kaptcha.image.width", "100");properties.setProperty("kaptcha.image.height", "40");properties.setProperty("kaptcha.textproducer.font.size", "32");properties.setProperty("kaptcha.textproducer.font.color", "0,0,0");properties.setProperty("kaptcha.textproducer.char.string", "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYAZ");properties.setProperty("kaptcha.textproducer.char.length", "4");properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");DefaultKaptcha kaptcha = new DefaultKaptcha();Config config = new Config(properties);kaptcha.setConfig(config);return kaptcha;}}在LoginController文件中完善驗證碼功能，并完善登陸頁面.html文件中驗證碼的模板，并實現刷新驗證碼的功能。
@RequestMapping(path = "/kaptcha", method = RequestMethod.GET)public void getKaptcha(HttpServletResponse response, HttpSession session) {// 生成驗證碼String text = kaptchaProducer.createText();BufferedImage image = kaptchaProducer.createImage(text);// 將驗證碼存入sessionsession.setAttribute("kaptcha", text);// 將突圖片輸出給瀏覽器response.setContentType("image/png");try {OutputStream os = response.getOutputStream();ImageIO.write(image, "png", os);} catch (IOException e) {logger.error("響應驗證碼失敗:" + e.getMessage());}}@RequestMapping(path = "/login", method = RequestMethod.POST)public String login(String username, String password, String code, boolean rememberme,Model model, HttpSession session, HttpServletResponse response) {// 檢查驗證碼String kaptcha = (String) session.getAttribute("kaptcha");if (StringUtils.isBlank(kaptcha) || StringUtils.isBlank(code) || !kaptcha.equalsIgnoreCase(code)) {model.addAttribute("codeMsg", "驗證碼不正確!");return "/site/login";}刷新驗證碼方法：
<script>function refresh_kaptcha() {var path = CONTEXT_PATH + "/kaptcha?p=" + Math.random();$("#kaptcha").attr("src", path);} </script>4.5登錄、退出功能
密碼使用MD5加密
數據庫中有關于登錄憑證的ticket，使用這個ticket作為登陸憑證。涉及到數據庫的操作，就要處理LoginTicketMapper。
LoginTicketMapper(這里是mapper的另外一種寫法，不用再resource里面創建mapper文件):
@Mapper public interface LoginTicketMapper {@Insert({"insert into login_ticket(user_id,ticket,status,expired) ","values(#{userId},#{ticket},#{status},#{expired})"})@Options(useGeneratedKeys = true, keyProperty = "id")int insertLoginTicket(LoginTicket loginTicket);@Select({"select id,user_id,ticket,status,expired ","from login_ticket where ticket=#{ticket}"})LoginTicket selectByTicket(String ticket);@Update({"<script>","update login_ticket set status=#{status} where ticket=#{ticket} ","<if test="ticket!=null"> ","and 1=1 ","</if>","</script>"})int updateStatus(String ticket, int status);}在UserService中增加登陸的方法，并在login.html中增加相應的修改：
public Map<String, Object> login(String username, String password, int expiredSeconds) {Map<String, Object> map = new HashMap<>();// 空值處理if (StringUtils.isBlank(username)) {map.put("usernameMsg", "賬號不能為空!");return map;}if (StringUtils.isBlank(password)) {map.put("passwordMsg", "密碼不能為空!");return map;}// 驗證賬號User user = userMapper.selectByName(username);if (user == null) {map.put("usernameMsg", "該賬號不存在!");return map;}// 驗證狀態if (user.getStatus() == 0) {map.put("usernameMsg", "該賬號未激活!");return map;}// 驗證密碼password = CommunityUtil.md5(password + user.getSalt());if (!user.getPassword().equals(password)) {map.put("passwordMsg", "密碼不正確!");return map;}// 生成登錄憑證LoginTicket loginTicket = new LoginTicket();loginTicket.setUserId(user.getId());loginTicket.setTicket(CommunityUtil.generateUUID());loginTicket.setStatus(0);loginTicket.setExpired(new Date(System.currentTimeMillis() + expiredSeconds * 1000));loginTicketMapper.insertLoginTicket(loginTicket);map.put("ticket", loginTicket.getTicket());return map;}增加Controller層中的登錄方法：
@RequestMapping(path = "/login", method = RequestMethod.POST)public String login(String username, String password, String code, boolean rememberme,Model model, HttpSession session, HttpServletResponse response) {// 檢查驗證碼String kaptcha = (String) session.getAttribute("kaptcha");if (StringUtils.isBlank(kaptcha) || StringUtils.isBlank(code) || !kaptcha.equalsIgnoreCase(code)) {model.addAttribute("codeMsg", "驗證碼不正確!");return "/site/login";}// 檢查賬號,密碼int expiredSeconds = rememberme ? REMEMBER_EXPIRED_SECONDS : DEFAULT_EXPIRED_SECONDS;Map<String, Object> map = userService.login(username, password, expiredSeconds);if (map.containsKey("ticket")) {Cookie cookie = new Cookie("ticket", map.get("ticket").toString());cookie.setPath(contextPath);cookie.setMaxAge(expiredSeconds);response.addCookie(cookie);return "redirect:/index";} else {model.addAttribute("usernameMsg", map.get("usernameMsg"));model.addAttribute("passwordMsg", map.get("passwordMsg"));return "/site/login";}}@RequestMapping(path = "/logout", method = RequestMethod.GET)public String logout(@CookieValue("ticket") String ticket) {userService.logout(ticket);return "redirect:/login";}4.6顯示登陸信息
使用攔截器實現
在controller層下創建Interceptor文件包，
攔截器的方法
// 在Controller之前執行@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {logger.debug("preHandle: " + handler.toString());return true;}// 在Controller之后執行@Overridepublic void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {logger.debug("postHandle: " + handler.toString());}// 在TemplateEngine之后執行@Overridepublic void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {logger.debug("afterCompletion: " + handler.toString());}在cpnfig文件下創建配置類WebMvcConfig，配置攔截器。
@Configuration public class WebMvcConfig implements WebMvcConfigurer {//測試攔截器方法@Autowiredprivate AlphaInterceptor alphaInterceptor;@Autowiredprivate LoginTicketInterceptor loginTicketInterceptor;@Autowiredprivate LoginRequiredInterceptor loginRequiredInterceptor;@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(alphaInterceptor).excludePathPatterns("/**/*.css", "/**/*.js", "/**/*.png", "/**/*.jpg", "/**/*.jpeg").addPathPatterns("/register", "/login");registry.addInterceptor(loginTicketInterceptor).excludePathPatterns("/**/*.css", "/**/*.js", "/**/*.png", "/**/*.jpg", "/**/*.jpeg");}}在請求開始之前查詢登錄用戶：
在Interceptor文件下創建LoginTicketInterceptor，實現攔截器的方法。
@Component public class LoginTicketInterceptor implements HandlerInterceptor {@Autowiredprivate UserService userService;@Autowiredprivate HostHolder hostHolder;@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {// 從cookie中獲取憑證String ticket = CookieUtil.getValue(request, "ticket");if (ticket != null) {// 查詢憑證LoginTicket loginTicket = userService.findLoginTicket(ticket);// 檢查憑證是否有效if (loginTicket != null && loginTicket.getStatus() == 0 && loginTicket.getExpired().after(new Date())) {// 根據憑證查詢用戶User user = userService.findUserById(loginTicket.getUserId());// 在本次請求中持有用戶hostHolder.setUser(user);}}return true;}@Overridepublic void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {User user = hostHolder.getUser();if (user != null && modelAndView != null) {modelAndView.addObject("loginUser", user);}}@Overridepublic void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {hostHolder.clear();} }在Util文件中創建Cookie工具，以及HostHolder工具用于代替session對象。完成過后修改相應的html文件。
public class CookieUtil {public static String getValue(HttpServletRequest request, String name) {if (request == null || name == null) {throw new IllegalArgumentException("參數為空!");}Cookie[] cookies = request.getCookies();if (cookies != null) {for (Cookie cookie : cookies) {if (cookie.getName().equals(name)) {return cookie.getValue();}}}return null;}}/*** 持有用戶信息,用于代替session對象.*/ @Component public class HostHolder {private ThreadLocal<User> users = new ThreadLocal<>();public void setUser(User user) {users.set(user);}public User getUser() {return users.get();}public void clear() {users.remove();}}4.7賬號設置
用戶自己上傳頭像，請求必須是POST請求，表單：enctype = “multipart/form-data”,SpringMVC通過MutipartFile上傳文件。
創建Usercontroller
@Controller @RequestMapping("/user") public class UserController {private static final Logger logger = LoggerFactory.getLogger(UserController.class);@Value("${community.path.upload}")private String uploadPath;@Value("${community.path.domain}")private String domain;@Value("${server.servlet.context-path}")private String contextPath;@Autowiredprivate UserService userService;@Autowiredprivate HostHolder hostHolder;@LoginRequired@RequestMapping(path = "/setting", method = RequestMethod.GET)public String getSettingPage() {return "/site/setting";}@LoginRequired@RequestMapping(path = "/upload", method = RequestMethod.POST)public String uploadHeader(MultipartFile headerImage, Model model) {if (headerImage == null) {model.addAttribute("error", "您還沒有選擇圖片!");return "/site/setting";}String fileName = headerImage.getOriginalFilename();String suffix = fileName.substring(fileName.lastIndexOf("."));if (StringUtils.isBlank(suffix)) {model.addAttribute("error", "文件的格式不正確!");return "/site/setting";}// 生成隨機文件名fileName = CommunityUtil.generateUUID() + suffix;// 確定文件存放的路徑File dest = new File(uploadPath + "/" + fileName);try {// 存儲文件headerImage.transferTo(dest);} catch (IOException e) {logger.error("上傳文件失敗: " + e.getMessage());throw new RuntimeException("上傳文件失敗,服務器發生異常!", e);}// 更新當前用戶的頭像的路徑(web訪問路徑)// http://localhost:8080/community/user/header/xxx.pngUser user = hostHolder.getUser();String headerUrl = domain + contextPath + "/user/header/" + fileName;userService.updateHeader(user.getId(), headerUrl);return "redirect:/index";}@RequestMapping(path = "/header/{fileName}", method = RequestMethod.GET)public void getHeader(@PathVariable("fileName") String fileName, HttpServletResponse response) {// 服務器存放路徑fileName = uploadPath + "/" + fileName;// 文件后綴String suffix = fileName.substring(fileName.lastIndexOf("."));// 響應圖片response.setContentType("image/" + suffix);try (FileInputStream fis = new FileInputStream(fileName);OutputStream os = response.getOutputStream();) {byte[] buffer = new byte[1024];int b = 0;while ((b = fis.read(buffer)) != -1) {os.write(buffer, 0, b);}} catch (IOException e) {logger.error("讀取頭像失敗: " + e.getMessage());}}}配置setting.html的靜態資源路徑
<!doctype html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous"><link rel="stylesheet" th:href="@{/css/global.css}" /><link rel="stylesheet" th:href="@{/css/login.css}" /><title>牛客網-賬號設置</title> </head> <body><div class="nk-container"><!-- 頭部 --><header class="bg-dark sticky-top" th:replace="index::header"><div class="container"><!-- 導航 --><nav class="navbar navbar-expand-lg navbar-dark"><!-- logo --><a class="navbar-brand" href="#"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><!-- 功能 --><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="../index.html">首頁</a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link position-relative" href="letter.html">消息<span class="badge badge-danger">12</span></a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="register.html">注冊</a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="login.html">登錄</a></li><li class="nav-item ml-3 btn-group-vertical dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle" style="width:30px;"/></a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item text-center" href="profile.html">個人主頁</a><a class="dropdown-item text-center" href="setting.html">賬號設置</a><a class="dropdown-item text-center" href="login.html">退出登錄</a><div class="dropdown-divider"></div><span class="dropdown-item text-center text-secondary">nowcoder</span></div></li></ul><!-- 搜索 --><form class="form-inline my-2 my-lg-0" action="search.html"><input class="form-control mr-sm-2" type="search" aria-label="Search" /><button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button></form></div></nav></div></header><!-- 內容 --><div class="main"><div class="container p-5 mt-3 mb-3"><!-- 上傳頭像 --><h6 class="text-left text-info border-bottom pb-2">上傳頭像</h6><form class="mt-5" method="post" enctype="multipart/form-data" th:action="@{/user/upload}"><div class="form-group row mt-4"><label for="head-image" class="col-sm-2 col-form-label text-right">選擇頭像:</label><div class="col-sm-10"><div class="custom-file"><input type="file" th:class="|custom-file-input ${error!=null?'is-invalid':''}|"id="head-image" name="headerImage" lang="es" required=""><label class="custom-file-label" for="head-image" data-browse="文件">選擇一張圖片</label><div class="invalid-feedback" th:text="${error}">該賬號不存在!</div></div></div></div><div class="form-group row mt-4"><div class="col-sm-2"></div><div class="col-sm-10 text-center"><button type="submit" class="btn btn-info text-white form-control">立即上傳</button></div></div></form><!-- 修改密碼 --><h6 class="text-left text-info border-bottom pb-2 mt-5">修改密碼</h6><form class="mt-5"> <div class="form-group row mt-4"><label for="old-password" class="col-sm-2 col-form-label text-right">原密碼:</label><div class="col-sm-10"><input type="password" class="form-control" id="old-password" placeholder="請輸入原始密碼!" required><div class="invalid-feedback">密碼長度不能小于8位!</div> </div></div><div class="form-group row mt-4"><label for="new-password" class="col-sm-2 col-form-label text-right">新密碼:</label><div class="col-sm-10"><input type="password" class="form-control" id="new-password" placeholder="請輸入新的密碼!" required><div class="invalid-feedback">密碼長度不能小于8位!</div> </div></div><div class="form-group row mt-4"><label for="confirm-password" class="col-sm-2 col-form-label text-right">確認密碼:</label><div class="col-sm-10"><input type="password" class="form-control" id="confirm-password" placeholder="再次輸入新密碼!" required><div class="invalid-feedback">兩次輸入的密碼不一致!</div> </div></div> <div class="form-group row mt-4"><div class="col-sm-2"></div><div class="col-sm-10 text-center"><button type="submit" class="btn btn-info text-white form-control">立即保存</button></div></div></form> </div></div><!-- 尾部 --><footer class="bg-dark"><div class="container"><div class="row"><!-- 二維碼 --><div class="col-4 qrcode"><img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail" style="width:136px;" /></div><!-- 公司信息 --><div class="col-8 detail-info"><div class="row"><div class="col"><ul class="nav"><li class="nav-item"><a class="nav-link text-light" href="#">關于我們</a></li><li class="nav-item"><a class="nav-link text-light" href="#">加入我們</a></li><li class="nav-item"><a class="nav-link text-light" href="#">意見反饋</a></li><li class="nav-item"><a class="nav-link text-light" href="#">企業服務</a></li><li class="nav-item"><a class="nav-link text-light" href="#">聯系我們</a></li><li class="nav-item"><a class="nav-link text-light" href="#">免責聲明</a></li><li class="nav-item"><a class="nav-link text-light" href="#">友情鏈接</a></li></ul></div></div><div class="row"><div class="col"><ul class="nav btn-group-vertical company-info"><li class="nav-item text-white-50">公司地址：北京市朝陽區大屯路東金泉時代3-2708北京牛客科技有限公司</li><li class="nav-item text-white-50">聯系方式：010-60728802(電話) admin@nowcoder.com</li><li class="nav-item text-white-50">牛客科技?2018 All rights reserved</li><li class="nav-item text-white-50">京ICP備14055008號-4 <img src="http://static.nowcoder.com/company/images/res/ghs.png" style="width:18px;" />京公網安備 11010502036488號</li></ul></div></div></div></div></div></footer></div><script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js" crossorigin="anonymous"></script><script th:src="@{/js/global.js}"></script><script>$(function(){bsCustomFileInput.init();});</script> </body> </html>修改配置文件中，上傳文件的保存位置。
community.path.upload=d:/work/data/upload4.8檢查登陸狀態
防止未登錄訪問某些資源，可以使用攔截器和注解。
使用注解，在community創建annotation文件創建Login注解。
@Target(ElementType.METHOD) @Retention(RetentionPolicy.RUNTIME) public @interface LoginRequired {}給Usercontroller中的方法，加入@LoginRequire注解，并創建攔截器攔截帶注解的方法。
創建一個新的攔截器LoginRequireInterceptor。
@Component public class LoginRequiredInterceptor implements HandlerInterceptor {@Autowiredprivate HostHolder hostHolder;@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {//保證攔截的是方法if (handler instanceof HandlerMethod) {HandlerMethod handlerMethod = (HandlerMethod) handler;Method method = handlerMethod.getMethod();LoginRequired loginRequired = method.getAnnotation(LoginRequired.class);if (loginRequired != null && hostHolder.getUser() == null) {response.sendRedirect(request.getContextPath() + "/login");return false;}}return true;} }項目代碼及相關資源：Ming-XMU (Yiming Zhang) · GitHub
麻煩點點小星星！！！！！！
CSDN下載需要積分基于SpringBoot仿牛客網討論社區項目-Java文檔類資源-CSDN下載
從零開始—仿牛客網討論社區項目（一）_芙蓉鐵蛋的博客-CSDN博客
?從零開始—仿牛客網討論社區項目（二）_芙蓉鐵蛋的博客-CSDN博客
從零開始—仿牛客網討論社區項目（三）_芙蓉鐵蛋的博客-CSDN博客
從零開始—仿牛客網討論社區項目（四）_芙蓉鐵蛋的博客-CSDN博客
從零開始—仿牛客網討論社區項目（五）_芙蓉鐵蛋的博客-CSDN博客
從零開始—仿牛客網討論社區項目（六）_芙蓉鐵蛋的博客-CSDN博客
仿牛客網討論社區項目—優化網站性能_芙蓉鐵蛋的博客-CSDN博客
仿牛客網討論社區項目—項目總結及項目常見面試題_芙蓉鐵蛋的博客-CSDN博客
先自我介紹一下，小編13年上師交大畢業，曾經在小公司待過，去過華為OPPO等大廠，18年進入阿里，直到現在。深知大多數初中級java工程師，想要升技能，往往是需要自己摸索成長或是報班學習，但對于培訓機構動則近萬元的學費，著實壓力不小。自己不成體系的自學效率很低又漫長，而且容易碰到天花板技術停止不前。因此我收集了一份《java開發全套學習資料》送給大家，初衷也很簡單，就是希望幫助到想自學又不知道該從何學起的朋友，同時減輕大家的負擔。添加下方名片，即可獲取全套學習資料哦
總結
以上是生活随笔為你收集整理的从零开始—仿牛客网讨论社区项目（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ceph中查找BUCKET INDEX所
- 下一篇： 【互联网的那些事】互联网的 10 年，每