Table of contents
(1). Introduce the encapsulated axios interface to facilitate subsequent joint debugging
renderings
1. template part
<div>
<el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
<h3 class="login_title">系统登录</h3>
<el-form-item label="用户名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input show-password v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="submit" class="login_button" type="primary"> 登 录 </el-button>
</el-form-item>
</el-form>
</div>
2. style part
Here I use less to write,
Need to download less and less-loader
<style lang="less" scoped>
.login-container {
width: 400px;
border:1px solid #eaeaea;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 15px;
box-shadow: 0 0 25px #cac6c6;
background-color: #ffffff;
box-sizing: border-box;
.login_title {
text-align: center;
margin-bottom: 40px;
color: #505458;
}
.el-input {
width: 198px;
}
.login_button {
margin-left: 105px;
margin-top: 10px;
}
.login_register {
width: 70px;
height: 40px;
text-align: center;
margin-top: 10px;
}
}
3. vue part
(1). Introduce the encapsulated axios interface to facilitate subsequent joint debugging
import {GetLogin} from "@/Api/api";
Everyone's different here, this is just my encapsulation
(2) Form
trigger | trigger method | String | click/focus/hover/manual | click |
required | Is it required? If not set, it will be automatically generated according to the verification rules | boolean | — | false |
blur | Triggered when the Input loses focus | (event: Event) |
data() {
return {
form: {
userName:'',
password:'',
},
rules: {
userName: [
{
required: true,
trigger: 'blur',
message: '长度在6到16个字符',
min: 6, max: 16,
}
],
password: [
{
required: true,
trigger: 'blur',
message: '请输入密码',
min: 6, max: 16,
}
],
}
}
},
(3).methods section
validate | The method to validate the entire form, the parameter is a callback function. The callback function will be called after the verification is completed, and two parameters are passed in: whether the verification is successful and the field that failed the verification. If no callback function is passed in, a promise will be returned | Function(callback: Function(boolean, object)) |
methods: {
//提交方法
submit() {
this.$refs.validate((valid) => {
if (valid) {
// 封装的接口使用
GetLogin({
// 表单的数据
userName: this.form.userName,
password: this.form.password,
}).then(({data}) => {
// console.log(data)
if (data.code === 200) {
//将token存储在本地
localStorage.setItem('token',data.data.token)
//若登录成功则跳转到指定路由
this.$router.push('/')
} else {
this.$message.error(data.data.rules.message)
}
})
}
})
}
}
4. Complete code
<template>
<div>
<el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
<h3 class="login_title">系统登录</h3>
<el-form-item label="用户名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input show-password v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="submit" class="login_button" type="primary"> 登 录 </el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {GetLogin} from "@/Api/api";
export default {
name: "AppLogin",
data() {
return {
form: {
userName:'',
password:'',
},
rules: {
userName: [
{
required: true,
trigger: 'blur',
message: '长度在6到16个字符',
min: 6, max: 16,
}
],
password: [
{
required: true,
trigger: 'blur',
message: '请输入密码',
min: 6, max: 16,
}
],
}
}
},
methods: {
//提交方法
submit() {
this.$refs.validate((valid) => {
if (valid) {
// 封装的接口使用
GetLogin({
// 表单的数据
userName: this.form.userName,
password: this.form.password,
}).then(({data}) => {
// console.log(data)
if (data.code === 200) {
//将token存储在本地
localStorage.setItem('token',data.data.token)
//若登录成功则跳转到指定路由
this.$router.push('/')
} else {
this.$message.error(data.data.rules.message)
}
})
}
})
}
}
}
</script>
<style lang="less" scoped>
.login-container {
width: 400px;
border:1px solid #eaeaea;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 15px;
box-shadow: 0 0 25px #cac6c6;
background-color: #ffffff;
box-sizing: border-box;
.login_title {
text-align: center;
margin-bottom: 40px;
color: #505458;
}
.el-input {
width: 198px;
}
.login_button {
margin-left: 105px;
margin-top: 10px;
}
.login_register {
width: 70px;
height: 40px;
text-align: center;
margin-top: 10px;
}
}
</style>