SSM项目蟹堡王餐厅管理系统（三）注册、登录与主页的实现

本文链接：https://blog.csdn.net/RHchino/article/details/120047394

本文介绍了蟹堡王餐厅管理系统中注册、登录和主页的实现。详细阐述了登录功能，包括验证码刷新、登录请求处理、数据库查询及逻辑判断。注册功能的实现包括注册请求处理、数据验证、用户插入数据库及权限设置。同时，讨论了主页的编写，包括老板、员工和注册用户的界面，以及登出功能和拦截器的设置，确保用户权限管理的完整性和安全性。

摘要由CSDN通过智能技术生成

一、页面简介

（一）登录页面简介

在登陆界面，我们需要实现登录功能以及跳转注册功能。
（1）登录功能简介
本项目中，登录功能需要用户正确的输入用户名、密码以及验证码，在登陆成功后，判断用户的身份，跳转到相对应的主页。在访问用户未持有账号的情况下，需要能够跳转到注册界面进行注册。
在这里插入图片描述

（二）注册页面简介

在注册界面，用户可以输入用户名、密码以及选择性别进行注册。
在这里插入图片描述

（三）主页简介

本项目的主页面分为三种，老板界面、员工界面以及注册用户界面，分别对应三种用户权限老板、员工、注册用户（0、1、2）。
（1）老板界面
在老板界面我们需要实现的功能包括：个人信息的修改、用户管理、菜品管理、菜品上传、订单查询以及登出。
在这里插入图片描述
（2）员工界面
在老板界面我们需要实现的功能包括：个人信息的修改、菜品管理、菜品上传、订单查询以及登出。

（3）注册用户界面
在注册用户界面我们需要实现的功能包括：个人信息的修改、点餐、购物车、提交订单以及登出。
在这里插入图片描述

二、页面编写和功能实现

（一）登录界面编写

<%--
  Created by IntelliJ IDEA.
  User: RH
  Date: 2021/8/9
  Time: 15:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录界面</title>
    <script src="js/jquery.min.js"></script>

    <link rel="stylesheet" href="css/stylecss.css">
</head>
<body background="images/bg.png">
<div class="box">
    <h2>Login</h2>

    <div class="inputBox">
        <input type="text" name="userName" placeholder="请输入用户名">
        <label>用户名</label>
    </div>
    <div class="inputBox">
        <input type="password" name="userPsd" placeholder="请输入密码">
        <label>密码</label>
    </div>
    <div class="inputBox">
        <input type="text" name="captcha" placeholder="请输入验证码">
        <img src="captcha" style="width:85px" onclick="reloadCaptcha()"/>
        <label>验证码</label>
    </div>

    <button onclick="login()">登陆</button><br>
    <div style="text-align: right;color: white">
        无账号？<a href="register.jsp">立即注册</a>
    </div>
</div>


<script>


    //点击图片重新刷新验证码
    function reloadCaptcha(){
     
        loadCaptcha();
    }
    //刷新验证码
    function loadCaptcha(){
     
        path = $("img").attr("src")+"?"+new Date().getTime();
        $("img").attr("src",path);
    }


    function login(){
     
        var userName = $("input[name='userName']").val();
        var userPsd = $("input[name='userPsd']").val();
        var captcha = $("input[name='captcha']").val();
        $.ajax({
     
            url:"login",//请求地址，相当于form得action
            type:"post",//请求方式相当于form得method
            data:{
     //前端要给后台发送的数据
                userName:userName,
                userPsd:userPsd,
                captcha:captcha
            },
            dataType:"json", //前后端交互数据的格式
            success:function(result){
     //result是后台传给前端得数据  result == ResultMap:status、message
                if(result.status == true && result.authority==0){
     
                    location.href = "index.jsp";
                }else if (result.status == true && result.authority==1){
     
                    location.href = "index1.jsp";
                }
                else if (result.status == true && result.authority==2){
     
                    location.href = "index2.jsp";
                }
                else{
     
                    loadCaptcha();//如果登陆失败，重新刷新验证码
                    alert(result.message);
                }
            }
        });
    }
</script>

</body>
</html>

（二）登陆功能实现

（1）验证码的刷新
在访问登录界面是，会首先刷新一张验证码图片，当点击验证码时，会调用reloadCaptcha()函数，重新调用loadCaptcha()函数刷新验证码。
在这里插入图片描述
（2）登录请求
当用户单击登录按钮时，会调用login()函数，此时前端会向后端的Controller层发送一个login请求，请求通过ajax发送，将携带userName、userPsd、captcha（用户名、密码、验证码），到Controller层寻找相对应的请求地址。
在这里插入图片描述
此时我们需要编写一个UserController、UserServiceI接口、UserServiceImpl接口实现类、UserDao接口、usermapper.xml映射文件。
在UserController中编写login方法接收请求。

@Controller
public class UserController {
   

    @Autowired
    private UserServiceI userServiceI;
    @Autowired
    private ResultMap resultMap;

    @RequestMapping("/login")
    @ResponseBody
    public ResultMap login(String userName, String userPsd, String captcha , HttpSession session) {
   
        try {
   
            int authority=userServiceI.login(userName,userPsd,captcha,session);
            resultMap.setStatus(true);
            resultMap.setAuthority(authority);
        } catch (Exception e) {
   
            resultMap.setStatus(false);
            resultMap.setMessage(e.getMessage());
        }
        return resultMap;
    }

}

在UserServiceI编写login方法，通过UserServiceImpl实现。
并在UserServiceImpl中新建User对象，调用UserDao查询数据库，获取数据，并进行逻辑判断，判断数据是否正确以及是否为空，如果数据错误返回错误信息，登陆失败，如果数据正确，将数据存入session中命名为user（这个session后面会大量使用）。
在这里插入图片描述
User类：

package com.RH.db.pojo;

public class User {
   

    private String userName;
    private String userPsd;
    private String sex;
    private String imgPath;
    private int uid;
    private String headImg;

    private int authorityType;


    public User() {
   
    }

    public User(String userName, String userPsd) {
   
        this.userName = userName;
        this.userPsd = userPsd;
    }


    public int getAuthorityType() {
   
        return authorityType;
    }

    public void setAuthorityType(int authorityType) {
   
        this.authorityType = authorityType;
    }

    public String getUserPsd() {
   
        return userPsd;
    }

    public void setUserPsd(String userPsd) {
   
        this.userPsd = userPsd;
    }

    public String getHeadImg() {
   
        return headImg;
    }

    public void setHeadImg(String headImg) {
   
        this.headImg = headImg;
    }

    public int getUid() {
   
        return uid;
    }

    public void setUid(int uid) {
   
        this.uid = uid;
    }

    public String getUserName() {
   
        return userName;
    }

    public void setUserName(String userName) {
   
        this.userName = userName;
    }

    public String getSex() {
   
        return sex;
    }

    public void setSex(String sex) {
   
        this.sex = sex;
    }

    public String getImgPath() {
   
        return imgPath;
    }

    public void setImgPath(String imgPath) {
   
        this.imgPath = imgPath;
    }
}

UserServiceI接口：

public interface UserServiceI {
   

    public int login(String userName, String userPsd, String captcha, HttpSession session);
}

UserServiceImpl接口实现类：

@Service
public class UserServiceImpl implements UserServiceI{
   

    @Autowired
    private UserDao userDao;

    @Override
    public int login(String userName, String userPsd, String captcha, HttpSession session) {
   
        if(userName.equals("")) {
   
            throw new RuntimeException("用户名不能为空！");
        }
        if(userPsd.equals("")) {
   
            throw new RuntimeException("密码不能为空！");
        }
        if(captcha.equals("")) {
   
            throw new RuntimeException("验证码不能为空！");
        }

        String cap= (String) session.getAttribute("captcha");

        if(!captcha.equalsIgnoreCase(cap)){
   
            throw new RuntimeException("验证码有误！");
        }

        User user = new User(userName,userPsd);
        user