基于 Next.js 和云开发 CMS 的内容型网站应用实战开发

name<string>: 课程名称
time<number>: 课程时间
cover<string>: 课程封面
url<string>: 课程链接
level<0 | 1 | 2>: 课程难度

npm i --save next react react-dom axios

"scripts": {
    "dev": "next",
    "build": "next build && next export",
    "start": "next start"
}

npm install -g @cloudbase/cli

"scripts": {
    "deploy:hosting": "npm run build && cloudbase hosting:deploy out -e jhgjj-0ae4a1",
    "deploy:function": "echo y | cloudbase functions:deploy --force"
}

module.exports = {
    envId: "pagecounter-d27cfe", // 云开发环境envid
    siteAuthKey: "QhBYWnRjijGcGTBUxDFGWxuq", // 用于site-cms-data云函数中的身份校验
    httpPath: "/site-cms-data" // site-cms-data云函数的http触发路径
};

const { envId, siteAuthKey } = require("./config");

module.exports = {
    envId,
    functionRoot: "./cloudfunctions",
    functions: [
        {
            name: "site-cms-data",
            config: {
                // 超时时间
                timeout: 30,
                // 环境变量
                envVariables: {
                    SITE_AUTH_KEY: siteAuthKey
                },
                runtime: "Nodejs8.9",
                installDependency: true
            },
            handler: "index.main"
        }
    ]
};

const Provider = {
    // 获取指定集合的所有数据
    async fetchAll(ctx) {
        const {
            db,
            params: { collectionName }
        } = ctx;
        const collection = db.collection(collectionName);
        return collection
            .where({
                _id: /.*/
            })
            .get();
    },
    // 支持orderBy、where的条件查询（满足当前需求）
    async query(ctx) {
        const {
            db,
            params: { collectionName, orderBy, where }
        } = ctx;

        let promise = db.collection(collectionName);
        if (Array.isArray(orderBy) && orderBy.length === 2) {
            promise = promise.orderBy(...orderBy);
        }

        if (typeof where === "object") {
            promise = promise.where(where);
        }

        return promise.get();
    }
};

async function dispatch(ctx) {
    return await Providerctx.api;
}

module.exports = {
    Provider,
    dispatch
};

const { Provider } = require("./provider");

const supportedApi = Reflect.ownKeys(Provider);

function vertifyAuth(ctx) {
    // 前面在cloudbase.js中规定的环境变量
    return ctx.key === process.env.SITE_AUTH_KEY;
}

function isValidBody(body) {
    return (
        "key" in body && // 验证身份的随机密钥
        "params" in body && // 携带调用服务需要的参数
        "api" in body && // 调用服务名称
        supportedApi.includes(body.api)
    );
}

module.exports = {
    vertifyAuth,
    isValidBody
};

const tcb = require("tcb-admin-node");
const { vertifyAuth, isValidBody } = require("./interceptor");
const { dispatch } = require("./provider");

module.exports.main = async (event, context) => {
    let ctx = {
        envId: context.namespace
    };

    // 验证传入的数据
    try {
        const body = JSON.parse(event.body);
        if (isValidBody(body)) {
            ctx = {
                ...ctx,
                ...body
            };
        } else {
            return {
                success: false,
                msg: "传入数据不合法"
            };
        }
    } catch (error) {
        console.error(error);
        return {
            success: false,
            msg: "请检查body格式"
        };
    }

    // 验证身份
    if (!vertifyAuth(ctx)) {
        return {
            success: false,
            msg: "身份验证失败"
        };
    }

    // 给上下文绑定db
    const app = tcb.init({
        env: ctx.envId
    });
    ctx.db = app.database({
        env: ctx.envId
    });

    // 服务调用
    try {
        const result = await dispatch(ctx);
        return {
            success: true,
            result
        };
    } catch (error) {
        console.error(error);
        return {
            success: false,
            msg: error.message
        };
    }
};

cloudbase logout && cloudbase login

npm run deploy:function

// provider.js

import { siteAuthKey } from "./config";

/**
 * 为axios生成请求配置
 * @param {String} api 云函数(site-cms-data)支持的服务
 * @param {Object} params 服务入参
 */
function generateAxiosConfig(api, params) {
    const data = {
        key: siteAuthKey,
        api,
        params
    };

    const config = {
        headers: {
            "Content-Type": "application/json"
        },
        method: "POST",
        data: JSON.stringify(data)
    };

    return config;
}

// 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]}`;
}

import { siteAuthKey, envId, httpPath } from "./config";
import axios from "axios";

const url = `http://${envId}.service.tcloudbase.com${httpPath}`;

/**
 * 获取推荐课程数据
 */
export async function getCourses() {
    const config = generateAxiosConfig("fetchAll", {
        collectionName: "recommend-course"
    });

    const res = await axios(url, config);
    const { success, result, msg } = await res.data;
    if (success) {
        return result.data.map(item => ({
            ...item,
            cover: getBucketUrl(item.cover) // 处理云存储的特殊链接
        }));
    } else {
        throw new Error("获取「推荐课程」失败:" + msg);
    }
}

import React, { useState } from "react";
import { getCourses } from "./../provider";

const HomePage = props => {
    // ...
};

HomePage.getInitialProps = async () => {
    const promises = [getCourses()];
    const [courses] = await Promise.all(promises);
    // 返回组件的props
    return { courses };
};

export default HomePage;

const levelMap = {
    0: "初级",
    1: "中级",
    2: "高级"
};

const HomePage = ({ courses }) => {
    return (
        <>
            {courses.map((course, index) => (
                <div key={index}>
                    <p>
                        <a href={course.url}>{">>> 立即学习"}</a>
                    </p>
                    <p>
                        <strong>课程名称：</strong> {course.name}
                    </p>
                    <p>
                        <strong>课程时长：</strong> {course.time} 课时
                    </p>
                    <p>
                        <strong>课程难度：</strong>
                        {levelMap[course.level]}
                    </p>
                    <p>
                        <strong>课程封面：</strong>
                        <img src={course.cover} />
                    </p>
                </div>
            ))}
        </>
    );
};

"scripts": {
    "login": "echo N | cloudbase login --apiKeyId $TCB_SECRET_ID --apiKey $TCB_SECRET_KEY"
}