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
对用户信息,浏览历史,加密代码等信息做本地可持久化存储,优化了用户体验 - 对部分表单验证进行了单独封装,使表单的验证进行一定意义上的抽离,提高了代码的可复用性
- 使用RABC模型,利用
vue-router
路由控制和后端token
对role角色
的鉴权,实现个人中心的四种常见的权限控制:菜单控制
,按钮控制
,界面控制
,请求与响应的控制