当前位置：网站首页>【实战】Next.js + 云函数开发一个面试刷题网站

【实战】Next.js + 云函数开发一个面试刷题网站

2022-08-03 14:23:00 【InfoQ】

前言

前段时间开发了一个面试刷题小程序——面试狗，主要使用了 uniapp + unicloud 云开发实现，详情可以看这篇文章

《【实战】使用 uniapp 开发一个面试刷题小程序》

，今天我们来开发一个与之对应的 PC 版面试刷题网站。

体验地址：https://www.runjs.cool/interview

技术栈选择

Next.js —— React 服务端渲染框架

Tailwindcss —— CSS 原子类框架

云数据库 —— 和小程序公用一套数据库

项目初始化

首先我们使用

create-next-app

创建一个新的 next 项目

npx create-next-app next-interview
cd next-interview

进入到

next-interview

目录下安装

tailwindcss

云数据库

之前我们在小程序中设计好了云数据，并且可以在小程序中请求数据，下面这个接口对应数据库中的题目表

export interface Question {
 _id: string;
 category: string; // 分类
 title: string; //标题
 desc: string; // 简介
 options?: string; //选项，选择题
 explanation: string;// 答案解析
 level: number; // 难度等级
 tagId: number; // 标签
}

我们原来的的云函数代码如下，用于请求题目列表

exports.main = async (event, context) => {
 const db = uniCloud.database();
 const page = event.page || 1;
 const res = await db.collection('fe-question').skip((page - 1) * 20)
 .limit(20)
 .get();
 //返回数据给客户端
 return res.data
};

在 uniapp 中可以使用

uniCloud.callFunction

方法直接请求数据，那么在 Next.js 项目中要如何请求数据呢？

云函数 URL 化

设置云函数 HTTP 访问地址

单击左侧菜单栏【云函数】，进入云函数页面。

点击需要配置的云函数的【详情】按钮，配置访问路径。

注意：

path

应该以

/

开头，例如：

/functionName

云函数的调用方式

在云函数中，不同的调用方式在

context.SOURCE

中可以获得不同的参数

client：客户端
callFunction
方式调用

http：云函数 url 化方式调用

timing：定时触发器调用

server：由管理端调用，
HBuilderX
里上传并运行

function：由其他云函数
callFunction
调用

'use strict';
exports.main = async (event, context) => {
 let source = context.SOURCE // 当前云函数 Url 后, 为 http 的方式调用
}

云函数的入参

使用 HTTP 访问云函数时，HTTP 请求会被转化为特殊的结构体，称之为集成请求，结构如下：

{
 path: 'HTTP请求路径，如 /hello',
 httpMethod: 'HTTP请求方法，如 GET',
 headers: {HTTP请求头},
 queryStringParameters: {HTTP请求的Query，键值对形式},
 body: 'HTTP请求体',
 isBase64Encoded: 'true or false，表示body是否为Base64编码'
}

使用

GET

请求

https://${云函数Url化域名}/${functionPath}?a=1&b=2

，云函数接收到的

event

为

{
 path: '/',
 httpMethod: 'GET',
 headers: {HTTP请求头},
 queryStringParameters: {a: &quot;1&quot;, b: &quot;2&quot;},
 isBase64Encoded: false
}

使用

POST

请求

https://${spaceId}.service.tcloudbase.com/${functionPath}

，云函数接收到的

event.body

为请求发送的数据

{
 path: '/',
 httpMethod: 'POST',
 headers: {
  ...
  &quot;content-type&quot;: 'application/json'
 },
 isBase64Encoded: false,
 body: '{&quot;a&quot;:1,&quot;b&quot;:2}', // 注意此处可能是base64，需要根据isBase64Encoded判断
}

所以我想要一个云函数，在小程序和 web 端同时调用，可以在外层加一个判断，这里以 post 为例，以下是获取题目列表的接口代码

exports.main = async (event, context) => {
 const db = uniCloud.database();


 let source = context.SOURCE;
 let data = event;
 if (&quot;http&quot; === source) {
 // data=event.queryStringParameters //get 方式获取参数
 data = JSON.parse(event.body); // post 方式获取参数
 }


 const page = data.page || 1;
 const res = await db.collection('fe-question').skip((page - 1) * 20)
 .limit(20)
 .get();
 //返回数据给客户端
 return res.data
};

将以上代码重新部署，就可以通过 http 的方式访问了。

服务端渲染

为了能够让搜索引擎收录内容，我们选择服务端渲染，在 Next.js 中，可以再导出一个函数

getServerSideProps

，这个函数名称是 Next.js 固定的，不可以写错哦。

import fetch from 'node-fetch';


function Page({ data }) {
 // 渲染数据
 return data.map((item)=><div key={item.id}>...</div>)
}


// 每次页面刷新都会执行这个方法
export async function getServerSideProps() {
 // 从云函数请求数据
 const res = await fetch(`https://.../data`)
 const data = await res.json()


 // 将返回的结果通过 props 传递给组件
 return { props: { data } }
}


export default Page