|
|
|
|
@ -0,0 +1,173 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div id="building">
|
|
|
|
|
<el-card style="background-color: rgba(255,255,255,85%)" class="login_container" shadow="always">
|
|
|
|
|
<el-form label-width="80px" ref="form" :model="form" :rules="rules">
|
|
|
|
|
<img id="im" src="@/assets/logo1.png" alt="好花">
|
|
|
|
|
<h3 class="login_title">欢迎登录好花网</h3>
|
|
|
|
|
<el-form-item label="用户名" prop="user_name" style="margin-bottom: 35px;margin-top: 60px">
|
|
|
|
|
<el-input v-model="form.user_name" placeholder="请输入账号"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="密码" prop="user_pwd">
|
|
|
|
|
<el-input type="password" v-model="form.user_pwd" placeholder="请输入密码"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="验证码" prop="identify_code">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-input placeholder="请输入验证码" v-model="form.identify_code"></el-input>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="13">
|
|
|
|
|
<div class="login-code" style="width:100%" @click="refreshCode">
|
|
|
|
|
<identify :identifyCode="identifyCode"></identify>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button @click="submit" id="button" type="danger">登 录</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-link @click="navTo('/register')" :underline="false" style="font-weight: normal;margin-top: -15px">没有账号？立即注册</el-link>
|
|
|
|
|
</el-form>
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import Cookie from 'js-cookie'
|
|
|
|
|
import identify from "./identify.vue";
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
identify,
|
|
|
|
|
},
|
|
|
|
|
data(){
|
|
|
|
|
//验证码校验
|
|
|
|
|
const _this = this;
|
|
|
|
|
const equalToIdentify = (rule, value, callback) => {
|
|
|
|
|
if (_this.identifyCode !== value) {
|
|
|
|
|
callback(new Error("验证码错误"));
|
|
|
|
|
} else {
|
|
|
|
|
callback();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
form:{
|
|
|
|
|
user_name:'',
|
|
|
|
|
user_pwd:'',
|
|
|
|
|
identify_code:''
|
|
|
|
|
},
|
|
|
|
|
identifyCodes: "1234567890abcdefjhijklinopqrsduvwxyz", //随机串内容,从这里随机抽几个显示验证码
|
|
|
|
|
identifyCode: "", //验证码图片内容
|
|
|
|
|
rules:{
|
|
|
|
|
user_name:[
|
|
|
|
|
{ required:true, trigger:'blur', message:'请输入用户名'}
|
|
|
|
|
],
|
|
|
|
|
user_pwd:[
|
|
|
|
|
{ required:true, trigger:'blur', message:'请输入密码'}
|
|
|
|
|
],
|
|
|
|
|
identify_code: [
|
|
|
|
|
{ required:true, trigger:'blur', message:'请输入验证码' },
|
|
|
|
|
{ validator: equalToIdentify, trigger: "blur" }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// 初始化验证码
|
|
|
|
|
this.identifyCode = "";
|
|
|
|
|
//参数：（1）随机串内容。（2）验证码显示位数
|
|
|
|
|
this.makeCode(this.identifyCodes, 4);
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
//登录
|
|
|
|
|
submit(){
|
|
|
|
|
const _this=this
|
|
|
|
|
this.$refs.form.validate( (valid) => {
|
|
|
|
|
if(valid){
|
|
|
|
|
try {
|
|
|
|
|
axios({
|
|
|
|
|
method: 'post',
|
|
|
|
|
url: 'http://localhost:8181/user/login',
|
|
|
|
|
data:{
|
|
|
|
|
user_name:_this.form.user_name,
|
|
|
|
|
user_pwd:_this.form.user_pwd
|
|
|
|
|
}
|
|
|
|
|
}).then(function (response){
|
|
|
|
|
if (response.data.code===200) {
|
|
|
|
|
//登录成功
|
|
|
|
|
//token信息
|
|
|
|
|
const token = response.data.token
|
|
|
|
|
//将token信息存入cookie用于不同页面的通信
|
|
|
|
|
Cookie.set('token',token)
|
|
|
|
|
|
|
|
|
|
//跳转到首页
|
|
|
|
|
_this.$router.push('/home')
|
|
|
|
|
_this.$message({message: response.data.msg, type: 'success'});
|
|
|
|
|
}
|
|
|
|
|
if (response.data.code===403) {
|
|
|
|
|
_this.$message.error(response.data.msg);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}catch (error)
|
|
|
|
|
{
|
|
|
|
|
_this.$message.warning('页面加载出错,请重试!')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
navTo(url){
|
|
|
|
|
location.href = url
|
|
|
|
|
},
|
|
|
|
|
//验证码相关
|
|
|
|
|
// 重置验证码
|
|
|
|
|
refreshCode() {
|
|
|
|
|
this.identifyCode = "";
|
|
|
|
|
this.makeCode(this.identifyCodes, 4);
|
|
|
|
|
},
|
|
|
|
|
//获取验证码的值
|
|
|
|
|
makeCode(o, l) {
|
|
|
|
|
for (let i = 0; i < l; i++) {
|
|
|
|
|
//通过循环获取字符串内随机几位
|
|
|
|
|
this.identifyCode +=
|
|
|
|
|
this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//随机数字：用于当角标拿字符串的值
|
|
|
|
|
randomNum(min, max) {
|
|
|
|
|
return Math.floor(Math.random() * (max - min) + min);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
#building{
|
|
|
|
|
background:url("@/assets/background.jpg");
|
|
|
|
|
width:100%;
|
|
|
|
|
height:100%;
|
|
|
|
|
position:fixed;
|
|
|
|
|
background-size:100% 100%;
|
|
|
|
|
}
|
|
|
|
|
.login_container{
|
|
|
|
|
width: 480px;
|
|
|
|
|
height: 450px;
|
|
|
|
|
border: 1px solid #eaeaea;
|
|
|
|
|
margin: 250px auto;
|
|
|
|
|
padding: 35px 50px 15px 35px;
|
|
|
|
|
}
|
|
|
|
|
.login_container #button{
|
|
|
|
|
margin-right:70px;
|
|
|
|
|
margin-top: -30px ;
|
|
|
|
|
width: 140px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
}
|
|
|
|
|
.login_title{
|
|
|
|
|
font-size:26px;
|
|
|
|
|
color:#d66760;
|
|
|
|
|
margin-left: 30px;
|
|
|
|
|
margin-top: -64px;
|
|
|
|
|
}
|
|
|
|
|
#im{
|
|
|
|
|
height: 85px;
|
|
|
|
|
width: 70px;
|
|
|
|
|
margin-left: -300px;
|
|
|
|
|
margin-top: -20px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
