flask vuejs 全栈开发-min.png

未经测试的小猫,肯定不是一只好猫。本文是填补之前没有进行任何单元测试的坑,使用 Python 自带的 unittest 包,当然你也可以使用 pytest 包。另外,Flask 内建了一个测试客户端 app.test_client(),它能复现程序运行在 Web 服务器中的环境,扮演成客户端从而发送请求。为了查看我们的测试代码覆盖率,需要安装 coverage 包,并创建一个 Flask CLI 命令 - flask test,以后修改业务逻辑了,请跑一遍测试用例

flask vuejs 全栈开发-min.png

要实现粉丝机制,需要使用 SQLAlchemy ORM 的多对多关系,需要额外定义一个用于多对多关系的关联表,强烈建议不使用模型,而是采用一个实际的表。粉丝机制的多对多还比较特殊,它只有一张用户表,所以是自引用关系。前端使用 Vue.js 的 vue-router 嵌套路由来实现在用户个人主页,切换页签分别查看用户的已关注的用户列表、用户的粉丝列表、用户的文章列表、用户关注的大神们的文章列表

flask vuejs 全栈开发-min.png

介绍了 SQLAlchemy 一对多关系以及如何实现级联删除,Post API 设计跟 User 基本类似。前端要支持 Markdown 的话,首先需要给用户提供一个编辑器,这里使用 bootstrap-markdown 插件;渲染也由前端完成,使用 vue-markdown,代码语法高亮使用 highlight.js 插件。博客 CURD 的实现,修改时使用 vue-sweetalert2 弹出确认框,分页栏的生成请查看代码

flask vuejs 全栈开发-min.png

用户认证修改为 JWT(JSON Web Token),后端使用 pyjwt 库生成 JWT 并验证合法性;前端使用 JSON.parse 解析 JWT 中的 payload 数据。提示消息改用 vue-toasted 插件,方便好用。前端每次访问 API 都需要附带 Token 到 Authorization 请求头中,使用请求拦截器自动添加进去,另外设置了响应拦截器,自动处理 401 和 404 错误。用户头像使用在线的 Gravatar 服务,前端使用 moment.js 格式化时间。个人主页的路由参数变化后默认是重用组件并不会重新加载数据,要使用 vue-router 的 beforeRouteUpdate() 导航守卫

flask vuejs 全栈开发-min.png

前端 Vue.js 如何划分组件,要动态显示 Alert 消息,父组件通过 props 给子组件传值即可。用户登录前后,导航栏上分别显示 Login 和 Logout 按钮,需要使用 store 模式维护一个共同的状态。另外,vue-router 的 beforeEach 可以指定哪些路由需要用户认证