Create a project using vue vue-cli scaffolding tool
vue init webpack pro01
npm install ElementUI
cd PRO01 # into the new project root directory
installation:
npm install axios -S
npm install qs -S
npm install vue-axios -S
npm install element-ui -S
At the specified location !!! ~~~ add three lines of code
to find main.js src directory under the project, and add three lines of code (main.js is the entry file in the specified location, so here is introduced on the line, the page would not have introduced a)
Import from Vue 'VUE'
Import ElementUI from 'Element-ui' // newly added 1
Import 'Element-ui / lib / Theme-Chalk / index.css' // add 2 new, post-packaging to avoid different styles, to on import App from './App'; before
Vue.use (ElementUI) // new addition 3
Vue.config.productionTip = false
Test
modify HelloWorld.vue add components to see the effect elementUI
Vue + ElementUI landing page design
Note 1: See related style information "css.txt"
Note 2: <style scoped>
in vue component, added in the style attribute scoped tags, to indicate that it is the moment acting on the style module, to achieve a good style object privatization
Note 2: AutoComplete = "OFF"
AutoComplete attribute is new in HTML5 properties, off ----- automatically disabled
http://localhost:8080/T226_easyui/userAction.action?methodName=login&&uid=001&&upwd=123456
Background interaction (Axios / QS / VUE-Axios)
1 Axios
Axios is vue2 promote the use of lightweight version of ajax. It is based on the promise of HTTP library. It creates XMLHttpRequests from a browser, used in conjunction with Vue is very good.
GET submitted
axios.get ( '/ user', { // note data is stored to the params property json object
params: {
ID: 12345
}
}). The then (function (Response) {
the console.log (Response);
}) .catch (function (error) {
the console.log (error);
});
POST submit
axios.post ( '/ user', { // note that the data is saved directly to the object json
firstName: 'Fred',
lastName: 'Flintstone'
}). The then (function (Response) {
the console.log (Response);
}) the catch (function (error) {.
the console.log (error);
});
Note 1: axios cross-domain issue
would have been an error: "http://127.0.0.1:8848 'has been blocked by CORS policy: No' Access-Control-Allow-Origin 'header"
because it uses separate front and rear end development, cross field visits, the solution: tomcat need to be configured to allow cross-domain access,
tomcat cross-domain configuration many ways, but the easiest way is to write a filter CorsFilter implement, add a response header
access-Control-allow-Origin can
httpResponse .addHeader ( "Access-Control-Allow -Origin", "*"); // * denotes any domain name
httpResponse.addHeader ( "Access-Control-Allow -Origin", "http: // localhost: 80");
Access-Control-Allow-Origin: * # scripts of all domain names are allowed to access the resource.
Access-Control-Allow-Origin: https: //www.fujieace.com # allow specific domain names
Note 2: axios.get submit no problem, axios.post submit background does not receive data
because the format parameters of POST is submitted Request Payload, so that the background to get any data (as detailed information on "05 Vue in axios step on the road of the pit -POST parameter passing - RainSun - CSDN blog .mht "),
solution: qs.js library using the {a: 'b', c : 'd'} is converted into 'a = b & c = d '
NOTE 3: To simplify the use of Axios, Axios global configuration may be used and the interceptor, as detailed information "API / http.js"
axios.defaults.baseURL = 'https://api.example.com';
// Axios. defaults.headers.common [ 'Authorization'] = AUTH_TOKEN ; // custom request header, adding authentication token
axios.defaults.headers.post [ 'Content-Type'] = 'application / x-www-form-urlencoded' ;
Note 4: encapsulate a request address to facilitate the development of recommendations, as detailed information "api / action.js"
Note 5: ^ _ ^ ~~~~ To further simplify development, action.js the URL address to the package properties axios.urls
QS
qs.js It is a url parameter transformation js library. Usage on two:
var obj = qs.parse ( 'A & B = C = D'); // URL parsed into objects of the form: {A: 'B', C: 'D'}
var STR = qs.stringify (obj); // URL object serialized form to & splicing: a = b & c = d '
axios-VUE
VUE-axios is an extension of the axios based on plug-in Vue.prototype prototype extends the $ http attributes, it can be more convenient to use axios
Modify main.js file
#import axios from 'axios'
#import qs from 'qs'
import axios from '@ / api / http' #vue project axios global configuration
import VueAxios from 'vue-axios'
Vue.use (VueAxios, axios)
Appendix I: ES6 grammatical function arrow
doSomething(function(a){...});
doSomething((a)=>{});
Processing CORS cross-domain listeners
package com.zking.vue.util;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 配置tomcat允许跨域访问
*
* @author Administrator
*
*/
public class CorsFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
// @Override
// public void doFilter(ServletRequest servletRequest, ServletResponse
// servletResponse, FilterChain filterChain)
// throws IOException, ServletException {
// HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
//
// // Access-Control-Allow-Origin就是我们需要设置的域名
// // Access-Control-Allow-Headers跨域允许包含的头。
// // Access-Control-Allow-Methods是允许的请求方式
// httpResponse.addHeader("Access-Control-Allow-Origin", "*");// *,任何域名
// httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT,
// DELETE");
// // httpResponse.setHeader("Access-Control-Allow-Headers", "Origin,
// // X-Requested-With, Content-Type, Accept");
//
// // 允许请求头Token
// httpResponse.setHeader("Access-Control-Allow-Headers",
// "Origin,X-Requested-With, Content-Type, Accept, Token");
// HttpServletRequest req = (HttpServletRequest) servletRequest;
// System.out.println("Token=" + req.getHeader("Token"));
// if("OPTIONS".equals(req.getMethod())) {
// return;
// }
//
//
// filterChain.doFilter(servletRequest, servletResponse);
// }
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
HttpServletResponse resp = (HttpServletResponse) servletResponse;
REQ = the HttpServletRequest (the HttpServletRequest) servletRequest;
// Access-Control-Allow-Origin is the domain we need to set the
// Access-Control-Allow-Headers allow cross-domain header contains.
// Access-Control-Allow-Methods mode request is permitted
resp.setHeader ( "Access-Control-Allow -Origin", "*"); // *, any domain
resp.setHeader ( "Access-Control-Allow- Methods "," the POST, the GET, the PUT, the DELETE ");
// resp.setHeader (" Access-Control-the Allow-Headers "," Origin, X-Requested-With-,
// the Type-the Content, the Accept ");
/ / allows the client, send a new request header JWT
resp.setHeader ( "Access-Control-the allow-Headers", "Origin, X-requested-With-, the Content-the Type, the Accept, JWT");
// allow client processing a new response header JWT
resp.setHeader ( "Access-Control-Expose-Headers", "JWT");
String sss = resp.getHeader // ( "Access-Control-Expose-Headers");
// request header allows the Token
// httpResponse.setHeader ( "Access-Control-the Allow-Headers", "Origin, X-Requested-With-,
// the Type-the Content, the Accept, the Token");
// System.out.println ( "the Token =" + req.getHeader ( "the Token"));
IF ( "the OPTIONS" .equals (req.getMethod ())) {// ajax Axios the two requests will be issued, the first submission of: option, return directly to
return;
}
the FilterChain.doFilter (servletRequest, ServletResponse);
}
@Override
public void the destroy () {
}
}
Vue + elementUI built SPA access Java project to build a successful background
