Spa项目实现登录

1、实现步骤

1.1、新建项目

使用vue-cli搭建创建一个vue

1.2、安装element-ui相关模块

npm install element-ui -S

1.3、引入main.js

在项目中src目录下找到main.js，并在指定位置添加三行代码

2、Vue+ElementUI设计登陆页面

2.1、登录页面代码

1、新建一个Login.vue并加入界面样式

<template>
		<div class="login-wrap">
		<el-form class="login-container">
			<h1 class="title">用户登录</h1>
			<el-form-item label="用户名">
			<el-input type="text" v-model="username" placeholder="请输入用户名" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="密码">
			<el-input type="password" v-model="password" placeholder="请输入密码" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" style="width:48%;" @click="doLogin()">用户登录</el-button>
			<el-button style="width:48%;">用户注册</el-button>
		</el-form-item>
		</el-form>
	</div>
</template>

在index.js里面配置路由及相关路径

2.2、页面效果

3、后台交互(axios/qs/vue-axios)

3.1、 axios

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

Get提交

注意数据是保存到json对象的params属性

axios.get('/user', {
        params: {
          ID: 12345
        }
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

Post提交
注意数据是直接保存到json对象

axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

Get提交一般不会出现问题，Post提交后台会接收不到数据!

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

3.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.3、vue-axios

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

4、axios跨域问题

因为是前后端分离开发，跨域访问了所以会出现跨域请求出错的问题！

“http://localhost:8088 has been blocked by CORS policy:
No ‘Access-Control-Allow-Origin’ header”

跨域问题展示：

解决方案：配置tomcat允许跨域访问， tomcat跨域配置最简单的方式是自己写一个过滤器CorsFilter实现

4.1、 引入main.js配置

import Vue from 'vue'
import ElementUI from 'element-ui' //新添加1
//新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import axios from '@/api/http'  
import VueAxios from 'vue-axios' 
Vue.use(VueAxios,axios)

Vue.use(ElementUI)   //新添加3
Vue.config.productionTip = false

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

4.2、引入过滤器

CorsFilter

package com.zking.vue.util;

import java.io.IOException;