目次
(1). その後のジョイントのデバッグを容易にするために、カプセル化された axios インターフェイスを導入します。
レンダリング
1.テンプレート部分
<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 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部分
(1). その後のジョイントのデバッグを容易にするために、カプセル化された axios インターフェイスを導入します。
import {GetLogin} from "@/Api/api";
ここでは誰もが異なります、これは単なる私のカプセル化です
(2) 形式
引き金 | トリガーメソッド | 弦 | クリック/フォーカス/ホバー/手動 | クリック |
必要 | 必須ですか? 設定されていない場合は、検証ルールに従って自動的に生成されます | ブール値 | — | 間違い |
ぼかし | 入力がフォーカスを失ったときにトリガーされます | (イベント:イベント) |
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).メソッドセクション
検証 | フォーム全体を検証するメソッド、パラメータはコールバック関数です。検証が完了するとコールバック関数が呼び出され、検証が成功したかどうかと検証に失敗したフィールドの 2 つのパラメータが渡されます。コールバック関数が渡されない場合は、Promise が返されます。 | 関数(コールバック: 関数(ブール値、オブジェクト)) |
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. 完全なコード
<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>