SPA项目之登录注册

创建项目

1. vue init webpack t224_spa
2. cd t224_spa
3. npm install
4. npm install element-ui -S
5. config --> index.js 8088
6. npm run dev
7. npm install axios -S
8. npm install qs -S
9. npm install vue-axios -S

需要注意的问题

1. ajax 跨域问题
2. A xios 的 get/post 的区别（ qs ）
3. 简化axios 使用的书写
4. T his 指针带来的变量污染，需要利用箭头函数来解决；

解析后台交互(axios/qs/vue-axios)

1 axios

  axios是vue2提倡使用的轻量版的ajax。它是基于promise的HTTP库。它会从浏览器中创建XMLHttpRequests，与Vue配合使用非常好。



  1.题外话：

  vue.js有著名的全家桶系列：vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。

  其中vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应，但在vue更新到2.0之后，

  作者就宣告不再对vue-resource更新，而是推荐的axios



  2.GET提交

  axios.get('/user', {//注意数据是保存到json对象的params属性

    params: {

      ID: 12345

    }

  }).then(function (response) {

    console.log(response);

  }).catch(function (error) {

    console.log(error);

  });



  3.POST提交

  axios.post('/user', {//注意数据是直接保存到json对象

    firstName: 'Fred',

    lastName: 'Flintstone'

  }).then(function (response) {

    console.log(response);

  }).catch(function (error) {

    console.log(error);

  });



  注1：axios跨域问题

       会一直报错：“http://127.0.0.1:8848' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header”

       因为使用了前后端分离开发，跨域访问了，解决方案：需要配置tomcat允许跨域访问，

       tomcat跨域配置方法很多，但最简单的方式是自己写一个过滤器CorsFilter实现，添加一个响应头

       Access-Control-Allow-Origin即可

       httpResponse.addHeader("Access-Control-Allow-Origin", "*");//*表示任何域名

       httpResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:80");



       Access-Control-Allow-Origin:*                           #则允许所有域名的脚本访问该资源。

       Access-Control-Allow-Origin:https://www.fujieace.com    #允许特定的域名访问



  注2：axios.get提交没有问题，axios.post提交后台接收不到数据

       因为POST提交的参数的格式是Request Payload，这样后台取不到数据的

       解决方案：使用qs.js库，将{a:'b',c:'d'}转换成'a=b&c=d'



  注3：为简化axios使用，还可以使用axios全局配置及拦截器，详情见资料“api/http.js”

       axios.defaults.baseURL = 'https://api.example.com';

       //axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//自定义请求头，添加认证令牌

       axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';



  注4：为方便开发，建议对请求地址进行封装，详情见资料“api/action.js”



  注5：^_^~~~~为进一步简化开发，将action.js的URL地址封装到axios.urls属性上         

2、qs

  qs.js它是一个url参数转化的js库。用法就两个：

  var obj = qs.parse('a=b&c=d');  //将URL解析成对象的形式：{a:'b',c:'d'}

  var str = qs.stringify(obj);    //将对象 序列化成URL的形式，以&进行拼接：a=b&c=d'

3、 vue-axios

  vue-axios是在axios基础上扩展的插件，在Vue.prototype原型上扩展了$http等属性，可以更加方便的使用axios

4、 axios/qs/vue-axios安装及使用步骤

  1.安装

  npm install axios -S

  npm install qs -S  

  npm install vue-axios -S                        



  2.修改main.js文件

  #import axios from 'axios'

  #import qs from 'qs'

  import axios from '@/api/http'             #vue项目对axios的全局配置      

  import VueAxios from 'vue-axios'

  Vue.use(VueAxios,axios)



  3.之后就可以直接在Vue组件文件的methods里使用了  

  this.axios.get(url,{params:{id:1,name:'zs'}}).then((response)=>{

    this.newsList=response.data.data;

  }).catch((response)=>{

    console.log(response);

  });

导入代码

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css' 
import App from './App'
import router from './router'
import ElementUI from 'element-ui' 
import axios from '@/api/http' 
import VueAxios from 'vue-axios'


Vue.use(ElementUI) //配置elementui
Vue.use(VueAxios,axios) //导入axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
   
 el: '#app',
 router,
 components: {
    App },
 template: '<App/>'
})

Login.vue

<template>
	<div class="login-wrap">
		<el-form :model="ruleForm" label-width="100px" class="demo-ruleForm login-container">
			<h3 style="text-align: center;">用户注册</h3>
			<el-form-item label="用户名">
				<el-input v-model="ruleForm.uname"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="ruleForm.pwd"></el-input>
			</el-form-item>
			<el-form-item>
				<el-row>
					<el-col :span="24">
						<div class="grid-content bg-purple-dark">
							<el-button type="primary" style="width:100%;">提交</el-button>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<div class="grid-content bg-purple-dark">
							<el-link type="success" @click="toReg()">用户登录</el-link>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="grid-content bg-purple-dark">
							<el-link type="success">忘记密码</el-link>
						</div>
					</el-col>
				</el-row>

			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
   
		data() {
   
			return {
   
				ruleForm: {
   
					uname: '',
					pwd: ''
				}
			};
		},
		methods: {
   
			toReg() {
   
				this.$router.push({
   
					path: '/Reg'
				});
			},
			doLogin() {
   
				//get请求方法
				//这里获取的就是配置文件中的请求路径
				let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
				console.log(url)
				this.axios.get(url, {
   
					//params是发生到后端的json数据
					params: this.ruleForm
				}).then((response) => {
   
					//这是请求成功的回掉
					console.log(response);
					if (response.data.code == 1) {
   
						this.$message({
   
							message: response.data.msg,
							type: 'success'
						});
					} else {
   
						this.$message.error('response.data.msg');
					}
				}).catch((response) => {
   
					//这是请求异常执行的回掉
					console.log(response);

				});

				//post请求