3a95b0c65a
Former-commit-id: 9b322c7225c23d032caeb8a7b3694fc8e998f55f Former-commit-id: 68c3992feece9098bcba4d3ff45330332ae40163 Former-commit-id: 27253c80559603a8fd37de5133fe4b6b9ef6ca08
122 lines
3.6 KiB
Vue
122 lines
3.6 KiB
Vue
<template>
|
|
<div class="login-page">
|
|
<div class="layer bg" id="login"></div>
|
|
<div class="layer flex-center">
|
|
<!-- logo部分 -->
|
|
<div class="logo-group">
|
|
<img src="@/assets/image/logo/w500.png" alt="logo">
|
|
</div>
|
|
<!-- 表单部分 -->
|
|
<div class="form-group">
|
|
<el-card>
|
|
<el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin">
|
|
<el-form-item prop="username">
|
|
<el-input type="text" v-model="formLogin.username" placeholder="用户名">
|
|
<i slot="prepend" class="fa fa-user-circle-o"></i>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input type="password" v-model="formLogin.password" placeholder="密码">
|
|
<i slot="prepend" class="fa fa-keyboard-o"></i>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="code">
|
|
<el-input type="text" v-model="formLogin.code" placeholder="- - - -">
|
|
<template slot="prepend">验证码</template>
|
|
<template slot="append">
|
|
<img class="login-code" src="static/image/login-code.png" alt="">
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-button @click="submit" type="primary" class="button-login">登陆</el-button>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
<!-- 帮助按钮 -->
|
|
<el-button type="info" class="button-help">
|
|
需要帮助
|
|
<i class="fa fa-question-circle"></i>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/* eslint-disable */
|
|
require('particles.js')
|
|
// 配置地址
|
|
// https://vincentgarreau.com/particles.js/#default
|
|
import config from './config/default'
|
|
import Cookies from 'js-cookie'
|
|
export default {
|
|
data () {
|
|
return {
|
|
formLogin: {
|
|
username: 'admin',
|
|
password: 'admin',
|
|
code: 'v9am'
|
|
},
|
|
rules: {
|
|
username: [
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
|
],
|
|
password: [
|
|
{ required: true, message: '请输入密码', trigger: 'blur' }
|
|
],
|
|
code: [
|
|
{ required: true, message: '请输入验证码', trigger: 'blur' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
// 初始化例子插件
|
|
particlesJS('login', config)
|
|
},
|
|
methods: {
|
|
// 提交登陆信息
|
|
submit () {
|
|
this.$refs.loginForm.validate((valid) => {
|
|
if (valid) {
|
|
// 开始请求登录接口
|
|
this.$axios({
|
|
method: 'post',
|
|
url: '/login',
|
|
data: {
|
|
username: this.formLogin.username,
|
|
password: this.formLogin.password
|
|
}
|
|
})
|
|
.then(res => {
|
|
this.$log('登录结果', res)
|
|
// cookie 一天的有效期
|
|
const setting = {
|
|
expires: 1
|
|
}
|
|
// 不要像下面这样写 请改写为你的保存用户逻辑
|
|
// 保存用户名密码 不等于真正保存到了本地
|
|
// Cookies.set('username', res.username, setting)
|
|
// Cookies.set('password', res.password, setting)
|
|
Cookies.set('token', res.token, setting)
|
|
// 跳转路由
|
|
this.$router.push({
|
|
name: 'index'
|
|
})
|
|
})
|
|
.catch(err => {
|
|
this.$log('错误信息', err)
|
|
})
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './style.scss';
|
|
</style>
|
|
|