# avue_pc_base

**Repository Path**: ioolm/avue_pc_base

## Basic Information

- **Project Name**: avue_pc_base
- **Description**: avue+element
- **Primary Language**: JavaScript
- **License**: Unlicense
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-03
- **Last Updated**: 2022-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 前端目录结构
````
seefa-ui  -- UI工程
├── public -- 静态资源
├    └── cdn -- 伪CDN
├    └── img -- 图片资源
├    └── svg -- SVG资源
├    └── util -- 网上下载的工具
├    └── favicon.ico -- 网站图标
├    └── index.html -- 网站首页，也是唯一的一张页面
├── src -- 源码目录 
├    └── api -- 和后端交互的API相关
├    ├── components -- 自己封装的组件
├    ├── config -- 工程配置
├    ├── const -- 常量
├    ├── docker -- docker部署相关
├    ├── filters -- 全局过滤器
├    └── mixins -- VUE组件混入
├    └── page -- 页面组件
├    └── route -- VUE-Router相关
├         └── page -- 页面路由
├         └── views -- 业务路由
├         └── avue-router.js --自定义路由处理，包括路由拦截，动态路由等
├         └── axios.js --axios增强
├         └── route.js --路由配置入口
├    └── store -- VUEX相关
├    └── styles -- 样式管理
├    └── util -- 工具包
├    └── views -- 业务代码
├    └── App.vue -- 根组件
├    └── error.js -- 自定义错误日志处理
├    └── main.js -- 入口js
├    └── permission.js -- 权限判断，导航守卫
├── .browserslistrc -- barbel兼容配置
├── .editorconfig -- 开发组统一环境配置
├── .editorconfig -- ESLint配置
├── .gitignore -- git忽略列表
├── .postcssrc.js -- CSS预处理配置
├── babel.config.js -- barbel配置入口
├── package.json -- 依赖管理
├── vue.config.js -- vue cli3的webpack配置
````
## 技术栈

vue（2.6.10）+ ElementUI(2.15.6)

## 启动前端
````

# 更改npm 镜像源
npm config set registry https://registry.npm.taobao.org

# 安装依赖
npm install

# 启动
npm run dev
````
## 前端文档及其使用说明
* pigx-ui 前端基于 element、avue 混开完成，同时兼容 element、avue 的功能.
* 推荐复杂表单直接使用 element 开发, avue 在复杂界面配置较为复杂且渲染速度较慢
* element-ui 文档： [element.eleme.cn](https://element.eleme.cn/#/zh-CN/component/installation)
* avue 文档： [avue 2.X](https://avuejs.com/doc/installation)
## 前端字典功能使用
### 新增字典及其字典项目
![Image text](http://pigx.vip/20191009084802_XNX0HZ_Screenshot.jpeg)
![Image text](http://pigx.vip/20191009084829_UN25Ju_Screenshot.jpeg)
![Image text](http://pigx.vip/20191009085036_xsHdv1_Screenshot.jpeg)
### 前端下拉框、单多选框
[Avue 网络字典使用](https://avuejs.com/doc/form/form-dic)
### 效果
![Image text](http://pigx.vip/20191009085619_ypUo1a_Screenshot.jpeg)
* crud 字段定义若类型为 select 、 checkbox、radio  
````
dicUrl: '/admin/dict/type/对应后台字典类型',
````
* 上图展示实例
````
{
    label: '类型',
    prop: 'type',
    type: 'select',
    dicUrl: '/admin/dict/type/log_type',
}
````
### 特别说明
后台返回的字段类型 必须为 String ,不然前端没法处理 比如 0 , 1
## 按钮权限控制
### seefa如何控制菜单权限控制
在后台菜单管理中给指定菜单添加 按钮节点 需要指定 权限标志 例如： sys_user_add
### 前端控制
前端主要使用vuex保存用户的权限信息，然后通过v-if 判断是否有权限，如果有权限就渲染这个dom元素。 我们以 用户管理页面来讲解
````
//按钮v-if使用
<el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="sys_user_upd" size="small" type="success" @click="handleUpdate(scope.row)">编辑
          </el-button>
          <el-button v-if="sys_user_del" size="small" type="danger" @click="deletes(scope.row)">删除
          </el-button>
        </template>
  </el-table-column>
  
  // 变量初始化
  created() {
    this.getList();
    this.sys_user_add = this.permissions["sys_user_add"];
    this.sys_user_upd = this.permissions["sys_user_upd"];
    this.sys_user_del = this.permissions["sys_user_del"];
  },
  
  // 从vuex 获取保存的permissions
  computed: {
    ...mapGetters(["permissions"])
  }
  
  //permissions获取
  getUserInfo(state.token).then(response => {
    commit('SET_PERMISSIONS', data.permissions)
})
````
### 后端权限控制
通过获取用户菜单列表，和请求的地址和请求方法对比判断有没有权限
````
public boolean hasPermission(HttpServletRequest request, Authentication authentication) {
        Object principal = authentication.getPrincipal();
        List<SimpleGrantedAuthority> grantedAuthorityList = (List<SimpleGrantedAuthority>) authentication.getAuthorities();
        boolean hasPermission = false;

        if (principal != null) {
            if (CollectionUtil.isEmpty(grantedAuthorityList)) {
                return hasPermission;
            }

            Set<MenuVo> urls = new HashSet<>();
            for (SimpleGrantedAuthority authority : grantedAuthorityList) {
                urls.addAll(menuService.findMenuByRole(authority.getAuthority()));
            }

            for (MenuVo menu : urls) {
                if (StringUtils.isNotEmpty(menu.getUrl()) && antPathMatcher.match(menu.getUrl(), request.getRequestURI())
                        && request.getMethod().equalsIgnoreCase(menu.getMethod())) {
                    hasPermission = true;
                    break;
                }
            }
        }
        return hasPermission;
    }
````