CMS全棧開發之路總結

• 企業級CMS全棧開發之路總結
• • 技術架構
  • 1.CMS后臺管理系統創建
  • 2.node服務端搭建
  • 3.CMS前臺實現
  • • 流程圖
    • SSR的優點
    • 頁面
  • 4.服務器選配、Linux與Nginx
  • • 1.服務器選配
    • 2.SSH 上傳/下載文件
    • 3.FTP上傳
    • 4.ssh長連接
    • 5.Nginx
    • 6.反向代理解決跨域
  • 5.SSR渲染與線上部署
  • • 1、上傳與安裝依賴
    • 2、pm2部署
    • 3、MySQL線上配置
• 最后

企業級CMS全棧開發之路總結

本項目是學習B站Up主“你單排吧”、前端講師趙文賢的，如果想學習的朋友，可以去b站看看。

通過這個項目，我掌握前端全棧技能。由于自己由后端從node.js開始接觸前端不多，希望通過這次總結，對自己本來node服務端技術進行鞏固，再深入了解前端技術，增長自身能力，最好可以逐漸將項目完善，優化。

技術架構

我采用前后端分離的方式開發，具體技術棧有：

• 服務端：Node、Koa2、MySQL (v5.7)、Git、Linux、Nginx、云服務器購買與部署
• 管理后臺：React (17)、react-router-dom (v6)、React Redux、React Hook、TypeScript、Ant Design、Git
• 前臺頁面：Nuxt、SEO、ElementUI、Git
• 部署上線：pm2 + nginx
• 代碼管理： git

技術架構圖：

1.CMS后臺管理系統創建

本項目采用React+Ant Design+TypeScript開發，React主要使用Function Component的形式做開發，結合路由與請求實現。

主要模塊有登錄模塊，注冊模塊，文章編寫修改模塊，修改資料模塊，管理員權限模塊等，第三方UI采用antd，效果如下：

登錄模塊：

注冊模塊：

主頁模塊：

文章編寫修改模塊：

修改資料模塊：

管理員權限模塊：

文章編輯這塊用的wangeditor，你也可以采用其他更優秀的富文本編輯器實現跟強大的功能。效果圖如下：

總體來說，react做的后臺管理系統主要用到了react-dom，react-router-dom，react-redux，typescript，antd，redux，axios，wangeditor這幾個核心庫，類型檢驗主要用的typescript，主要涉及到接口類型的定義，第一版不會涉及更多諸如泛型的知識，不過會涉及到一點接口的繼承。頁面中的組件的使用，自定義組件的封裝也會在后期詳細介紹，如果有更好的思考，經驗，可以多多交流。

2.node服務端搭建

這里我們采用node社區比較輕量的服務端框架Koa，然后服務端中間件有：

• “jsonwebtoken”: Json web token (JWT),是為了在網絡應用環境間傳遞聲明而執行的一種基于JSON的開放標準。注冊必然要產生token，這是用戶的登錄憑證。

• “koa-bodyparser”:Koa獲取請求體的方式處理請求報文，讓koa可以方便的拿到post/put的數據

• “koa-router”:用來編寫服務端路由和api

• “koa-static”: 提供靜態資源訪問

• “koa2-cors”: 本地聯調時通過cors方式處理跨域問題

• “moment”: 格式化時間

• “mysql”: 連接數據庫

服務端大致分為如下幾層：

3.CMS前臺實現

前臺實現我主要采用vue相關生態去實現，Nuxt.js 是一個基于 Vue.js 的通用應用框架。

通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI 渲染。

我們的目標是創建一個靈活的應用框架，你可以基于它初始化新項目的基礎結構代碼，或者在已有 Node.js 項目中使用 Nuxt.js。

Nuxt.js 預設了利用 Vue.js 開發**服務端渲染（SSR）**的應用所需要的各種配置。

流程圖

SSR的優點

SSR也就是服務端渲染，也就是將Vue在客戶端把標簽渲染成HTML的工作放在服務端完成，然后再把html直接返回給客戶端。

SSR有著更好的SEO、并且首屏加載速度更快等優點。

用到的技術主要有：vue，nuxt，element-ui，antd，axios，moment，vue-server-renderer，vue-template-compiler。

理論上這塊是要涉及到服務端渲染的，因為C端產品一個重要的點就是seo，所以后面也會增加ssr相關的技術實現。

Nuxt可以在asyncData和created中做axios請求。但在created中做請求，渲染出來的數據不會出現在html中，導致無法實現SEO優化，而使用asyncData做請求，則html會被渲染出來，從而實現SSR。

頁面

首頁：

文章列表頁：

文章內容頁

4.服務器選配、Linux與Nginx

1.服務器選配

直接上 aliyun.com (opens new window)購買一臺服務器

2.SSH 上傳/下載文件

SSH 可以通過 scp 命令來上傳文件，是 Linux 系統下基于 SSH 登陸進行安全的遠程文件拷貝命令，scp 是 secure copy 的簡寫，可以使用它上傳本地文件夾到遠程服務器，也可以從遠程服務器上下載文件夾到本地：

3.FTP上傳

你也可以使用ftp工具上傳，如 File Zilla (opens new window)。點擊即可下載。

4.ssh長連接

ssh連接服務器每隔一小段時間沒響應就會自動斷開，這是因為sshd_config的配置影響了。

5.Nginx

Nginx 是開源、高性能、高可靠的 Web 和反向代理服務器，而且支持熱部署，幾乎可以做到 7 * 24 小時不間斷運行，即使運行幾個月也不需要重新啟動，還能在不間斷服務的情況下對軟件版本進行熱更新。

6.反向代理解決跨域

反向代理是工作中最常用的服務器功能，經常被用來解決跨域問題

5.SSR渲染與線上部署

1、上傳與安裝依賴

上傳項目并安裝項目依賴

先將你的項目（除了 node_modules）放到服務器指定的位置

2、pm2部署

先解釋一下什么是pm2：

簡單點說就是讓你不需要像執行 node app.js 一樣，必須一直保持終端開啟，而是可以在你退出命令行界面時，依然將你的項目運行著。

3、MySQL線上配置

目前我們只能訪問根路徑，因為其他路徑基本都需要請求并訪問數據庫讀取數據。因此我們需要把電腦本機的數據庫搬運到服務器上。

最后

本文只作大概的介紹與開發流程的介紹，具體技術后續在補充。

總結

以上是生活随笔為你收集整理的CMS全栈开发之路总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。