Ant Design Pro V5 从服务器请求菜单（typescript版）
<h2 id="前言">【前言】</h2><blockquote>
<p>找了很多Admin模板，最后还是看中了AntDesignPro（下文简写antd pro）这个阿里巴巴开源的Admin框架，长这样（还行吧，目前挺主流的）：</p>
</blockquote>
<p>官网地址：https://pro.ant.design/index-cn</p>
<p><img src="https://img2020.cnblogs.com/blog/998608/202008/998608-20200806105315496-1289806863.png" alt="" loading="lazy"></p>
<p>该套模板是使用了React开发框架作为基础，AntDesign（蚂蚁金服开源UI组件库）作为UI库，集成了Dva，Umi，Mock等库，如果不是很了解这些内容，门槛还是比较高的。</p>
<p>我们今天需要实现一个需求：将Antd Pro模板中固定写死的菜单换成从服务器请求菜单然后进行渲染</p>
<p>为啥非要自己写，官网文档不香吗？----官方文档写的实在太草了，而且目前没有typescript方式的文档，需要踩多少坑...不过没关系，看完这篇坑就都基本填平了</p>
<p>关于Antd Pro第一步，如何创建并运行Antd Pro，可以移步 https://www.cnblogs.com/7tiny/p/13444963.html</p>
<h2 id="了解项目中的dva和umi用法">【了解项目中的dva和Umi用法】</h2>
<p>antd pro 默认采用了Umi和dva组件，因此想要在基础上添加功能必须了解数据请求和数据流向</p>
<p>在dva中主要分3层，models,services,components,其中models是最重要概念，这里放的是各种数据，与数据交互的应该都是在这里。services是请求后台接口的方法。components是我们编写的组件。</p>
<h4 id="service层">service层</h4>
<p>service 层仅仅是封装了用request请求服务端的api的逻辑，这里不涉及业务逻辑，比较简单，例如下面代码：</p>
<pre><code class="language-typescript">import request from '@/utils/request';
export interface LoginParamsType {
userName: string;
password: string;
mobile: string;
captcha: string;
}
export function fakeAccountLogin(params: LoginParamsType) {
return request('/api/login/account', {
method: 'POST',
data: params,
});
}
export async function getFakeCaptcha(mobile: string) {
return request(`/api/login/captcha?mobile=${mobile}`);
}
</code></pre>
<h4 id="models层">models层</h4>
<p>models层是核心业务逻辑的所在</p>
<pre><code class="language-typescript">import { Effect, Reducer } from 'umi';
import { queryCurrent, query as queryUsers } from '@/services/user';
export interface CurrentUser {
avatar?: string;
name?: string;
title?: string;
group?: string;
signature?: string;
tags?: {
key: string;
label: string;
}[];
userid?: string;
unreadCount?: number;
}
export interface UserModelState {
currentUser?: CurrentUser;
}
//定义接口
export interface UserModelType {
namespace: 'user';
state: UserModelState;
effects: {
fetch: Effect;
};
reducers: {
saveCurrentUser: Reducer<UserModelState>;
};
}
const UserModel: UserModelType = {
//命名空间，component层调用路由方法的时候需要根据命名空间匹配
namespace: 'user',
//存放值的地方
state: {
currentUser: {},
},
// 与后台交互，处理数据逻辑的地方
effects: {
//业务方法，这里的_是不需要参数，如果需要参数，这里改成传递进来的参数对象即可
//这里支持call，put，select等几种方法，用call调用service层的方法
//const m = yield select((state) => state.test.num) //select就是用来选择上面state里的，这里没用上
*fetch(_, { call, put }) {
//queryUsers是引入service层那个function的一个名字
const response = yield call(queryUsers);
yield put({
// 这就是reducer中save方法, put就是用来触发reducer的方法，payload里就是传过去的参数。 同时它也能触发同等级effects中其他方法。
type: 'saveCurrentUser',
payload: response,
});
},
},
// 能改变界面的action应该放这里,这里按官方意思不应该做数据处理，只是用来return state 从而改变界面
reducers: {
//可以理解为一个方法
saveCurrentUser(state, action) {
//return新的state,这样页面就会更新 es6语法，就是把state全部展开，然后把currentUser重新赋值
return {
...state,
currentUser: action.payload || {},
};
},
},
};
export default UserModel;
</code></pre>
<h4 id="component组件中调用model层">component组件中调用model层</h4>
<p>在某一个方法里用dispatch即可调用</p>
<pre><code class="language-typescript">clickHandler = () => {
dispatch({
type: "user/fetch",// 这里就会触发models层里面effects中fetch方法（也可以直接触发reducer中方法，看具体情况） ,user是命名空间名字
payload: {
},
})
}
</code></pre>
<p>这里注意一下type请求的方法路由即可，前面是命名空间，后面是方法名</p>
<h4 id="使用connect获取dispatch调用后改变的state中的数据">使用connect获取dispatch调用后改变的state中的数据</h4>
<p>首先需要在组件接口中定义字段，类型为model中定义的类型，因为要获取model中字段这个值，肯定是同一种类型的</p>
<p><img src="https://img2020.cnblogs.com/blog/998608/202008/998608-20200806142735303-1842978133.png" alt="" loading="lazy"></p>
<p>然后在组件的实现中定义变量，从props中获取值</p>
<p><img src="https://img2020.cnblogs.com/blog/998608/202008/998608-20200806142838691-277512198.png" alt="" loading="lazy"></p>
<p>在组件代码下方的connect方法中将变量赋值，只有这里赋值了，组件中的常量才可以从props中获取到state中的值</p>
<p><img src="https://img2020.cnblogs.com/blog/998608/202008/998608-20200806142942152-1831726063.png" alt="" loading="lazy"></p>
<p>这里connect方法的参数其实就是各个model中的state，dispatch后，这里便可以获取到修改后的值</p>
<p>tips：因为使用的是typescript，所以这里的参数需要在ConnectState中先定义：</p>
<p><img src="https://img2020.cnblogs.com/blog/998608/202008/998608-20200806143105830-561375741.png" alt="" loading="lazy"></p>
<h2 id="开始改造antd-pro实现从服务器请求菜单">【开始改造Antd Pro，实现从服务器请求菜单】</h2>
<h4 id="定义service">定义service</h4>
<p>在src/services文件夹下新增文件 menu.ts</p>
<pre><code class="language-typescript">import request from '@/utils/request';
export async function query(): Promise<any> {
return request('/api/getmenu'); //这里是服务端的获取菜单的地址，根据自己情况进行调整
}
</code></pre>
<h4 id="定义model">定义model</h4>
<p>在src/models文件夹下新增文件 menu.ts</p>
<pre><code class="language-typescript">import { Effect, Reducer } from 'umi';
import { MenuDataItem } from '@ant-design/pro-layout';
import { query } from '@/services/menu';
export interface MenuModelState {
menuData: MenuDataItem[];
}
export interface MenuModelType {
namespace: 'menu';
state: MenuModelState;
effects: {
getMenuData: Effect;
};
reducers: {
saveMenuData: Reducer<MenuModelState>;
};
}
//这里做了个转换，可能服务端返回的接口格式和前端的路由格式并不一致，可以在这个方法里进行调整，这里的方法仅作参考，根据自己实际情况进行调整即可
const menuFormatter = (response: any) => {
if (response === null)
return [];
var re = response.map((item: { name: string; route: string; children: any; }) => {
const result = {
children: {},
name: item.name,
path: item.route === null ? '/' : item.route,
};
if (item.children) {
result.children = menuFormatter(item.children);
}
return result;
})
return re;
}
const MenuModel: MenuModelType = {
namespace: 'menu',
state: {
menuData: [],
},
effects: {
*getMenuData(_, { put, call }) {
const response = yield call(query);
yield put({
type: 'saveMenuData',
payload: menuFormatter(response.data.viewMenu),
});
},
},
reducers: {
saveMenuData(state, action) {
return {
...state,
menuData: action.payload || [],
};
},
},
};
export default MenuModel;
</code></pre>
<h4 id="调整组件-basiclayouttsx">调整组件 BasicLayout.tsx</h4>
<p>antd pro的菜单调整在 src/layouts/BasicLayout.tsx 文件中</p>
<p><img src="https://img2020.cnblogs.com/blog/998608/202008/998608-20200806141540892-897675422.png" alt="" loading="lazy"></p>
<p>这里menuDataRender 默认指向一个方法，我这里不要原来的方式，我们要调整成自己的数据</p>
<p>以下代码如无特殊说明，都在 BasicLayout.tsx 文件中</p>
<h3 id="1-调整接口">1. 调整接口</h3>
<p>在 BasicLayoutProps 接口中添加承载菜单的字段</p>
<p><img src="https://img2020.cnblogs.com/blog/998608/202008/998608-20200806141813665-826020347.png" alt="" loading="lazy"></p>
<h3 id="2-调整组件传入的字段useefect方法中加入请求服务的路由">2. 调整组件传入的字段，useEfect方法中加入请求服务的路由</h3>
<p><img src="https://img2020.cnblogs.com/blog/998608/202008/998608-20200806141935890-1150559489.png" alt="" loading="lazy"></p>
<h3 id="3-调整组件menudatarender为使用传进来的菜单数据以前那个方法不用了">3. 调整组件menuDataRender为使用传进来的菜单数据（以前那个方法不用了）</h3>
<p><img src="https://img2020.cnblogs.com/blog/998608/202008/998608-20200806142027514-839117194.png" alt="" loading="lazy"></p>
<h3 id="4-调整connect方法获取数据">4. 调整connect方法，获取数据</h3>
<p><img src="https://img2020.cnblogs.com/blog/998608/202008/998608-20200806142134669-305759488.png" alt="" loading="lazy"></p>
<p>menu是我们在models/menu.tx中定义的MenuModelState类型，光这里写会提示错误，我们需要在ConnectState中先将该字段定义才可以正常使用</p>
<p><img src="https://img2020.cnblogs.com/blog/998608/202008/998608-20200806142301946-230792288.png" alt="" loading="lazy"></p>
<h2 id="运行一下试试效果">【运行一下试试效果】</h2>
<p>执行命令运行一下看看效果</p>
<pre><code>cnpm start
</code></pre>
<p>可以看到，已经自动触发了后端接口，并获取到了数据，最后又用服务端的数据渲染了菜单</p>
<p><img src="https://img2020.cnblogs.com/blog/998608/202008/998608-20200806143526745-2079111306.png" alt="" loading="lazy"></p>
<p>其他内容可以参考官方文档</p>
<p>antd pro官网地址：https://pro.ant.design/index-cn</p>
</div>
<div id="MySignature" role="contentinfo">
<div id="copyright"><h2>【博主声明】</h2></div>
<div style="background: #99CCFF; line-height: 22px">
<span style="color: red">本文为站主原创作品，转载请注明出处：http://www.cnblogs.com/7tiny 且在文章页面明显位置给出原文链接。</span>
<br>
作者：
<p style="font-size: small; font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif">
7tiny<br>
Software Development<br>
北京市海淀区 Haidian Area Beijing 100089,P.R.China<br>
郵箱Email : seventiny@foxmail.com <span><img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_01.png" style="display: inline-block; vertical-align: middle"></span><br>
網址Http:http://www.7tiny.com<br>
WeChat: seven-tiny<br>
更多联系方式点我哦~
</p>
</div>
<hr>
<span style="font-size: small; color: red"> Best Regard ~</span><br><br>
来源：https://www.cnblogs.com/7tiny/p/13446188.html
頁:
[1]