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

冷不防 2024-03-25 13:38 70阅读 0赞

## **1、vue-element-admin**  ##

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

**功能：**[https://panjiachen.github.io/vue-element-admin-site/zh/guide/\#][https_panjiachen.github.io_vue-element-admin-site_zh_guide]功能

**GitHub地址：**[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]

**项目在线预览：**[https://panjiachen.gitee.io/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][https_github.com_PanJiaChen_vue-admin-template]

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

### 2.2、目录结构 ###

## 3、二次开发 ##

### 3.1、项目启动 ###

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

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

![6408499854b0f7953bcf4f11e2ce1497.png][]

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

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

![23f9fa9b133a364758dff3e9b7d29207.png][]

![a25905f8b6d6304ee4381abd6a3a1d8a.png][]

使用npm run dev命令启动项目

![38ff610244e460144801a1a76833f7df.png][]

![e0d72982172151fa641e851f65d2ff9e.png][]

### 3.2、修改相关配置 ###

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

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

![70c50b8000f1e09cdd66063fd725c38f.png][]

![4631e39a3871049b5b6d1ce221eaf496.png][]

修改方式二：在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、编写后端登录接口 ####

查看登录响应的数据

![4921a3497ffe52a67011a3a124017bab.png][]

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

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

![12b6ab16ba3bf42ae9e4ae8a1fe8b7d5.png][]

![56beea44bb05b032251e52e700c00906.png][]

编写对应的接口

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

/**
     * 全局返回同一结果封装类
     */
    @Data
    public class Result<T> {
    
        private Integer code;
        private String message;
        private T data;
    
    
        private Result(){}
    
        public static <T> Result<T> build(T data){
            Result<T> result=new Result();
            if(data!=null){
                result.setData(data);
            }
            return result;
        }
    
        public static <T> Result<T> build(T data,Integer code,String msg){
            Result<T> build = build(data);
            build.setCode(code);
            build.setMessage(msg);
            return build;
        }
    
        public static <T> Result<T> build(T data,ResultCodeEnum codeEnum){
            Result<T> build = build(data);
            build.setMessage(codeEnum.getMessage());
            build.setCode(codeEnum.getCode());
            return build;
        }
    
        //成功
        public static <T> Result<T> success(){
            return build(null,ResultCodeEnum.SUCCESS);
        }
    
        public static <T> Result<T> success(T data){
            return build(data,ResultCodeEnum.SUCCESS);
        }
    
        //失败
        public static <T> Result<T> fail(){
            return build(null,ResultCodeEnum.FAIL);
        }
        public static <T> Result<T> fail(T data){
            return build(data,ResultCodeEnum.FAIL);
        }
    
        public Result<T> message(String msg){
            this.setMessage(msg);
            return this;
        }
    
        public Result<T> 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<String,Object> map=new HashMap<>();
            map.put("token","admin-token");
            return Result.success(map);
        }
    
        @GetMapping("info")
        public Result info() {
            Map<String, Object> 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、修改请求路径和返回状态码拦截 ####

**修改状态码拦截器**

![012244907b360093de988523d0bbaaa9.png][]

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

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

![a168a060cb802ce955a6e6dd50c200b2.png][]

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

**修改登录请求路径**

![46f8b867806cd4abf7ddb864ed5174dd.png][]

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

![5d86b8a12ccc24cd0e0aa2e4514fc5fc.png][]

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

![dd75395ea05674c33a77b5c32a3c5f92.png][]

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

![9ebb760734d311b2ed8bf1ee94b57bfd.png][]

![04323d64e46eba5f6fa0393a9dfa6afa.png][]

![16c1c4c9393c694b17fa781fef42578f.png][]

此时登录成功！！！

### 3.3、页面修改 ###

3.3.1、设置页面路由

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

![2aca81725e746cf9c9e72ebc5d6ac654.png][]

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

![bb483972da2376ff2e71e00ef2e9976f.png][]

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

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

![4a1d9977f48b544995ca8150de6ddf65.png][]

在list页面中初始化页面

![7b2b347b3be8c06d39cecb7d5ff54d4e.png][]

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

[https_panjiachen.github.io_vue-element-admin-site_zh_guide]: https://panjiachen.github.io/vue-element-admin-site/zh/guide/#
[https_github.com_PanJiaChen_vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[https_panjiachen.gitee.io_vue-element-admin]: https://panjiachen.gitee.io/vue-element-admin/#/login?redirect=%2Fdashboard
[https_github.com_PanJiaChen_vue-admin-template]: https://github.com/PanJiaChen/vue-admin-template
[6408499854b0f7953bcf4f11e2ce1497.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ae691934b99649ed86c5e98f34e685da.png
[23f9fa9b133a364758dff3e9b7d29207.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/aa93c71a96c249f196c41a5a1f0d0c14.png
[a25905f8b6d6304ee4381abd6a3a1d8a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d78cfca8107f474d9014ad2f6393a7ad.png
[38ff610244e460144801a1a76833f7df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/481e8439081b4e2b887ae061a094fad5.png
[e0d72982172151fa641e851f65d2ff9e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/4ffaea4f3fdb4ed68ec50e989f2755d9.png
[70c50b8000f1e09cdd66063fd725c38f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ea2085dbe4b04d2f89c76ac8d437beaf.png
[4631e39a3871049b5b6d1ce221eaf496.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b44b8a22fd334f60894b21df61401441.png
[4921a3497ffe52a67011a3a124017bab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/57217394cd474473983d2a230b9fed2a.png
[12b6ab16ba3bf42ae9e4ae8a1fe8b7d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d30d106bf3684378b147a545dd7ef40a.png
[56beea44bb05b032251e52e700c00906.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/17024423925e49a0921d822bb86b6906.png
[012244907b360093de988523d0bbaaa9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/bb0ac4f296604bc88f81fb004016d4f1.png
[a168a060cb802ce955a6e6dd50c200b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3ed1c11e6a4b4e158196056db2dc0bf4.png
[46f8b867806cd4abf7ddb864ed5174dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/fd7472f85d694f71b96f0d74921aa220.png
[5d86b8a12ccc24cd0e0aa2e4514fc5fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/23607e2721f2479f862b5222dfb80e81.png
[dd75395ea05674c33a77b5c32a3c5f92.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/155244074f534560926ffceb60a47812.png
[9ebb760734d311b2ed8bf1ee94b57bfd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/77ff1a3b7cb5401ebcf2abe6917e715b.png
[04323d64e46eba5f6fa0393a9dfa6afa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f86d32800d7f491c9ac29d49217dd659.png
[16c1c4c9393c694b17fa781fef42578f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f32dc87ba09445f087bc188470985c8d.png
[2aca81725e746cf9c9e72ebc5d6ac654.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c422976420e34af9abe36af569b643e1.png
[bb483972da2376ff2e71e00ef2e9976f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3395590dd22243599b017182ddbe2eb6.png
[4a1d9977f48b544995ca8150de6ddf65.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c514909d567944588f0b2143d12fdcc3.png
[7b2b347b3be8c06d39cecb7d5ff54d4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/8d93ad725fd44582b5b1811a1bdd9786.png