您现在的位置是：首页 > 技术教程正文

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

admin 阅读： 2024-03-26

后台-插件-广告管理-内容页头部广告（手机）

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请求的响应数据如下

编写对应的接口

/**
* 返回结果状态码枚举
*/
@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 {
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();
}
}