ant design pro 权限（antd使用pro-components时总是提示ReferenceError: process is not defined）

本文目录

• antd使用pro-components时总是提示ReferenceError: process is not defined
• ant design pro上传图片到后端
• Ant Design Pro Vue使用心得
• ant design pro登录跳转不到主界面或者需要登录两次问题
• antdesignpro去掉ts
• 手把手教你创建Ant Design Pro的React项目
• Ant Design Pro V5 包含演示效果创建方法
• ant-design-pro 实现二级权限表格
• react.js的ant design Pro 不知道怎样依靠npm安装脚手架

antd使用pro-components时总是提示ReferenceError: process is not defined

这个错误的原因是：在浏览器环境中，并不存在 Node.js 中的 process 全局变量，而 Ant Design Pro-Components 中的一些代码可能会使用到 process 变量，因此在浏览器环境中会出现这样的错误。
解决方法：可以使用一个简单的解决方案，即在入口文件中添加以下代码：
global.process = {
env: {
NODE_ENV: ’production’,
},
};
如果你使用了 webpack，可以在 webpack 配置中添加以下代码：
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
’process.env’: {
NODE_ENV: JSON.stringify(’production’),
},
}),
],
...
};
这样就可以解决 ReferenceError: process is not defined 错误了。

ant design pro上传图片到后端

我们这里是前端将图片上传到后端，然后后端这里再上传到阿里云的OSS，并返回一个文件的路径给前端
《br /》

这里的 LogoPicReq 没有@RequestBody，因为这里是通过表单提交的

《br /》其中一定要通过直联的方式进行获取，否则就是上报没有权限《br /》

***隐藏网址***

***隐藏网址***

Ant Design Pro Vue使用心得

路由和菜单是组织起一个应用的关键骨架，pro 中的路由为了方便管理，使用了中心化的方式，在 ==router.config.js== 统一配置和管理。

目前脚手架中所有的路由都通过 ==router.config.js== 来统一管理，在 ==vue-router== 的配置中我们增加了一些参数，如 ==hideChildrenInMenu==,==meta.title==,==meta.icon==,==meta.permission==，来辅助生成菜单。其中：

***隐藏网址***

菜单根据 ==router.config.js== 生成，具体逻辑在 ==src/store/modules/permission.js== 中的 ==actions.GenerateRoutes== 方法实现。

在 Ant Design Pro 中，我们抽离了使用过程中的通用布局，都放在 ==/components/layouts== 目录中，分别为：

在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 @/src/api 文件夹中，并且一般按照 model 纬度进行拆分文件，如：

其中，==@/src/utils/request.js== 是基于 ==axios== 的封装，便于统一处理 ==POST==，==GET== 等请求参数，请求头，以及错误提示信息等。具体可以参看 ==request.js==。 它封装了全局 request 拦截器、response 拦截器、统一的错误处理、baseURL 设置等。

例如在 api 中的一个请求用户信息的例子：

***隐藏网址***

***隐藏网址***

***隐藏网址***

-更换logo在==src\components\tools\Logo.vue==中更换

在==vue.config.js==文件中修改

在文件==src\utils\request.js==中设置

动态方法的引用

调用获取动态方法

ant design pro登录跳转不到主界面或者需要登录两次问题

由于登录判断是在layouts/SecurityLayout.jsx中，查看路由配置的话，可以看出所有这个组件所属路由下的子路由的访问，都需要登录验证。
config.js:

layouts/SecurityLayout.jsx:

这个组件在挂载后先fetchCurrent，然后在这里有一句非常关键的 if ((!isLogin && loading) || !isReady) ，我就不详细讨论这个条件的成立的情况了，太多了，只列举直接刷新后台主界面和router.push到后台主界面的时候， ，这几个变量的值，我测试的结果：
刷新到主界面：
(!undefined && undefined) || !false = true;
(!undefined && true) || !true = true;
(获取到currentUser了)
push(登录)到主界面时：
(!undefined && undefined) || !false = true;
(!undefined && undefined) || !true = false;
(获取到currentUser了)
也就是说，你刷新页面的时候，currentUser值还没有之前，页面会被渲染成《PageLoading/》直到获取到currentUser，然后render子组件，也就是后台界面，而你登录，router.push到主界面时，currentUser值还没有之前，上面的if会有一次不成立，那么就会执行下面的跳转，重新跳转到登录页面，这里面根据每位开发者实际开发式不同的情况，常会出现两个问题，一是死活登录不进去，二是第1次登录不进去，第2次就可以登录进去了。反正原因都是这个了。
解决的最简单办法就是登录跳转的时候不要用routerRedux.replace(redirect || ’/’)，见model/login.js，而是直接window.location.href=redirect || ’/’;

其实这样跳转体验上也差不了多少。

第二种解决办法是，登录成功的时候返回当前用户的信息，然后保存在currentUser中，而不是跳转到后台的时候才获取currentUser，也就是push到后台的时候，currentUser中必须有值。

antdesignpro去掉ts

1、删除TypeScript相关的依赖：在项目根目录下的package.json文件中，找到并删除与TypeScript相关的依赖项。
2、修改配置文件：在项目中，可能有一些配置文件与TypeScript相关，删除这些文件或相应地进行修改。
3、修改代码文件：将项目中的.ts或.tsx后缀的文件改为.js或.jsx。确保所有的代码文件都是JavaScript或JSX的格式。
4、重新安装依赖：运行适当的命令重新安装项目所需的依赖项。可以使用npminstall或yarninstall等命令来完成。
5、清理构建产物：如果之前已经构建过项目，需要清理构建产物，以确保没有残留的TypeScript相关代码。

手把手教你创建Ant Design Pro的React项目

介绍

主要是使用 React 和 TypeScript 以及 Ant Design Pro 开发中后台项目，那么就会有人问“可不可开发前台”，回答是“可以”；Ant Design 是蚂蚁金服的UI框架，发展历程可以说是从 saga-redux -》 dva -》 umi -》 ant design ，说 ant design 是 react 的最佳实践确实是名副其实；其中我最喜欢或者说是 dva 最显著的地方就是修缮了 redux 的不足之处。

搭建

安装 cnpm，yarn，tyarn

```

***隐藏网址***

```

2.  Ant Design Pro 立足于 umijs 、dva，需要安装 umi

```
yarn global add umi

```

3.  创建 Ant Design Pro 项目（先创建test文件夹）

```
mkdir test

cd test

yarn create umi （这里选择 ant design pro -》 typescript -》 simple）tyarn

yarn start

```

+ config

    - config.ts  路由设计

    - proxy.ts  代理（打包后无效）

+ mock          模拟数据

+ src

    - assets    放一些静态资源文件（png，svg等）

    - component  主要放全局组件

    - layouts    权限、token获取

    - models    详细内容见dva，换言之是redux （interface、数据交互）

    - pages      页面

    - serives    请求（get,post）

    - utils      放一些公用方法

/* 以上为本人对ant design pro各个模块的理解，不足之处还请指教 */

举个栗子（dva）

TypeScript 最突出的就是类型注解，其目的就是减少对类型的试错，从而达到优化

/**  * 假设你现在要做一个博客网站，现在你要搭建的是你的博客首页 * 1. 现在你的 page 已经写好了（src/home/index.tsx和src/home/index.less） * 2. 你的后端接口也已经写好了，提供的接口就是 home (GET) * 3. 你也已经在 config/proxy.ts 中写好了代理，代理名 api **/

现在你需要创建一个 src/services/home.ts 去对接后台的接口。

import request from ’@/utils/request’// ant design pro 自带（无须修改，每次请求自动携带 token）interfaceHomeParams{currentPage:number;pageSize:number;}exportasyncfunctionqueryGetMyHomeData(payload:HomeParams){returnrequest(`/api/home`,{method:’GET’,params:{// 填写你需要传给后端的字段...payload,}/**        * 如果是 POST 请求，请将 params 修改成 data        **/})}

接下来，你需要创建一个 src/models/home.ts 去调用上面那个接口 （详细教程看 dva），我这是临时起意边想边写的（俗称瞎编乱造）。

import{queryGetMyHomeData}from’@/services/home’import{Effect,Reducer}from’umi’;exportinterfaceDataItem{// 暂且假设后端回给你的只有（ID、博客标题、发布日期(毫秒数)、摘要）id:number;title:string;createdDate:number;brief:string;}// state 对应的类型（接口）exportinterfaceHomeState{currentPage:number;data:Array《DataItem》;}exportinterfaceHomeModelType{namespace:string;// 说好听点叫做 "命名空间"state:HomeState;// 就是 stateeffects:{// effects 里面的可以调用 reducers 里面的getData:Effect,changePage:Effect,};reducers:{setData:Reducer《HomeState》,setPage:Reducer《HomeState》,};}constHomeModel={namespace:’home’,state:{currentPage:1,data:;// 我这里假设返回的 res.data 就是我们所需要的数据yieldput({// 将数据放到 state 里面type:’setData’,payload:{data:arr,}})},*changePage({payload},{call,put}){yieldput({type:’setPage’,payload});// yield take( ’setPage/@@end’ );    // 阻塞等待完成再往下执行，当然我们这里并不存在一步造成的问题yieldput({type:’getData’,payload});},},reducers:{setData(state,{payload}){return{...state,...payload,}},setPage(state,{payload}){return{...state,...payload,}},}}exportdefaultHomeModel;

让 src/pages/home/index.tsx 去 connect HomeModel

importReact,{useEffect}from’react’;import{connect,Dispatch}from’umi’;import{HomeState}from’@/models/home’interfaceHomeProps{dispatch:Dispatch;home:HomeState;}constHome:React.FC《HomeProps》=(props)=》{// 拿到的内容可以直接使用const{dispatch,home:{currentPage,data,}}=props;// 获取数据，或者说是初始化数据useEffect(()=》{dispatch({type:’home/getData’,payload:{currentPage,pageSize:8,}})},);// 页码改变事件functionpageChange(page){/**        * page的修改是两个操作        * 1. 修改 page        * 2. 获取数据        * 3. 如果面临异步问题（我们这里用阻塞）-- 这里不存在此问题        **/dispatch({type:’home/changePage’,payload:{currentPage:page,pageSize:8,}})}return(// ... 这里我就省略不写了);}exportdefaultconnect(home:HomeState=》home)(Home);

还有一点要 提醒 ，effects 里面的 和 reducers 里面的函数名不能一样。

有关于 Dva 对 Redux 的修改，见下图

Ant Design Pro V5 包含演示效果创建方法

Ant Design Pro V5 包含演示效果创建方法
1、node版本 v16.13.1
2、创新项目
2.1、执行命令：

2.2、选择 ant-design-pro

2.3、选择 TypeScript

2.4、选择 complete

执行命令：

支持基本功能已近和演示的一致了。可以执行

***隐藏网址***

如果需要包含主题切换功能，需要以下操作：

3、主题切换功能
3.1、执行以下安装:

***隐藏网址***

组件如下：

安装命令：

ant-design-pro 实现二级权限表格

场景：需要实现一个可折叠的二级权限表格，勾选全部时，下面的子权限自动勾选；去除子权限的勾选时，父权限的勾选也自动取消。
如图：

1.主页面

2.权限表格数据模型

3.权限操作码的枚举

react.js的ant design Pro 不知道怎样依靠npm安装脚手架

一、安装最新的node.js

原博文是这样写说的

npm install -g n //首先安装n模块 
n stable //升级node.js到最新稳定版 
n 5.0.0 //或者指定版本升级 
node -v //检查更新是否成功

我自己是去重新下了一个最新版的node.js

二、修改npm源为淘宝源

npm config set registry “”

加快npm下载速度，不这样做的话npm install会卡很久。

三、安装脚手架

首先确保自己安装了nodejs，然后全局安装yeoman
npm install -g yo
然后直接安装脚手架
npm install -g generator-reactpackage123456

四、创建React项目

在合适的地方新建一个文件夹，在文件夹下运行：
yo reactpackage12
然后就会在此目录下生成以下目录结构：
├── data
│ └── test.json├── src
│ ├── components
│ │ └── App.js│ ├── images
│ │ └── yeoman.png│ ├── styles
│ │ └── app.scss│ ├── vendor
│ │ └── jquery.js│ ├── views
│ │ └── home.html├── node_modules
├── index.html├── package.json└── webpack.config.js1234567891011121314151617181920

五、调试打包React项目

然后使用以下命令：
npm run dev //项目开发过程使用，启动服务，实时刷新npm run build //开发完成之后打包文件（js、css分开打包）123

六、测试预览项目

***隐藏网址***
如果执行上述命令提示错误：Error: getaddrinfo ENOTFOUND localhost，在host文件里面添加127.0.0.1 localhost即可
监听端口和实时刷新的功能都能在webpack.config.js文件中修改配置123