hcp-admin

环境依赖

# node版本 
Node >= 12

# vue版本
Vue 2.6.x

# aoixs
Axios 0.24.0

# UI版本
Element 2.15.X

开发

# 进入项目目录
cd manager-ui

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

# 启动服务
npm run dev

浏览器访问 http://localhost:80

发布

# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

内置功能

用户管理、机构管理、菜单管理、角色管理、字典项管理、定时任务

Nginx配置

server {
  listen       80;
  server_name  localhost;
  charset utf-8;
  location / {
      root   /home/manager/ui;
      try_files $uri $uri/ /index.html;
      index  index.html index.htm;
   }
   location /prod-api/ {
     proxy_set_header Host $http_host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header REMOTE-HOST $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_pass http://localhost:8080/;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   html;
    }
  }

目录结构

├── bin                        // 执行脚本
├── public                     // 公共文件
│   ├── favicon.ico            // favicon图标
│   └── index.html             // html模板
│   └── robots.txt             // 反爬虫
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── layout                 // 布局
│   ├── plugins                // 通用方法
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── utils                  // 全局公用方法
│   ├── views                  // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   ├── permission.js          // 权限管理
│   └── settings.js            // 系统配置
├── .editorconfig              // 编码格式
├── .env.development           // 开发环境配置
├── .env.production            // 生产环境配置
├── .env.staging               // 测试环境配置
├── .eslintignore              // 忽略语法检查
├── .eslintrc.js               // eslint 配置项
├── .gitignore                 // git 忽略项
├── babel.config.js            // babel.config.js
├── package.json               // package.json
└── vue.config.js              // vue.config.js

按钮权限使用

第一种
<el-button v-hasPermi="['menu_add']">存在权限字符串才能看到</el-button>
第二种
<el-button v-if="checkPermi(['menu_add'])">存在权限字符串才能看到</el-button>
<script>
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数

export default{
   methods: {
    checkPermi,
    checkRole
  }
}
</script>

tim文件夹是腾讯im工具类