⼗分钟使⽤VUE和Flask快速搭建前后端分离项⽬
基于项⽬搭建个⼈笔记本放在树莓派上吧!
项⽬代码已上传⾄GITEE
前后端分离
技术栈:
后端 :
1.flask
2.sqlalchemy
3.sqlite
前端 :
1. VUE
2. AXIOS
3. ELEMENTUI
介绍
使⽤el-table模拟⽂件Tree系统，使⽤懒加载来增强体验，编辑器选⽤为mavon-editor，预览使⽤markdown-it，在后端使⽤正则表达式解析markdown toc⽬录增强浏览体验，编辑期间前端定时器会简单的定时缓存数据到后端
因为css和js没有⾛cdn会很慢
总体分为两部分: flask搭建的后端接⼝以及VUE的前端界⾯
前端代码后台基于GITHUB⼤佬的，在这⾥使⽤了⼤佬的简单模板并进⾏修改，模板代码源于。
项⽬准备
基于vue-cli进⾏构建，电脑需安装npm环境
在(⽂中以VAT来简称)中clone代码, 根据markdown中⽂⽂档步骤构建环境并启动
准备⼀个最⼩的应⽤，若未使⽤过flask请于链接了解，⽂档中会有完整代码
1.开始吧!和Flask交互起来
以npm run dev模式启动VAT框架，框架启动后可以发现输⼊任意密码既可以登录进后台中，是因为后台框架使⽤的是./mock⽂件中的数据进⾏后端模拟；
进⼊后发现框架已经做好了侧边栏，⾯包屑，以及基于AXIOS的token验证机制，只需要简单的修改既可以与后端进⾏交互起来
简单的调整
1.1 需要更改后端接⼝地址
更改⽂件 ./.env.development
# just a flag
ENV = 'development'
# base api
# VUE_APP_BASE_API = '/dev-api' # 更改为后端接⼝地址
VUE_APP_BASE_API = 'localhost:5000' # FLASK端⼝5000
删除模板中的mock数据的引⽤
更改⽂件./src/main.js 对如下部分进⾏注释 并⾃⼰选择是否使⽤中⽂版本的 element-ui
根据注释说明修改
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
* you can execute: mockXHR()
*
* Currently MockJs will be used in the production environment,
* please remove it before going online ! ! !
*/
v.NODE_ENV==='production'){
const{ mockXHR }=require('../mock')
mockXHR()
}
/
/ set ElementUI lang to EN
Vue.use(ElementUI,{ locale })
// 如果想要中⽂版 element-ui，按如下⽅式声明
// Vue.use(ElementUI)
重启前端服务，直到登录时显⽰network Error
1.2 阅览VAT框架中与后端交互的request模块
解析 @utils/requests.js
上半部分是对axios请求做了⼀个基本的配置，请求路径为 env.development中的 VUE_APP_BASE_API，超时时间为5s
const service = ate({
baseURL: v.VUE_APP_BASE_API,// url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout:5000// request timeout
})
中间部分为配置axios的请求头，对请求(request)进⾏预处理，携带token进⾏验证
quest.use(
config =>{
// do something before request is sent
s.token){
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['X-Token']=getToken()
}
return config
},
error =>{
// do something with request error
console.log(error)// for debug
ject(error)
}
)
后⾯部分为axios的返回数据(response)
如下代码可知 VAT框架模板预留了⼏个 response status code 英⽂注释⽐较清晰明了
response =>{
const res = response.data
// if the custom code is not 20000, it is judged as an error.
de !==20000){
Message({
message: ssage ||'Error',
type:'error',
duration:5*1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
de ===50008|| de ===50012|| de ===50014){
/
/ to re-login
cancelButtonText:'Cancel',
type:'warning'
}).then(()=>{
store.dispatch('user/resetToken').then(()=>{
})
})
}
ject(new ssage ||'Error'))
}else{
return res
}
},
error =>{
console.log('err'+ error)// for debug
Message({
message: ssage,
type:'error',
duration:5*1000
})
ject(error)
}
)
1.3 根据需求进⾏request请求代码的更改
import axios from'axios'
import{ MessageBox, Message }from'element-ui'
import store from'@/store'
import{ getToken }from'@/utils/auth'
// create an axios instance
const service = ate({
baseURL: v.VUE_APP_BASE_API,// url = base url + request url
/
/ withCredentials: true, // send cookies when cross-domain requests
timeout:5000// request timeout
})
// request interceptor
quest.use(
config =>{
// do something before request is sent
s.token){
// vuex 携带token验证
Object.assign(config.headers,{ Authorization:'Bearer '+getToken()})
}
return config
},
error =>{
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论