但在开发的过程当中,我也确实发现了许多的问题:在写前端页面的时候,大量的 Jinja 的控制代码参差在 html 模板里面,同时还要写不少的 Javascript 代码,这让模板的代码显得混乱不堪。当项目量级增大,后期的维护堪比灾难。而且 Jinja 使用的是模板继承,常常只能将其分解成为一个基模板和许多子页面模板,这也让整个项目头重脚轻(当然也可能是我掌握的还不够多 xD)。
在今年年初,也受其他同学的影响,咱尝试地去接触了 Vue 这个框架,并喜欢上了它的开发模式和设计理念。不过因为中间去学习了一段时间的机器学习算法,所以有挺长一段时间没有接触。这次也是在许多朋友的帮助下完成了这个 Hello World 的项目,真的非常感谢 ヾ(≧▽≦*)o
这次咱实现的是一个简易的购物车,源码已经放在 github 了。
技术栈:
前端:
- vue
- vuex
- axios
后端
- flask
- mysql
- JWT
下面分析一些技术细节
前后端之间的耦合
一般来说,前端都是使用 axios 来进行请求的。这里咱发现使用 axios.create
返回出来的是一个 Promise 对象,所以咱就直接将请求封装成了一个 Request.js
模块,之后在文件中引用时只要写清楚请求的路由就好啦。
requestForItems : function (config) {
const instance = axios.create({
baseURL: url,
timeout: 100000
})
return instance(config)
}
(这里裁切掉了添加请求头的部分)
之后直接将模块 import
到需要用的地方,然后直接调用就行了。
Request.requestForItems({
url: "/goods",
method: "GET"
}).then(res => ...).catch(err => ...)
}
这样子写有两个好处。
如果以后需要更改 api-url 之类的,直接修改 Request.js
文件就行。
如果以后 axios 过时了,那只要修改 Request.js
,然后同样是返回一个 Promise 对象,就可以继续使用了。而不是需要去一个个文件进行修改。
后端全部采用 REST 风格的 API 接口。Flask 提供了一个非常实用的扩展:flask-restful,可以很简单地搭建出 REST 风格的 api。
后端的表单验证我依然是使用了 Flask-wtf。可能有人觉得前后端分离了就不需要 wtforms了,但其实它所带的验证器还是非常好用的。不过有一点就是需要手动关闭 Flask-wtf 的 csrf 验证。在 app 的设置里将 WTF_CSRF_ENABLED
的值设置为 False
即可。
登录系统与验证
由于采用了前后端分离而停用了 csrf 验证,因此也带来了隐患。于是听从了一些 dalao 的建议,采用了 JWT 来进行身份验证。同样地,flask 也提供了 flask-jwt 的扩展来实现。
用户的用户名和密码输入通过之后,后端会返回一个 JWT,之后我是将 JWT 存储在了 cookies 当中,登陆状态则存储在 vuex 当中。如果要登出,则直接将 JWT 从 cookies 当中抛弃即可。
前端打包
开发完成之后需要将前端的代码打包生成 dist。不过当我把 dist 塞到 flask 里面时发现前端对静态文件的请求全都 404 了。不过这个其实完全可以通过修改 vue.config.js
来进行解决。
module.exports = {
publicPath:'./',
assetsDir: 'static',
indexPath: 'templates/index.html',
devServer: {
proxy: {
'/*': {
target: "http://localhost:5000/",
changeOrigin: true
}
}
}
}
这里我直接将其打包生成 flask 所能读取的形式,直接将 dist 塞到 flask 里面,就能正常使用了。
后记
在这里非常感谢 小透明・宸 和 かない 两位 dalao 在项目开发过程当中的帮助,万分感谢 q(≧▽≦q)
这个项目也是咱的一次技术验证,之后就要着手将这些技术放到新博客的开发当中啦!
Comments | 1 条评论
(〜 ̄△ ̄)〜