codepaste 项目介绍

推荐一个适合前端学完vue3，了解ts和node之后就能上手的简单的小项目，比一些传统的仿论坛项目，创意可能新一点，实质内容差不多。

视频演示地址： 视频链接

项目上线地址： codepaste 代码粘贴分享平台

项目背景： 聊天工具传输一段代码时会出现字符解析问题，或者全角或半角字符切换的问题，例如qq上的#include<bits/stdc++.h> => 会解析出 ，还有微信传输python代码时，会偶尔出现原本缩进对齐的代码传输时产生误差，导致出现肉眼难以debug的情况…

项目调研：市面上用的比较多的贴代码的比较好点的网站，比如： paste.ubuntu.com ， pastebin.com ， carbon.now.sh 等，但这些网站的缺点是全英文，对于英文不好的可能出现难以适应操作步骤，登录注册有的需要Google邮箱，或者没有登录注册功能。

项目主要内容：一个小而全的代码粘贴分享平台，支持粘贴代码的发布，分享，导出图片，外部引用链接，一键复制粘贴，下载代码，加密分享的功能，并能够发布代码的相关评论，浏览已存在的代码，支持用户对个人信息，已发布的代码，评论进行管理，查看浏览记录等功能

项目亮点：

• 使用cdn，gzip压缩，浏览器缓存技术，优化首屏访问速度，打开时间从4.7s =>1.2s
• 使用Vue3的composition api的优势，手动封装了一些通用操作，例如 useCodeTools 汇聚代码相关功能的工具箱（导出图片，分享链接…），useAuth 用户权限验证（登录，注册，退出登录），useDialogPut， useDecrpt，useFavorite…
• 手动封装axios后，利用typescript的泛型约束，设置自定义response，配置不同请求的response
• 利用pinia 对用户信息，浏览历史，加密代码等信息做本地可持久化存储，优化了用户体验
• 对部分表单验证进行了单独封装，使表单的验证进行一定意义上的抽离，提高了代码的可复用性
• 使用RBAC模型，利用vue-router路由控制和后端token 对role角色的鉴权，实现个人中心的四种常见的权限控制：菜单控制，按钮控制，界面控制，请求与响应的控制