MeteorCat

AntD的前端设计(三) 在这之前已经完成网络请求推送用于前端和服务端进行交互, Login 接口已经完备只差授权机制验证了. 官方提供了 认证机制文档 现在需要对之前的静态配置 config/config.ts 配置来处理: export default defineConfig({ // access 插件依赖 initial State 所以需要同时开启 // 传入空对象则默认开启 access: {}, initialState: {}, // 其他略 }) 之后就是定义过滤器, 编写需要修改权限过滤文件 ( src/access.ts ): // 在这里按照初始化数据定义项目中的权限，统一管理 // 参考文档 https://umijs.org/docs/max/access import {useModel} from "@@/exports"; export default () => { const {isLogin} = useModel('global'); const isCheckAuth = isLogin(); // 直接返回权限类型, 确认是否可以通过 return { isCheckAuth: isCheckAuth }; };

AntD的前端设计(二) 之前只讲如何配置 RequestConfig 和 ResponseStructure, 这里面内部其实就是为了保持和服务端消息同步, 日常消息协议格式我都采取以下方式: // 常规消息结构体 { "error": 0, "message": "success", "data": {}, } // 这里提供登录授权完成和数据分页完成格式的返回示例 // 1. 授权完成 { "error": 0, "message": "success", "data": { "uid": 1, "username": "meteorcat", "nickname": "MeteorCat", "token": "97ba4dd71592c7b26bc90308806d42f3" }, } // 2. 分页返回, 分页返回有两种: // 2.1 前端推送页数(page)和数据量(total), 服务端返回当前页和总页数(list,page,total) // 2.2 前端推送偏移两(offset)和数据量(total), 服务端返回当前页和总页数(list,page,total) { "error": 0, "message": "success", "data": { "list": [ { "id": 1, "name": "MeteorCat" }, // 其他数据 ], "page": 1, // 数据分页页码 "total": 10, // 总共数据页数 } } 大部分业务都是围绕数据流展示( 像是支付订单|人员流失的查询 )和图表分析( 后台返回数据JSON格式 ), 基本上面那些方式够用了.

AntD的前端设计(一) 之前搭建完了脚手架环境, 现在优先了解配置文件优先在哪配置: // 这里可以查看到定义配置, 这里就是以项目做根目录 // 文件路径: .umirc.ts import {defineConfig} from '@umijs/max'; export default defineConfig({ antd: {}, access: {}, model: {}, initialState: {}, // 网络请求配置 request: { // 获取消费服务端数据默认初始数据对象 key 为 data // { error:0, message:"success", data:{} }, 这样直接提取 data 而非初始 error/message/data dataField: 'data', }, // layout 配置, title 就是标题名称 // 具体配置说明查看: https://pro.ant.design/zh-CN/docs/title-landing layout: { // logo 标志 logo: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg', // 页面标题 title: 'Mix管理后台', // 是否采用国际化, 如果不需要国际化直接关闭还能节省开发时间 menu: false, }, // 定义静态路由 // 具体配置说明查看: https://pro.

AntD的前端设计(零) 因为多年至今都是侧重点偏服务端对于美术设计方面可能接触这么深入, 这时候就要公司项目需要抓紧上马服务后台设计, 虽然日常用 boostrap+jquery 就能搭建好常用后台, 但是时代也是在进步所以需要学习更新易用的后台前端框架来适应. 在终端选型之中找到几个备选方案: Vue+ElementUI React+AntDesign Vue+AntDesign 在最后考虑之后最终定型 React+Ant, 注意采用 AntDesignPro 集成大量的脚手架组件. Umi官网: umi(ant.design) 这里先搭建好最新脚手架服务: # 首先创建新目录并且进入等待初始化 mkdir myapp && cd myapp # 使用 npx 下载 umi 脚手架, 内部支持选择 ant-d 框架 npx create-umi@latest # 生成构建 Ant-D 模板 > Pick Umi App Template › - Use arrow-keys. Return to submit. # Simple App # > Ant Design Pro # Vue Simple App # 之后配置 npm 执行器和镜像地址等待下载完成没问题 # 现在的项目根目录就是 `myapp` 搭建完成的时候直接启动服务测试即可: