实习第一个任务-零基础用Vue之登录
进入公司实习将近两个星期,终于在国庆前接到了第一个任务,基于Vue与elementUI写一个前端页面并接上后端接口,一开始接到任务几近崩溃,一个是任务给的时间很紧大概就四天,二个是自己主要学的还是后端开发,对html这些东西只是了解,真正去写一个前端项目还是很头疼的,尤其是上来就是用vue。
开始
在动手之前还是在Vue官网上看了看起步文档,大致了解了一下最基本的Vue项目的构成。而且有大佬给的一个页面的模板,我这也算是依葫芦画瓢,有什么需要的功能与组件就去elementUI的官网去找,花了大概一天的时间,先将几个页面画了出来,当然,由于没有什么前端的经验,布局与样式与UI给出的差距还是很大的,但是,一开始我也没办法去美化样式(真的是能力不足),主要还是以功能为主。
异步请求
1、在前后端分离的项目中,前端一般都是通过异步请求来调用后端接口并获取数据,在Vue中使用异步请求时还是碰到了许多问题,第一个当然是最常见的前后端分离导致的跨域问题,由于本人萌新一个,仅仅只是知道有跨域这么一说,但是对这个问题怎么解决还是很茫然的。结果是请教大佬,大佬帮助完成跨域。
2、Vue的异步请求我使用的是axios,首先当然是引入依赖,在main.js中引入
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
通过指令 npm install --save axios vue-axios安装依赖包
引入依赖之后就可以通过下面的方式进行post请求了
this.axios.post({
"url", //请求地址,一般也就是后端API的调用地址
{
//请求参数,具体需要传入那些参数还是要看接口文档
//key
key1:value1,
key2:value2
}
})
.then(response =>{
//response就是调用接口的返回数据
//在这块代码里对得到的数据进行处理
})
3、在登录时,后台一般会返回一个token,这个token需要绑定到请求头中,这样后台的其他接口才允许访问。首先在登录界面中将token保存在本地
<template>
<div>
<el-input v-model='username' placeholder='请输入账号'>
<el-input v-model='password' placeholder='请输入密码' show-password>
<el-button @click='login'>登录</el-button>
</div>
</template>
<script>
export default{
data(){
//这里需要注意一下
//elementUI的数据是需要双向绑定的
//v-model中定义的数据要在return中定义一下
return{
username:'',
password:''
}
},
methods:{
login(){
//做一个简单的非空判断
if(this.username == '' || this.password.length < 1){
this.$message.error({
message:'账号或密码不可为空',
duration:'1000'
});
return false;
}
this.axios.post(
'loginURL', //后台的登录验证接口
{
//接口需要传入的参数
//参数的名称具体还需要对照接口文档
username:this.username,
password:this.password
}
)
.then(response =>{
//找到登录请求的返回数据中的token字段
//可以通过console.log(response)在控制台打印寻找
//将token存入本地
//但是response中有没有token,取决于登录是否成功,此处另需判断
localStorage.setItem('token',response.token);
//登录成功之后跳转到主页,mainUrl是自己设置的主页url
this.$router.push('mainUrl');
})
}
}
}
</script>
到此为止,我们已经成功将token保存在了本地,下一步就是将token携带在请求头中。在main.js中添加axios的请求拦截器,将token携带在请求头中
axios.interceptors.request.use(config =>{
if(localStorage.getItem('token')){
config.headers.token = localStorage.getItem('token');
}
return config;
},
error =>{
return Promise.reject(error);
}
)
OK,登录功能处理完毕