Vue，Springboot先後端分離項目初體驗

最近在擼一個小項目，原來作過幾個系統，主要用的是Extjs和SpringMVC。Vue瞭解過一點，看了一下官方文檔感受蠻好的（相比Extjs，「蠻好」兩字其實沒法表達...）。原來的SpringMVC的架構由於是別人搭建好的，只是照葫蘆畫瓢的開發，也沒有足夠的精力去深刻學習瞭解。而後我決定了這個項目的方案，Vue加Springboot，幾乎零基礎邊作邊學，雖然由於時間要求的比較緊把本身搞得壓力山大，不過最後仍是如期開發完成~

架構方案

前端：Vux  作移動網頁版（朋友推薦，也確實比較溜。文檔還算比較齊全的，不過我到如今仍是沒搞出來 InlineCalendar的marks是怎麼用的）

後端：Springboot 參考 @Mr_初晨 的專欄，一步步搭的框架。感謝！

數據庫：MySQL

路由校驗

1.定義路由：經過設置meta來判斷是否須要進行校驗，我是所有都寫了

const routes = [
    {  
        path: '/',  component: Login},
    {  
        path: '/home',  
        meta:{auth:true}, // 設置當前路由須要校驗 不須要校驗的路由就不用寫了 
        component: Home
    },{  
        path: '/Reserve',  
        meta:{auth:true},   
        component: Reserve
    },{  
        path: '/Cancel',  
        meta:{auth:true},   
        component: Cancel
    },{  
        path: '/WorkInfo',  
        meta:{auth:true},  
        component: WorkInfo
    },{   
        path: '/Detail/:type/:date',   
        meta:{auth:true},   
        component: Detail
    }]
    const router = new VueRouter({  routes})複製代碼

2.經過路由鉤子對每次請求進行攔截，判斷是否已經登陸。

這裏有個小坑，我原本是把用戶信息存到Vuex裏面的，而後去驗證，興致勃勃的刷了個新，就GG了。後來查了下資料，Vuex的裏的數據刷新就會清空的，採用了sessionStorage來存儲用戶信息進行校驗。當瀏覽器關閉時纔會清除。（區別localStorage，算是基礎知識了，不過我是第一次用~）

//路由攔截router.beforeEach((to,from,next) => { 
  if(to.matched.some( m => m.meta.auth)){           
    var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));  // 對路由進行驗證 
        if(userInfo) { // 已經登錄 
            next()   // 正常跳轉到你設置好的頁面 
        }      
        else{               // 未登陸則跳轉到登錄界面，query:{ Rurl: to.fullPath}表示把當前路由信息傳遞過去方便登陸後跳轉回來； 
            next({path:'/',query:{ Rurl: to.fullPath} })      
        }  
     } 
     else{
   　　next()
   　　} })複製代碼

跨域請求

先後端分離就會碰到跨域的問題，個人解決方案很粗暴。

1.Springboot Controller增長跨域資源的註解 

@CrossOrigin(origins = "*", maxAge = 3600)
複製代碼

不要問我爲何，我不知道，反正就這樣成功了，容許全部的跨域請求。阮神有篇文章有詳細介紹 跨域資源共享 CORS 詳解，我沒有仔細看。

2.統一BaseUrl

vux用的是axios，瞭解過，沒有認真瞭解。不知道BaseUrl怎麼配置，因而用了一個笨方法：全局變量。我知道Webpack能夠區份量產和測試環境分別配Url，可是沒有時間和精力研究了，項目結束後再認真學習吧~

前端config裏建立 global.js 文件（其實隨便啦~）

const BASE_URL ="localhost:8080/"export default{    BASE_URL}複製代碼

在main.js中import進來，添加到Vue全局變量裏：

import global_ from "./../config/global"複製代碼

Vue.prototype.GLOBAL = global_;複製代碼

而後在組件中就能夠這樣引用：

this.$http
        .post(this.GLOBAL.BASE_URL+"user/login?id="+this.id+"&password="+this.password)
        .then(function(response) {
          console.log(response.data);
        })        
        .catch(function(error) {
          console.log('error'+error);
        });複製代碼

But，這樣搞在build的時候會報錯，報錯內容我忘記了，搜了一下好像是說global的這種寫法是ES6的沒有正確解析，須要用babel解析。解決方案是修改Webpack.base.conf.js文件

原配置：

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      。。。複製代碼

增長 resolve('config/global.js')

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'),resolve('config/global.js')]
      },
      。。。複製代碼

打包部署

後端我是打成了jar包，Springboot原本就自帶Tomcat服務器，感受沒有必要打成war包再放到容器裏。

1.首先，我嘗試了把前端build的出來的dist文件夾下面的文件(static目錄，index.html文件)塞到springboot的resources/static下面：

根據Spring Boot 對靜態資源映射提供的默認配置，按道理 /index.html 是可以找到這個目錄下面的index.html文件的。可是顯示未定義接口，被攔截掉了。查了一下資料，應該是WebConfigurer裏用了SpringMvc的攔截方法。因而添加了

registry.addResourceHandler("/static/**").addResourceLocations( "classpath:/static/");複製代碼

奢望可以經過 /staitic/index.html來訪問，這樣index是能夠訪問了，可是js文件被攔截了~也沒有查到解決方案，遂放棄~應該是寫法不對，望大神們指教。後來須要一個apk的發佈網址，我就把index修改爲apk下載網頁了~哦，apk下載也被攔截了，更改配置解決：

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("swagger-ui.html")
            .addResourceLocations("classpath:/META-INF/resources/");
    registry.addResourceHandler("doc.html")
            .addResourceLocations("classpath:/META-INF/resources/");
    registry.addResourceHandler("/static/**").addResourceLocations( "classpath:/static/");
    registry.addResourceHandler("/app-release.apk").addResourceLocations( "classpath:/static/");
    registry.addResourceHandler("/webjars/**")
            .addResourceLocations("classpath:/META-INF/resources/webjars/");
    super.addResourceHandlers(registry);
}複製代碼

2.採用Nginx部署

前端的ajax請求不要用localhost，直接用IP地址，下載Nginx，修改配置文件：

server {
    listen 8079;   、、端口號
    ...
    root   /front/dist;   //dist文件夾路徑
    index  index.html index.htm;
    add_header Access-Control-Allow-Origin "*";
    ...
}複製代碼

注意不要直接雙擊nginx.exe，這樣會致使修改配置後重啓、中止nginx無效，須要手動關閉任務管理器內的全部nginx進程

在nginx.exe目錄，打開命令行工具，用命令 啓動/關閉/重啓nginx

start nginx : 啓動nginx

nginx -s reload ：修改配置後從新加載生效

nginx -s reopen ：從新打開日誌文件

nginx -t -c /path/to/nginx.conf 測試nginx配置文件是否正確

關閉nginx：

nginx -s stop :快速中止nginx

nginx -s quit ：完整有序的中止nginx

結語

至此，Vue和Springboot先後端分離的實踐算是基本完成，固然還有不少問題和知識點須要本身再去學習和了解。由於本職工做不管內容仍是技術其實和這些不相干，投入的精力有限，也只能靠抽點時間自學。架構的問題點，不足之處也請多多指教。看了蠻久的掘金，第一次寫文章，發現技術領域的文章我徹底沒有文筆，哈哈