【后台管理系统】—— 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", }, }); }
-
登录提