实习课知识整理5：在首页实现登录

项目情景：当我们未登录进入一个购物网站时，这是我们突然想要登录了，我们就可以使用首页上的登录按钮，直接登录

方法1：非常简单

直接将登录的接口放到action属性中，这边登录怎么实现的，可以参考：http://t.csdnimg.cn/Szvp2 

 

方法2：利用ajax实现局部刷新 

在这里的话，我就不用之前写的登录接口了，我重新写了一个，这边用到了DTO类来封装返回的信息 

DTO类

package com.example.shopping.entity;

import java.io.Serializable;
import java.util.List;

public class ResultDTO implements Serializable {
    private int code;
    private String msg;
    private T data;
    private List datas;

    public ResultDTO() {
    }

    public ResultDTO(int code, String msg, T data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

    public ResultDTO(int code, String msg, List datas) {
        this.code = code;
        this.msg = msg;
        this.datas = datas;
    }

    // Getters and setters

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public List getDatas() {
        return datas;
    }

    public void setDatas(List datas) {
        this.datas = datas;
    }
}

 

因为在之前已经写过登录的通过用户名来查询用户的方法了，这里就可以直接使用了 

html页面代码 

UserService.java接口

    // 登录业务逻辑使用DTO作为返回值
    ResultDTO loginDTO(User user);

 UserServiceImpl实现类

    @Override
    public ResultDTO loginDTO(User user) {
        ResultDTO loginResult = new ResultDTO<>();  // 首先实例化
        User userByName = userMapper.findUserByName(user.getUserName());
        if (null == userByName) {
            loginResult.setMsg("nameError");  /*用户名不存在*/
            loginResult.setCode(5000);
        } else {
            if (userByName.getPassWord().equals(user.getPassWord())) {
                if (1 == userByName.getState()) {
                    if (1 == userByName.getRole()) {
                        loginResult.setMsg("custom");
                        ;  /*普通用户*/
                        loginResult.setCode(2000);
                        loginResult.setData(userByName);
                    } else if (8 == userByName.getRole()) {
                        loginResult.setMsg("itemAdmin");   /*商品管理员*/
                        loginResult.setCode(2000);
                    } else if (9 == userByName.getRole()) {
                        loginResult.setMsg("superAdmin");   /*超级管理员*/
                        loginResult.setCode(2000);
                    } else {
                        loginResult.setMsg("otherError");
                        loginResult.setCode(5000);
                    }
                } else {
                    loginResult.setMsg("stateError");  /*只有状态为 1 才可以登录*/
                    loginResult.setCode(5000);
                }
            } else {
                loginResult.setMsg("passWordError");  /*密码错误*/
                loginResult.setCode(5000);

            }
        }
        return loginResult;
    }

 

 UserController

    // 登录功能的controller， 返回值使用json格式，配合ajax使用，实现局部刷新
    // http://localhost:8082/project/user/loginIndexDTO
    @RequestMapping("/loginIndexDTO")
    @ResponseBody
    public ResultDTO loginIndexDTO(User user) throws Exception{
        System.out.println(user.toString());
        return userService.loginDTO(user);
    }

 

前端使用jQuery编写js文件 

$(function () {
    $("#btn").click(function () {
        // 考虑到登录功能完成
        const username = $("#userName").val();
        const password = $("#passWord").val();
        $.ajax({
            type: 'post',
            url: 'http://localhost:8082/project/user/loginIndexDTO?userName='+username+'&passWord='+password,  // 需要写上后台接受的地址
            contentType:'',     // 指定后端接受的类型， 如果后端不需要json格式，可以不填
            dataType: 'json',   // 指定后端返回前端的数据类型， 建议使用json格式
            success: function (data) {
                // ajax回调函数，根据结果，我们进行页面数据的处理
                console.log("data:",data)

                if (data.code == 2000)
                {
                    $("#showUserName").text(data.data.userName)
                    $("#showImg").attr("src", data.data.userImage)
                    $("#area1").css("display", "block");
                    $("#area2").css("display", "none");
                } else {
                    console.log("登录失败，请检查用户名和密码！")
                }
            },
            error: function (err) {
                console.log("e:",e)
            },
        })

    })

})