SSM框架实现登陆注册功能-从零学习SSM框架(4)

小鱼儿 2022-05-12 14:56 200阅读 0赞

# 前言 #

很久没有做过后台开发了，最近朝花夕拾，重新回忆回忆SSM框架的基本知识。记记笔记。

# 正文 #

本文将从零开始实现网络中常用的登陆注册功能。所有操作均基于前几篇关于SSM框架文章操作。

## 准备 ##

依然是mysql数据库，数据库与表名和之前的一致，我这几篇文章是一个项目中的，哦哈哈哈哈，改一下字段就好，如下：  
![70][]

## 原理再现 ##

*  注册  
    所谓注册即是向系统中新增数据，新增一条登陆用户名，密码等等。
 *  登陆  
    登陆是将用户的输入数据与数据库中的原有数据进行对比，输入正确即对比成功则登陆成功进行相关操作，否则检测错误存在。

## 代码实现 ##

### 注册 ###

注册页面`index.jsp`

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Index</title>
        <script src="/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    </head>
    <body>
    <br>
    <br>
    <form action="/registe" method="post">
        <table>
            <tr>
                <td>
                    用户名：
                </td>
                <td>
                    <input type="text" name="name" placeholder="name">
                </td>
            </tr>
            <tr>
                <td>
                    密码：
                </td>
                <td>
                    <input type="password" name="password">
                </td>
            </tr>
            <tr>
                <td>
                     
                </td>
                <td>
                    <input type="submit" value="提交">
                </td>
            </tr>
        </table>
    </form>
    </body>
    <script type="text/javascript">
        $(function () {
            if ((${result})) {
                if ((${result}) == 1) {
                    alert("注册成功！");
                } else {
                    alert("未知错误，重新注册");
                }
            } else {
                alert("");
            }
        })
    </script>
    </html>

对应url`/registe`的controller映射函数

package com.springmvc.controller;
    
    
    import com.springmvc.entity.User;
    import com.springmvc.services.UserServices;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.ModelAttribute;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    
    import java.util.UUID;
    
    
    @Controller
    public class IndexController {
    
        @Autowired
        private UserServices userServices;
    
        @RequestMapping(value = "/registe",method = RequestMethod.POST)
        public String toregiste(@RequestParam String name, @RequestParam  String password, Model model) {
            User user = new User();
            String uuid = UUID.randomUUID().toString().replace("-", "").toLowerCase();
            user.setUuid(uuid);
            user.setName(name.trim());
            user.setPassword(password.trim());
            try {
                userServices.insert(user);
                model.addAttribute("result", "1");
            } catch (Exception e) {
                model.addAttribute("result", "0");
            }
            return "index";
    
        }
    }

运行一遍，即可以向数据库中插入用户数据了  
![70 1][]  
后台数据库数据存在了  
![在这里插入图片描述][70 2]

### 登陆 ###

新建`login.jsp`

<%--
      Created by IntelliJ IDEA.
      User: Nick
      Date: 2018/10/25
      Time: 10:05
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Login</title>
        <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    </head>
    <body>
    <br>
    <br>
    <form action="/login" method="post">
        <table>
            <tr>
                <td>
                    用户名：
                </td>
                <td>
                    <input type="text" name="name" placeholder="name">
                </td>
            </tr>
            <tr>
                <td>
                    密码：
                </td>
                <td>
                    <input type="password" name="password">
                </td>
            </tr>
            <tr>
                <td>
                     
                </td>
                <td>
                    <input type="submit" value="登陆">
                </td>
            </tr>
        </table>
    </form>
    </body>
    <script type="text/javascript">
        $(function () {
            if ((${result}) != null) {
                if ((${result}) == "1") {
                } else if ((${result}) == "0") {
                    alert("账号或密码不正确");
                } else if ((${result}) == "-1") {
                    alert("请填写完整");
                } else {
                    alert("c");
                }
            }
        })
    </script>
    </html>

以及对应的controller

@RequestMapping(value = "/login",method = RequestMethod.POST)
        public String toLogin(@RequestParam String name, @RequestParam  String password, Model model, HttpSession session) {
            if (name.equals("") || password.equals("")) {
                model.addAttribute("result", "-1");
    
            } else {
                User user = userServices.selectByName(name.trim());
                if (user !=null) {
                    if (password.equals(user.getPassword())) {
                        session.setAttribute("user", user);
                        model.addAttribute("user",user);
                        model.addAttribute("result", "1");
                        return "user";
                    }
                } else {
                    model.addAttribute("result", "0");
    
                }
            }
            return "login";
        }

登陆成功后的`user.jsp`

<%--
      Created by IntelliJ IDEA.
      User: Nick
      Date: 2018/10/25
      Time: 10:44
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>User</title>
        <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    </head>
    <body>
    你好，欢迎你${user.name},<a href="/logout">退出登陆</a>
    </body>
    </html>

退出登陆即销毁session，

@RequestMapping(value = "/logout")
        public String toLogout(HttpSession session) {
            session.removeAttribute("user");
            return "login";
        }

注册登陆退出的整体流程就是这样了

[70]: /images/20220504/160b72c301ea40049af45da2042d468f.png
[70 1]: /images/20220504/451070e293034a3eb710c3f6d5a723b3.png
[70 2]: /images/20220504/01cc480110f6432abffb450f32282e91.png