Vue，Springboot前後端分離專案初體驗

御劍檢察官發表於2018-07-17
VueSpring Boot後端
最近在擼一個小專案，原來做過幾個系統，主要用的是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下面：

Vue，Springboot前後端分離專案初體驗

根據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前後端分離的實踐算是基本完成，當然還有很多問題和知識點需要自己再去學習和了解。因為本職工作無論內容還是技術其實和這些不相干，投入的精力有限，也只能靠抽點時間自學。架構的問題點，不足之處也請多多指教。看了蠻久的掘金，第一次寫文章，發現技術領域的文章我完全沒有文筆，哈哈


相關文章