前言
來啦老鐵，國慶中秋雙節快樂！！！
筆者學習Spring Boot有一段時間了，附上Spring Boot系列學習文章，歡迎取閱、賜教：
- 5分鐘入手Spring Boot;
- Spring Boot數據庫交互之Spring Data JPA;
- Spring Boot數據庫交互之Mybatis;
- Spring Boot視圖技術;
- Spring Boot之整合Swagger;
- Spring Boot之junit單元測試踩坑;
- 如何在Spring Boot中使用TestNG;
- Spring Boot之整合logback日志;
- Spring Boot之整合Spring Batch：批處理與任務調度;
- Spring Boot之整合Spring Security: 訪問認證;
- Spring Boot之整合Spring Security: 授權管理;
- Spring Boot之多數據庫源：極簡方案;
- Spring Boot之使用MongoDB數據庫源;
- Spring Boot之多線程、異步：@Async;
截至目前，我們學了好些Spring Boot的知識，而在Spring Boot視圖技術、Spring Boot之整合Spring Security: 訪問認證、Spring Boot之整合Spring Security: 授權管理 等我們也初步學習了視圖技術，做了前后端交互Demo。
而如今軟件開發迭代速度之快，前后端分離設計早已深入人心，其必要性不言而喻。今天我們就來學習基于Spring Boot + Vue做前后端分離！
項目代碼已上傳Git Hub倉庫，歡迎取閱：
- 前端：https://github.com/dylanz666/spring-boot-vue-frontend
- 后端：https://github.com/dylanz666/spring-boot-vue-backend（后續文章使用）
整體步驟
由于讀者對前端框架Vue.js有一定的了解和使用經驗，因此我選用Vue.js做為前端框架，整體步驟：
- 環境準備；
- 使用腳手架搭建前端；
- 集成axios模塊；
- 添加Element組件庫；
- 使用Element組件庫添加元素；
- 運行vue前端；
1. 環境準備；
1). 安裝node.js，正常v8+的版本就可以了；
2). 安裝腳手架@vue/cli
npm install -g @vue/cli
或：
npm i -g @vue/cli
2. 使用腳手架搭建前端；
1). 安裝完@vue/cli腳手架后，電腦中找個合適的文件路徑，在路徑下打開cmd窗口執行以下命令，創建vue前端項目：
npm i -g @vue/cli-init
//項目名為：spring-boot-vue-frontend
vue init webpack spring-boot-vue-frontend
2). 然后按cmd窗口的提示，逐步完成相關配置選擇：
3). 命令執行完成后，我們就能得到可直接運行的vue前端項目了，項目結構如下：
4). 修改端口：
vue項目前端默認為8080端口，我們可以在config/index.js內修改默認端口，如port: 8080改為9528（此步驟非必需，自行選擇）：
注：運行時，如果端口被占用，項目會自動選擇空閑的端口，十分貼心！
5). 禁止使用eslint；
eslint可以幫助我們在部署前端的時候（熱部署也是）快速幫我們進行代碼檢查，但有時候與編輯器如vscode的一些代碼建議沖突，筆者不太喜歡使用，我們可以在使用腳手架時選擇不用eslint，或者在選用eslint后，在代碼級別禁用eslint，具體方法為：
build/webpack.base.conf.js中，注釋createLintingRule方法內的代碼，如：
const createLintingRule = () => ({
/* test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
} */
})
6). 運行前端：
項目根目錄底下直接運行以下命令：
npm start
瀏覽器訪問http://localhost:9528 或 http://127.0.0.1:9528 即可看到期待已久的畫面：
3. 集成axios模塊；
Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
主要功能（來自網絡）
- 從瀏覽器中創建 XMLHttpRequests；
- 從 node.js 創建 http 請求；
- 支持 Promise API；
- 攔截請求和響應；
- 轉換請求數據和響應數據；
- 取消請求；
- 自動轉換 JSON 數據；
- 客戶端支持防御 XSRF；
項目根目錄底下，cmd命令行窗口直接執行命令：
npm install axios --save-dev
utils文件夾內新建request.js文件（名字任意），并寫入代碼：
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
// 創建axios實例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 15000 // 請求超時時間
})
// request攔截器
/*
service.interceptors.request.use(config => {
if (store.getters.token) {
config.headers['X-Token'] = getToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改
}
return config
}, error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
})
*/
// respone攔截器
service.interceptors.response.use(
response => {
/**
* code為非200是拋錯 可結合自己業務進行修改
*/
const res = response.data;
if (res.code !== 200) {
Message({
message: res.data,
type: 'error',
duration: 5 * 1000
})
} else {
return response.data;
}
},
error => {
console.log('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
關于axios的使用我們到前后端結合的時候再來介紹！
4. 添加Element組件庫；
Element，一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫。
官方地址：https://element.eleme.cn/#/en-US，使用Element UI
能在vue框架下迅速展開UI設計與實現，也是筆者比較熟悉的組件庫，我將Element UI應用到vue框架內！
1). 安裝Element UI的npm模塊；
npm i element-ui -S --save-dev
2). 將Element UI集成到vue框架內；
修改src/main.js文件：
修改前：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
修改后：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI, { locale })
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
4. 演示如何使用Element組件庫在頁面中添加元素；
1). 在這之前，我先在src底下建立幾個文件夾：
- views文件夾用于存放功能模塊入口.vue文件；
- views文件夾底下創建login文件夾，用于存放login模塊的.vue文件；
- utils文件夾用于存放一些工具類；
- api文件夾用于存放前端請求封裝（基于axios）；
（現有的components文件夾用于后期存放一些我們自己寫的vue組件）
2). 在src/views/login底下新建index.vue文件，并在文件內寫入代碼：
<template>
<div>
<el-button type="success">Element UI button 1</el-button>
<el-button type="danger" @click="sayHello">{{ buttonText }}</el-button>
</div>
</template>
<script>
export default {
name: "login",
data() {
return {
buttonText: "Element UI button 2",
};
},
created() {
console.log("This is vue project!");
},
methods: {
sayHello() {
alert("Hello dylanz!");
},
},
};
</script>
<style>
</style>
3). router中指明路由：
在src/router/index.js文件中聲明訪問路由即頁面的訪問路徑：
修改前：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
修改后：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '@/views/login/index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/login.html',
name: 'login',
component: login
}
]
})
至此，項目整體結構為：
6. 運行vue前端；
在瀏覽器中訪問http://localhost:9528/#/login.html 或 http://127.0.0.1:9528/#/login.html：
您可能會問，這個三角形的圖片哪來的，我們沒在頁面上寫這個代碼啊？
這是因為我們寫的index.vue，會被注入src/App.vue中，進而進行展示（大概是這個意思），因此找到src/App.vue文件，刪除一行代碼：
<img src="./assets/logo.png">
保存后再次訪問（默認有熱部署）就沒有這個圖片啦！
至此，vue框架內集成Element UI到此就基本完成了，還是比較簡單的，有興趣的同學可以玩起來啦！
下一篇，我們將介紹建立一個Spring Boot后端，并且與今天介紹的這個前端進行配合，最終實現一個前后端分離的應用，敬請期待！
如果本文對您有幫助，麻煩點贊+關注！
謝謝！
