我们的项目源码开放啦！

大家好，我是Smooth，一名大二的前端爱好者，目标是想要成为一名高级前端开发工程师

字节第二届寒假青训营也算正式落幕啦，在这其中收获良多。

成果：

44支队伍经过初审 + 终审，最终获得了第五名，成绩还算不错hh，也获得了评委老师一定的评价。

过程

20天，112次 commit

项目做到一半突然想着下一个TIME MASTER记录一下哈哈，可惜之前那一半代码量记录不进来咯

同时呢，结识到了很多厉害的人，眼界开阔了很多，也激起了自己更加努力的热情

下面就对我们的项目做个简单的介绍吧

项目简介

本项目名为摸鱼学社，是一个基于 React + Egg 的类掘金的社区网站，主要面向程序员这一群体，故我们保留了与掘金的大部分功能，并在此基础之上增加了唠嗑圈、力扣专区，满足程序员在摸鱼的同时不忘学习，我们在后期也会根据程序员这一群体的特殊性增加一些开发工具、自定义网站等功能。

目标：致力于打造一个信息覆盖面广、体验良好、找到家一般的功能社区网站

项目灵感

作为掘金忠实用户，在平日浏览掘金社区时可能会因为一直看着蓝色而神经感到疲倦，所以有了想法可不可以不仅限于蓝色，然后再定制一个自己舒服的字体大小便于慢慢浏览，即用户可以自定义来丰富自己的体验

对标产品：微博、Twitter、掘金社区、鱼塘热榜、清华摸鱼导学论

项目分工

• 黄馨莹：后端项目整体架构+Egg后端部署+MySql数据库设计+API接口文档设计

• 张健聪：前端项目整体架构 + 前端部署 + 开发首页、力扣专区、唠嗑圈、个人主页、个人设置、注册登录、文章撰写、文章详情、话题详情，年度报告页面，并进行用户体验优化、性能优化

• 刘轶贝：原型图、标签管理、草稿箱、回到顶部组件

• 曹泽：文章撰写页 的需求调研

• 于童：文章详情页-热点文章模块
  
  
  

  项目技术栈

  前端

• 主框架：React(全面拥抱 Hook )、React-Router v6

• 脚手架：create-react-app

• CSS解决方案：styled-components

• UI框架：Ant Design

• 登录鉴权：JWT

• 动画库：animate.css、react-transition-group、particles-bg

• 网络请求：axios

• 异步解决方案：promise、async/await

• 协作工具：Git

• 打包工具：Webpack

• 包管理工具：yarn

• 规范：eslint-plugin-react-hooks

• 函数工具库：echarts、moment、lodash、mo.js、vditor
  
  
  

  后端

• 主框架：Egg
• 数据库：MySql
• 插件：egg-mysql egg-validate egg-jwt egg-cors
• API设计风格：RESTful API
  
  
  

  项目亮点

  创新点

1. 根据程序员这一群体的特殊性，我们集合了社区、力扣、markdown拓展、自定义工具库等等功能
2. 定制化个人设置，让每个用户都有一个不一样的体验（例如主题色、文章字体大小）
3. 提供年度报告等统计数据，采用echarts进行可视化函数，直观展示出数据
4. 提供单次阅读时长提醒，让您在浏览社区的同时同时注意休息
5. 提供文章稍后再看的缓存功能，让您可以记录下自己想看的文章
6. 页面中增加动画过渡，更符合视觉感受
   
   
   

性能优化

1. 使用React官方的Suspense及lazy组件实现路由懒加载及组件按需加载，减少首屏加载时间
2. 使用魔法注释webpackChunkName减少打包时包体积
3. 利用缓存，不重复加载相同资源且加快资源访问速度，提升用户体验(配置 runtimeChunk 和 利用浏览器缓存)
4. 通过webpack本地对js和css文件做gzip压缩，减轻服务器压力
5. 使用分页和图片懒加载减少页面同时加载多个DOM节点的压力
6. 防抖和节流，限制了短时间内页面滚动次数和图标点击次数，减少前端多次请求js和后端多次请求数据的压力
   
   
   

   用户体验

   空白时使用加载中图标、骨架屏作视觉上的过渡

   页头、文章详情页实现视差滚动

   右下角提供返回顶部组件

   设置隐藏彩蛋，文章详情处点赞可触发

   
   
   

   具体信息可以查看开发文档链接
   内有前后端源码，以及api文档

摸鱼学社开发文档
https://lhcgmmdf97.feishu.cn/docs/doccnYqYVMI4JMLmANnXKGCwdKe#

项目预览地址
loaf.zhangjiancong.top

🎁 以上便是文章的全部内容啦
🎁 觉得有用的小伙伴们可以点个赞支持鼓励一下我
🎁 我也会在今后努力产出更多好文

最后

最后，我叫Smooth，在今年2022年我也会尽自己所能书写更多前端教程，期待你的关注~

我的个人博客最近也在加紧同步中，欢迎参观：Smooth的个人博客

leetCode 这是我建的力扣刷题仓库，会逐渐推出阿里云天池计划、HOT100、剑指offer等等系列，可以给个 star 支持一下，久更不易

最近发文计划为 Webpack 以及 性能优化 知识体系

同时也可扫码关注我的公众号，公众号同步更新