实现效果
// template
服务器托管网 用户登陆
{{ viewCode }}
记住密码
登录
// js
// ---------分割线
data () {
return {
viewCode: '',
loginForm: {
account: '',
password: '',
src: '',
code: ''
},
fieldRules: {
account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
},
checked: false,
// 加载中的标志
loading: false
}
},
// ------ 分割线
methods: {
loginSubmit () {
if (!this.loginForm.account || !this.loginForm.password) {
this.$message.error('账号或密码不能为空!')
return
}
if (!this.loginForm.code || this.loginForm.code !== this.viewCode) {
this.$message.error('验证码不正确!')
return
}
this.loading = true
let userInfo = {
account: this.loginForm.account,
password: this.loginForm.password
}
//登陆接口
this.$api.login
.login(userInfo)
.then((res) => {
if (this.checked) {
let rememberInfo = JSON.stringify({ ...userInfo })
localStorage.setItem('rememberInfo', rememberInfo) // 记住密码时 保服务器托管网存login
} else {
localStorage.removeItem('rememberInfo')
}
this.$router.push('/') // 登录成功,跳转到主页
this.loading = false
})
.catch((err) => {
this.$message({ message: err.message, type: 'error' })
})
},
//获取验证码
getCode () {
this.viewCode = ''
let codeString = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
let codeArray = codeString.split('')
let num = codeArray.length
let newCodeArray = []
for (let i = 0; i
样式代码省略。。。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: Mybatis 拦截器实现单数据源内多数据库切换 | 京东物流技术团队
物流的分拣业务在某些分拣场地只有一个数据源,因为数据量比较大,将所有数据存在一张表内查询速度慢,也为了做不同设备数据的分库管理,便在这个数据源内创建了多个不同库名但表完全相同的数据库,如下图所示: 现在需要上线报表服务来查询所有数据库中的数据进行统计,那么现在…