Element-Ui和Vue项目的结合
第一步：使用脚手架创建一个Vue项目
vue init webpack 项目名 创建在线项目
vue init webpack 项目名 创建离线项目
第二步：在项目中下载element-ui的模板
cd pro01 cd 项目名
npm install element-ui -S
第三步：在项目中引入element-ui
在项目中src目录下找到main.js，并在指定位置添加三行代码（main.js是入口文件，所以在这里引入就行，页面就不用引入了）
import Vue from 'vue'
import ElementUI from 'element-ui' //新添加1
import 'element-ui/lib/theme-chalk/index.css' //新添加2，避免后期打包样式不同，要放在import App from './App';之前
import App from './App'
import router from './router'
Vue.use(ElementUI) //新添加3
Vue.config.productionTip = false
第四步：Vue+ElementUI设计登陆页面
附上我自己的代码 Login.vue
<template>
<el-form class="login-container">
<h2 class="title">用户登录</h2>
<el-form-item label="用户名" prop="pass">
<el-input type="text" v-model="username" placeholder="用户名" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="checkPass">
<el-input type="password" v-model="password" placeholder="密码" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm()" style="width:100% ;">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'Login',
data () {
return {
username:null,
password:null
}
},
methods:{
submitForm:function(){
let users={
uname:this.username,
pass:this.password
}
console.log(users);
}
}
}
</script>
<style>
/*大的外面的框*/
.login-container {
border-radius: 10px;
margin: 0px auto;
width: 350px;
padding: 30px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
text-align: left;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
/*登录的字体*/
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>
实现前后台分离
后台就是springboot+ssm的一个项目
前台就是刚刚附的Login.vue的组件
在后台项目中需要加一个类：CORSConfiguration.java
package com.ywy.configuaction;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
@Configuration
public class CORSConfiguration extends WebMvcConfigurationSupport {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedMethods("*")
.allowedOrigins("*")
.allowedHeaders("*");
super.addCorsMappings(registry);
}
}
注1：为了解决跨域的问题
会一直报错：“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，这样后台取不到数据的(详情见资料“05 Vue中axios踩坑之路-POST传参 - RainSun - CSDN博客.mht”)，
解决方案：使用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';
前台的提交，使用axios
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'
1. axios
axios是vue2提倡使用的轻量版的ajax。它是基于promise的HTTP库。它会从浏览器中创建XMLHttpRequest（原生的ajax对象），与Vue配合使用非常好。
注.题外话：
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);
});
<script>
import axios from 'axios'
import qs from 'qs'
export default {
name: 'HelloWorld',
data () {
return {
username:null,
password:null
}
},
methods:{
submitForm:function(){
let users={
uname:this.username,
pass:this.password
}
console.log(users);
var url='http://localhost/userlogin';//提交路径
//get方式提交
/* axios.get(url, {//注意数据是保存到json对象的params属性
params: {
uname:this.username,
pass:this.password
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
}); */
//post方式提交
var str=qs.stringify(users);
axios.post(url, str).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
}
}
}
</script>