ant design pro安装

一、过程安装

其中安装成功后出现404参考  第二个大导航

所有都需要安装最新版本的

包括装node（node 10.13.0，自带npm 版本6.4.1 ）、yarn、 和 git（建议最新版本，否则会出很多问题）

node最新版本出了很多问题，最后用了node 10.13.0

 

下面为ant design pro 官网安装

https://pro.ant.design/docs/getting-started-cn

安装#

新建一个空的文件夹作为项目目录，并在目录下执行：

yarn create umi (本地采用，无问题)

or

npm create umi

选择 ant-design-pro：

 Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

Ant Design Pro 脚手架将会自动安装。

目录结构#

我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

本地开发#

安装依赖。

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm  config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

 

之后cnpm install  安装依赖

之后启动 cnpm start

 

运行

http://localhost:8000/  即可成功

 

基于 block 开发，快速构建标准页面

npx umi block list

 

获取全部区块

 npm run fetch:blocks

 

1. npm安装模块

【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录；
【npm install -g xxx】利用npm安装全局模块xxx；

 

2. 本地安装

本地安装时将模块写入package.json中：

【npm install xxx】安装但不写入package.json；
【npm install xxx --save】 安装并写入package.json的"dependencies"中；
【npm install xxx --save-dev】安装并写入package.json的"devDependencies"中。

 

3. npm 删除模块

【npm uninstall xxx】删除xxx模块；
【npm uninstall -g xxx】删除全局模块xxx；

 

4 less-loader 采用yarn安装（npm 和cnpm安装不上）

或者 yarn命令如下：
yarn add less less-loader --dev

5 清缓存

npm cache clean --force

二、新建页面出现404

参考DerrickTel的博客，网址：https://blog.csdn.net/cuandeqin2083/article/details/88421521

主要因为在config.js中，路由一定要写在404之前，例如/new 和/test，一定要在404之前，否则会一直出现404的问题

{
      path: '/',
      component: '../layouts/SecurityLayout',
      routes: [
        {
          path: '/',
          component: '../layouts/BasicLayout',
          authority: ['admin', 'user'],
          routes: [
            {
              path: '/',
              redirect: '/welcome',
            },
         
             {
              path: '/new',
              name: '新界面',
              icon: 'smile',
              component: './NewPage',

            },
            {
             path: '/test',
             name: 'test',
             icon: 'dashboard',
             routes: [{
                path: '/test/page1',
                name: 'page1',
                component: './Test/Page1',
              }],
          },
          {
              component: './404',
            },
          ],
        },
        {
          component: './404',
        },
      ],
    },

三、配置外部接口调用路由

config.js中序在最后配置

  proxy: {
    '/api/': {
      target: 'http://localhost:8080/',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },
  

请求界面为：

export async function query() {
  return request('/api/employee/list')
}
即实际请求的为：http://localhost:8080/employee/list

四、数据接收

http://localhost:8080/employee/list

数据为：

{
  "code": 200,
  "message": "操作成功",
  "data": {
    "pageNum": 1,
    "pageSize": 10,
    "totalPage": 1,
    "total": 1,
    "list": [
      {
        "id": 59,
        "name": "张三",
        "company": "公司1",
        "position": "工程师",
        "status": "1",
        "status1": 1
      }
    ]
  }
}

通过query方法获取数据后，yield put中的type会调用了reducers 里的一个方法，这个方法里去修改state，然后数据改变之后页面应该就会自动渲染了。
 

model.js中为：    

const Employee = {
  namespace: 'employee',
  state: {
    list: [],
    current: {},
    companies: [],
    departments: [],
    positions: [],
    statuses: [],
  },
  effects: {
    * fetch(_, { call, put }) {
       debugger;
      const response = yield call(query);
      //response =response.data;
      debugger;
      yield put({
        type: 'saveList',
        payload: response.data.list,
      })
    },

。。。

reducers: {
    saveList(state, { payload }) {
     // state.list = payload.data.list
      state.list = payload
    },

之后具体的index.js界面：

@connect(({ employee, loading }) => ({

  list: employee.list,
  loading: loading.models.employee,
}))
class List extends React.Component {
  columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      render(text, record) {
        debugger
        return <Link to={`/employee/${record.id}`}>{text}</Link>
      },
    },
    {
      title: '公司',
      dataIndex: 'company',
     
      render(text) {
        return text
      },
    },

 

五、新增用户后取消抛出错误

 只需要在resetCurrent 中添加 return state;  即可

Error: Given action "employee/resetCurrent", reducer "employee" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.

reducers: {
    saveList(state, { payload }) {
     // state.list = payload.data.list
      state.list = payload
    },
    ......
    resetCurrent(state) {
      state.current = {}
      return state;
    }
  },