一、核心功能實現
1. 用戶注冊功能
前端實現
-
用戶名實時校驗：通過AJAX異步請求檢查用戶名是否已存在。
function checkName() {$.ajax({url: '/users/checkUserName?uname=' + uname,success: function(resp) {if (resp.code == 200) alert("用戶名可用");else $("#info").html("<font color='red'>用戶名已被注冊</font>");}}); } -
密碼一致性校驗：提交前驗證兩次輸入的密碼是否一致
if (ps != rps) {alert("兩次密碼輸入不一致");return; } -
表單提交：使用
serialize()方法序列化表單數據并發送POST請求。$.ajax({url: '/users/register',data: $("#form-reg").serialize(),success: function(resp) {if (resp.code == 200) window.location.href = "/login.html";} });
后端實現
-
控制器層：處理注冊請求，返回JSON結果。
@RestController @RequestMapping("/users") public class UserController {@PostMapping("/register")public JsonResult register(User user) {boolean flag = userService.register(user);return flag ? new JsonResult(OK) : new JsonResult(FALL);} } -
服務層：密碼加密（MD5加鹽）及用戶數據持久化。
public boolean register(User user) {String md5Password = getMd5Password(user.getPassword(), user.getUsername());user.setPassword(md5Password);return userMapper.insert(user) > 0; } -
數據層：通過MyBatis操作數據庫。
<insert id="register">INSERT INTO t_user (username, password, salt) VALUES (#{username}, #{password}, #{salt}); </insert>
2. 用戶登錄功能
前端實現
-
回車鍵觸發登錄：監聽鍵盤事件，回車鍵提交表單。
$(window).keydown(function(e) {if (e.keyCode == 13) $("#btn-login").click(); }); -
登錄請求：提交用戶名和密碼至后端驗證。
$.ajax({url: '/users/login',data: $("#form-login").serialize(),success: function(resp) {if (resp.code == 200) window.location.href = "/index.html";} });
后端實現
-
控制器層：驗證用戶信息并存儲會話。
@PostMapping("/login") public JsonResult login(User user, HttpSession session) {User dbUser = userService.login(user);session.setAttribute("uid", dbUser.getUid());return new JsonResult(OK); } -
服務層：校驗用戶狀態與密碼。
public User login(User user) {User dbUser = userMapper.getUserByUsername(user.getUsername());if (dbUser == null) throw new UserNotFoundException("用戶不存在");if (!validatePassword(user.getPassword(), dbUser.getSalt(), dbUser.getPassword())) {throw new PasswordNotMatchException("密碼錯誤");}return dbUser; }
二、安全與優化策略
1. 密碼安全
-
加密方式：使用MD5加鹽（鹽值為用戶名）加密密碼。
private String getMd5Password(String password, String salt) {for (int i = 0; i < 3; i++) {password = DigestUtils.md5DigestAsHex((salt + password + salt).getBytes());}return password; } -
改進建議：推薦使用BCrypt等更安全的哈希算法，并生成隨機鹽值。
2. 防御措施
-
SQL注入防護：通過MyBatis參數綁定（
#{param}）避免注入。 -
會話管理：用戶登錄后通過Session存儲UID，敏感操作需校驗Session有效性。
-
輸入校驗：后端需重復驗證用戶名和密碼格式（如長度、特殊字符）。
三、頁面狀態管理
1. 動態菜單顯示
-
未登錄狀態：顯示“登錄”和“注冊”鏈接。
if (id == 0) {$("#mymenu").append("<li><a href='/login'>登錄</a></li>"); } -
已登錄狀態：顯示用戶ID和“退出”按鈕。
if (id != 0) {$("#mymenu").append("<li>用戶ID：" + id + "</li>");$("#mymenu").append("<li><a href='javascript:logout()'>退出</a></li>"); }
四、商品檢索功能
1. 前端實現
-
搜索表單提交：跳轉至搜索頁并攜帶參數。
<form action="/search.html" onsubmit="return validateSearch()"><input type="text" id="search" name="keyword"><button type="submit">搜索</button> </form> -
解析URL參數：獲取關鍵字并發送請求。
const keyword = new URLSearchParams(window.location.search).get("keyword"); $.ajax({url: '/product/search?keyword=' + keyword,success: function(resp) { /* 渲染結果 */ } });
2. 后端實現
-
模糊查詢：通過SQL的
LIKE實現。<select id="searchProducts">SELECT * FROM t_product WHERE title LIKE CONCAT('%', #{keyword}, '%'); </select>
空間）)
