• 创建user模块

• 配置路由及配置代理

在.umire.ts中

import { defineConfig } from ‘umi’;

export default defineConfig({

nodeModulesTransform: {

type: ‘none’,

},

routes: [

{ path: ‘/’, component: ‘@/pages/users/index’ },

],

fastRefresh: {},

proxy: {

‘/api’: {

‘target’: ‘https://www.fastmock.site/mock/fed13828390069db6c28fe3f2da98a19/demo1/’,

// ‘target’: ‘https://public-api-v1.aspirantzhang.com/’,

‘changeOrigin’: true,

‘pathRewrite’: { ‘^/api’: ‘’ },

},

},

});

• 封装网络请求request.ts

/** Request 网络请求工具 更详细的 api 文档: https://github.com/umijs/umi-request */

import { extend } from ‘umi-request’;

import { message } from ‘antd’;

const codeMessage: { [status: string]: string } = {

200: ‘服务器成功返回请求的数据。’,

201: ‘新建或修改数据成功。’,

202: ‘一个请求已经进入后台排队（异步任务）。’,

204: ‘删除数据成功。’,

400: ‘发出的请求有错误，服务器没有进行新建或修改数据的操作。’,

401: ‘用户没有权限（令牌、用户名、密码错误）。’,

403: ‘用户得到授权，但是访问是被禁止的。’,

404: ‘发出的请求针对的是不存在的记录，服务器没有进行操作。’,

406: ‘请求的格式不可得。’,

410: ‘请求的资源被永久删除，且不会再得到的。’,

422: ‘当创建一个对象时，发生一个验证错误。’,

500: ‘服务器发生错误，请检查服务器。’,

502: ‘网关错误。’,

503: ‘服务不可用，服务器暂时过载或维护。’,

504: ‘网关超时。’,

};

/** 异常处理程序 */

const errorHandler = (error: { response: Response }): Response => {

const { response } = error;

if (response && response.status) {

const errorText = codeMessage[response.status] || response.statusText;

message.error(errorText);

} else if (!response) {

message.error(‘您的网络发生异常，无法连接服务器’);

}

return response;

};

/** 配置request请求时的默认参数 */

const request = extend({

errorHandler, // 默认错误处理

credentials: ‘include’, // 默认请求是否带上cookie

});

// request拦截器, 改变url 或 options.

request.interceptors.request.use((url, options) => {

console.log(url)

if (options.data) {

console.log(JSON.stringify(options.data))

} else if (options.params && Object.keys(options.params).length > 0) {

console.log(options.params)

}

return {

url: url,

options: options,

};

});

// response拦截器, 处理response

request.interceptors.response.use(async response => {

const data = await response.clone().json();

if (data.code !== 200) {

message.error(data.message);

return data.message

} else {

return response;

}

});

export default request;

• 网络请求接口（service.ts中）

import { request as request1 } from ‘umi’;

import { message } from ‘antd’;

import request from ‘@/utils/request’;

import { FormValues } from ‘./data’

export async function getRemoteList1() {

return request1(’/api/users’, {

method: ‘get’

})

.then(response => {

return

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

response

})

.catch(error => {

console.log(error);

});

}

export async function editRecord1({ id, value }: any) {

return request1(/api/edit, {

method: ‘post’,

data: value

})

.then(response => {

if (response.code != 200) {

message.error(response.message);

}

return response

})

.catch(error => {

message.error(error);

});

}

// -----------------------------------使用封装后的request---------------------------------------------

type EditRecordParamsType = {

id: number |undefined;

value: FormValues;

};

export async function getRemoteList(): Promise {

return request(’/api/users’);

}

export async function editRecord(params: EditRecordParamsType): Promise {

return request(’/api/edit’, {

method: ‘POST’,

data: params,

});

}

• 提取公用数据类型（data.d.ts中）

/**

• 这个文件是放 公共的 类型接口的

*/

/**

• 封装后台返回的数据

*/

export type SingleUserType ={

id: number,

name?: string,

email?: string,

create_time?: string,

update_time?: string,

status: number

}

/**

• Modal 框的确定按钮的类型

*/

export type FormValues ={

}

• 数据仓库（dva）model.ts中请求并处理数据

import { Effect, Reducer, Subscription } from ‘umi’;

//导入service远端数据请求

import { getRemoteList } from ‘./service’

import { SingleUserType } from ‘./data’

/**

• 封装后台返回的数据

*/

export type UserState = {

data: SingleUserType[],

meta: {

total: number,

per_page: number,

page: number

}

}

interface UserModelType {

namespace: string;//这里的命名空间就是展示页面得到数据的键

state: UserState;//封装后台返回的数据

effects: {

getRemote: Effect;

};

reducers: {

getList: Reducer,

};

subscriptions: { setup: Subscription };

}

const UserModel: UserModelType = {

namespace: ‘usersData’,//这里的命名空间就是展示页面得到数据的键

state: {

data: [],

meta: {

total: 0,

per_page: 10,

page: 1

}

},

//异步

effects: {

//获取列表数据

*getRemote({ payload }, { call, put }) {

//从service中获取数据（service主要用于接口请求）

const data = yield call(getRemoteList)

if (data && data instanceof Object) {

yield put({

type: ‘getList’,//这个是将数据给reducers中哪个方法

payload: data //注意这里传递一个数组会出问题，原因待定

})

}

},

},

//同步

reducers: {

getList(state, action) {

return {

…state,

…action.payload,

};

},

},

//订阅

subscriptions: {

setup({ dispatch, history }) {

return history.listen(({ pathname }) => {

if (pathname === ‘/’) {//当前页面的路径

dispatch({

type: ‘getRemote’,//调用effects中的方法

})

}

});

}

}

};

export default UserModel;

• 首页index.tsx展示数据

import React, { useState, FC } from ‘react’;

//UserState, SingleUserType 需要在model中导出

import { connect, Dispatch, Loading, UserState } from ‘umi’;

import { Table, Space, message } from ‘antd’;

import UserModal from ‘./components/UserModal’

import { SingleUserType, FormValues } from ‘./data’

import { editRecord } from ‘./service’

/**

• 声明下方 props 类型

• const { users, dispatch, listLoading } = props

*/

type userPageProps = {

users: UserState,

dispatch: Dispatch,

listLoading: boolean

}

const UserListPage: FC = (props) => {

//控制modal弹框

const [visible, setVisible] = useState(false);

const [confirmLoading, setConfirmLoading] = useState(false);

const [record, setRecord] = useState<SingleUserType | undefined>(undefined);

//获取从model中来的数据

const { users, dispatch, listLoading } = props

//编辑

const onClickEdit = (record: SingleUserType) => {

setVisible(true)

setRecord(record)

};

/**

• 表单提交

*/

const onFinish = async (value: FormValues) => {

setConfirmLoading(true);

const id = record?.id

const result = await editRecord({ id, value })

if (result && result instanceof Object) {

message.success(result.data);

setVisible(false);

dispatch({

type: ‘usersData/getRemote’

})

}

setConfirmLoading(false);

};

//关闭弹窗

const handleCancel = () => {

setVisible(false);

};

const columns = [

{

title: ‘ID’,

dataIndex: ‘id’,