1、功能效果演示
2、技术涉及
1、登入模块，前后端分离，通过axios进行代理请求整体基于springboot+vue+shiro实现
2、cli 3.4.1+vue 2.5.2
3、主要逻辑代码
- 登入页面
<template>
<div class="login-wrap">
<div class="ms-title">网欲音乐 后台管理登录</div>
<div class="ms-login">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
</el-form-item>
<!--滑块验证-->
<el-form-item>
<JcRange @successFun="onSuccessFun" />
</el-form-item>
<div class="login-btn">
<el-button type="primary" :loading="loading" @click="submitForm">登录</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
import {
mixin} from "../mixins/index";
import JcRange from "../components/jcRange"
import {
getLoginStatus} from "../api/index";
export default {
mixins:[mixin],
data: function(){
return {
loading: false,
status: false,
ruleForm:{
username: "jack",
password: "1234567"
},
rules:{
username:[
{
required:true,message:"请输入用户名",trigger:"blur"}
],
password:[
{
required:true,message:"请输入密码",trigger:"blur"}
]
}
};
},
methods:{
// 监听滑块成功事件
onSuccessFun(e) {
this.status = e;
},
submitForm(){
let params = new URLSearchParams();
params.append("name",this.ruleForm.username);
params.append("password",this.ruleForm.password);
if (!this.status) {
return this.$message.error("请按住滑块，拖动到最右边");
}
this.loading = true;
getLoginStatus(params)
.then((res) =>{
console.log(res)
this.loading = true;
if(res.code == 1){
console.log(res.data.user.userId)
console.log(res.data.user.userImg)
this.$store.commit('setUserId',res.data.user.userId);
this.$store.commit('setUserName',res.data.user.userName);
this.$store.commit('setUserImg',res.data.user.userImg);
sessionStorage.setItem('userId',res.data.user.userId);
sessionStorage.setItem('userName',this.ruleForm.username);
sessionStorage.setItem('userImg',res.data.user.userImg);
sessionStorage.setItem('access_token',res.token) //设置令牌
this.$router.push("/Info");
this.notify("登录成功","success");
}else{
this.notify("登录失败","error");
}
});
}
},
components:{
JcRange
}
}
</script>
<style scoped>
.login-wrap {
position: relative;
background: url("../assets/img/background.jpg");
background-attachment: fixed;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
}
.ms-title {
position: absolute;
top: 50%;
width: 100%;
margin-top: -230px;
text-align: center;
font-size: 30px;
font-weight: 600;
color: #fff;
}
.ms-login {
position: absolute;
left: 50%;
top: 50%;
width: 300px;
/*height: 160px;*/
margin-left: -190px;
margin-top: -150px;
padding: 40px;
border-radius: 5px;
background: #fff;
}
.login-btn {
text-align: center;
}
.login-btn button {
width: 100%;
height: 36px;
}
</style>
2、滑块组件
<template>
<div class="jc-component__range">
<div class="jc-range" :class="rangeStatus ? 'success' : '' ">
<div class="draggable_bg" ref="bg" :style="{
width: draggable }" ></div>
<i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon "></i>
{
{rangeStatus ? successText :startText}}
</div>
</div>
</template>
<script>
export default {
props: {
//成功图标
successIcon: {
type: String,
default: "el-icon-success"
},
//成功文字
successText: {
type: String,
default: "验证通过"
},
//开始的图标
startIcon: {
type: String,
default: "el-icon-d-arrow-right"
},
//开始的文字
startText: {
type: String,
default: "请按住滑块，拖动到最右边"
}
},
name: "Silder",
data() {
return {
rangeStatus: "",
draggable: 0
};
},
methods: {
rangeMove(e) {
let ele = e.target;
let startX = e.clientX;
let eleWidth = ele.offsetWidth;
let parentWidth = ele.parentElement.offsetWidth;
let MaxX = parentWidth - eleWidth;
if (this.rangeStatus) {
//不运行
return false;
}
document.onmousemove = e => {
let endX = e.clientX;
this.disX = endX - startX;
if (this.disX <= 0) {
this.disX = 0;
}
if (this.disX >= MaxX - eleWidth) {
//减去滑块的宽度
this.disX = MaxX;
}
this.$refs.bg.style.transition = ".0s all";
this.draggable = this.disX + 'px'; // 滑块中的背景
ele.style.transform = "translateX(" + this.disX + "px)";
ele.style.transition = ".0s all";
e.preventDefault();
};
document.onmouseup = () => {
if (this.disX !== MaxX) {
ele.style.transition = ".5s all";
ele.style.transform = "translateX(0)";
this.$refs.bg.style.transition = ".5s all";
this.draggable = 0 + 'px'; // 滑块中的背景
//执行成功的函数
this.$emit("errorFun", false);
} else {
this.rangeStatus = true;
this.draggable = 0; // 滑块中的背景
//执行成功的函数
this.$emit("successFun", true);
}
document.onmousemove = null;
document.onmouseup = null;
};
}
}
};
</script>
<style scoped>
.jc-range {
background-color: #e8e8e8;
position: relative;
transition: 1s all;
user-select: none;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 45px;
border-radius: 1px;
z-index: 9999;
/*no*/
}
.draggable_bg {
position: absolute;
left: 0;
height: 100%;
background-color: #7ac23c;
z-index: -1;
}
.jc-range i {
position: absolute;
left: 0;
width: 60px;
/*no*/
height: 100%;
color: #919191;
background-color: #fff;
border: 1px solid #bbb;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.jc-range.success {
background-color: #7ac23c;
color: #fff;
border-radius: 1px;
z-index: 99999;
}
.jc-range.success i {
color: #7ac23c;
}
</style>
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);
}
*登入页面涉及的其他文件
1、index.js
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
顺便可以关注微信公众号：幽灵邀请函 了解其他文章及疑问解答。