pig-ui使用记录（貌似是全网第一篇？）-基于Spring Cloud 2021、Spring Boot 2.6、OAuth2 的 RBAC权限管理系统前端

前言

1.我在使用时遇到的问题

看了 pig官方文档（个人感觉有点不够详细）感觉还是一脸懵逼，网上搜索相关的文章也基本没搜到怎么使用的，还是得自己研究，。。。。自己写一篇笔记记录一下基本使用

2.pig，pig-ui 相关介绍

• pig-ui源码
  pig-ui gitee地址
• pig-ui 介绍
  • 基于 Spring Cloud 2021 、Spring Boot 2.6、 OAuth2 的 RBAC 权限管理系统
  • 基于数据驱动视图的理念封装 element-ui，即使没有 vue 的使用经验也能快速上手
  • 提供对常见容器化支持 Docker、Kubernetes、Rancher2 支持
  • 提供 lambda 、stream api 、webflux 的生产实践

3.关于后端

• 后端是后端小伙伴用pig写的，pig与pig-ui配套使用，由于我负责的是前端的pig-ui，所以此篇文章主要还是记录前端pig-ui的使用，但是pig亮点主要还是后端的pig微服务，有兴趣的可以理解一下，后端pig地址：https://gitee.com/log4j/pig.git，使用前先运行后端
• 有机会再出一篇关于后端的

一. 项目的运行注意点

从gitee把代码clone下来之后安装依赖包，建议使用npm install安装，我第一次用cnpm install一直会报错，之后使用npm run dev运行即可（这里还未与后端对接，所以验证码还有登录是用不了的）

二. 对接后端与登录功能

1. 对接后端

后端也是用的pig
首先修改一下这个，这个是用于做跨域的
vue.config.js：

如果没配置vue.config.js的url或者后端出现问题，验证码这里是无法正常显示的且无法登录

下面这个是部署到服务器时的配置，目前可先不管

2.对接后端的oauth2登录功能

改成跟后端client对应的username和password

验证码显示没问题，这时候就可以登陆啦

登录成功后进来的页面

三.编辑侧边菜单栏和新增页面

1.编辑侧边栏

其实pig-ui已经有一个快捷编辑菜单栏的页面，在此对菜单栏增删改即可

重点！！！

新增菜单后，需要在权限管理>角色管理那里修改一下权限！！！不然菜单栏是不会显示出新增的菜单的



刷新一下页面，新增菜单成功显示

2.新增页面

在新增菜单栏时，路由要与文件目录对上

这样就能够把侧边栏对应上页面

四.更改表格配置

表格中的配置，表头，校验规则都是定义在一个文件里面，需要增删改要到对应的文件里面修改

以用户管理为例

未完持续…

后续还会再更新，点关注不迷路