嗨!大家好,我是技术胖。
我的博客就使用的教程中的程序,你可以先进行预览一下,预览页面。
文字版在我的博客中,地址如下:3万字文字版教程
我原来的博客是使用的Vuepress ,纯静态网页,也有很多不方便的地方,所以自己作了这个博客程序。
如果你也想用React相关技术作一个网站,我觉的学习这个教程,一定可以做出来,并且可以随心所欲的进行修改。
本教程只适合初中级React开发者,学习需要有React相关知识。(不要担心我的博客中都有免费的基础教程)
如果你觉的这套教程有帮助,请帮忙点赞,让更多的人看到这篇文章
博客使用技术栈
博客前台: React Hooks + Next.js + marked + highlight + Ant Design
数据接口: Egg.js + Mysql
后台: React Hooks + Ant Design
视频中的代码已经开源:开源库Github地址
博客预览图片
视频目录
- 01、博客实战的课程介绍:jspang.com/detailed?id…
- 02、项目前端基础开发环境搭建:jspang.com/detailed?id…
- 03、制作博客公用头部并形成组件:jspang.com/detailed?id…
- 04、完成首页主体的两栏布局:jspang.com/detailed?id…
- 05、利用List组件制作博客列表:jspang.com/detailed?id…
- 06、编写“博主介绍”组件:jspang.com/detailed?id…
- 07、编写“通用广告”组件:jspang.com/detailed?id…
- 08、博客列表页面快速制作:jspang.com/detailed?id…
- 09、博客详细页面制作1-编写基本页面结构:jspang.com/detailed?id…
- 10、博客详细页面制作2-解析Markdown语法:jspang.com/detailed?id…
- 11、博客详细页面制作3-Markdown导航制作:jspang.com/detailed?id…
- 12、中台搭建1-安装egg.js开发环境:jspang.com/detailed?id…
- 13、中台搭建2-egg.js目录结构和约定规范:jspang.com/detailed?id…
- 14、中台搭建3-RESTful API设计简介和路由配置:jspang.com/detailed?id…
- 15、中台搭建4-Egg.js中连接mysql数据库:jspang.com/detailed?id…
- 16、中台搭建5-数据库设计和首页接口制作:jspang.com/detailed?id…
- 17、前中台结合1-前台读取首页文章列表接口:jspang.com/detailed?id…
- 18、前中台结合2-文章详细页面接口制作展示:jspang.com/detailed?id…
- 19、解决egg.js的跨域问题:jspang.com/detailed?id…
- 20、重构前台博客详细页面1-marked+highlight:jspang.com/detailed?id…
- 21、重构前台博客详细页面2-实现文章导航:jspang.com/detailed?id…
- 22、前台文章列表页的制作1-接口模块化和读取文章分类:jspang.com/detailed?id…
- 23、前台文章列表页的制作2-根据类别读取文章列表:jspang.com/detailed?id…
- 24、让前台所有页面支持Markdown解析:jspang.com/detailed?id…
- 25、后台开发01-开发环境搭建:jspang.com/detailed?id…
- 26、后台开发02-页面路由配置:jspang.com/detailed?id…
- 27、后台开发03-编写登录界面:jspang.com/detailed?id…
- 28、后台开发04-UI框架搭建:jspang.com/detailed?id…
- 29、后台开发05-添加文章页面制作1:jspang.com/detailed?id…
- 30、后台开发06-添加文章页面制作2:jspang.com/detailed?id…
- 31、后台开发07-Markdown编辑器制作:jspang.com/detailed?id…
- 32、后台开发08-编写service登录接口:jspang.com/detailed?id…
- 33、后台开发09-实现前台登录操作:jspang.com/detailed?id…
- 34、后台开发10-中台路由守卫制作:jspang.com/detailed?id…
- 35、后台开发11-读取添加文章页面的类别信息:jspang.com/detailed?id…
- 36、后台开发12-添加文章的方法(上):jspang.com/detailed?id…
- 37、后台开发13-添加文章的方法(中):jspang.com/detailed?id…
- 38、后台开发14-添加文章的方法(下):jspang.com/detailed?id…
- 39、后台开发15-文章列表制作(上):jspang.com/detailed?id…
- 40、后台开发16-文章列表制作(中):jspang.com/detailed?id…
- 41、后台开发17-删除文章:jspang.com/detailed?id…
- 42、后台开发18-修改文章(上):jspang.com/detailed?id…
- 43、后台开发19-修改文章(下):jspang.com/detailed?id…
- 44、博客部署介绍和演示:jspang.com/detailed?id…