前言

这是我第一个独立编程，纯自我分析解决需求的仿微博项目(丐版，微博高并发是他的精髓，但是我只是模仿了基本的一些功能)，虽然可能网上同类的项目很多，但是我是靠自己思考各个部分，根据微博官网自己模仿制作的，主要功能并不多，常见的基本的功能已经实现，但是有些同类需求的功能只做了一个，后续有时间会继续增加，主要是了解了一遍从开发到部署的完整流程并且熟悉一下较新的技术栈，个人觉得适合学习完基础知识后没有任何项目经验的人拿来练手熟悉技术栈的使用以及想从0到1实现一个可以在公网访问的全栈项目项目地址

主要技术栈

前端：

⭐ Vue3框架
⭐ Vite构建工具
⭐ Pinia状态管理工具
⭐ Vue-Router4路由
⭐ Create-vue脚手架
⭐ Socket.ioWebSocket库
⭐ Element-Plus组件库
⭐ Typescript语言

后端：

⭐ Koa2框架
⭐ Typescript语言
⭐ Mysql数据库
⭐ Redis内存数据库
⭐ Jwt鉴权方式
⭐ Socket.ioWebSocket库
⭐ SequelizeORM工具
⭐ Sequelize-typescriptsequelize的typescript插件
⭐ 腾讯云对象存储:提供视频文件系统的支持(图片存储在本地服务器)

线上环境运维技术栈(基本配置)

⭐ Nginx
⭐ Pm2
⭐ 腾讯云
⭐ 网站https的配置

前端技术栈介绍

技术栈只是实现的一个工具,思路都是一致的，只是实现方式可能有所区别,可以有很多组合比如js+vue2全家桶(vue2+vue-router3+vuex3+vue-cli(基于webpack))或者是vue3全家桶(vue3+vue-router4+vuex4+vue-cli(基于webpack))，目前vue3的项目许多人都会采用类似于我的配置，有些人可能不想尝试新事物，但我觉得既然上了vue3其实真的可以尝试抛弃js尝试ts,抛弃vuex尝试pinia,抛弃webpack尝试vite,但是也只是建议在练手的时候尝试，如果是企业级项目还是以稳定为主地使用原来稳定的技术栈

Vue3:vue的最新版本，采用hooks组合式api的写法，更好的支持typescript,增加了许多新特性,弥补了许多vue2现有存在的缺陷，以及提升了部分性能
Vite:对标webpack的一个新兴构建工具，相比webpack不用每次保存或者启动时时都全部编译而导致的代码越来越大导致每次启动和保存热更新后需要等待许久的打包时间，而是基于浏览器原生ES imports的开发服务器，利用浏览器去解析imports，不管项目多大，基本都能做到在2s之内启动和热更新，提高开发效率
Create-vue:对标vue-cli的一个基于vite的vue脚手架,和vue-cli类似，可以快速地通过命令行的方式初始化一个基于vite的vue项目，支持pinia,vuex,typescript,vue-router,eslint,preitter组合的vue3项目
Pinia:对标vuex,新一代的状态管理工具，解决了vuex复杂的模块化嵌套以及分离mutation和action区分同步异步操作的问题，更好的支持typescript，扁平化结构所有的要管理的模块都可以独立开启一个仓库，同时pinia支持vue3式的组合式api写法，也可以使用vue2对象的写法

不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和使用来隐式嵌套 Store，但 Pinia 通过设计提供平面结构，同时仍然支持 Store 之间的交叉组合方式。 您甚至可以拥有 Store 的循环依赖关系。

不像vuex只能拥有一个入口文件，其余模块化都基于嵌套，项目长了会造成嵌套过度不利于维护

Vue-Router4:支持vue3版本的vue-router，功能相同，版本不同
Typescript:Javascript的超集，主要用于在编译前在写代码的时候就能通过编辑器提示相应的错误并且可以拥有类型提示，大大降低了维护的难度，但是需要自己额外添加一些类型注释
Element-Plus:``Element-Ui组件库的vue3版本，不过多介绍
Socket.io: node后端与客户端的Websocket封装好的库，可以很方便的用几行代码实现一个的双向通信

后端技术栈介绍

Koa2:node后端框架，高自由度，通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理，阿里企业级框架eggjs也是基于koa开发的，虽然对于企业级的项目来说nestjs eggjs更能胜任，但是简单易学易用更是koa的优点,目前nestjs应该算是最好的框架，但是对于初学者来说nestjs类似于java中spring的写法对于新手比较难上手，而且因为比较新网上相应学习资料也不是很多，建议先学会express或者koa后再去学习eggjs和nestjs
Typescript:与上文介绍一样，但是前端可以通过脚手架一键配置ts，后端koa则需要自己配置ts
Mysql:关系型数据库，比非关系型数据库更加利于维护，查询时也能通过联表查询出各种关系等
Redis:内存数据库，快速读写是他最大的优点，主要为多查少改的数据进行缓存，以及作为多个进程或线程的公共资源池进行线程锁、进程锁和分布式锁的实现
Jwt:鉴权方式，把登录状态与一些简单信息放在客户端存储，每次请求都携带后端生成的token给后端进行校验，不用像session一样将数据存储在后端，但是相应的把登陆状态存在前端的缺点也会出来比如后端无法强制下线等
Socket.io:与上文一样
Sequelize:ORM将数据库表映射为一个个模型，可以通过调用orm的api来进行面向对象式地对数据库进行增删改查，不用自己手写sql语句(复杂的操作还是脱离不了sql语句，orm的api只能进行简单的操作)，orm也可以减少sql注入
Sequelize-typescript:一个sequelize的typescript插件，虽然原生sequelize支持typescript，但是其繁琐的形式真的很不友好，采用此插件可以大大降低维护成本和开发效率

主要功能(有些相同类似的就以一个介绍)

前后端鉴权方案：前后端鉴权采用jwt验证，登录采用邮箱+用户名方式，保证用户名密码忘记后可以通过邮箱找回(短信服务要钱，自己的练手项目先用邮箱足够了，逻辑都相似)
基于vite的模块化：这里举个路由模块化的例子，了解了vite模块化后不仅通过路由可以模块化，各种例如组件的批量导入也可以分模块化而不是全部路由塞进一个入口文件不利于维护，后端模块化采用fs模块批量导入注册所有模型和路由
未登录状态路由的设计：网上许多项目采用未登录通过路由拦截器直接强制跳回登陆页面，我采用如果此接口需要登录则以弹窗方式在当前路由弹出登录弹窗(可关闭)而不是强行回退到登陆界面
前后端统一错误拦截处理：前端通过axios全局处理错误请求，后端通过设计全局错误中间件分类不同请求，前端根据状态码处理不同错误
修改个人资料，重置密码等：修改个人资料与微博官网一样采用原生html标签脱离组件库实现信息校验，也包括前后端的省市区三级联动等
文章发布评论点赞：点赞一个看似不起眼的功能实际上对并发的要求还是很大的，我看了许多设计，放弃了缓存设计，加上缓存就要考虑数据一致性，缓存穿透，击穿，雪崩等问题，虽然自己项目并发量不高几乎不可能出现这些问题，但是为了严谨，放弃了半吊子的缓存(只有缓存，不考虑缓存穿透，击穿，雪崩等问题),就只用了数据库作为存储，然后利用async-lock添加队列解决并发数据一致性问题，所以说不支持高并发，只能解决小并发下的数据一致性问题
文件系统的实现：为了两个练习，我实现了图片系统采用前端压缩图片后并存储在服务器中，视频等大文件采用分片上传至腾讯云对象存储,后端提供临时密钥，前端利用临时密钥上传，包括基本的存储桶配置与权限控制
即时通信：采用基于websocket的socket.io库实现多个客户端实时通信，支持图片与表情，未读状态与未读条数的统计
一些基本优化手段：此项目的功能虽然不多，但是一些简单的优化比如压缩图片，部分图片显示的预处理等还是实现了

主要页面

登录页面：未登录状态下的页面，可以看到大家的微博，但是不能进行点赞评论收藏等功能
注册页面：提供注册功能
个人中心：可以看到大家的帖子，并且可以进行进行点赞评论收藏(收藏与点赞逻辑继续相同，目前没做)等功能，但最多只支持7条评论显示，如果需要查看所有评论需要进入详情页面(与旧版微博官网设计一致)
用户中心:提供用户的信息查看，包括他人的和自己的关注、粉丝、博客、简介等与基础分页功能，自己则可以修改个人信息，头像封面等
重置密码：根据邮箱重置密码，找回密码，修改邮箱等
搜索页面：提供信息搜索功能，查找用户，查找博客，查找图片等
即时通信：采用基于websocket的socket.io库实现多个客户端实时通信，支持图片与表情，未读状态与未读条数的统计，数据库采用假删除+单向删除(一方删除另一方还能正常显示)

学到的东西

所有提及技术栈的使用
简单数据库设计的能力
前后端环境变量的配置与环境搭建
后端并发的知识与常见的加锁解决(用于小并发保证数据的安全性，涉及高并发比如分布式架构我肯定不会)
后端简单接口的设计与实现以及处理幂等接口重复请求的拦截
后端常用中间件的设计与实现
一些前后端开发常见遇到的坑，以及笔记和小技巧会单独总结一遍
后端async await异步处理I/O请求，了解学习Promise和async await在实际的运用
从0到1实现一个项目的开发到部署上线全过程
只提了部分，具体的会在后续有空具体讲解时提出...

主要开发流程

包含一个项目的三个主要环境，开发环境，测试环境，生产环境

1.开发环境配置

个人认为对于没有任何项目经验的人来说配置开发环境是最重要的部分，因为等待开发环境配置完成，后面的开发都只是业务逻辑，并且一次配置，相同的配置可以复用

2.业务开发以及测试

主要的项目涵盖的业务逻辑，提出需求，实现需求，遇到问题查资料解决问题后单元测试功能，但是我自己只做了基础的功能测试，你们可以利用单元测试框架比如jest自己写测试代码实现测试

3.项目上线

项目开发测试完成要上线供用户使用才是最终的目标，主要是线上环境的配置

发现问题的解决心得

发现问题是开发时很正常的现象，但发现问题之后不要急着去解决，先对一个问题进行分析才是最重要的

api使用问题：例如遇到一个语法不会用，建议如果有官方文档，先去官方文档查对于api的资料，或者如果是很常见的api也可以看别人的博客模仿例子解决
有报错问题：如果使用了typescript并且对应的工具有相应的ts类型注释，则这种错误会大大减少，携带自己相应的错误报告，然后进行查询资料建议按照1.最简单报错的问题会在百度必应足够找到相同案例的错误并且解决(但不要养成一出错就搜索的习惯，先根据错误提示看看自己能不能猜出是哪里出了问题，然后反思一下自己的漏洞)2.百度必应不能解决的问题先分两类，如果你已经确定是哪个工具出了错误，比如我的报错信息是vue抛出的错误，那么可以在vue的github仓库issue中查找有没有类似错误，一般都能得以解决，如果无法确定是哪个工具抛出的错误，则可以上stackoverflow、谷歌等搜索引擎查询有没有类似的错误，一般至此也可以得到解决
新需求却不知如何实现：当你有新的需求却不知道如何实现，先分析需求的目标，然后解构成各个过程，如果某个过程思路不太清晰，可以向上面一样在搜索引擎以及别人的博客找到思路并实现，或者提问身边的人共同讨论思考
需求已经实现但出现一些bug：迅速复现bug出现的情形，反思此处代码的逻辑是否有问题，通过打印参数或者注释部分代码等方式定位出现错误的具体位置一般就可以解决了

开发到上线从0到1实现一个自己的前后端分离项目

前言