node vue moba

【全端之巔】Node.js + Vue.js 全端開發王者榮耀手機端官網與管理後台

本專案是Bilibili 全端之巔影片教學相關原始碼https://github.com/wxs77577/node-vue-moba 持續更新... 請關注

一、 入門

1. 項目介紹
2. 工具安裝與環境建構(nodejs,npm,mongodb)
3. 初始化專案

二、 管理後台

1. 基於Element UI的後台管理基礎介面搭建

2. 建立分類

3. 分類列表

4. 修改分類

5. 刪除分類

6. 子分類

7. 通用CRUD 介面

8. 裝備管理

9. 圖片上傳(multer)

10. 英雄管理

11. 編輯英雄(關聯,多選,el-select, multiple)

12. 技能編輯

13. 文章管理

14. 富文本編輯器(quill)

15. 首頁廣告管理

16. 管理員帳號管理(bcrypt)

17. 登入頁面

18. 登入介面(jwt,jsonwebtoken)

19. 服務端登入校驗

20. 客戶端路由限制(beforeEach, meta)

21. 上傳檔案的登入校驗(el-upload, headers)

三、行動端網站

1. "工具樣式"概念與SASS (SCSS)
2. 樣式重設
3. 網站色彩和字型定義(colors, text)
4. 通用flex佈局樣式定義(flex)
5. 常用邊距定義(margin, padding)
6. 主頁框架和頂部選單
7. 首頁頂部輪播圖片(vue swiper)
8. 使用精靈圖片(sprite)
9. 使用字型圖示(iconfont)
10. 卡片組件(card)
11. 清單卡片組件(list-card, nav, swiper)
12. 首頁新聞資訊-資料輸入(+後台bug修復)
13. 首頁新聞資訊-數據接口
14. 首頁新聞資訊-介面展示
15. 首頁英雄列表-提取官網數據
16. 首頁英雄列表-錄入數據
17. 首頁英雄列表-介面展示
18. 新聞詳情頁
19. 新聞詳情頁-完善
20. 英雄詳情頁-1-前端準備
21. 英雄詳情頁-2-後台編輯
22. 英雄詳情頁-3-前端頂部
23. 英雄詳情頁-4-完善

四、發布和部署(阿里雲)

1. 生產環境編譯
2. 購買網域名稱和伺服器
3. 網域解析
4. Nginx 安裝與設定
5. MongoDB資料庫的安裝與配置
6. git 安裝、設定ssh-key
7. Node.js 安裝、設定淘寶鏡像
8. 拉取程式碼，安裝pm2並啟動項目
9. 配置Nginx 的反向代理
10. 遷移本機資料到伺服器(mongodump)

五、進階

1. 使用免費SSL憑證啟用HTTPS安全連接
2. 使用阿里雲OSS雲端儲存存放上傳文件