【Midway+Vue3】前后端实战，从编码到部署，写一个绝美 todolist

项目预览

技术选型

前端

1. vue3、typescript、setup 语法的基本使用
2. vue-router4、pinia 的使用
3. axios + typescript 的请求封装
4. jwt、refresh token 的使用和处理
5. tailwind css 和 naive-ui 的使用，并接入暗黑模式
6. vue3-dnd 结合 react-dnd-html5-backend 进行拖拽
7. 腾讯云 cos 的使用，获取服务端下发的临时密钥并进行头像上传
8. vite 的使用，图片压缩插件的使用
9. 结合 node-ssh 和 ali-oss 编写服务器部署脚本 和 阿里云 oss 部署脚本

后端

1. midway 框架的使用
2. typeorm + mysql 的增删改查、事务的使用
3. redis 的使用，负责存储短信验证码
4. 接入 腾讯云 sms 短信服务
5. 接入 腾讯云 cos 并下发临时密钥
6. passport 的身份验证库的使用，并接入 localStrategy 本地策略
7. jwt 中间件、全局请求响应中间件、全局异常处理器的编写
8. 多环境部署，测试环境部署至服务器，生产环境部署至 Serverless

部署

1. 接入 gitlab ci/cd，服务器安装 gitlab runner
2. gitlab webhooks 的使用，负责从镜像仓库中拉取最新镜像
3. Dockerfile、docker-compose.yml、.gitlab-ci.yml 的编写
4. docker 的使用，nginx 的常用配置（前端视角）
5. docker compose 的使用，编排了 app(业务)、redis、mysql 三个容器
6. 创建阿里云私有镜像仓库，并进行镜像的 push 和 pull

体验地址

测试环境
http://dev.tutulist.cn

生产环境
https://tutulist.cn

代码地址

前端代码

https://github.com/bravehot/tutulist-web-app

后端代码

https://github.com/bravehot/tutulist-web-server

webhooks

https://github.com/bravehot/tutulist-gitlab-webhooks

文档地址

https://www.yuque.com/aiyouwai/tutulist/gam1z6

最新的文档都已经更新在语雀知识库中，掘金后续也会相继更新，文档中记录了前后端开发到部署的所有内容，并以篇章的形式进行展示。 大家选取自己感兴趣的部分查阅即可

注意

文档中没有列出具体的业务代码。只提供了一些功能的实现思路和部分伪代码，关心代码具体实现的同学请查阅 Github

下一篇

# 【Midway+Vue3】初始化一个 Vue 项目 （前端篇 01）: