实现一个 Code Pen：（五）白嫖云数据库

sxkk20081年前 (2023-11-23)知识分享101

前言

前面的文章中，我们配置好了编辑器，实现了 css、html、js 的编辑，并且可以在浏览器端编译代码，接下来我们需要实现数据存储的功能。再次提一下我的技术栈主要是 Next.js。我们知道使用 Next.js vercel 就可以帮我们自动部署，vercel 提供了网站托管和 serverless（函数即服务）的能力，但是 vercel 没有提供数据库存储的能力，那么我需要买数据库吗？

使用 Uniapp 的目的

很多人可能使用过 uniapp，来开发小程序，使用的是 Vue 技术栈，并且写一套代码就可以打包成多端和跨端的应用，可以极大的加快开发速度，如果选择使用阿里云，可以有 50 个免费项目，简直就是白嫖，在这里我只使用云函数和云数据库。

云函数开发

首先需要下载 HbuildX ，然后注册登录，新建项目，这些我就不展开讲了，大家可以自行查官方教程。

uniCloud web 控制台

并且关联好云服务空间，一个项目中可以有 50 个云函数，由于我之前的项目没几个云函数，所以我这里关联的是另外一个项目 mdx-editor

选择 uniCloud 目录右键，可以打开 uniCloud web 控制台。

创建空表

点击云数据库，创建空表，命名成 pen

新建云函数

选择 clouldfunctions 右键选择新建云函数。

输入云函数代码

'use strict'
const db = uniCloud.database()

exports.main = async (event, context) => {
  if (event.httpMethod === 'GET') {
    const id = event.queryStringParameters.id
    const res = await db.collection('pen').doc(id).get()
    if (res) {
      return res.data[0]
    }
  }
  const data = JSON.parse(event.body)

  const timeStamp = new Date().getTime()
  let result = await db.collection('pen').add({
    ...data,
    createTime: timeStamp,
  })

  if (result.id) {
    return {
      ok: true,
      id: result.id,
    }
  }
  return {
    ok: false,
    msg: '异常错误',
  }
}

在这段代码中我将查询和添加的逻辑都写在一个云函数中，如果请求是 get，那就是查询，否则就是添加。

上传部署

保存代码后选择上传部署，至此云函数开发完成，那么要如何在我们的项目中对接呢？

云函数 URL 化

云函数列表

打开 uniCloud web 控制台，点击上传云函数右侧的详情按钮

云函数 URL 化

在最下面云函数 URL 化，填写 PATH，保存成功后，复制整个 URL，有了这个 URL 后就可以在我们 web 应用中访问了。但如果是直接用浏览器访问这个 URL，浏览器会下载一个 JSON，是不可用的。

保存数据

我们使用 post 接口保存数据。

const [state, handleSave] = useAsyncFn(async () => {
  const response = await window.fetch(process.env.NEXT_PUBLIC_API_URL + '/api/pen', {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
    },
    body: JSON.stringify(data),
  })
  const result = await response.json()

  Router.push(`/pen/${result.id}`)
  return result
}, [data])

在上面代码中，将云函数的域名设置到环境变量中，方便以后迁移和部署。我们使用 react-use 中的 useAsyncFn, 这个 hook 将请求状态和返回结果保存在 state 中，点击保存按钮，执行 handleSave 就可以提交数据。

code editor 保存数据

以下几个字段是我们要保存的数据，这些数据从 state 中取就可以了。

handleSave({
  html: '...',
  css: '...',
  js: '...',
  scripts: [],
  styles: [],
  cssLang: 'css',
  jsLang: 'babel',
  htmlLang: 'html',
  name: '玻璃拟态',
})

没配置跨域，403 错误

当我点击保存的时候，浏览器会报 403 错误，原因是我们请求跨域了，所以我们需要在 uniCloud web 控制台添加运行跨域的域名。跨域配置

再次点半保存，数据保存成功。

保存成功后，经返回的 id 传到 url 上，跳转到/pen/${id}，查看详情页面。

查询数据

我们可以使用同样的方法查询数据。为了体现 next.js 服务端优势，对 SEO 更友好，我们可以在 getServerSideProps 中获取数据。

export async function getServerSideProps({ params, res, query }) {
  if (params.id && params.id[0] === 'create') {
    res.setHeader('cache-control', 'public, max-age=0, must-revalidate, s-maxage=31536000')
    return {
      props: {},
    }
  } else {
    try {
      const initialContent = await get({
        id: params.id[0],
      })

      res.setHeader('cache-control', 'public, max-age=0, must-revalidate, s-maxage=31536000')

      return {
        props: {
          id: params.id[0],
          initialContent,
        },
      }
    } catch (error) {
      return {
        props: {
          errorCode: error.status || 500,
        },
      }
    }
  }
}

上面代码中，如果 id 等于create 的时候就不需要查询数据。

下面代码是服务端请求数据的代码

import fetch from 'node-fetch'

export function get({ id }) {
  return fetch(process.env.NEXT_PUBLIC_API_URL + '/api/pen?id=' + id, {
    headers: {
      Accept: 'application/json',
    },
  }).then((response) => {
    return response.json()
  })
}