vue+spring boot實現前后端分離開發

自從前后端分離開發流行之后，飽受JSP摧殘的程序員中與解放出來了，除了部分搞全棧開發的程序員，大部分后端程序員只需要專注於后台開發，前端的活之類的就丟給前端的同事做了，真正的是前后搭配，干活不累。

 

前后端項目gitee地址：

• 前端：https://gitee.com/dsxiecn/vue-demo.git
• 后端：https://gitee.com/dsxiecn/spring-boot-demo.git

 

1.前端項目vue-demo

創建前端項目需要安裝node和vue環境，如何安裝，自行百度，安裝好環境之后在命令窗口輸入如下命令初始化vue-demo

vue init webpack vue-demo

之后一直回車就是，創建成功之后打開，筆者用的是vs code，獻上vs code下載鏈接 https://code.visualstudio.com/

目前我電腦中的vue是2.9.6，先看下項目結構

vue3.0之前的項目，都會有config文件夾，里面是項目的一些配置，我們要做的一些配置基本都會在config/index.js這里面實現，vue3.0之后，會沒有config這個文件夾，替代的如下圖，下圖的紅色框部分替代了config文件夾，所做的一些配置也會在vue.config.js實現

前后端分離中最終要的是前后端的交互問題，就是前段如何正確的訪問后端項目，先講前端項目vue-demo中如何實現。

vue不允許直接調用后端接口，所以這里借助了axios插件訪問后端，使用下面的命令安裝axios插件，不懂axios如何使用的，可以查看axios的中文社區進行了解，獻上網址： www.axios-js.com/

npm install axios -S

安裝成功之后，為了全局使用axios，先封裝一個request.js，封裝axios的攔截等工作，其中會封裝后端項目url、跨域設置、攔截等，在不同的后端url配置會有細微的不同，內容如下

import axios from 'axios'

// create an axios instance
const service = axios.create({
  // 方法2，如果是在config/index.js中配置的后端項目url，本行注釋
  // baseURL: process.env.BASE_API, // url = base url + request url
  // 是否跨域
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    debugger
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    debugger
    // loading
    // 如果http狀態碼正常，則直接返回數據
    if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
      return response.data
      // 如果不需要除了data之外的數據，可以直接 return response.data
    } else {
      // 異常狀態下，把錯誤信息返回去
      return {
        message: '網絡異常' || 'Error',
        type: 'error',
        duration: 5 * 1000
      }
    }
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

我目前了解到的有兩種配置方式去訪問后台接口，

• 一種是在config/index.js中配置proxyTable
• 另一種是在config/dev.env.js中進行配置

兩種方式在使用中會有些區別，下面詳細介紹兩種配置方式

 

方法1：在config/index.js中配置proxyTable，內容如下，其中proxyTable[]的內容是需要自己添加的

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      // 方法1
      '/spring-boot-demo': {
        target: 'http://127.0.0.1:8081/spring-boot-demo',
        changeOrigin: true,
        pathRewrite: {
          '^/spring-boot-demo': ''
        }
      }
    },

這里需要注意一個點，如果我們后端項目中設置了項目路徑，比如server.servlet.context-path=/spring-boot-demo，那么下面紅框部分最好是和項目路徑保持一致。如果后端項目是部署在tomcat容器中的話，一般項目名稱就是這個，那么此時1、2、3部分最好是保持和tomcat中的項目名名稱一樣，否則會出現了每次訪問session 不一致的情況。如果沒有配置，只需要保證1/3部分一致就行

新建api/test.js，用於配置后端具體接口路徑，內容如下，spring-boot-demo部分就是在config/index.js中配置的別名，需要拼接在具體的接口之前

// import axios from 'axios'
import request from '@/utils/request'

export function session(data) {
  return request({
    // 方法1
    url: '/spring-boot-demo/test/session',
    method: 'post',
    data
  })
}

 

方法2：在config/dev.env.js中配置后端項目url，內容如下

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  // 方法2
  BASE_API: '"http://127.0.0.1:8081/spring-boot-demo"'
})

此時，request.js中需要放開baseURL注釋，部分內容如下

// create an axios instance
const service = axios.create({
  // 方法2
  // baseURL: process.env.BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

api/test.js中的url做些變化

// import axios from 'axios'
import request from '@/utils/request'

export function session(data) {
  return request({
    url: '/test/session',
    method: 'post',
    data
  })
}

具體的調用話，在vue-demo里面，我想將項目上傳至gitee上面

 

2.創建Spring Boot項目spring-boot-demo

這個也不演示，能閱讀本貼子的人，應該都是有一定編程功底的人，小白自行百度如何創建Spring Boot項目，后端中對於跨域的配置這里介紹一種，創建WebMvcConfigurer的實現類，重寫其中的兩個方法，如下

/**
 * 跨域配置
 */
@Bean
public CorsFilter corsFilter() {
    final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
    final CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.setAllowCredentials(true);
    corsConfiguration.addAllowedOrigin("*");
    corsConfiguration.addAllowedHeader("*");
    corsConfiguration.addAllowedMethod("*");
    urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
    return new CorsFilter(urlBasedCorsConfigurationSource);
}

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins("*")
            .allowCredentials(true)
            .allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH")
            .maxAge(3600);
}

Spring Boot中application.properties配置如下

server.port=8081
server.servlet.context-path=/

spring.application.name=spring-boot-demo

spring.http.encoding.force=true
spring.http.encoding.charset=UTF-8

啟動項目，多次由前端項目訪問，logger.info打印出來的sessionId是一致的