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();    }}

    3.2.3、修改请求路径和返回状态码拦截

    修改状态码拦截器

    从这可以看到，只有返回状态码为20000才能登录进去，但我们的统一结果封装类中200为成功，所以我们可以修改前端状态码拦截。

    在src/utils/request.js中进行修改

    此时我修改的状态码为200，即状态码为200时即可登录进系统！！

    修改登录请求路径

    上面我们配置的反向代理只解决了url前面的部分，但后面的还没解决，此时需要修改src/api/user.js文件

    将url修改为我们后端接口就行，修改后如下：

    启动后端项目和前端，登录试试！！

    此时登录成功！！！

    3.3、页面修改

    3.3.1、设置页面路由

    在src/router/index.js中重新定义constantRoutes

    3.3.2、在api文件夹创建js文件（此处为sysRole.js），定义接口信息

    3.3.3、在views文件夹中创建页面，在页面引入定义接口js文件，调用接口通过axios实现功能

    参照上面引入的页面创建相应的文件夹及页面（后缀名为vue）

    在list页面中初始化页面

    此时就可以自己构建我们的系统啦啦啦~~~~~~~~~~