Question

有了接口后，我们就可以继续实现首页的前端页面了。首页页面的代码在 web/pages/ 目录中，该目录下有三个文件：

• fetch.ts，获取首页数据；
• render.tsx 首页页面 UI 组件代码；
• index.less 样式代码。

首先来看一下 fetch.ts：

// web/pages/index/fetch.ts
import { IFaaSContext } from 'ssr-types'
import { IndexData } from '@/interface'
interface IApiService {
  index: () => Promise<IndexData>
}
export default async (ctx: IFaaSContext<{
  apiService?: IApiService
}>) => {
  const data = __isBrowser__ ? await (await window.fetch('/api/index')).json() : await ctx.apiService?.index()
  return {
  indexData: data
  }
}

这段代码的逻辑比较简单，核心点在第 10 行，如果是浏览器，就用浏览器自带的 fetch 方法请求 /api/index 接口获取数据；如果不是浏览器，即服务端渲染，可以直接调用 apiService 中的 index 方法。获取到数据后，将其存入 state.indexData 中，这样在 UI 组件中就可以使用了。 首页的 UI 组件 render.tsx 代码如下：

// web/pages/index/render.tsx
import React, { useContext } from "react";
import { SProps, IContext } from "ssr-types";
import Navbar from "@/components/navbar";
import Header from "@/components/header";
import Item from "@/components/item";
import { IData } from "@/interface";
import styles from "./index.less";
export default (props: SProps) => {
  const { state } = useContext<IContext<IData>>(window.STORE_CONTEXT);
  return (
  <div>
  <Navbar {...props} isHomePage={true}></Navbar>
  <Header></Header>
  <div className={styles.container}>
  {state?.indexData?.data.map((item) => (
    <Item
    {...props}
    id={item.id}
    key={item.id}
    title={item.title}
    content={item.content}
    date={item.date}
    ></Item>
  ))}
  </div>
  </div>
  );
};

在 UI 组件中，我们可以通过 useContext 获取刚才由 fetch.ts 存入 state 的数据，然后利用数据渲染 UI。UI 组件主要由三部分组成。

• Navbar：导航条。
• Header：页面标题。
• Item：每篇文章的简介。