Spring Boot 與 Vue.js 整合流程

更新時(shí)間：2018年09月17日 17:05:23 作者：臨江聽(tīng)雨客

本文重點(diǎn)介紹我在Spring Boot 與 Vue.js 整合實(shí)踐過(guò)程中的基本流程，以及遇到的問(wèn)題，感興趣的朋友跟隨小編一起看看吧

一直都想嘗試做前后端分離，我之前一直是學(xué) Java 的，所以后端選擇了 Spring Boot；前端選擇了 Vue.js 這個(gè)輕量、易上手的框架。網(wǎng)上其實(shí)已經(jīng)有了不少 Spring Boot 和 Vue.js 整合的資料，Github 上就有好多 repo，但是每當(dāng)我指望按圖索驥的時(shí)候就會(huì)出現(xiàn)各種各樣奇怪的 bug，上 Stack Overflow 問(wèn)了也沒(méi)人搭理。前前后后研究了差不多三個(gè)星期，現(xiàn)在總算是理清楚了。

本文重點(diǎn)介紹我在實(shí)踐過(guò)程中的基本流程，以及我遇到的一個(gè)困擾了我好久的問(wèn)題，就是如何 CORS。

框架版本

Spring Boot: 2.0.4.RELEASE（JDK 是1.8）
Vue.js: 2.x

基本流程

前端：編寫 Vue 組件

首先用 vue-cli 搭好腳手架，我這個(gè) Demo 用到的第三方庫(kù)有：

axios：負(fù)責(zé) HTTP 請(qǐng)求
bootstrap-vue：Bootstrap 和 Vue.js 的整合，方便設(shè)計(jì)頁(yè)面
vue-router：管理路由
qs：實(shí)現(xiàn) CORS

然后寫一個(gè)登錄組件：

<!-- 下面是我直接從 bootstrap-vue 文檔抄下來(lái)的模板 -->
<template>
 <div>
 <b-form @submit="onSubmit" @reset="onReset" v-if="show">
  <b-form-group id="exampleInputGroup1"
     label="Username:"
     label-for="exampleInput1">
  <b-form-input id="exampleInput1"
      type="text"
      v-model="form.username"
      required
      placeholder="Enter username">
  </b-form-input>
  </b-form-group>
  <b-form-group id="exampleInputGroup2"
     label="Password:"
     label-for="exampleInput2">
  <b-form-input id="exampleInput2"
      type="text"
      v-model="form.password"
      required
      placeholder="Enter password">
  </b-form-input>
  </b-form-group>
  <b-form-group id="exampleGroup4">
  <b-form-checkbox-group v-model="form.checked" id="exampleChecks">
   <b-form-checkbox value="me">Check me out</b-form-checkbox>
   <b-form-checkbox value="that">Check that out</b-form-checkbox>
  </b-form-checkbox-group>
  </b-form-group>
  <b-button type="submit" variant="primary">Submit</b-button>
  <b-button type="reset" variant="danger">Reset</b-button>
 </b-form>
 </div>
</template>
<script>
//...
</script>

我現(xiàn)在想實(shí)現(xiàn)的就是用戶登錄成功之后導(dǎo)航到另一個(gè)組件，所以我就又寫了一個(gè)歡迎組件：

<template>
 <div>
  <h1>Welcome!</h1>
 </div>
</template>

記得配置路由：

// src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login.vue'
import Information from '@/components/Information.vue'
Vue.use(Router)
export default new Router({
 routes: [
 {
  path: '/',
  name: 'Login',
  component: Login
 },
 {
  path: '/information',
  name: 'Information',
  component: Information
 }
 ]
})

后端：提供 RESTful API

因?yàn)橹挥泻蠖颂峁┝私涌?，前端才能調(diào)用，所以現(xiàn)在要進(jìn)行后端開發(fā)。RESTful 是現(xiàn)在很流行的 API 設(shè)計(jì)風(fēng)格，所以我這里也實(shí)踐了一下。下面是 controller 的代碼，完整源碼地址附在文末。

@RestController
@RequestMapping("/api")
public class LoginController {
 @RequestMapping(path = "/login", method = RequestMethod.POST)
 @ResponseBody
 public String login(@RequestParam String username,
      @RequestParam String password) {
  // 簡(jiǎn)單處理一下，實(shí)際開發(fā)中肯定是要用到數(shù)據(jù)庫(kù)的
  if (username.equals("123") && password.equals("123")) {
   return "successful";
  } else {
   return "failed";
  }
 }
}

后端的 API 現(xiàn)在有了，就差前端調(diào)用了。但是沒(méi)這么簡(jiǎn)單，接下來(lái)就要解決我前面提到的問(wèn)題。

實(shí)現(xiàn) CORS

在這個(gè) Demo 中前端占用的端口是8080，后端是 8088。這就存在跨域的問(wèn)題，如果不解決的話后端就沒(méi)法接收前端的請(qǐng)求。

我參考了這個(gè)例子，通過(guò)配置 Spring MVC 實(shí)現(xiàn)了 CORS：

@Configuration
public class CORSConfig implements WebMvcConfigurer {
 @Override
 public void addCorsMappings(CorsRegistry registry) {
  registry.addMapping("/**")
    .allowedOrigins(ALL)
    .allowedMethods(ALL)
    .allowedHeaders(ALL)
    .allowCredentials(true);
 }
}

后端配置好了還不行，前端也要有一些配置，要用 axios 順利地發(fā)送請(qǐng)求并保證后端能接收到，需要對(duì)請(qǐng)求參數(shù)做處理。我參考這個(gè)回答用 qs 庫(kù)對(duì)請(qǐng)求參數(shù)做了處理：

qs.stringify({
  'username': this.form.username,
  'password': this.form.password
  })

現(xiàn)在只需完善前端調(diào)用后端 API 的代碼：

// Login.vue
<script>
export default {
 data () {
 return {
  form: {
  username: '',
  password: '',
  checked: []
  },
  show: true
 }
 },
 methods: {
 onSubmit (evt) {
  evt.preventDefault();
  
  // 關(guān)鍵就在于要對(duì)參數(shù)進(jìn)行處理
  axios.post('http://localhost:8088/api/login',qs.stringify({
  'username': this.form.username,
  'password': this.form.password
  })).then((response) => {
  var status = response.data;
  if(status === 'successful') {
   this.$router.push('/information');
  } else {
   alert(response.data.message);
  }
  console.log(response);
  }).catch((error) => {
  console.log(response);
  });
 }
 }
}
</script>

至此，終于實(shí)現(xiàn)了前后端的分離，并且保證前后端能夠順利交互。

題外話

讓 controller 能獲取請(qǐng)求參數(shù)

controller 可能無(wú)法獲取請(qǐng)求參數(shù)，這篇文章提供了一種解決方案。我這個(gè) Demo 中并沒(méi)有出現(xiàn) controller 收不到請(qǐng)求參數(shù)的問(wèn)題，但也把這個(gè)問(wèn)題記錄下來(lái)，以后可能遇上也說(shuō)不準(zhǔn)。

axios 方法中的 this

我這個(gè) Demo 中還試著用 axios 發(fā) GET 請(qǐng)求，然后獲取后端響應(yīng)的 JSON 數(shù)據(jù)。

// Information.vue
<template>
 <div>
  <h1>Welcome!</h1>
  <div>
   <b-button @click="getInfo()">Get your information</b-button>
   <h2 v-if="username !== ''">Your username is: {{ username }}</h2>
   <h2 v-if="email !== ''">Your email is: {{ email }}</h2>
  </div>
 </div>
</template>
<script>

import axios from 'axios'

export default {
 data () {
  return {
   username: '',
   email: ''
  };
 },
 methods: {
  getInfo () {
   axios.get('http://localhost:8088/api/information')
   .then(function(response) {
    this.username = response.data['username'];
    this.email = response.data['email'];
    console.log(response);
   }).catch(function(error) {
    console.log(error);
   });
  }
 }
}
</script>

一開始我是這么寫的，乍一看沒(méi)什么問(wèn)題，但是 JavaScript 就一直報(bào)錯(cuò)：

typeError: Cannot set property 'username' of undefined

搞了很久都沒(méi)有解決，直到看到這篇文章，才明白原來(lái)是 this 作用域的問(wèn)題（JavaScript 的 this 是真的復(fù)雜?。。。。８某上旅孢@樣就沒(méi)問(wèn)題了：

axios.get('http://localhost:8088/api/information')
   .then((response) => {
    this.username = response.data['username'];
    this.email = response.data['email'];
    console.log(response);
   }).catch((error) => {
    console.log(error);
   });

后來(lái) Stack Overflow 上有人說(shuō)不用箭頭函數(shù)也行，只需提前把指向 Vue 實(shí)例的 this 保存在一個(gè)變量就行了：

var vue = this;
   axios.get('http://localhost:8088/api/information')
   .then(function (response) {
    vue.username = response.data['username'];
    vue.email = response.data['email'];
    console.log(response);
   }).catch((error) => {
    console.log(error);
   });

經(jīng)實(shí)踐，這樣也是可以的。

Demo 完整源碼

總結(jié)

以上所述是小編給大家介紹的Spring Boot 與 Vue.js 整合流程，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: