# acp-admin-cloud-web

**Repository Path**: zhangbinhub/acp-admin-cloud-web

## Basic Information

- **Project Name**: acp-admin-cloud-web
- **Description**: 使用vue全家桶(Vue+Vue-router+Vuex+axios)、ElementUI 样式库构建的前端项目。该项目是前后端分离架构中的“前端部分”
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 20
- **Forks**: 5
- **Created**: 2021-08-27
- **Last Updated**: 2025-06-06

## Categories & Tags

**Categories**: backend

**Tags**: vue3, element-plus

## README

# acp-admin

###### v6.8.0 [版本更新日志](doc/version_history.md)

## 浏览器兼容性

> 由于 js-base64 3.0 及以上版本不再支持 IE，因此从 4.2.0 开始不再支持 IE

支持的浏览器：

- Chrome latest（推荐，完美）
- Firefox latest（完全支持）
- Edge（完全支持）

## 简介

该版本是 acp-admin 的 cloud 前端，单机版本请查看[这里](https://gitee.com/zhangbinhub/acp-admin-standalone-web)

使用 vue 全家桶(Vue+Vue-router+Vuex+axios)、ElementUI 样式库构建的前端项目。该项目是前后端分离架构中的“前端部分”
。[后端工程](https://gitee.com/zhangbinhub/acp-admin-cloud)

## 相关组件官方文档

- [Vue 3](https://v3.cn.vuejs.org/)
- [Element-plus](https://element-plus.gitee.io/#/zh-CN)
- [echarts](https://www.echartsjs.com/index.html)
- [cropperJs](https://gitee.com/fengyuanchen/cropperjs)
- [tinymce 7](https://www.tiny.cloud/docs/tinymce/latest/)

## 技术栈

- vite 3
- nodejs
- vue3
- vuex
- vue-router
- axios
- echarts
- cropperJs
- mockjs
- js-sha256
- js-base64
- vue-json-editor
- Element-plus
- tinymce
- camunda-bpmn

#### 说明

- 前后端交互 HttpStatus Code 说明

| HttpStatus | 描述          |
|------------|-------------|
| 200        | 请求成功        |
| 201        | 资源创建成功      |
| 400        | 业务错误        |
| 401        | token（登录）失效 |
| 403        | 权限不足        |
| 404        | 找不到资源       |
| 500        | 系统异常        |

## 部署运行

该工程默认运行于 nodejs 中，也可根据实际需要运行在其他 web 容器

## 一、环境搭建

##### （一）安装 [node.js](http://nodejs.cn)，并验证

```bash
node -v
```

##### （二）设置淘宝 npm 镜像

```bash
npm config set registry https://registry.npm.taobao.org
```

##### （三）安装升级插件

```bash
npm install -g npm-check-updates
```

## 二、依赖插件

##### （一）安装

```bash
npm install
```

##### （二）更新

```bash
ncu -u
npm install
```

## 三、开发

##### （一）国际化

- 语言包路径：src/lang
- 在语言包路径下新增或修改语言属性
- 在 src/lang/index.js 中加载新的语言包

##### （二）mock

- 如果要使用 mock，在 src/main.js 中加入 import './mock' 即可
- src/mock 中添加或修改 mock 信息
- src/mock/index.js 中引入，并配置相应的 url 拦截策略

##### （三）配置文件

1、全局工程配置文件

[vite.config.mjs](vite.config.mjs)

[配置参考](https://vitejs.dev/config)

2、项目配置文件

- 持久化组件：vuex
- 路径：src/store
- 入口：[src/store/index.js](src/store/index.js)
- 系统信息配置文件：[src/store/config/appInfo.js](src/store/config/appInfo.js)

3、分环境配置文件

- 路径：environment

| 环境      | 配置文件名                                            |
|---------|--------------------------------------------------|
| 开发环境    | [.env.development](environment/.env.development) |
| test 环境 | [.env.test](environment/.env.test)               |
| prod 环境 | [.env.prod](environment/.env.prod)               |

##### （四）静态资源

- 路径：src/assets

##### （五）Router

- 组件：vue-router
- 路径：src/router
- 入口：[src/router/index.js](src/router/index.js)
- 路由配置及说明：[src/router/routers.js](src/router/routers.js)

##### （六）http 请求

- 组件：axios、vue-axios
- 入口及全局配置：[src/plugins/plugin-axios.js](src/plugins/axios/plugin-axios.js)
- 请求 api
- 路径：src/api
- 入口：[src/api/index.js](src/api/index.js)
- api 编写：新增或修改文件，在[src/api/ApiLists.js](src/api/ApiLists.js)中引入并配置

##### （七）页面布局

- 独立页面路径：src/components/pages
- 布局框架：src/components/layout
- 框架内页面：src/components/views
- 测试页面：src/components/test
- src/components 下其他路径存放自定义组件

## 四、启动和部署

##### （一）本地启动开发环境

- 工程根目录下运行

```
npm run start
```

##### （二）编译打包

- 工程根目录下运行

  - test 环境

  ```
  npm run build-test
  ```

  - prod 环境

  ```
  npm run build-prod
  ```

- 执行成功后工程根目录下会出现 dist 文件夹，将 dist 文件夹中的所有文件复制到 nginx 的 html 下即可
- 如果部署在 nginx 里 html 的根目录，访问 url 为 http://nginxHost:port
- 如果部署在 nginx 里 html 的子目录（如 platform/admin），访问 url 为 http://nginxHost:port/platform/admin

##### （三）nginx 配置

假如工程部署在 nginx 中，需要修改 nginx.conf，增加后端接口的反向代理

- 代理后端 gateway

```
location ~ ^.*/v1/api/(.*)$ {
  set $delimeter "";
  if ( $args != "" ) {
    set $delimeter "?";
  }
  proxy_pass http://host:port/$1${delimeter}$args;
  proxy_set_header host              $http_host;
  proxy_set_header x-real-ip         $remote_addr;
  proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
  #proxy_set_header X-Forwarded-Proto "https";
  proxy_read_timeout 3600s;
}
```

## 五、界面展示

- 登录
  ![images](doc/images/pages/login.png)
- 首页
  ![images](doc/images/pages/index.png)
- 个人信息
  ![images](doc/images/pages/userinfo.png)
- 头像裁剪
  ![images](doc/images/pages/avatar.png)
- 应用配置
  ![images](doc/images/pages/appconfig.png)
  ![images](doc/images/pages/appedit.png)
  ![images](doc/images/pages/appupdate.png)
- 菜单配置
  ![images](doc/images/pages/menu.png)
- 模块功能配置
  ![images](doc/images/pages/module.png)
- 机构配置
  ![images](doc/images/pages/org.png)
- 角色配置
  ![images](doc/images/pages/role.png)
- 运行参数配置
  ![images](doc/images/pages/runtime.png)
  ![images](doc/images/pages/runtimeedit.png)
- 用户配置
  ![images](doc/images/pages/userlist.png)
- 用户编辑
  ![images](doc/images/pages/useredit.png)
- 404 页面
  ![images](doc/images/pages/404.png)
- 500 页面
  ![images](doc/images/pages/500.png)
- 后台日志文件查询、下载
  ![images](doc/images/pages/logfile.png)
- 路由配置
  ![images](doc/images/pages/route.png)
  ![images](doc/images/pages/routeEdit.png)
  ![images](doc/images/pages/routeRefresh.png)
- 路由日志
  ![images](doc/images/pages/routeLog.png)
- 操作日志
  ![images](doc/images/pages/operateLog.png)
- 登录日志
  ![images](doc/images/pages/loginLog.png)
- demo
  - 文件上传
    ![images](doc/images/pages/upload.png)

### Customize configuration

See [Configuration Reference](https://vitejs.dev/config).