vue-antd-admin测试平台开发(一)

一. vue-antd-admin简介

Vue Antd Admin是Ant Design Pro 的 Vue 实现版本, 是开箱即用的中后台前端/设计解决方案.
官网

二. git拉取vue-antd-admin

git clone https://gitee.com/iczer/vue-antd-admin.git
npm install
npm run serve

三. 项目结构

├── docs # 使用文档
├── public
│ └── favicon.png # favicon
│ └── index.html # 入口 HTML
├── src
│ ├── assets # 本地静态资源
│ ├── components # 内置通用组件
│ ├── config # 系统配置
│ ├── layouts # 通用布局
│ ├── mock # 本地 mock 数据
│ ├── pages # 页面组件和通用模板
│ ├── plugins # vue 插件
│ ├── router # 路由配置
│ ├── services # 数据服务模块
│ ├── store # vuex 状态管理配置
│ ├── theme # 主题相关
│ ├── utils # js 工具
│ ├── App.vue # 应用入口组件
│ ├── bootstrap.js # 应用启动引导js
│ └── main.js # 应用入口js
├── package.json # package.json
├── README.md # README.md
└── vue.config.js # vue 配置文件

四. 通用设置

在 src\config\default\setting.config.js 中, 我们可以设置项目的基本信息

// 此配置为系统默认设置，需修改的设置项，在src/config/config.js中添加修改项即可。也可直接在此文件中修改。
module.exports = {
  lang: 'CN',                           //语言，可选 CN(简体)、HK(繁体)、US(英语)，也可扩展其它语言
  theme: {                              //主题
    color: '#1890ff',                   //主题色
    mode: 'dark',                       //主题模式 可选 dark、 light 和 night
    success: '#52c41a',                 //成功色
    warning: '#faad14',                 //警告色
    error: '#f5222d',                   //错误色
  },
  layout: 'side',                       //导航布局，可选 side 和 head，分别为侧边导航和顶部导航
  fixedHeader: false,                   //固定头部状态栏，true:固定，false:不固定
  fixedSideBar: true,                   //固定侧边栏，true:固定，false:不固定
  fixedTabs: false,                      //固定页签头，true:固定，false:不固定
  pageWidth: 'fixed',                   //内容区域宽度，fixed:固定宽度，fluid:流式宽度
  weekMode: false,                      //色弱模式，true:开启，false:不开启
  multiPage: false,                     //多页签模式，true:开启，false:不开启
  hideSetting: false,                   //隐藏设置抽屉，true:隐藏，false:不隐藏
  systemName: 'Vue Antd Admin',         //系统名称
  copyright: '2018 ICZER 工作室出品',     //copyright
  asyncRoutes: false,                   //异步加载路由，true:开启，false:不开启
  showPageTitle: true,                  //是否显示页面标题(PageLayout 布局中的页面标题)，true:显示，false:不显示
  filterMenu: true,                    //根据权限过滤菜单，true:过滤，false:不过滤
  animate: {                            //动画设置
    disabled: false,                    //禁用动画，true:禁用，false:启用
    name: 'bounce',                     //动画效果，支持的动画效果可参考 ./animate.config.js
    direction: 'left'                   //动画方向，切换页面时动画的方向，参考 ./animate.config.js
  },
  footerLinks: [                        //页面底部链接，{link: '链接地址', name: '名称/显示文字', icon: '图标，支持 ant design vue 图标库'}
    {link: 'https://pro.ant.design', name: 'Pro!首页'},
    {link: 'https://github.com/iczer/vue-antd-admin', icon: 'github'},
    {link: 'https://ant.design', name: 'Ant Design'}
  ],
}

五. 登录打通后端

1、前端项目配置环境

.env.development新增DEV_URL

VUE_APP_API_DEV_URL=http://127.0.0.1:7777/

2、修改src/services/api.js文件

将src/services/api.js文件内的跨域代理打开, 把代理设置为http://localhost:7777, 同时,为了URL和文件的统一, 我把LOGIN的url改为了${BASE_URL}/auth/login

//跨域代理前缀
const API_PROXY_PREFIX='http://127.0.0.1:7777'
const BASE_URL = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_API_BASE_URL : API_PROXY_PREFIX

module.exports = {
  LOGIN: `${BASE_URL}/auth/login`,
  // ROUTES: `${BASE_URL}/auth/routes`
}

3、修改src/services/user.js文件

export async function login(name, password) {
  return request(LOGIN, METHOD.POST, {
    username: name,        //把参数的键值改成自己接口的
    password: password
  })
}

4、修改src/pages/login/Login.vue文件

后端登录接口返回code为0，表示登录成功；动态路由暂时没用到，getRoutesConfig().then()不会执行，故登录成功后通过 this.$router.push(’/dashboard/workplace’) 跳转至首页。

六. 效果展示