Question

我们实现了一个内容管理系统的 Restful API，但没有前端界面，所以今天我们的目标就基于 Serverless 实现一个内容管理系统的前端界面（如图所示）。

该应用主要包含两个页面：

• 首页，展示文章列表；
• 详情页，展示文章详情。

为了方便你进行实践，我为你提供了一份示例代码，你可以直接下载并使用：

# 下载代码
$ git clone https://github.com/poetries/serverless-class
# 进入服务端渲染应用目录
$ cd 16/serverless-ssr-cms

代码结构如下：

.
├── config.js
├── f.yml
├── package-lock.json
├── package.json
├── src
│   ├── api.ts
│   ├── config
│   │   └── config.default.ts
│   ├── configuration.ts
│   ├── index.ts
│   ├── interface
│   │   ├── detail.ts
│   │   └── index.ts
│   ├── mock
│   │   ├── detail.ts
│   │   └── index.ts
│   ├── render.ts
│   └── service
│   ├── detail.ts
│   └── index.ts
├── tsconfig.json
├── tsconfig.lint.json
└── web
  ├── @types
  │   └── global.d.ts
  ├── common.less
  ├── components
  │   ├── layout
  │   │   ├── index.less
  │   │   └── index.tsx
  │   └── title
  │   ├── index.less
  │   └── index.tsx
  ├── interface
  │   ├── detail-index.ts
  │   ├── index.ts
  │   └── page-index.ts
  ├── pages
  │   ├── detail
  │   │   ├── fetch.ts
  │   │   ├── index.less
  │   │   └── render$id.tsx
  │   └── index
  │   ├── fetch.ts
  │   ├── index.less
  │   └── render.tsx
  └── tsconfig.json

文件很多，不过不用担心，你只需重点关注 web/pages/ 和 src/service 两个目录：

• web/ 目录中主要是前端页面的代码， web/pages/ 中的文件分别对应着我们要实现的 index（首页）和 detail（详情页）两个页面，这两个页面会使用到 components 目录中的公共组件；
• src/ 目录中主要是后端代码，src/service 目录中的 index.ts 和 detail.ts 则定义了两个页面分别需要用到的接口，为了简单起见，接口数据我使用了 src/mock/ 目录中的 mock 数据。

当我一个人又负责前端页面也负责后端接口的开发时，通常习惯先实现接口，再开发前端页面，这样方便调试。接下来就让我们看一下具体是怎么实现的。