Java：项目开发系列——第一章 用户登录功能

项目开发-用户登录功能

---

---

前言

整合tkMapper后的用户登录接口、前端数据校验、登录校验的实现

一、登录实现流程

二、后端接口开发

• 完成DAO操作
• 完成Service业务
• 完成Controller提供接口

1. DAO层操作

1.1 分析数据表结构

1.2 添加测试数据

1.3 编写sql语句

SELECT * FROM users WHERE username = "zhangsan";

2. Service层业务

2.1 定义状态码

在后端创建一个类，用来存储响应数据的状态码

package com.xiaoqing.xqmail.utils;

public class ResStatus {

    public static final int OK = 10000;
    public static final int NO = 10001;
}

2.2 创建UserService接口

• UserService

public interface UserService {
	
	//用户登录
	public ResultVo checkLogin(String username,String password);
}

2.3 创建UserServiceImpl实现类

• UserServiceImpl

@Service
public class UserServiceImpl implements UserService {

    @Resource
    private UsersMapper usersMapper;

    @Override
    public ResultVo checkLogin(String username, String password) {

        Example exampl = new Example(Users.class);
        Example.Criteria criteria = exampl.createCriteria();
        criteria.andEqualTo("username",username);
        List<Users> users = usersMapper.selectByExample(exampl);

        if (users.size() == 0){
            return new ResultVo(ResStatus.NO,"登录失败,用户名不存在！",null);
        }else {
            String md5Pwd = MD5Utils.md5(password);
            if(md5Pwd.equals(users.get(0).getPassword())){
                return new ResultVo(ResStatus.OK,"登录成功！", users.get(0));
            }else {
                return new ResultVo(ResStatus.NO,"登录失败,密码错误！",null);
            }
        }
    }
}

3. Controller层接口

• UserController

@Controller
@ResponseBody
@RequestMapping("/user")
@Api(value = "提供用户列表接口",tags = "用户管理")
@CrossOrigin
public class UserController {

    @Resource
    private UserService userService;

    @ApiOperation("用户登录接口")
    @ApiImplicitParams({
            @ApiImplicitParam(dataType = "string",name = "username",value = "用户登录账号",required = true),
            @ApiImplicitParam(dataType = "string",name = "password",value = "用户登录密码",required = true)
    })
    @GetMapping(value = "/login")
    public ResultVo login(@RequestParam("username") String name,
                          @RequestParam(value = "password") String pwd){

        ResultVo resultVo = userService.checkLogin(name, pwd);
        return  resultVo;
    }
}

4. 接口测试

基于swagger测试测试

登录用户：jack 正确密码：888888

登录用户：jack 错误密码：123456

登录不存在的用户：marry

三、前端功能实现

1. 前端跨域访问

• 在前端通过JSONP的设置，允许前端跨域
• 在后端设置响应数据允许跨域–在控制器类上添加@CrossOrigin设置响应头允许访问

2. 数据校验功能

①检查账号是否为空，为空提示错误信息

②账号不为空，检查账号是否符合规则，不符合提示错误信息

③账号规则​符合，检查密码是为空，为空提示错误信息

​④密码不为空， 检查密码是否符合规则，不符合提示错误信息

​⑤密码符合，通过

2.1 HTML

2.2 JavaScript

代码

<script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el:"#container",
        data:{
            username:"",
            password:"",
            tips:"",
            colorStyle:"color:red",
            isRight:false
        },
        methods:{
            doSubmit:function(){
                if(vm.isRight){
                    alert("可以提交了")
                }else{
                    vm.tips = "请正确输入账号和密码！"
                }
            },
            checkInfo:function(){
                //校验账号
                if(vm.username == ""){
                    vm.tips = "请输入账号！"
                    vm.isRight = false;
                }else if(vm.username.length < 8 || vm.username.length > 20){
                    vm.tips = "账号长度必须为8-20位字符！";
                    vm.isRight = false;
                }else{
                    //账号合法，校验密码
                    if(vm.password == ""){
                        vm.tips = "请输入密码！"
                        vm.isRight = false;
                    }else if(vm.password.length < 6 || vm.password.length > 16){
                        vm.tips = "密码长度必须为6-16位字符！";
                        vm.isRight = false;
                    }else{
                        vm.tips = ""
                        vm.isRight = true;
                    }
                }
            }
        }
    });
</script>

3. 登录验证功能

发送ajax请求，根据响应数据的code判断是否正确

3.1 JavaScript

代码

<script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript" src="static/js/axios.min.js"></script></script>
    <script type="text/javascript">
        var baseUrl = "http://localhost:8080/"

var vm = new Vue({
    el:"#container",
    data:{
        username:"",
        password:"",
        tips:"",
        colorStyle:"color:red",
        isRight:false
    },
    methods:{
        doSubmit:function(){
            if(vm.isRight){
                var url = baseUrl + "user/login";
                axios.get(url,{
                    params:{
                        username:vm.username,
                        password:vm.password
                    }	
                }).then((res)=>{
                    //res.data才表示接口返回的数据
                    var vo = res.data;
                    if(vo.code == 10000){
                        window.location.href = "index.html";
                    }else{
                        vm.tips = "登陆失败，账号或密码错误！";
                    }
                });
            }else{
                vm.tips = "请正确输入账号和密码！"
            }
        },
        checkInfo:function(){
            //校验账号
            if(vm.username == ""){
                vm.tips = "请输入账号！"
                vm.isRight = false;
            }else if(vm.username.length < 8 || vm.username.length > 20){
                vm.tips = "账号长度必须为8-20位字符！";
                vm.isRight = false;
            }else{
                //账号合法，校验密码
                if(vm.password == ""){
                    vm.tips = "请输入密码！"
                    vm.isRight = false;
                }else if(vm.password.length < 6 || vm.password.length > 16){
                    vm.tips = "密码长度必须为6-16位字符！";
                    vm.isRight = false;
                }else{
                    vm.tips = ""
                    vm.isRight = true;
                }
            }
        }
    }
});
</script>
``+