Logo - LIFE & SHARE - 王颜公子
Loading... RSS
flask vuejs 全栈开发-min.png
  • Madman
  • ·

Flask Vue.js全栈开发｜第10章：用户通知

实现动态通知已登录的用户，你的文章有新的评论了、你有新的粉丝了、你的评论被人点赞了、你关注的大神又发布新文章了，新的内容会在头像左上角打上红色小点标记，以提醒用户； 通知功能是非常重要和实用的，我设置的时间轮询间隔为 10 秒，你也可以改大一点

flask vuejs 全栈开发-min.png
  • Madman
  • ·

Flask Vue.js全栈开发｜第8章：单元测试

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

flask vuejs 全栈开发-min.png
  • Madman
  • ·

Flask Vue.js全栈开发｜第7章：粉丝关注大神

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

flask vuejs 全栈开发-min.png
  • Madman
  • ·

Flask Vue.js全栈开发｜第6章：博客文章CU...

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

flask vuejs 全栈开发-min.png
  • Madman
  • ·

Flask Vue.js全栈开发｜第5章：个人主页与用户头像

用户认证修改为 JWT（JSON Web Token），后端使用 pyjwt 库生成 JWT 并验证合法性；前端使用 JSON.parse 解析 JWT 中的 payload 数据。提示消息改用 vue-toasted 插件，方便好用。前端每次访问 API 都需要附带 Token 到 Authorization 请求头中，使用请求拦截器自动添加进去，另外设置了响应拦截器，自动处理 401...

flask vuejs 全栈开发-min.png
  • Madman
  • ·

Flask Vue.js全栈开发｜第4章：Vue.js...

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

flask vuejs 全栈开发-min.png
  • Madman
  • ·

Flask Vue.js全栈开发｜第3章：Flask设...

Flask 后端针对 "用户资源" 提供部分 RESTful API，基于 token 认证，目前支持添加用户、查看单个或多个用户、修改用户，使用 HTTPie 或 Postman 测试 API 通过。下一篇将在前端使用这些 API 实现用户注册、登录与退出功能