牛客网项目3：注册、激活功能
生活随笔
收集整理的這篇文章主要介紹了
牛客网项目3：注册、激活功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
思路匯總
①注冊功能：
首先在主頁index，點擊注冊：<a class="nav-link" th:href="@{/register}">注冊</a>
通過控制器方法getRegisterPage()，跳轉到register.html界面。
輸入賬號密碼郵箱后，點擊立即注冊。form表單跳轉到th:action="@{/register}"。由于此次發送的是POST請求，執行register()控制器方法。該方法調用了userService.register(user)，將user進行注冊。
userService.register(user)會進行注冊參數的判斷：包括參數非空、賬號郵箱已存在，并將錯誤信息存儲到Map中。如果都沒問題，則對user的其他屬性進行復制，例如設置類型、狀態、默認頭像、自動生成激活碼等，從而得到一個完整的user。然后發送激活郵件，context包含了用戶郵件地址、激活路徑（包含用戶ID、激活碼）：
????????激活路徑格式：http://localhost:8080/community/activation/101/code
并將html文件與context封裝到content中，之后調用mailClient.sendMail(郵箱、主題、content)，發送html郵件：
????????String content = templateEngine.process("/mail/activation",context);
到此為止，用戶已經注冊成功，控制器方法register()還沒執行完。繼續對userService.register(user)返回的Map進行判斷，跳轉到設定的界面，并展示相應的信息。
②激活功能：
用戶郵箱中會展現activation.html中的內容，里面有個點擊此鏈接激活賬號的功能。這個鏈接就是上一段中【包含用戶ID、激活碼的激活路徑】，我們點擊后，會通過控制器方法@RequestMapping(path = "/activation/{userId}/{code}", method = RequestMethod.GET)
activation(){...} 來判斷鏈接中的激活碼和user設定的激活碼是否相同，并進行各種判斷，封裝信息、下一步的訪問路徑。最后返回"/site/operate-result"頁面，這是個中轉頁面，上面會顯示上一步判斷的信息，并在8秒后跳回上一步設定的路徑。
1. 注冊頁面
首先搞個注冊頁面：
<!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"><!-- 頭部 --><!--用index中的header替換掉此內容--><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" th:href="@{/index}">首頁</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}">注冊</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"><!--如果usernameMsg不為空，就在input標簽中添加 th:class='is-invalid' --><!--設定默認值，在報錯返回來以后，model仍存有剛才的user對象，這樣用戶就不要再輸一遍了--><!--標簽的name屬性，需要與user的屬性名相同--><input type="text"th:class="|form-control ${usernameMsg!=null?'is-invalid':''}|"th:value="${user!=null?user.username:''}"id="username" name="username" placeholder="請輸入您的賬號!" required><!--賬號的錯誤就取出map中存的賬號錯誤信息--><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><!-- 尾部 --><!-- 代碼太長，我先刪掉 --></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>注：這里的<header class="bg-dark sticky-top" th:replace="index::header">
利用了主頁面index中的header替換掉此內容，為復用。需要在index的header上添加：
<header class="bg-dark sticky-top" th:fragment="header">
2. 創建工具類
mycommunity/util下新建工具類：CommunityUtil
目前主要包含兩個方法：
?- 為密碼隨機生成一個字符串后綴，用來加強密碼；
?- 將密碼進行MD5加密。
public class CommunityUtil {//生成隨機字符串public static String generateUUID(){return UUID.randomUUID().toString().replace("-","");}//MD5加密//hello + 3e4r8 --> abc13huoad34public static String md5(String key){if(StringUtils.isBlank(key)){return null;}return DigestUtils.md5DigestAsHex(key.getBytes());} }3. 提交注冊數據
由于注冊是針對用戶表的數據，因此注冊邏輯寫在UserService中。
自動注入了MailClient、TemplateEngine、domain、contextPath（后兩個為配置文件中的數據）。
package com.nowcoder.mycommunity.service;import com.nowcoder.mycommunity.dao.UserMapper; import com.nowcoder.mycommunity.entity.User; import com.nowcoder.mycommunity.util.CommunityConstant; import com.nowcoder.mycommunity.util.CommunityUtil; import com.nowcoder.mycommunity.util.MailClient; import org.apache.commons.lang3.StringUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Service; import org.thymeleaf.TemplateEngine; import org.thymeleaf.context.Context;import java.util.Date; import java.util.HashMap; import java.util.Map; import java.util.Random;@Service public class UserService implements CommunityConstant {@Autowiredprivate UserMapper userMapper;@Autowiredprivate MailClient mailClient;@Autowiredprivate TemplateEngine templateEngine;//以下值從配置文件中讀取@Value("${mycommunity.path.domin}")private String domain;@Value("${server.servlet.context-path}")private String contextPath;public User findUserById(int id){return userMapper.selectById(id);}// 由于注冊是針對用戶表的數據，因此注冊邏輯寫在UserService中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/code//注：用戶ID為主鍵自動生成String url = domain + contextPath + "/activation/" + user.getId() + "/" + user.getActivationCode();context.setVariable("url",url);String content = templateEngine.process("/mail/activation",context);mailClient.sendMail(user.getEmail(), "激活賬號", content);//最后返回的map為空，則說明沒有問題return map;}//激活//需要傳進用戶ID，得到該用戶的激活碼，與傳進來的激活碼進行對比public int activation(int userId, String code){User user = userMapper.selectById(userId);//如果可以查詢到該用戶ID，說明已經有了，重復注冊if(user.getStatus() == 1){return ACTIVATION_REPEAT;} else if(user.getActivationCode().equals(code)){//激活碼正確，則將用戶的狀態設為1userMapper.updateStatus(userId,1);return ACTIVATION_SUCCESS;} else {return ACTIVATION_FAILURE;}} }4. 創建控制器
在LoginController中編寫注冊相應的控制器方法。
package com.nowcoder.mycommunity.controller;import com.nowcoder.mycommunity.dao.UserMapper; import com.nowcoder.mycommunity.entity.User; import com.nowcoder.mycommunity.service.UserService; import com.nowcoder.mycommunity.util.CommunityConstant; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod;import java.util.Map;@Controller public class LoginController implements CommunityConstant {@Autowiredprivate UserService userService;//登錄頁面@RequestMapping(path = "/login", method = RequestMethod.GET)public String getLoginPage(){System.out.println("lalala");return "/site/login";}//注冊頁面@RequestMapping(path = "/register", method = RequestMethod.GET)public String getRegisterPage(){return "/site/register";}@RequestMapping(path="/register",method = RequestMethod.POST)public String register(Model model, User user){Map<String, Object> map = userService.register(user);//map為空，說明注冊成功了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";}}@RequestMapping(path = "/activation/{userId}/{code}", method = RequestMethod.GET)public String activation(Model model,@PathVariable("userId") int userId,@PathVariable("code") String code){System.out.println("我進來了！");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";} }這里還創建了一個常量接口，用于存放常量：
util目錄下，新建接口：CommunityConstant
//常量接口 public interface CommunityConstant {//激活成功int ACTIVATION_SUCCESS = 0;//重復激活int ACTIVATION_REPEAT = 1;//激活失敗int ACTIVATION_FAILURE = 2; }5. 其他html
activation.html:
<!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>operate-result.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 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>總結
以上是生活随笔為你收集整理的牛客网项目3：注册、激活功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android仿苹果悬浮窗,Androi
- 下一篇： IDEA热部署设置