15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 云开发与CMS开发个人博客

云开发与CMS开发个人博客

时间:2023-05-30 18:48:01 | 来源:网站运营

时间:2023-05-30 18:48:01 来源:网站运营

云开发与CMS开发个人博客:前言

本篇文章运用 云开发 + CMS + 静态托管 来实现一个简单的博客搭建。

云开发简介

云开发为我们提供了一体化的后端云服务,使我们可以专注于页面逻辑,不必去关心服务器搭建和运维。

实现思路

通过 CMS 来实现对文章的增删改,并通过云函数获取文章,渲染到已经上传静态托管的页面中。

环境要求

Node.js

安装

云开发环境

cloudbase/cli

CloudBase CLI 是一个开源的命令行界面交互工具,用于帮助用户快速、方便的部署项目,管理云开发资源。

npm i -g @cloudbase/cliyarn global add @cloudbase/cli

初始化云开发项目

首先执行tcb login来进行登录授权。 一切准备就绪后,我们可以进行云开发项目的搭建,使用 tcb init 来初始化项目,并选择 vue模板

tcb init√ 选择关联环境 · xxxxxx - [xxxxxx-xxxx:按量计费]√ 选择云开发模板 · Vue 应用√ 请输入项目名称 · vue-cloudbase√ 创建项目 vue-cloudbase 成功!进入到 vue-cloudbase 中执行 npm i 安装项目所需依赖。

认识云函数

在创建的云开发项目目录中,云函数 位于 cloudfunctions 中。每个模板都会给我们提供一个云函数。

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, };};云函数的传入参数有两个对象, event 对象和 context 对象。

上传云函数

这里推荐一个 Visual Studio Code:Tencent CloudBase Toolkit

Tencent CloudBase Toolkit 是腾讯云 - 云开发发布的 VS Code(Visual Studio Code)插件。该插件可以让您更好地在本地进行云开发项目开发和代码调试,并且轻松将项目部署到云端。
在云函数中我们看到引入了 @cloudbase/node-sdk ,所以我们需要到其目录下执行npm i 来安装依赖。

安装结束后,我们点击云函数目录进行上传。

我们只需要在第一次创建的时候进行部署上传,后续修改云函数的话只需要更新文件即可~

预览

当我们执行 npm run dev 后即可到对应的链接进行预览。

上传到静态网站托管

上传完毕后我们可以在静态网站托管 中查看默认域名。并预览到已上传的 Vue 云开发项目。

CMS 安装

云开发为我们提供了 CMS内容管理系统 的扩展能力,我们进入到 扩展管理

更多扩展能力 中找到 CMS内容管理系统 并安装。

安装后我们可以通过云开发静态托管默认域名/部署路径访问。

例如: https://xxxx.tcloudbaseapp.com/tcb-cms/(这里的默认域名,也可以是自己绑定的域名哦~)
关于 CMS 详细教程 CMS

CMS 新建文章管理

我们的博客离不开文章的发布,删除,修改等。

我们选择内容设置 =》 新建

并对内容进行配置

注:填写数据库集合名时,如果当前云开发环境不存在该集合会自动进行创建。 字段内容可根据自己需要进行修改。
创建完成后会在左侧出现内容管理的运营项。我们可以在其中进行添加文章。

并且新增的文章都会自动添加到对应数据库中。

这时我们只需要在云函数中对文章进行查找即可。

新建云函数

我们在 cloudfunctions 下本地新建云函数

选择 Node 模板

并给出云函数名称

并将下列代码粘入

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 所以需要在当前云函数中执行 npm i 进行安装依赖。

完成后进行部署云函数(上传全部文件)




调用云函数

我们云函数创建并部署完成后紧接着就可以进行调用了

this.$cloudbase.callFunction({ name: "getArticle", data: { xx: "xxx", },}).then((data)=>{ this.callFunctionResult = data;}).catch((err) => { this.callFunctionResult = err;})参数说明name云函数名称data需要传入云函数的参数




可以看到我们已经获取到了 CMS 中添加的内容。

数据处理

我写了一个例子来利用云函数对数据进行简单处理并渲染到页面上,请戳 github




在进行详情页跳转时用到了 Vue-Router 动态路由,将 CMS自动生成的 id 当作文章 id 传递到详情页来达到点开想要打开的文章。

发布

当我们一切都搞定后,重新进行打包npm run build 并将新的 dist 上传到静态网站托管。

后续我们只需要在 CMS 中进行添加文章、修改文章、删除文章等操作,我们的博客即可得到更新。

关键词:

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭