天生我材必有用，千金散尽还复来（React Hooks + Egg.js + Mysql古诗文全栈项目）

前言

纸上学来终觉浅，绝知此事要躬行。经过一段时间 React 和 Egg.js 的学习，就打算动手写一个功能完善的古诗文app来实战一波,希望本文可以帮助到一些刚刚入门前端的同学，一起来看看吧👀👀👀。

成果预览

线上地址，点击看看，浏览器开手机模拟器效果更佳😀😀😀

gif成果图

项目简介

• 技术栈：React Hooks + Ant Design Mobile+ Redux + Egg.js + Mysql
• 使用 React Hooks 对前端页面的编写
• 使用 Redux 进行全局数据流管理
• 使用 styled-components 样式组件进行样式编写
• 使用 React-Router V6 进行路由配置编写
• 贯彻前端 MVVM 的设计理念，遵循 组件化、模块化 编程思想
• 后端使用node的企业级框架Egg.js编写后端接口
• 使用Mysql存储二十多万条古诗文数据，以及用户信息数据

前端部分

项目前端结构

├─ node_modules       // 依赖包 
├─ public            // 项目使用的公共文件
    favicon.ico      // 网站标签图标
    index.html       // 首页的模板文件
    manifest.json    // 移动端配置文件
├─ src 
    ├─ application   // 四个主页面
    ├─ assets        // 字体配置及图片
    ├─ components    // 其他子页面及组件
    ├─ config        // 请求路径配置
    ├─ routes        // 路由配置文件
    ├─ store         // redux 相关文件 
    App.js           // 根组件
    index.js         // 项目的入口文件
    style.js         // 全局样式
.babelrc             // babel配置文件
.gitignore           // 上传Git需要忽略的文件
package-lock.json    // 锁定安装时的包的版本号
package-json         // 项目及模块包的描述
README.md            // 项目介绍
yarn.lock            // 锁定安装时的包的版本号

路由配置

本项目较为简单就直接使用react-router-dom配置，若项目复杂可以使用react-router的useRouter

• front-end/src/App.js 代码如下：

<Routes>
    <Route path="/*" element={<ButtomTab />} ></Route>                  {/*tabbar界面(整个app的界面：tabbar及四个子路由)*/}

    <Route path="/login" element={<Login />} ></Route>                  {/*登录界面*/}
    <Route path="/register" element={<Register />} ></Route>            {/*注册界面*/}
    <Route path="/index/my/myDetail" element={<MyDetail />} ></Route>   {/*个人信息详情界面*/}
    <Route path="/index/index/poemDetail/:id" element={<PoemDetail />} ></Route>          {/*诗词详情界面*/}
    <Route path="/index/index/search" element={<Search />} ></Route>          {/*搜索详情界面*/}
    <Route path="/index/index/search/searchPoemDetail/:id" element={<SearchPoemDetail />} ></Route>          {/*搜索诗词详情界面*/}
    <Route path="/index/index/sort/sortDetail/:type/:id" element={<SortPoemDetail />} ></Route>          {/*分类诗词详情界面*/}

    <Route path="/index/sort/sortDetail/:type" element={<SortDetail />} ></Route>          {/*分类详情界面*/}
    <Route path="/index/find/findDetail" element={<FindDetail />} ></Route>          {/*发现详情界面*/}

    <Route path="/index/my/myBrowsing" element={<MyBrowsing />} ></Route>      {/*我的浏览历史界面*/}
    <Route path="/index/my/myBrowsing/onePoemDetail/:name" element={<OnePoemDetail />} ></Route>      {/*我的浏览历史界面*/}

    <Route path="/index/my/myCollection" element={<MyCollection />} ></Route>      {/*我的收藏界面*/}
    <Route path="/index/my/myPoemList" element={<MyPoemList />} ></Route>      {/*我的诗单界面*/}
    <Route path="/index/my/myPoemList/addMyPoemList" element={<AddMyPoemList />} ></Route>          {/*添加我的诗单界面*/}
    <Route path="/index/my/myPoemList/updateMyPoemList/:title/:listid" element={<UpdateMyPoemList />} ></Route>          {/*修改我的诗单界面*/}
    <Route path="/index/my/myRecitation" element={<MyRecitation />} ></Route>      {/*我的背诵界面*/}

    <Route path="/index/my/myDetail/updateHeadPic" element={<UpdateHeadPic />} ></Route>      {/*修改头像界面*/}
    <Route path="/index/my/myDetail/updateUserName" element={<UpdateUserName />} ></Route>    {/*修改用户名界面*/}
    <Route path="/index/my/myDetail/updatePassword" element={<UpdatePassword />} ></Route>    {/*修改密码界面*/}
    <Route path="/index/my/myDetail/updateSex" element={<UpdateSex />} ></Route>              {/*修改性别界面*/}
    <Route path="/index/my/myDetail/updatePersonalizedSig" element={<UpdatePersonalizedSig />} ></Route>