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

sxkk20082年前知识分享293

前言

前段时间开发了一个面试刷题小程序——面试狗,主要使用了 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 相关 npm 包,并且初始化 tailwindcss 配置文件

yarn add --dev tailwindcss postcss autoprefixer @tailwindcss/typography
npx tailwindcss init -p

接下来将 pagesstyles 文件夹重新移动到 src 目录下,这一步是我个人习惯。

修改 tailwindcss.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
}

这样 tailwindcss 只会编译 src 目录下使用到的 css 类,其中是 @tailwindcss/typography 是 tailwind 官方提供的文章插件,小程序中题目和答案使用 markdown 编辑的,所以使用到这个插件可以方便样式设置。

然后修改 styles/globals.css 中 css 为 tailwindcss 的指令

@tailwind base;
@tailwind components;
@tailwind utilities;

修改 index.js 中的代码,测试下 tailwindcss 是否配置成功

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>前端面试题库</title>
      </Head>
      <h1 className="flex justify-center p-10 text-3xl text-blue-500">前端面试题库</h1>
    </div>
  )
}

修改后,运行 yarn && yarn dev,可以在浏览器中看法如下效果

至此项目初始化成功。

云数据库

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

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 访问地址

  • 登录 uniCloud 后台 (opens new window),选择服务空间。
  • 单击左侧菜单栏【云函数】,进入云函数页面。
  • 点击需要配置的云函数的【详情】按钮,配置访问路径。

注意: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: "1", b: "2"},
    isBase64Encoded: false
}

使用POST 请求https://${spaceId}.service.tcloudbase.com/${functionPath},云函数接收到的 event.body 为请求发送的数据

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

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

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

  let source = context.SOURCE
  let data = event
  if ('http' === 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

注意:getServerSideProps函数是在 Nodejs 环境下执行的,若部署的 node 版本低于 17,则需要先安装node-fetch

到此,你已经了解了整个开发流程,接下来就数据渲染,跟 react 开发没有异同了,关于 Next.js 的更多用法可以参考 Next 官方文档,也可以参考 React 必学 SSR 框架——Next.js 这篇文章。

部署

Vercel 是一个开箱即用的网站托管平台,Next.js 是 vercel 公司的明星项目, 只需要将代码上传 GitHub,登录 vercel.com ,并且使用 GitHub 登录即可, 点导入,几分钟后便可部署成功!

存在问题

当我在部署成功后,发现部署成功后发现接口很慢,每次请求需要 2s 以上

没优化之前的速度

但是我本地开发的时候却很快,基本都在 200ms 以内,这是什么原因呢?

本地请求速度

其实 vercel 部署的时候会把 getServerSideProps 中方法部署为 serverless 云函数。

而默认是部署区域在美国华盛顿特区,而 uniCloud 的云函数则是部署在上海的,也就我一个请求在发出,在上海和美国盛顿特来了个往返。

当然我们可以在 Vercel 中设置 serverless 的 Region 为香港,这样稍微可以快点。

小结

本文通过一个实现一个面试刷题网站,讲述了 Next.js 和云开发部署的全过程,至此,你也成为了一名全栈工程师。

优点

  • Vercel 完美的结合和 GitHub,部署极快
  • Vercel 可以自动分配 Https 证书,我们可以添加自定义绑定域名,并且域名可以免备案
  • 云开发选择阿里云,云数据库和云函数都免费

缺点

Next.js ssr 渲染方式需要在 2 个 Region 之间的请求数据,相对来说请求速度较慢。

最后

最后为了权衡访问速度和 SEO,最终我放弃使用 ssr 的渲染方式,直接使用客户端渲染,别忘了 Next.js 不但支持 SSR, 还支持 CSR。 我的这个网站也开源了,包含一些前端常用工具,还可以在线刷面试题。

如果对你有帮助,可以随手点个赞,这对我真的很重要。

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

相关文章

AI技术的发展与应用-探索人工智能的新未来

AI技术的发展与应用-探索人工智能的新未来

   人工智能(AI)在20世纪50年代开始被提出,如今在技术和应用上取得了巨大的进步,得到了各行各业的应用。随着数据和算力的爆发式增长,我们正在看到AI技术的未来发展将更加...

人工智能专业学什么?探寻智能科技的未来发展前景!

人工智能专业学什么?探寻智能科技的未来发展前景!

  随着人工智能技术的快速发展与普及,越来越多的人开始对人工智能专业产生了浓厚的兴趣。那么,人工智能专业到底学什么呢?  一、学术理论基础:人工智能的核心要素  人工智能专业...

地址识别:从历史到未来的智能技术应用

地址识别:从历史到未来的智能技术应用

  地址识别是一项涉及到计算机视觉和人工智能的重要技术,它可以通过对图像或视频进行分析,从中提取出地址信息。随着科技的不断进步和智能化技术的快速发展,地址识别正逐渐成为现实生...

AI人工智能技术的应用与发展

AI人工智能技术的应用与发展

  从大数据到人工智能,信息技术的发展正在影响人类社会的方方面面。AI人工智能技术,特别是大规模学习、深度学习和神经计算等区域,正在实现自主感知、自适应决策和自我学习的目标,...

AI技术控:如何应对人工智能的挑战及未来发展趋势

AI技术控:如何应对人工智能的挑战及未来发展趋势

  人工智能(AI)技术近年来快速发展,对各行各业产生了重大影响。然而,随着AI技术的迅猛发展,人们对其未来的发展趋势、产业革命的规模及对劳动力市场的影响仍存在很多疑虑和担忧...

百度AI人脸对比:现实应用与潜在影响

百度AI人脸对比:现实应用与潜在影响

  随着人工智能技术的快速发展,人脸识别技术已经成为各个领域广泛应用的一项重要技术。其中,百度AI人脸对比技术凭借其高精度和强大的功能,在社会治安、金融安全、智能门禁等领域发...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。