开发者社区> 狂奔滴小马> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

实现一个 Code Pen:(五)白嫖云数据库

简介: 本篇主要介绍如何使用 uniapp 中的云函数和云数据库,并且通过云函数 URL 化,来给外部应用访问
+关注继续查看

highlight: monokai

前言

前面的文章中,我们配置好了编辑器,实现了 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();
  });
}

由于 vercel 的 nodejs 版本是 14,所以数据请求,还不支持 fetch,我们还需要安装 node-fetch

小结

预览地址:https://code.runjs.cool/pen/create

代码仓库:https://github.com/maqi1520/next-code-pen

本篇主要介绍如何使用 uniapp 中的云函数和云数据库,并且通过云函数 URL 化,来给外部应用访问,其中保存数据和请求数据部分是常规代码,熟悉 next.js 和 react 的同学都没问题,相对比较简单。

以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

本文首发掘金平台,来源小马博客

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Unity 之 实现老虎机滚动抽奖效果
Unity 之 制作一个老虎机滚动抽奖示例
220 0
阿里云自研云原生内存数据库Tair持久存储系列重磅发布!
2020年10月28日,阿里云正式发布云原生内存数据库Tair企业级Redis服务。该系列包含两种产品形态:持久内存型和容量存储型。该系列产品是Tair系列继性能增强型和混合存储型后又一力作,其兼容原生Redis的数据结构和接口,并具备更大容量规格、抖动更低且命令级数据持久化的能力。该自研产品打破了传统Redis中的数据只能在易失性存储上进行读写的刻板印象,针对客户不同业务阶段的数据存储要求与服务成本考量,全新实现了持久性更强、成本更低的KV数据库。
1431 0
ECS实践训练营Day1--搭建自己专属的静态网站与云笔记---~Lanly~
ECS实践训练营Day1--搭建自己专属的静态网站与云笔记
104 0
【Unity Shader】(五) ------ 透明效果之半透明效果的实现及原理
笔者使用的是 Unity 2018.2.0f2 + VS2017,建议读者使用与 Unity 2018 相近的版本,避免一些因为版本不一致而出现的问题 【Unity Shader学习笔记】(三) ---------------- 光照模型原理及漫反射和高光反射的实现 【Unity Shader】(四) ------ 纹理之法线纹理、单张纹理及遮罩纹理的实现   前言 相信读者对透明效果都不陌生,因为透明效果是游戏中经常使用的一种效果。
3132 0
用js来实现那些数据结构11(字典)
  我们这篇文章来说说Map这种数据结构如何用js来实现,其实它和集合(Set)极为类似,只不过Map是【键,值】的形式存储元素,通过键来查询值,Map用于保存具有映射关系的数据,Map里保存着两组数据:key和value,它们都可以是任何引用类型的数据,但key不能重复,而集合以【值,值】的形式存储元素。
994 0
云HBase小组成功抢救某公司自建HBase集群,挽救30+T数据
使用过开源HBase的人都知道,运维HBase是多么复杂的事情,集群大的时候,读写压力大,配置稍微不合理一点,就可能会出现集群状态不一致的情况,糟糕一点的直接导致入库、查询某个业务表不可用, 甚至集群运行不了。
2884 0
云Hbase数据库在亿方云实践之路
2017云栖大会HBase专场,亿方云科技CTO 王成军带来HBase在亿方云客户端同步系统中的应用实践的演讲。本文主要先介绍了亿方云,进而谈及了数据架构,着重分析了HBase实践,最后对亿方云HBase演进和应用作了分享。
5395 0
作为前端Web开发者,这12个终端命令不可不会
对于开发人员来说,终端是最重要的工具之一。掌握终端,能够有效的提升开发人员的工作流程。使用终端,许多日常任务都被简化为了编写简单的命令并按下 Enter 按钮。   本文列举了一系列 Linux 命令,旨在帮助大家充分利用终端这个工具。
1714 0
+关注
狂奔滴小马
前端公众号 | JS酷
61
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载