11-2 yapi创建接口和模拟数据

在这一章中，我们将继续完善频道模块的功能。以下是频道模块的数据结构和接口配置：

一、频道页面数据结构

频道信息组件

export interface Album {
  id: string;
  thumbnailUrl: string;
  title: string;
  summary: string;
  author: IAuthor;
  introduction: string;
}

节目列表

export interface Program {
  id: string;
  title: string;
  playVolume: number;
  duration: number;
  date: string;
}

作者信息

export interface Author {
  name: string;
  avatar: string;
}

二、YAPI 接口配置

接口地址

/mock/11/bear/album/list

接口数据

{
  "status": 100,
  "msg": "success",
  "data": {
    "id": "5f9c397d-4f8e-4a1c-8b2b-1c3d4e5f6a7b",
    "thumbnailUrl": "https://via.placeholder.com/128.png/09f/fff",
    "title": "神秘的深海世界",
    "summary": "探秘深海的奥秘",
    "author": {
      "name": "张海洋",
      "avatar": "https://via.placeholder.com/32.png/09f/fff"
    },
    "introduction": "在深海的黑暗深处，隐藏着许多不为人知的秘密。从奇异的生物到古老的沉船，每一处都充满了神秘气息。",
    "list": [
      {
        "id": "a1b2c3d4",
        "title": "深海奇观：生物篇",
        "playVolume": 2345,
        "duration": 15,
        "date": "2023-10-01"
      },
      {
        "id": "e5f6g7h8",
        "title": "深海探险：设备篇",
        "playVolume": 1234,
        "duration": 10,
        "date": "2023-10-01"
      },
      {
        "id": "i9j0k1l2",
        "title": "深海遗址：历史篇",
        "playVolume": 3456,
        "duration": 12,
        "date": "2023-10-01"
      }
    ]
  }
}

三、频道模块的 Model

import { Model, Effect } from 'dva-core-ts';
import { Reducer } from 'redux';
import axios from 'axios';

// 定义接口地址
const REQUEST_URL = '/mock/11/bear/album/list';

// 定义节目接口
export interface Program {
  id: string;
  title: string;
  playVolume: number;
  duration: number;
  date: string;
}

// 定义作者接口
export interface Author {
  name: string;
  avatar: string;
}

// 定义频道接口
export interface Album {
  id: string;
  thumbnailUrl: string;
  title: string;
  summary: string;
  author: Author;
  introduction: string;
  list: Program[];
}

// 声明频道模块的 state
export interface AlbumModelState {
  album: Album;
}

// 定义频道模块的 Model 接口
export interface AlbumModelType extends Model {
  namespace: 'album';
  state: AlbumModelState;
  effects: {
    fetchAlbum: Effect;
  };
  reducers: {
    setState: Reducer<AlbumModelState>;
  };
}

// 初始 state
const initialState: AlbumModelState = {
  album: null,
};

// 定义 Model
const albumModel: AlbumModelType = {
  namespace: 'album',
  state: initialState,
  reducers: {
    setState(state, { payload }) {
      return {
        ...state,
        album: payload,
      };
    },
  },
  effects: {
    *fetchAlbum(_, { call, put }) {
      const { data } = yield call(axios.get, REQUEST_URL);
      yield put({
        type: 'setState',
        payload: data.data,
      });
    },
  },
};

export default albumModel;

四、总结

在本节中，我们为频道模块创建了数据结构和 YAPI 接口，并实现了频道模块的 Model。下一节，我们将学习如何实现频道简介的组件。