本文共 5040 字，大约阅读时间需要 16 分钟。

1、功能效果演示

2、技术涉及

1、登入模块，前后端分离，通过axios进行代理请求整体基于springboot+vue+shiro实现

2、cli 3.4.1+vue 2.5.2

3、主要逻辑代码

1. 登入页面

2、滑块组件

3、后端接口主要代码

@RequestMapping("/login")    public Result login(HttpServletRequest request){
           String loginName = request.getParameter("name");        String password = request.getParameter("password");        request.getSession().setAttribute("loginName",loginName);        System.out.println("我是登录页的"+request.getSession().getAttribute("loginName"));        System.out.println(loginName+"---->"+password);        UserToken token = new UserToken(LoginType.USER_PASSWORD, loginName, password);        return shiroLogin(token,LoginType.USER_PASSWORD);    }

*登入页面涉及的其他文件

export const mixin = {    methods:{        //提示信息        notify(title,type){            this.$notify({                title: title,                type: type            })        },        //根据相对地址获取绝对地址        getUrl(url){            return `${this.$store.state.HOST}/static/images${url}`        },        //获取性别中文        changeSex(value){            if(value == 0){                return '女';            }            if(value == 1){                return '男';            }            if(value == 2){                return '组合';            }            if(value == 3){                return '不明';            }            return value;        },        //获取生日        attachBirth(val){            return String(val).substr(0,10);        },        //上传图片之前的校验        beforeAvatorUpload(file){            const isJPG = (file.type === 'image/jpeg')||(file.type === 'image/png');            if(!isJPG){                this.$message.error('上传头像图片只能是jpg或png格式');                return false;            }            const isLt2M = (file.size / 1024 /1024) < 2;            if(!isLt2M){                this.$message.error('上传头像图片大小不能超过2MB');                return false;            }            return true;        },        //上传图片成功之后要做的工作        handleAvatorSuccess(res){            let _this = this;            if(res.code == 1){                _this.getData();                _this.$notify({                    title: '上传成功',                    type: 'success'                });            }else{                _this.$notify({                    title: '上传失败',                    type: 'error'                });            }        },        //弹出删除窗口        handleDelete(id){            this.idx = id;            this.delVisible = true;        },        //把已经选择的项赋值给multipleSelection        handleSelectionChange(val){            this.multipleSelection = val;            console.log("this.multipleSelection---6757457--->"+this.multipleSelection)        },        //批量删除已经选择的项        delAll(){          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {            confirmButtonText: '确定',            cancelButtonText: '取消',            type: 'warning'          }).then(() => {            for(let item of this.multipleSelection){              //console.log(item);              if(item.userId!=undefined){                this.handleDelete(item.userId);                this.deleteRow();              }else if(item.moveCategoryId!=undefined){                this.handleDelete(item.moveCategoryId);                this.deleteRow();              }else if(item.moveId!=undefined){                this.handleDelete(item.moveId);                this.deleteRow();              }            else if(item.songListId!=undefined){              this.handleDelete(item.songListId);              this.deleteRow();            }              else if(item.musicCategoryId !=undefined){                this.handleDelete(item.musicCategoryId );                this.deleteRow();              }              else if(item.songerId != undefined && item.songerName!=undefined){                this.handleDelete(item.songerId);                this.deleteRow();              }              else if(item.musicId!=undefined && item.musicName !=undefined){                this.handleDelete(item.musicId);                this.deleteRow();              }              else{                alert("客官！你还没来设置哦！")              }            }            this.multipleSelection = [];            this.$message({              type: 'success',              message: '删除成功!'            });          }).catch(() => {            this.$message({              type: 'info',              message: '已取消删除'            });          });        }    }}

2、登入接口API

// 判断管理员是否登录成功export const getLoginStatus = (params) => post(`admin/login`,params);

对于后端接口由于涉及到shiro实现的多ream认证，所以打算在下期分享shiro实现用户名密码、手机号、短信验证登入。望谅解，如遇疑问欢迎大家留言！QQ: 2817670312

顺便可以关注微信公众号：幽灵邀请函 了解其他文章及疑问解答。

转载地址：http://nnuzi.baihongyu.com/