云開發(fā)與CMS開發(fā)個人博客

時間：2023-05-30 18:48:01 | 來源：網(wǎng)站運營

時間：2023-05-30 18:48:01 來源：網(wǎng)站運營

云開發(fā)與CMS開發(fā)個人博客：前言

本篇文章運用 云開發(fā) + CMS + 靜態(tài)托管 來實現(xiàn)一個簡單的博客搭建。

云開發(fā)簡介

云開發(fā)為我們提供了一體化的后端云服務(wù)，使我們可以專注于頁面邏輯，不必去關(guān)心服務(wù)器搭建和運維。

實現(xiàn)思路

通過 CMS 來實現(xiàn)對文章的增刪改，并通過云函數(shù)獲取文章，渲染到已經(jīng)上傳靜態(tài)托管的頁面中。

環(huán)境要求

Node.js

安裝

云開發(fā)環(huán)境

• 你需要有一個云開發(fā)的環(huán)境 創(chuàng)建地址
  
• 點擊新建環(huán)境
  
• 選擇按量付費(需要云開發(fā)的靜態(tài)網(wǎng)站托管)
• 勾選開啟免費資源(每個賬戶只能開通一個免費資源)


• 等待環(huán)境初始化完成即可
  

• 進入云開發(fā)環(huán)境中選擇 靜態(tài)網(wǎng)站托管 并開通。

cloudbase/cli

CloudBase CLI 是一個開源的命令行界面交互工具，用于幫助用戶快速、方便的部署項目，管理云開發(fā)資源。

npm i -g @cloudbase/cli 或 yarn global add @cloudbase/cli

初始化云開發(fā)項目

首先執(zhí)行tcb login來進行登錄授權(quán)。 一切準備就緒后，我們可以進行云開發(fā)項目的搭建，使用 tcb init 來初始化項目，并選擇 vue模板

tcb init√ 選擇關(guān)聯(lián)環(huán)境 · xxxxxx - [xxxxxx-xxxx:按量計費]√ 選擇云開發(fā)模板 · Vue 應(yīng)用√ 請輸入項目名稱 · vue-cloudbase√ 創(chuàng)建項目 vue-cloudbase 成功！進入到 vue-cloudbase 中執(zhí)行 npm i 安裝項目所需依賴。

認識云函數(shù)

在創(chuàng)建的云開發(fā)項目目錄中，云函數(shù) 位于 cloudfunctions 中。每個模板都會給我們提供一個云函數(shù)。

const cloud = require("@cloudbase/node-sdk");exports.main = async (event, context) => { const app = cloud.init({ env: cloud.SYMBOL_CURRENT_ENV, }); // todo // your code here return { event, };};云函數(shù)的傳入?yún)?shù)有兩個對象， event 對象和 context 對象。

• event: event 對象指的是觸發(fā)云函數(shù)的事件,可以接受調(diào)用云函數(shù)時傳入的參數(shù)。
• context: context 對象包含了此處調(diào)用的調(diào)用信息和運行狀態(tài)，可以使用 context 了解服務(wù)運行的情況。

上傳云函數(shù)

這里推薦一個 Visual Studio Code：Tencent CloudBase Toolkit

Tencent CloudBase Toolkit 是騰訊云 - 云開發(fā)發(fā)布的 VS Code（Visual Studio Code）插件。該插件可以讓您更好地在本地進行云開發(fā)項目開發(fā)和代碼調(diào)試，并且輕松將項目部署到云端。

在云函數(shù)中我們看到引入了 @cloudbase/node-sdk ，所以我們需要到其目錄下執(zhí)行npm i 來安裝依賴。

安裝結(jié)束后，我們點擊云函數(shù)目錄進行上傳。

我們只需要在第一次創(chuàng)建的時候進行部署上傳，后續(xù)修改云函數(shù)的話只需要更新文件即可~

預覽

當我們執(zhí)行 npm run dev 后即可到對應(yīng)的鏈接進行預覽。

上傳到靜態(tài)網(wǎng)站托管

• 首先我們執(zhí)行 npm run build 對項目進行打包
  
• 對打包好的 dist 進行上傳
  

• 在彈出的框中輸入 vue

上傳完畢后我們可以在靜態(tài)網(wǎng)站托管 中查看默認域名。并預覽到已上傳的 Vue 云開發(fā)項目。

CMS 安裝

云開發(fā)為我們提供了 CMS內(nèi)容管理系統(tǒng) 的擴展能力，我們進入到 擴展管理

在 更多擴展能力 中找到 CMS內(nèi)容管理系統(tǒng) 并安裝。

安裝后我們可以通過云開發(fā)靜態(tài)托管默認域名/部署路徑訪問。

例如: https://xxxx.tcloudbaseapp.com/tcb-cms/(這里的默認域名，也可以是自己綁定的域名哦~)

關(guān)于 CMS 詳細教程 CMS

CMS 新建文章管理

我們的博客離不開文章的發(fā)布，刪除，修改等。

我們選擇內(nèi)容設(shè)置 =》 新建

并對內(nèi)容進行配置

注：填寫數(shù)據(jù)庫集合名時，如果當前云開發(fā)環(huán)境不存在該集合會自動進行創(chuàng)建。 字段內(nèi)容可根據(jù)自己需要進行修改。

創(chuàng)建完成后會在左側(cè)出現(xiàn)內(nèi)容管理的運營項。我們可以在其中進行添加文章。

并且新增的文章都會自動添加到對應(yīng)數(shù)據(jù)庫中。

這時我們只需要在云函數(shù)中對文章進行查找即可。

新建云函數(shù)

我們在 cloudfunctions 下本地新建云函數(shù)

選擇 Node 模板

并給出云函數(shù)名稱

并將下列代碼粘入

const cloud = require("@cloudbase/node-sdk");exports.main = async (event, context) => { const app = cloud.init({ env: cloud.SYMBOL_CURRENT_ENV, }); const db = app.cloudbase(); return db.collection('article').get();};別忘了因為引入了 @cloudbase/node-sdk 所以需要在當前云函數(shù)中執(zhí)行 npm i 進行安裝依賴。

完成后進行部署云函數(shù)(上傳全部文件)

調(diào)用云函數(shù)

我們云函數(shù)創(chuàng)建并部署完成后緊接著就可以進行調(diào)用了

this.$cloudbase.callFunction({ name: "getArticle", data: { xx: "xxx", },}).then((data)=>{ this.callFunctionResult = data;}).catch((err) => { this.callFunctionResult = err;})參數(shù)說明name云函數(shù)名稱data需要傳入云函數(shù)的參數(shù)




可以看到我們已經(jīng)獲取到了 CMS 中添加的內(nèi)容。

數(shù)據(jù)處理

我寫了一個例子來利用云函數(shù)對數(shù)據(jù)進行簡單處理并渲染到頁面上，請戳 github




在進行詳情頁跳轉(zhuǎn)時用到了 Vue-Router 動態(tài)路由，將 CMS自動生成的 id 當作文章 id 傳遞到詳情頁來達到點開想要打開的文章。

發(fā)布

當我們一切都搞定后，重新進行打包npm run build 并將新的 dist 上傳到靜態(tài)網(wǎng)站托管。

后續(xù)我們只需要在 CMS 中進行添加文章、修改文章、刪除文章等操作，我們的博客即可得到更新。