Spa项目实现登录+注册
1、实现步骤
1.1、新建项目
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;