.1 关于零基础使用Vue

实习第一个任务-零基础用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)

引入依赖之后就可以通过下面的方式进行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，登录功能处理完毕