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

Posted 2022-09-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于Ant Design Pro开发管理系统的前端部分相关的知识，希望对你有一定的参考价值。

一、概述

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

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

基础版的Ant Design Pro是免费的

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

基于Ant

Ant Design Pro官网

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

基于Ant

二、运行环境

源码下载地址

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

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

npm run

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

基于Ant

三、代码解析

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

我们来看下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

四、总结

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

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

以上是关于基于Ant Design Pro开发管理系统的前端部分的主要内容，如果未能解决你的问题，请参考以下文章

Vue 开发实战实战篇 # 26：Ant Design Pro介绍

Ant Design Pro安装学习

ant design pro advanced Mock 和联调

011-ant design pro advanced Mock 和联调

前端初学者的Ant Design Pro V6总结（上）

Ant Design Pro —— 开箱即用的中后台解决方案 | 软件推介