浅入深出Vue：登录
上一篇我们实现了注册功能，现在我们来实现一下登录功能。
准备工作
- 新建登录组件
- 添加登录组件的路由对象
新建登录组件 Login.vue:
<template>
<div>
</div>
</template>
<script>
export default {
name: "Login"
}
</script>
<style scoped>
</style>添加路由对象：
{
path: '/login',
name: 'login',
component: () => import('./views/Login.vue')
}登录页面代码
这里就是一个熟悉的过程了， 可以依照注册的代码来写：
<template>
<div>
<el-row>
<el-col :span="6" :offset="9">
<el-form label-width="80px">
<el-form-item label="用户名">
<el-input v-model="model.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="model.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="submit">登录</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "Login",
data() {
return {
model: {
username: '',
password: '',
}
}
},
methods: {
submit() {
axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/login', this.model)
.then(res => {
if(res.data.Code === 200) {
this.$message.success('登录成功');
}
})
}
}
}
</script>登录相比注册更简单一些， 因为这里无需在本地做判断，直接发起请求即可。
注册成功后跳转
上一篇中留了一个小坑， 那就是在注册成功之后跳转到登录页面：
代码：
submit() {
if(this.model.password !== this.model.rePassword){
this.$message.error('两次出入密码不一致.');
return ;
}
axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/signup', this.model)
.then(res => {
if(res.data.Code === 200){
this.$message.success("注册成功");
this.$router.push('/login');
}
});
}在请求成功后弹出提示消息后进行跳转，下面是效果：
写在后面
入门篇可能代码篇幅会较多一些，在后面若羽会将整个项目的代码传到 github 上去，让大家可以直接下载下来运行，修改。
入门篇主要是实践使用 axios、elementui、vue组件等方面的知识，看看代码是如何组织的。在这里并不会讲解如何优雅的写代码，或者是有哪些坑，这些内容都会在提高篇和深入篇进行详细讲解。
因为有对比才知道差距、好处、坏处。
举报
腾讯云开发者
