vue-element-admin 快速构建后台系统

1、vue-element-admin

vue-element-admin是基于element-ui 的一套后台管理系统集成方案。

功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能

GitHub地址：https://github.com/PanJiaChen/vue-element-admin

项目在线预览：https://panjiachen.gitee.io/vue-element-admin

2、vue-admin-template

2.1、简介

vue-admin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

GitHub地址：https://github.com/PanJiaChen/vue-admin-template

建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

2.2、目录结构

|-dist 生产环境打包生成的打包项目|-mock 使用mockjs来mock接口|-public 包含会被自动打包到项目根路径的文件夹|-index.html 唯一的页面|-src|-api 包含接口请求函数模块|-table.js表格列表mock数据接口的请求函数|-user.js用户登陆相关mock数据接口的请求函数|-assets 组件中需要使用的公用资源|-404_images 404页面的图片|-components 非路由组件|-SvgIcon svg图标组件|-Breadcrumb 面包屑组件(头部水平方向的层级组件)|-Hamburger 用来点击切换左侧菜单导航的图标组件|-icons|-svg 包含一些svg图片文件|-index.js 全局注册SvgIcon组件,加载所有svg图片并暴露所有svg文件名的数组|-layout|-components 组成整体布局的一些子组件|-mixin 组件中可复用的代码|-index.vue 后台管理的整体界面布局组件|-router|-index.js 路由器|-store|-modules|-app.js 管理应用相关数据|-settings.js 管理设置相关数据|-user.js 管理后台登陆用户相关数据|-getters.js 提供子模块相关数据的getters计算属性|-index.js vuex的store|-styles|-xxx.scss 项目组件需要使用的一些样式(使用scss)|-utils 一些工具函数|-auth.js 操作登陆用户的token cookie|-get-page-title.js 得到要显示的网页title|-request.js axios二次封装的模块|-validate.js 检验相关工具函数|-index.js 日期和请求参数处理相关工具函数|-views 路由组件文件夹|-dashboard 首页|-login 登陆|-App.vue 应用根组件|-main.js 入口js|-permission.js 使用全局守卫实现路由权限控制的模块|-settings.js 包含应用设置信息的模块|-.env.development 指定了开发环境的代理服务器前缀路径|-.env.production 指定了生产环境的代理服务器前缀路径|-.eslintignore eslint的忽略配置|-.eslintrc.js eslint的检查配置|-.gitignore git的忽略配置|-.npmrc 指定npm的淘宝镜像和sass的下载地址|-babel.config.js babel的配置|-jsconfig.json 用于vscode引入路径提示的配置|-package.json 当前项目包信息|-package-lock.json 当前项目依赖的第三方包的精确信息|-vue.config.js webpack相关配置(如: 代理服务器)

3、二次开发

3.1、项目启动

这里使用vue-admin-template进行二次开发。首先将源码克隆到本地，或者直接下载压缩包解压到本地。

创建一个新文件夹（oa-system-front），将源码文件放至其中，用vscode打开文件夹，将oa-system-front加至工作区

将其保存至打开的文件下！！！

事先下载好Node.js，对源码文件单击鼠标右键，在终端打开，使用npm install命令下载相关依赖

使用npm run dev命令启动项目

3.2、修改相关配置

3.2.1、设置反向代理（将请求转发至我们的后端）

修改方式一：进入.env.development（不能解决跨域问题）

修改方式二：在vue.config.js中修改配置

注释掉mock接口配置

配置代理转发请求到目标接口

// before: require('./mock/mock-server.js')proxy: {'/dev-api': { // 匹配所有以 '/dev-api'开头的请求路径target: 'http://localhost:8800',//类似于Nginx反向代理changeOrigin: true, // 支持跨域pathRewrite: { // 重写路径: 去掉路径中开头的'/dev-api''^/dev-api': ''}}}

3.2.2、编写后端登录接口

查看登录响应的数据

可以看到发了两个请求！！

其中login和info请求的响应数据如下

编写对应的接口

/** * 返回结果状态码枚举 */@Getterpublic enum ResultCodeEnum {SUCCESS(200,"成功"),FAIL(201, "失败");private Integer code;private String message;private ResultCodeEnum(Integer code, String message) {this.code = code;this.message = message;}}

/** * 全局返回同一结果封装类 */@Datapublic class Result {private Integer code;private String message;private T data;private Result(){}public static  Result build(T data){Result result=new Result();if(data!=null){result.setData(data);}return result;}public static  Result build(T data,Integer code,String msg){Result build = build(data);build.setCode(code);build.setMessage(msg);return build;}public static  Result build(T data,ResultCodeEnum codeEnum){Result build = build(data);build.setMessage(codeEnum.getMessage());build.setCode(codeEnum.getCode());return build;}//成功public static  Result success(){return build(null,ResultCodeEnum.SUCCESS);}public static  Result success(T data){return build(data,ResultCodeEnum.SUCCESS);}//失败public static  Result fail(){return build(null,ResultCodeEnum.FAIL);}public static  Result fail(T data){return build(data,ResultCodeEnum.FAIL);}public Result message(String msg){this.setMessage(msg);return this;}public Result code(Integer code){this.setCode(code);return this;}}

接口如下：

@Api(tags = "后台登录管理")@RestController@RequestMapping("/admin/system/index")public class IndexController {@ApiOperation("登录接口")@PostMapping("/login")public Result login(){Map map=new HashMap();map.put("token","admin-token");return Result.success(map);}@GetMapping("info")public Result info() {Map map = new HashMap();map.put("roles","[admin]");map.put("name","admin");map.put("avatar","https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg");return Result.success(map);}@PostMapping("logout")public Result logout(){return Result.success();}}