第一步，搭建vue項目

vue的安裝

1.安裝node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)
2.基于node.js,利用淘寶npm鏡像安裝相關依賴
在cmd里直接輸入:npm install -g cnpm --registry=https://registry.npm.taobao.org,回車,等待安裝
3.安裝全局vue-cli腳手架,用于幫助搭建所需的模板框架,在cmd里
1)輸入：cnpm install -g vue-cli，回車，等待安裝
2).輸入：vue，回車，若出現vue信息說明表示成功

創建項目

vue axios？1.在你任意喜歡的文件夾中創建一個項目文件夾，如：我創建的是D:/test
2.使用cmd進入D:/test目錄中
3.使用vue init webpack vue_test命令，vue_test是項目的名稱，然后就會叫你填一些有關于項目的信息，憑感覺填就行，但是，像是否使用vue-router這樣的選項，建議還是選y

4.進入，vue_test文件夾(cd vue_test)，使用npm install命令
5.使用npm run serve 或者 npm run dev 啟動項目
到這里，vue就能順利啟動了，補充：
1.如果啟動不成功，找不到原因，就進入到D:/test/vue_test目錄中刪除node_modules文件夾，再來一次
2.如果需要修改端口，vue3.0以上，在vue.config.js文件中

devServer: {port: 8083,open: true}

springboot項目的創建

我這里使用的是idea，如果使用eclipse也差不多，(但是，eclipse要創建springboot，好像是需要安裝一個插件，具體什么插件忘記了，有一段時間沒用了，有需要的朋友可以問一下度娘)

idea

1.idea中，File ? New ? Project
2.打開一個界面，選擇Spring Initializr ? Next，內容隨意填，不滿意重新填就好，這步驟簡單

3.然后一直Next，最后填一下項目名稱就好，最后Finish

eclipse

1.eclipse中，File ? New ? Spring Starter Project
2.打開一個界面，看著填寫相應行就好，然后Next

3.在接下來的頁面中，可以自己隨意選擇，我一般就選，WEB中的:Spring Web Starter和SQL中的MySQL Driver，然后Finish

vue elementui。到這里，Springboot項目就創建完成了

vue與springboot之間的交互

跨域問題

在springboot中添加一個配置類就好

package com.coststatistics.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class CorsConfig {private CorsConfiguration buildConfig() {CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*"); // 1允許任何域名使用corsConfiguration.addAllowedHeader("*"); // 2允許任何頭corsConfiguration.addAllowedMethod("*"); // 3允許任何方法（post、get等）return corsConfiguration;}@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", buildConfig()); // 4return new CorsFilter(source);}}

登錄攔截問題

1.大致流程：首先是后端，后端在登陸成功之后，必須提供一個token(一串字符串，存在session或者redis中),作用是用于驗證這個用戶登陸是否有效，另外，會有一個攔截器進行檢測(登陸攔截器),如果這個token在session或者redis中過期了，則會返回前端401(也可以是其他,自己設置)的狀態碼，axios就會通過響應攔截器對這個響應進行攔截，如果攔截到的狀態碼為401，則會跳轉到登陸頁面，并且清除vue中的session（注意這里session生效是因為配置了前端訪問帶cookie，如果沒有配置，前端每次訪問都是新的session，因此，是獲取不到session中的數據的），當然，也可以配合shiro進行使用，我這里沒有用shiro
2.后端攔截器：

private static final String accesstokenHeader = "access-token";
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {if (request.getMethod().equals("OPTIONS")) {return true;}//這里為什么不用session存著key呢？因為這里之前沒有配置前端訪問帶cookie，因此，是拿不到//key的，因此，這里自己封裝了一個存放token的方法，并且使用前端傳進來的token作為key，如果//在系統中沒有這個token，則直接認為不是合理請求或者已過期String token = request.getHeader(accesstokenHeader);String systemToken = TokenManage.getToken(token);if (!StringUtils.isEmpty(token) && !StringUtils.isEmpty(systemToken) &&systemToken.equals(token)) {return true;} else {buildGuestResponseBody(response, 401, "sessionId is invalid,please login again!");return false;}
}

3.前端配置，分兩步：
（1)路由攔截器(主要是攔截路由使用的)：

router.beforeEach((to, from, next) => {if (to.path === '/') {next();} else {let token = window.localStorage.getItem('token');console.log(token);if (token === 'null' || token === '' || token === null) {next('/');} else {next();}}
});

springboot前后端分離？(2)axios攔截器，主要是攔截接口使用的，并且有一些接口配置

// 添加請求攔截器，在請求頭中加token
axios.interceptors.request.use(config => {if (window.localStorage.getItem('token')) {config.headers.Authorization = window.localStorage.getItem('token');}return config;},error => {return Promise.reject(error);}
);// http response 攔截器
axios.interceptors.response.use(response => {switch (response.data.code) {case 401:router.replace({name: 'login'})break;}return response;},error => {return Promise.reject(error.response.data)   // 返回接口返回的錯誤信息}
);

到這里，基本的配置已經完成了，可以正常使用登陸攔截了，另外，默認情況下，前端訪問是不帶cookie訪問的，這種情況，后端就不能使用session存放數據了，那么要怎么配置呢？
(1))前端：axios.defaults.withCredentials = true，使用axios攔截器就配置上這個
配置這個之后，后端有兩個地方需要注意，在跨域請求的配置上得改一下，
(2)后端：

private CorsConfiguration buildConfig() {CorsConfiguration corsConfiguration = new CorsConfiguration();// 1允許任何域名使用;corsConfiguration.addAllowedOrigin("http://localhost:8080");// 2允許任何頭corsConfiguration.addAllowedHeader("*");// 3允許任何方法（post、get等）corsConfiguration.addAllowedMethod("*");corsConfiguration.setAllowCredentials(true);return corsConfiguration;
}

改成這樣，首先corsConfiguration.addAllowedOrigin必須為固定的值，不能是“*”，另外，必須
將corsConfiguration.setAllowCredentials設置成true，要不然不能進行cookie傳入
另外，如果有人問，前端這些代碼寫在哪里，這就是另一個問題了，大概說一下，你可以寫在一個js文件中，然后在main.js文件中引用一下，如：

import router from './router/index'
new Vue({el: '#app',router
})

還有沒有其他的方法，應該是有的，但是我前端只是小小白，這樣可以，我就這樣用了，也沒有深入去研究這個，因此，有需要的朋友可以自行百度，多了解一下

部署問題

springboot的部署

Spring Boot。1.進入主類中，讓主類繼承SpringBootServletInitializer,重寫方法：
@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
return application.sources(GetDataApplication.class);
}
2.進入pom文件中，將packaging標簽中更改成war，如果沒有，則增加packging標簽：
<packaging>war</packaging>
3.使用cmd，進入項目跟目錄，比如：項目為Test，則需要進入到Test文件夾內，執行命令：
mvn clean package
在Test中的target里面會生成一個war包
4.將war包放到Tomcat中的webapp中，直接運行即可
坑點：
1.有可能啟動之后會報java.lang.NoClassDefFoundError: javax/el/ELManager異常，原因：
(1)jre中lib里面的el-api版本和tomcat中的el-api版本不匹配，因此，將jre中的版本復制一份即可
(2)如果還是不行，那就是el-api版本沒到3.0以上，只有3.0以上才有ELManager，因此，下載一個el-api3.0就可以了
2.在使用mvn clean package打包部署項目的時候，可能會報 test*****，然后打包部署失敗之類的錯誤，只要把測試類注釋掉就好了

vue的部署到tomcat中

1.在vue項目下的config/index.js中配置（demo為你在tomcat的webapps目錄下新建的文件夾的名稱）
assetsPublicPath: ‘/demo/’
2.在配置路由的index.js中，添加一個屬性配置，和routes同級（demo同理）
base:’/demo/’,
3.使用cmd進入此文件夾，運行
npm run build
4.將vue項目下的dist文件夾中生成的index.html和statis文件夾復制到tomcat中，另外，在tomcat的webapps的目錄下新建一個demo的文件夾，并且將剛剛復制的index.html和statis文件夾粘貼到這個目錄下
5.在新建的demo文件夾下新建一個WEB-INF文件夾，并且在里面新建一個web.xml文件，內容如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaeehttp://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"version="3.1"metadata-complete="true"><display-name>myword</display-name><description><error-code>404</error-code><location>/index.html</location></description></web-app>

6.運行tomcat，在網址中訪問ip:port/demo,即可訪問，另外，如果覺得這個路徑中demo是多余的，可以到tomcat的conf文件夾下，找到service.xml文件，配置Host節點下添加一個Context節點即可，內容如下：

<Context docBase="D:\java\environment\tomcat\apache-tomcat-7.0.85\wtpwebapps\TestServlet" path="/TestServlet" reloadable="true" source="org.eclipse.jst.jee.server:TestServlet"/>

需要注意的是，前端和后端的端口需要不一樣，另外，如果使用的是同一個tomcat，是不能同時開啟兩個一樣的tomcat的，這里需要另外做配置，可以自行百度，具體忘記了

附錄，遇到過的問題

vue開發？1.前后端分離參數傳遞問題
后端默認接收的是：application/x-www-form-urlencoded，即：xxxx=ssss&fffff=jjjjj這種格式的參數，但是默認前端傳遞過來的是：application/json這種content-type(即json格式的數據)
因此，后端接收不到數據
解決方案：
針對后端：可以在參數前加一個@RequestBody注解，在參數是javabean對象的情況下
針對前端：發送報文的時候可以組建xxxx=ssss&fffff=jjjjj這種格式的參數，如：

this.axios.post("/singleCost/deleteSingleCost.do","id="+this.deleteId).then((response) => {if (response.status === 200) {this.confirmDelete = false;if(response.data.code == 0){this.searchSingleCosts('searchForm');}else{this.message = response.data.message;this.showMessage = true;}}}).catch((error) => {this.message = error;this.showMessage = true;});

2.springboot訪問靜態資源問題
假設我的靜態資源都在文件夾/static下
(1)如果還沒配置攔截器就找不到靜態資源，則需要增加一個config類，如下：

@Configuration
public class StaticResource extends WebMvcConfigurationSupport {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");}
}

(2)如果配置了攔截器后找不到靜態資源，只需要在攔截器中添加白名單即可："/static/**"

3.配置攔截器后導致靜態資源無法訪問
(1)在攔截器配置類中，即繼承了WebMvcConfigurationSupport的類中

重寫addResourceHandlers方法如下：
@Overrideprotected void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");super.addResourceHandlers(registry);}