技術胖手摸手做程序員專屬博客-44集視頻+3萬字長文

嗨！你們好，我是技術胖。

個人博客就使用的教程中的程序，你能夠先進行預覽一下，預覽頁面。

文字版在個人博客中，地址以下:3萬字文字版教程

我原來的博客是使用的Vuepress ，純靜態網頁，也有不少不方便的地方，因此本身做了這個博客程序。

若是你也想用React相關技術做一個網站，我覺的學習這個教程，必定能夠作出來，而且能夠爲所欲爲的進行修改。

本教程只適合初中級React開發者，學習須要有React相關知識。（不要擔憂個人博客中都有免費的基礎教程）

若是你覺的這套教程有幫助，請幫忙點贊，讓更多的人看到這篇文章

博客使用技術棧

博客前臺： React Hooks + Next.js + marked + highlight + Ant Design

數據接口： Egg.js + Mysql

後臺： React Hooks + Ant Design

視頻中的代碼已經開源：開源庫Github地址

博客預覽圖片

視頻目錄

• 0一、博客實戰的課程介紹:jspang.com/detailed?id…
• 0二、項目前端基礎開發環境搭建:jspang.com/detailed?id…
• 0三、製做博客公用頭部並造成組件:jspang.com/detailed?id…
• 0四、完成首頁主體的兩欄佈局:jspang.com/detailed?id…
• 0五、利用List組件製做博客列表:jspang.com/detailed?id…
• 0六、編寫「博主介紹」組件:jspang.com/detailed?id…
• 0七、編寫「通用廣告」組件:jspang.com/detailed?id…
• 0八、博客列表頁面快速製做:jspang.com/detailed?id…
• 0九、博客詳細頁面製做1-編寫基本頁面結構:jspang.com/detailed?id…
• 十、博客詳細頁面製做2-解析Markdown語法:jspang.com/detailed?id…
• 十一、博客詳細頁面製做3-Markdown導航製做:jspang.com/detailed?id…
• 十二、中臺搭建1-安裝egg.js開發環境:jspang.com/detailed?id…
• 1三、中臺搭建2-egg.js目錄結構和約定規範:jspang.com/detailed?id…
• 1四、中臺搭建3-RESTful API設計簡介和路由配置:jspang.com/detailed?id…
• 1五、中臺搭建4-Egg.js中鏈接mysql數據庫:jspang.com/detailed?id…
• 1六、中臺搭建5-數據庫設計和首頁接口製做:jspang.com/detailed?id…
• 1七、前中臺結合1-前臺讀取首頁文章列表接口:jspang.com/detailed?id…
• 1八、前中臺結合2-文章詳細頁面接口製做展現:jspang.com/detailed?id…
• 1九、解決egg.js的跨域問題:jspang.com/detailed?id…
• 20、重構前臺博客詳細頁面1-marked+highlight:jspang.com/detailed?id…
• 2一、重構前臺博客詳細頁面2-實現文章導航:jspang.com/detailed?id…
• 2二、前臺文章列表頁的製做1-接口模塊化和讀取文章分類:jspang.com/detailed?id…
• 2三、前臺文章列表頁的製做2-根據類別讀取文章列表:jspang.com/detailed?id…
• 2四、讓前臺全部頁面支持Markdown解析:jspang.com/detailed?id…
• 2五、後臺開發01-開發環境搭建:jspang.com/detailed?id…
• 2六、後臺開發02-頁面路由配置:jspang.com/detailed?id…
• 2七、後臺開發03-編寫登陸界面:jspang.com/detailed?id…
• 2八、後臺開發04-UI框架搭建:jspang.com/detailed?id…
• 2九、後臺開發05-添加文章頁面製做1:jspang.com/detailed?id…
• 30、後臺開發06-添加文章頁面製做2:jspang.com/detailed?id…
• 3一、後臺開發07-Markdown編輯器製做:jspang.com/detailed?id…
• 3二、後臺開發08-編寫service登陸接口:jspang.com/detailed?id…
• 3三、後臺開發09-實現前臺登陸操做:jspang.com/detailed?id…
• 3四、後臺開發10-中臺路由守衛製做:jspang.com/detailed?id…
• 3五、後臺開發11-讀取添加文章頁面的類別信息:jspang.com/detailed?id…
• 3六、後臺開發12-添加文章的方法(上):jspang.com/detailed?id…
• 3七、後臺開發13-添加文章的方法(中):jspang.com/detailed?id…
• 3八、後臺開發14-添加文章的方法(下):jspang.com/detailed?id…
• 3九、後臺開發15-文章列表製做(上):jspang.com/detailed?id…
• 40、後臺開發16-文章列表製做(中):jspang.com/detailed?id…
• 4一、後臺開發17-刪除文章:jspang.com/detailed?id…
• 4二、後臺開發18-修改文章（上）:jspang.com/detailed?id…
• 4三、後臺開發19-修改文章（下）:jspang.com/detailed?id…
• 4四、博客部署介紹和演示:jspang.com/detailed?id…