基于Ant Design Pro开发管理系统的前端部分

标签：name title Pro component Ant meta Design true id

一、概述

Ant Design Pro是一种由阿里蚂蚁团队开发的中台前端设计解决方案，很适合作为后台管理系统的前端框架。

框架提供了齐全的路由菜单、布局、UI、组件等开发管理系统前端需要的功能。也支持开发自定义组件来满足一些个性化需求。

基础版的Ant Design Pro是免费的

如果需求比较复杂也有付费的企业版

基于Ant Design Pro开发管理系统的前端部分_nodejs

Ant Design Pro官网

我们今天要讲的是免费的基础班，demo预览如下图：

基于Ant Design Pro开发管理系统的前端部分_nodejs_02

二、运行环境

源码下载地址

github手动下载或者git命令下载

git clone https://github.com/vueComponent/ant-design-vue-pro.git

运行环境只需下载安装nodejs即可，nodejs自带npm

下载完成后，运行加载依赖包

cd ant-design-vue-pro
npm install

运行启动工程

npm run serve

运行此命令后，我们就启动了工程，可以浏览器打开http://localhost:8000访问了。

基于Ant Design Pro开发管理系统的前端部分_系统管理_03

基于Ant Design Pro开发管理系统的前端部分_系统管理_04

还有个重要的功能是将开发完成的打包，前面已经可以运行了，为什么还要打包呢？打包后我们的代码将大大得压缩，提高访问效率，同时也做了混淆，防止我们的代码能直接被浏览器看到，从而减少一些访问接口被看到后造成的漏洞。

npm run

打包完成后会在工程目录下生成dist文件夹，只要把dist文件夹下的文件一起放到文件服务器下，就能访问了。比如：nodejs、springboot、nginx等都可以运行。

基于Ant Design Pro开发管理系统的前端部分_nodejs_05

三、代码解析

1、菜单

菜单的配置有两种方式，一种是直接在前端配置好，一种是通过http接口访问后台获取。

首先要修改/src/store/index.js中permission配置

// default router permission control前端直接配置
 import permission from './modules/permission'
// dynamic router permission control (Experimental)动态配置
// import permission from './modules/async-router'

前端配置的配置文件在/src/config/router.config.js

// dashboard
      {
        path: '/dashboard',
        name: 'dashboard',
        redirect: '/dashboard/workplace',
        component: RouteView,
        meta: { title: 'menu.dashboard', keepAlive: true, icon: bxAnaalyse, permission: ['dashboard'] },
        children: [
          {
            path: '/dashboard/analysis/:pageNo([1-9]\\d*)?',
            name: 'Analysis',
            component: () => import('@/views/dashboard/Analysis'),
            meta: { title: 'menu.dashboard.analysis', keepAlive: false, permission: ['dashboard'] }
          },
          // 外部链接
          {
            path: 'https://www.baidu.com/',
            name: 'Monitor',
            meta: { title: 'menu.dashboard.monitor', target: '_blank' }
          },
          {
            path: '/dashboard/workplace',
            name: 'Workplace',
            component: () => import('@/views/dashboard/Workplace'),
            meta: { title: 'menu.dashboard.workplace', keepAlive: true, permission: ['dashboard'] }
          }
        ]
      },

如果要动态配置，首先要修改/src/store/index.js中permission配置

// default router permission control前端直接配置
// import permission from './modules/permission'
// dynamic router permission control (Experimental)动态配置
import permission from './modules/async-router'

然后配置后台接口/mock/services/user.js

Mock.mock(/\/api\/user\/nav/, 'get', userNav)

/** * 使用 用户登录的 token 获取用户有权限的菜单 * 返回结构必须按照这个结构体形式处理，或根据 * /src/router/generator-routers.js  文件的菜单结构处理函数对应即可 * @param {*} options * @returns */const userNav = options => {
  const nav = [
    // 系统管理    {
      name: 'system',
      parentId: 0,
      id: 100,
      meta: {
        icon: 'dashboard',
        title: '系统管理',
        show: true      },
      component: 'RouteView'    },
    {
      name: 'user',
      parentId: 100,
      id: 101,
      meta: {
        title: '用户管理',
        show: true      },
      component: 'UserList'    },
    {
      name: 'post',
      parentId: 100,
      id: 102,
      meta: {
        title: '岗位管理',
        show: true      },
      component: 'PostList'    },
    {
      name: 'staff',
      parentId: 100,
      id: 103,
      meta: {
        title: '员工管理',
        show: true      },
      component: 'StaffList'    },
    {
      name: 'flow',
      parentId: 100,
      id: 104,
      meta: {
        title: '流程管理',
        show: true      },
      component: 'FlowList'    },
    {
      name: 'createflow',
      parentId: 100,
      id: 105,
      meta: {
        title: '新建流程',
        show: true      },
      component: 'CreateFlow'    },

    //生产管理    {
      name: 'produce',
      parentId: 0,
      id: 200,
      meta: {
        icon: 'form',
        title: '生产管理',
        show: true      },
      component: 'RouteView'    },
    {
      name: 'workOrder',
      parentId: 200,
      id: 201,
      meta: {
        title: '工单管理',
        show: true      },
      component: 'WorkOrderList'    },
    {
      name: 'assignTasks',
      parentId: 200,
      id: 202,
      meta: {
        title: '分配任务',
        show: false      },
      component: 'AssignTasks'    },

    {
      name: 'search',
      parentId: 0,
      id: 300,
      meta: {
        icon: 'table',
        title: '查询管理',
        show: true      },
      component: 'RouteView'    },
    {
      name: 'orderProgress',
      parentId: 300,
      id: 301,
      meta: {
        title: '工单进度',
        show: true      },
      component: 'WorkOrderProcessList'    },
    {
      name: 'taskBoard',
      parentId: 300,
      id: 302,
      meta: {
        title: '任务看板',
        show: true      },
      component: 'TaskBoard'    },
    {
      name: 'exceptionHandling',
      parentId: 300,
      id: 303,
      meta: {
        title: '异常处理',
        show: true      },
      component: 'ExceptionHandling'    },
    {
      name: 'orderProgressDetail',
      parentId: 300,
      id: 304,
      meta: {
        title: '工单进度',
        show: false      },
      component: 'WorkOrderProcessDetail'    
    },
    // result    
    {
      name: 'result',
      parentId: 0,
      id: 10021,
      meta: {
        title: '结果页',
        icon: 'check-circle-o',
        show: false      },
      redirect: '/result/success',
      component: 'PageView'    },
    {
      name: 'success',
      parentId: 10021,
      id: 10022,
      meta: {
        title: '成功',
        hiddenHeaderContent: true,
        show: true      },
      component: 'ResultSuccess'    },
    {
      name: 'fail',
      parentId: 10021,
      id: 10023,
      meta: {
        title: '失败',
        hiddenHeaderContent: true,
        show: true      },
      component: 'ResultFail'    },
    // Exception    
    {
      name: 'exception',
      parentId: 0,
      id: 10024,
      meta: {
        title: '异常页',
        icon: 'warning',
        show: false      },
      redirect: '/exception/403',
      component: 'RouteView'    },
    {
      name: '403',
      parentId: 10024,
      id: 10025,
      meta: {
        title: '403',
        show: true      },
      component: 'Exception403'    },
    {
      name: '404',
      parentId: 10024,
      id: 10026,
      meta: {
        title: '404',
        show: true      },
      component: 'Exception404'    },
    {
      name: '500',
      parentId: 10024,
      id: 10027,
      meta: {
        title: '500',
        show: true      },
      component: 'Exception500'    },
    // account    
    {
      name: 'account',
      parentId: 0,
      id: 10028,
      meta: {
        title: '个人页',
        icon: 'user',
        show: false      },
      redirect: '/account/center',
      component: 'RouteView'    },
    // 特殊三级菜单    
    {
      name: 'settings',
      parentId: 10028,
      id: 10030,
      meta: {
        title: '个人设置',
        hideHeader: true,
        hideChildren: true,
        show: true      },
      redirect: '/account/settings/basic',
      component: 'AccountSettings'    },
    {
      name: 'BasicSettings',
      path: '/account/settings/basic',
      parentId: 10030,
      id: 10031,
      meta: {
        title: '个人信息',
        show: false      },
      component: 'BasicSetting'    },
    {
      name: 'ChangePassword',
      path: '/account/settings/changePsd',
      parentId: 10030,
      id: 10036,
      meta: {
        title: '修改密码',
        show: false      },
      component: 'ChangePassword'    },
  ]

  const json = builder(nav)
  console.log('json', json)
  return json}

2、调试模式与接口模拟

根目录下的vue.config.js，此处要注意target参数，此参数是访问后台的url配置，那我们本地后台的地址就是http://127.0.0.1:9006。

devServer: {
    // development server port 8000
    port: 8000,
    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:9006',
        ws: false,
        changeOrigin: true,
        pathRewrite:{
          '^/api/':''
        }
      }
    },
    sockHost: 'localhost:8080', // localhost[端口]、IP[端口]、域名
    disableHostCheck: true
  },

如果是接口模拟的话，我们要来看一下根目录下的/src/mock文件夹，这里都是没有后台的情况下的模拟接口。

基于Ant Design Pro开发管理系统的前端部分_AntDesignProVue_06

我们来看下manage.js中的

import Mock from 'mockjs2'
import { builder, getQueryParameters } from '../util'

const teams = () => {
  return builder([{
    id: 1,
    name: '科学搬砖组',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
  },
  {
    id: 2,
    name: '程序员日常',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png'
  },
  {
    id: 1,
    name: '设计天团',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png'
  },
  {
    id: 1,
    name: '中二少女团',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png'
  },
  {
    id: 1,
    name: '骗你学计算机',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png'
  }
  ])
}

Mock.mock(/\/workplace\/teams/, 'get', teams)

我们再来看下http请求怎么调用，在/src/views/account/center/index.vue中请求代码：

getTeams () {
      this.$http.get('/workplace/teams').then(res => {
        this.teams = res.result
        this.teamSpinning = false
      })
    },

展示代码：

<div class="account-center-team">
            <div class="teamTitle">团队</div>
            <a-spin :spinning="teamSpinning">
              <div class="members">
                <a-row>
                  <a-col :span="12" v-for="(item, index) in teams" :key="index">
                    <a>
                      <a-avatar size="small" :src="item.avatar"/>
                      <span class="member">{{ item.name }}</span>
                    </a>
                  </a-col>
                </a-row>
              </div>
            </a-spin>
          </div>

界面效果：

基于Ant Design Pro开发管理系统的前端部分_系统管理_07

四、总结

完成以上基本配置以后，我们就可以开发我们的系统了，这个框架为我们省去了很多UI组件的麻烦，使我们只需要致力于业务逻辑。

对于纯前端来说，不依赖后端接口，可以自行编写mock接口测试。对于后端开发来说，也简化了前端开发，只需要致力于编写界面相关逻辑就可以。

标签：name,title,Pro,component,Ant,meta,Design,true,id
From： https://blog.51cto.com/xuepiaoqiyue/5712939