时间:2023-05-30 23:21:02 | 来源:网站运营
时间:2023-05-30 23:21:02 来源:网站运营
基于 Next.js 和云开发 CMS 的内容型网站应用实战开发:作者简介:注意:安装成功后,云数据库会自动创建 3 个集合,分别是
安装时间有些长,请耐心等待
tcb-ext-cms-contents
、tcb-ext-cms-users
、tcb-ext-cms-webhooks
,存放 CMS 系统配置信息以及内容数据。会自动创建 3 个云函数,分别是 tcb-ext-cms-api
、tcb-ext-cms-init
、tcb-ext-cms-auth
,封装了初始化、身份验证以及数据流的相关逻辑。tcb-cms/
目录下了:name<string>: 课程名称time<number>: 课程时间cover<string>: 课程封面url<string>: 课程链接level<0 | 1 | 2>: 课程难度
以管理员身份登录 CMS 系统,在「内容设置页」新建内容。在 CMS 中,支持多种高级数据类型,例如 url、图片、markdown、富文本、标签数组、邮箱、网址等,并对这些类型进行了智能识别和更友好地展示。注意:新建内容时,默认情况下,CMS 会自动填充 4 个字段:name、order、createTime、updateTime。可以根据自身需要,对不需要的字段进行删除。
CMS 自带图床功能。当数据类型是「图片」时,图片会自动上传到当前云开发环境下的云存储中。图片信息以cloud://
开头的特殊链接,存放在数据集合中。
建议:根据字段创建集合后,CMS 系统左侧会看到「推荐好课」。它对应的内容被保存在云数据库的
保留 order 字段,它可以被用作数据排序。对运营者来说,数据的 order 的值越大,在 CMS 系统中展示的位置越靠前;对开发者来说,可以根据 order 来进行排序搜索。从而保证了体验和逻辑的一致性。
recommend-course
(创建时指定)集合中,它的字段信息保存在云数据库的tcb-ext-cms-contents
(CMS 初始化时创建)集合中。npm i --save next react react-dom
因为我们要将网站部署到「静态托管」上,所以要使用 Next.js 的静态导出功能。package.json
中的打包脚本更新为:"scripts": { "dev": "next", "build": "next build && next export", "start": "next start"}
为了快速部署静态网站,以及发布云函数。需要全局安装 @cloudbase/cli
:npm install -g @cloudbase/cli
安装后,添加两个脚本:deploy:hosting
: 将 Next.js 的静态导出文件部署到「静态托管」deploy:function
: 发布项目中的云函数"scripts": { "deploy:hosting": "npm run build && cloudbase hosting:deploy out -e jhgjj-0ae4a1", "deploy:function": "echo y | cloudbase functions:deploy --force"}
注意:
准备两个云环境,防止静态部署时文件覆盖。envId 为jhgjj-0ae4a1
的云环境只用于部署 Next.js 的静态导出文件。envId 为pagecounter-d27cfe
的云环境用来部署 CMS 系统。
@cloudbase/node-sdk
,我们可以在 Next.js 的 getStaticProps()
方法中读取到云数据库中的数据。// provider.jsconst cloudbase = require("@cloudbase/node-sdk");const config = { secretId: "your secretId", // 前往「腾讯云控制台」-「访问密钥」获取 secretKey: "your secretKey", // 前往「腾讯云控制台」-「访问密钥」获取 env: "your envid" // 前往「腾讯云控制台」-「云开发 CloudBase」获取};const app = cloudbase.init(config);/** * 获取云数据库数据 */async function getCourses() { const db = app.database(); const result = await db.collection("recommend-course").get(); if (result.code) { throw new Error( `获取「推荐课程」失败, 错误码是${result.code}: ${result.message}` ); } return result.data.map(item => { if (item.createTime instanceof Date) { item.createTime = item.createTime.toLocaleString(); } if (item.updateTime instanceof Date) { item.updateTime = item.updateTime.toLocaleString(); } item.cover = getBucketUrl(item.cover); // 处理云存储的特殊链接 return item; });}
前文有讲到,CMS 自带图床功能,拖拽上传的图片会被存储在同一环境下的云存储中,并且获取图片的链接存放在集合中。云存储的链接是以 cloud://
开头的特殊链接,需要在前端进行识别和特殊处理。cloud://pagecounter-d27cfe.7061-pagecounter-d27cfe-1255463368/uploads/1589990230404.png
。将其转成可访问的 http 链接:https://7061-pagecounter-d27cfe-1255463368.tcb.qcloud.la/uploads/1589990230404.png
。tcb.qcloud.la
域名重新拼接即可:// provider.js/** * 获取云存储的访问链接 * @param {String} url 云存储的特定url */function getBucketUrl(url) { if (!url.startsWith("cloud://")) { return url; } const re = /cloud:////.*?/.(.*?)//(.*)/; const result = re.exec(url); return `https://${result[1]}.tcb.qcloud.la/${result[2]}`;}
注意:目前为止,我们使用 SDK 获取了云数据库数据,剩下要做的就是将其注入到 Next.js 页面组件的
云存储的「权限设置」应为:所有用户可读,仅创建者及管理员可写。否则链接无法访问。
推荐:
除了自带的图床功能,开发者可以根据自身需求使用其他稳定图床服务,例如微博图床。如果使用其他图床,对应字段类型不能设置为「图片」,可以是「字符串」或者「超链接」。
props
上:// pages/index.jsconst HomePage = ({ courses }) => { return ( // 尽情使用数据吧... )}export async function getStaticProps() { const { getCourses } = require('./../provider') return { props: { courses: await getCourses() } }}export default HomePage
打开浏览器,进入 http://localhost:3000/ ,可以看到效果如下:注意:
Next.js 的一些方法是双端都会运行的,但getStaticProps()
只会在 server 端运行
npm run build
命令,网站静态文件被打包到了 out/
目录下:npm run deploy:hosting
将 out/
目录下的文件上传到「静态网站托管」。访问静态网站托管的链接:https://jhgjj-0ae4a1.tcloudbaseapp.com/ ,效果如下:cloudbase login
进行交互式输入登录,而是使用密钥登录: cloudbase login --apiKeyId $TCB_SECRET_ID --apiKey $TCB_SECRET_KEY
。注意:在 CI 工具的控制台中,配置
前往 云 API 密钥 获得TCB_SECRET_ID
和TCB_SECRET_KEY
的值
TCB_SECRET_ID
和 TCB_SECRET_KEY
。并为package.json
新添加一个脚本:"scripts": { "login": "echo N | cloudbase login --apiKeyId $TCB_SECRET_ID --apiKey $TCB_SECRET_KEY"}
总结来说,CI 构建的流程是:npm run login
npm run build
npm run deploy:function
关键词:实战,内容