【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记（二）

最新推荐文章于 2024-09-10 19:50:21 发布

柳柳Elena

最新推荐文章于 2024-09-10 19:50:21 发布

阅读量974

点赞数

本文链接：https://blog.csdn.net/qq_34235864/article/details/89323911

版权

本文介绍了在开发后台管理系统时使用Ant Design Pro的实践，包括配置代理解决跨域、调用接口获取数据、列表展示、登录功能以及@connect装饰器的使用。重点讲解了如何配置proxy代理，使用services调取API，dva的model中处理数据，以及在组件中使用@connect与redux store交互。同时提到了登录注册的关键点，如携带token和验证手机验证码。此外，还讨论了表格数据处理、表单数据获取及页面查询功能的实现。

摘要由CSDN通过智能技术生成

【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记（二）

前言：上一篇梳理了上手Ant Design Pro需要了解的一些基础知识，这一篇记录一些在开发【后台管理系统】登录注册、数据获取、列表展示等功能时需要注意的地方。

一、与服务器交互的一般步骤

代理到后端，配置跨域

修改 config/config.js

配置 proxy 属性。只要 proxy 和 mock url 不同，是可以共存的。

proxy: {
    '/login': {
        target: 'http://192.168.1.106:9099',
        changeOrigin: true,
        pathRewrite: { '^/login': '' },
    },
}

添加要请求的接口

修改 services/api.js （可以是service目录下其他自定义文件）

import request from '@/utils/request';  //ant design pro封装的reques请求文件

export async function fakeAccountLogin(params) {
  return request('/login', {
    method: 'POST',
    body: params
  });
}

在modal里面写effect调取接口方法

修改 model/login.js (可以是model目录下其它自定义文件）

import { fakeAccountLogin, getFakeCaptcha } from '@/services/api'; //请求的接口方法

namespace: 'login', //要唯一

state: {
    list: []  //后台返回的数据存储在该list中,名字想怎么起怎么起
},

effects: {
    *login({ payload }, { call, put }) {  //login是界面要调取的接口名称
         const response = yield call(fakeAccountLogin, payload);  //yield call（）真正调用接口，传递数据，返回响应的方法
         yield put({                   //一个yield put只能触发一个action
               type: 'queryList',   //通过调用这个reducer把返回数据传给list
               payload: response, 
         });

         reducers: {
               queryList(state, action) {
                  return {
                      ...state,
                      list: action.payload,  //这就拿到数据啦
                  };
               },
         }
    }
}

组件中创建连接

在 pages/User/Login.js 组件中通过 dva提供的connect高阶组件连接组件和dva，传入namespace(唯一）获得其中的state和effects(dispatch方法）

import { connect } from 'dva'

@connect(({ login, loading }) => ({   //login是namespace  loading是对应使用的方法
     login,       //login是namespace
     submitting: loading.effects['login/login'],  //login 命名空间的login请求接口（入口）
}))

一般在componentDidMount生命钩子中发送请求获取数据

componentDidMount() {
 //注意务必先使用dva中的connect建立连接，否则是无法调用props中的dispatch法的
        this.props.dispatch({
            //调用model中的方法发起请求，（model的命名空间+方法名）
            type: 'mbit/firstRequest',
            //设置参数
            payload:{
                  args1:"参数1",
                  args2:"参数2",
            },
        });
}