Not all those who wander are lost.
彷徨者并非都迷失方向。
Table of Contents 當你看到這篇文章的時候，暫且認為你對Vue和前后端分離已經有了基本的了解. 前言本篇題為 使用Vue,Spring Boot,Flask,Django 完成Vue前后端分離開發(fā) 將通過一個項目整合(一前端項目對應三個后端項目)，完成一個簡單的DEMO 其中前端項目使用 Vue.js,這個項目將會用到vue,vuex,vue-route,axios,elementUI 等 后端項目使用為 3 個項目，其中涉及Spring Boot,Flask,Django Spring Boot: SpringMVC,JPA,Spring Data REST
Flask: SQLAlchemy
Django: Django REST framework
環(huán)境準備作為第一篇，這里主要介紹Vue環(huán)境的準備工作. nodejs根據實際情況下載對應版本即可
官網地址：https:///zh-cn/download/ 
安裝完成后，在控制臺中輸入：node -v 即可得知安裝的node版本,使用 npm -v 查看 npm 版本 Administrator@RENRENR-21HL6LG MINGW64 ~
$ node -v
v8.11.1
Administrator@RENRENR-21HL6LG MINGW64 ~
$ npm -v
5.6.0
vue-cli如果上面已經驗證正確安裝了 node 和 npm, 則使用 npm install -g vue-cli 完成 vue-cli 的安裝 創(chuàng)建 Vue 項目給項目起名字一直是困擾我的第一個難題，本次將項目暫命名為 mercury(水星) 使用 vue-cli 命令生成項目，命令格式為：vue init webpack Vue-Project, 這里為 vue init webpack mercury, 根據提示填寫項目信息： ? Project name (mercury)
? Project name mercury
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (zyndev <zyndev@gmail.com>)
? Author zyndev <zyndev@gmail.com>
? Vue build standalone
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) y
? Use ESLint to lint your code? Yes
? Pick an ESLint preset (Use arrow keys)
? Pick an ESLint preset Standard
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
安裝過程可能有點慢，安裝完成后,如下 # Project initialization finished!
# ========================
To get started:
cd mercury
npm run dev
Documentation can be found at https://vuejs-templates./webpack
這時，我們可以進入 mercury, 并在控制臺運行 npm run dev,即可開始運行我們的項目 Administrator@RENRENR-21HL6LG MINGW64 /d/scoding
$ cd mercury/
Administrator@RENRENR-21HL6LG MINGW64 /d/scoding/mercury
$ npm run dev
> mercury@1.0.0 dev D:\scoding\mercury
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting DONE Compiled successfully in 5892ms13:59:42
I Your application is running here: http://localhost:8080
從控制臺信息可以看出，訪問路徑為：http://localhost:8080 
這樣準備工作基本就完成了 項目結構這里使用了 VSCode,打開項目后如圖：
 ├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── .babelrc # babel config
├── .editorconfig # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js # eslint config
├── .eslintignore # eslint ignore rules
├── .gitignore # sensible defaults for gitignore
├── .postcssrc.js # postcss config
├── index.html # index.html template
├── package.json # build scripts and dependencies
└── README.md # Default README file
其中，我們主要修改 src 下文件，上面提到項目訪問端口為：8080, 為了防止與其他項目造成沖突，這里將端口改為：7080, 具體配置在 config/index.js 文件中 
使用 elementUI這里使用了
官網：http://element-cn./#/zh-CN/component/installation 這里我們進入剛才的項目目錄：并執(zhí)行 npm i element-ui -S Administrator@RENRENR-21HL6LG MINGW64 /d/scoding/mercury
$ npm i element-ui -S
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ element-ui@2.3.8
added 6 packages in 56.176s
配置 在 main.js 中寫入以下內容： import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
配置完成后的 main.js 文件為： import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App),
components: { App },
template: '<App/>'
})
配置 VuexVuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態(tài)快照導入導出等高級調試功能。
也就是通過 Vuex ，各個組件可以實時的共享狀態(tài) 官網：https://vuex./zh-cn/intro.html 安裝 首先我們先安裝它 npm install vuex --save $ npm i vuex -S
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ vuex@3.0.1
added 1 package in 26.761s
配置 首先在 src 下創(chuàng)建 store 文件夾并在其下創(chuàng)建 store.js 文件
即 src/store/store.js, 同時創(chuàng)建 src/assets/util/cookie.js src/assets/util/cookie.js 文件內容 該文件主要用于操作cookie let cookie = {
setCookie (cname, value, expiredays) {
let exdate = new Date()
exdate.setTime(exdate.getTime() + expiredays)
exdate.setDate(exdate.getDate() + expiredays)
document.cookie = cname + '=' + escape(value) + ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
},
getCookie (name) {
let reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
let arr = document.cookie.match(reg)
if (arr) {
return (arr[2])
} else {
return null
}
},
delCookie (name) {
let exp = new Date()
exp.setTime(exp.getTime() - 1)
let cval = cookie.getCookie(name)
if (cval != null) {
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'
}
}
}
export default cookie
src/store/store.js 內容 這里定義了 userInfo 用來保存當前的用戶信息，包含一個 name 和 token import Vue from 'vue'
import Vuex from 'vuex'
import cookie from '../assets/util/cookie'
Vue.use(Vuex)
const userInfo = {
name: cookie.getCookie('name') || '',
token: cookie.getCookie('token') || ''
}
const store = new Vuex.Store({
state: {
userInfo: userInfo
},
mutations: {
setUserInfo (state) {
state.userInfo = {
name: cookie.getCookie('name'),
token: cookie.getCookie('token'),
}
}
}
})
export default store
在 main.js 添加Vuex配置， import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import store from './store/store'
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App),
components: { App },
template: '<App/>'
})
配置 axiosPromise based HTTP client for the browser and node.js
axios 是一個基于 Promise 的 http client, 通過他，我們向后端進行數據交互，如果你不喜歡它，可以使用jquery的 ajax 代替. 我們來安裝一下 ? mercury git:(master) npm install axios -S
+ axios@0.18.0
added 1 package from 1 contributor in 8.466s
配置 創(chuàng)建 src/axios_config/index.js 文件 import axios from 'axios'
// 全局狀態(tài)控制引入
import store from '../store/store'
import router from '../router'
let host = 'http://api.'
// http request 攔截器
axios.interceptors.request.use(
config => {
if (store.state.userInfo.token) { // 判斷是否存在token，如果存在的話，則每個http header都加上token
config.headers.Authorization = `JWT ${store.state.userInfo.token}`
}
config.baseURL = host
return config
},
err => {
return Promise.reject(err)
})
// http response 攔截器
axios.interceptors.response.use(
undefined,
error => {
let res = error.response
switch (res.status) {
case 401:
// 返回 401 清除token信息并跳轉到登錄頁面
// store.commit(types.LOGOUT);
router.replace({
path: '/console/home/login',
query: {
redirect: router.currentRoute.fullPath
}
})
break
case 403:
console.log('您沒有該操作權限')
break
case 500:
console.log('服務器錯誤')
break
}
return Promise.reject(error.response.data) // 返回接口返回的錯誤信息
})
為 axios 配置攔截器，全局對錯誤的狀態(tài)碼進行攔截，同時設置 header Authorization 添加認證信息 修改 main.js 文件 加入 import './axios_config/'
import Axios from 'axios'
Vue.prototype.$http = Axios
功能頁面
主體頁面
登錄頁面
|
