# react_blog **Repository Path**: yyzsn_willem/react_blog ## Basic Information - **Project Name**: react_blog - **Description**: 技术胖个人使用博客系统 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2021-12-21 - **Last Updated**: 2021-12-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## React hooks + Next.js + Egg.js 博客系统 ### 系统介绍 这是一个适合写IT技术文章的博客系统，主要使用的技术是React Hooks + Next.js + Egg.js + MySql + Ant Design 。从技术上你不难看出，这个博客主要用的技术都是前端程序员熟悉的技术，所以适合前端程序员使用。 对Markdown的解析使用marked+highlight的方式，这也是目前最成熟的R解决方案。 博客预览地址：[https://jspang.com](https://jspang.com) 博客预览图片： ![React Demo](http://newimg.jspang.com/blog-demo01.jpg) ![React Demo](http://newimg.jspang.com/blog-demo02.jpg) ![React Demo](http://newimg.jspang.com/blog-demo03.jpg) ![React Demo](http://newimg.jspang.com/blog-demo04.jpg) ![React Demo](http://newimg.jspang.com/blog-demo05.jpg) ![React Demo](http://newimg.jspang.com/blog-demo06.jpg) 为了更好的使用这个博客，我还出了44集视频，你可以进行观看学习，学习完成你一定可以轻松使用这套系统。 - 01、博客实战的课程介绍:[https://jspang.com/detailed?id=52#toc21](https://jspang.com/detailed?id=52#toc21) - 02、项目前端基础开发环境搭建:[https://jspang.com/detailed?id=52#toc25](https://jspang.com/detailed?id=52#toc25) - 03、制作博客公用头部并形成组件:[https://jspang.com/detailed?id=52#toc210](https://jspang.com/detailed?id=52#toc210) - 04、完成首页主体的两栏布局:[https://jspang.com/detailed?id=52#toc213](https://jspang.com/detailed?id=52#toc213) - 05、利用List组件制作博客列表:[https://jspang.com/detailed?id=52#toc217](https://jspang.com/detailed?id=52#toc217) - 06、编写“博主介绍”组件:[https://jspang.com/detailed?id=52#toc220](https://jspang.com/detailed?id=52#toc220) - 07、编写“通用广告”组件:[https://jspang.com/detailed?id=52#toc224](https://jspang.com/detailed?id=52#toc224) - 08、博客列表页面快速制作:[https://jspang.com/detailed?id=52#toc228](https://jspang.com/detailed?id=52#toc228) - 09、博客详细页面制作1-编写基本页面结构:[https://jspang.com/detailed?id=52#toc231](https://jspang.com/detailed?id=52#toc231) - 10、博客详细页面制作2-解析Markdown语法:[https://jspang.com/detailed?id=52#toc233](https://jspang.com/detailed?id=52#toc233) - 11、博客详细页面制作3-Markdown导航制作:[https://jspang.com/detailed?id=52#toc238](https://jspang.com/detailed?id=52#toc238) - 12、中台搭建1-安装egg.js开发环境:[https://jspang.com/detailed?id=52#toc241](https://jspang.com/detailed?id=52#toc241) - 13、中台搭建2-egg.js目录结构和约定规范:[https://jspang.com/detailed?id=52#toc244](https://jspang.com/detailed?id=52#toc244) - 14、中台搭建3-RESTful API设计简介和路由配置:[https://jspang.com/detailed?id=52#toc247](https://jspang.com/detailed?id=52#toc247) - 15、中台搭建4-Egg.js中连接mysql数据库:[https://jspang.com/detailed?id=52#toc250](https://jspang.com/detailed?id=52#toc250) - 16、中台搭建5-数据库设计和首页接口制作:[https://jspang.com/detailed?id=52#toc256](https://jspang.com/detailed?id=52#toc256) - 17、前中台结合1-前台读取首页文章列表接口:[https://jspang.com/detailed?id=52#toc259](https://jspang.com/detailed?id=52#toc259) - 18、前中台结合2-文章详细页面接口制作展示:[https://jspang.com/detailed?id=52#toc264](https://jspang.com/detailed?id=52#toc264) - 19、解决egg.js的跨域问题:[https://jspang.com/detailed?id=52#toc268](https://jspang.com/detailed?id=52#toc268) - 20、重构前台博客详细页面1-marked+highlight:[https://jspang.com/detailed?id=52#toc272](https://jspang.com/detailed?id=52#toc272) - 21、重构前台博客详细页面2-实现文章导航:[https://jspang.com/detailed?id=52#toc276](https://jspang.com/detailed?id=52#toc276) - 22、前台文章列表页的制作1-接口模块化和读取文章分类:[https://jspang.com/detailed?id=52#toc279](https://jspang.com/detailed?id=52#toc279) - 23、前台文章列表页的制作2-根据类别读取文章列表:[https://jspang.com/detailed?id=52#toc284](https://jspang.com/detailed?id=52#toc284) - 24、让前台所有页面支持Markdown解析:[https://jspang.com/detailed?id=52#toc288](https://jspang.com/detailed?id=52#toc288) - 25、后台开发01-开发环境搭建:[https://jspang.com/detailed?id=52#toc290](https://jspang.com/detailed?id=52#toc290) - 26、后台开发02-页面路由配置:[https://jspang.com/detailed?id=52#toc293](https://jspang.com/detailed?id=52#toc293) - 27、后台开发03-编写登录界面:[https://jspang.com/detailed?id=52#toc296](https://jspang.com/detailed?id=52#toc296) - 28、后台开发04-UI框架搭建:[https://jspang.com/detailed?id=52#toc2100](https://jspang.com/detailed?id=52#toc2100) - 29、后台开发05-添加文章页面制作1:[https://jspang.com/detailed?id=52#toc2103](https://jspang.com/detailed?id=52#toc2103) - 30、后台开发06-添加文章页面制作2:[https://jspang.com/detailed?id=52#toc2106](https://jspang.com/detailed?id=52#toc2106) - 31、后台开发07-Markdown编辑器制作:[https://jspang.com/detailed?id=52#toc2110](https://jspang.com/detailed?id=52#toc2110) - 32、后台开发08-编写service登录接口:[https://jspang.com/detailed?id=52#toc2115](https://jspang.com/detailed?id=52#toc2115) - 33、后台开发09-实现前台登录操作:[https://jspang.com/detailed?id=52#toc2119](https://jspang.com/detailed?id=52#toc2119) - 34、后台开发10-中台路由守卫制作:[https://jspang.com/detailed?id=52#toc2123](https://jspang.com/detailed?id=52#toc2123) - 35、后台开发11-读取添加文章页面的类别信息:[https://jspang.com/detailed?id=52#toc2127](https://jspang.com/detailed?id=52#toc2127) - 36、后台开发12-添加文章的方法(上):[https://jspang.com/detailed?id=52#toc2132](https://jspang.com/detailed?id=52#toc2132) - 37、后台开发13-添加文章的方法(中):[https://jspang.com/detailed?id=52#toc2137](https://jspang.com/detailed?id=52#toc2137) - 38、后台开发14-添加文章的方法(下):[https://jspang.com/detailed?id=52#toc2137](https://jspang.com/detailed?id=52#toc2137) - 39、后台开发15-文章列表制作(上):[https://jspang.com/detailed?id=52#toc2146](https://jspang.com/detailed?id=52#toc2146) - 40、后台开发16-文章列表制作(中):[https://jspang.com/detailed?id=52#toc2149](https://jspang.com/detailed?id=52#toc2149) - 41、后台开发17-删除文章:[https://jspang.com/detailed?id=52#toc2153](https://jspang.com/detailed?id=52#toc2153) - 42、后台开发18-修改文章（上）:[https://jspang.com/detailed?id=52#toc2157](https://jspang.com/detailed?id=52#toc2157) - 43、后台开发19-修改文章（下）:[https://jspang.com/detailed?id=52#toc2161](https://jspang.com/detailed?id=52#toc2161) - 44、博客部署介绍和演示:[https://jspang.com/detailed?id=52#toc2164](https://jspang.com/detailed?id=52#toc2164) ### 后期更新计划 1. 修改完善目前的博客前台Bug。 2. 增加好课推荐功能。 3. 优化后台对应的功能和安全性。 4. 增加留言功能。