acp-admin

此工程已不再更新，由于某些不可抗因素，已转移至https://gitee.com/zhangbinhub/acp-admin

v5.1.3 版本更新日志

浏览器兼容性

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

支持的浏览器：

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

简介

使用vue全家桶(Vue+Vue-router+Vuex+axios)、ElementUI样式库构建的前端项目。该项目是前后端分离架构中的“前端部分” 。后端工程

相关组件官方文档

• Vue 3
• Vue CLI 5
• Element-plus
• echarts
• cropperJs

技术栈

• webpack 5
• nodejs
• vue3
• vue cli 5
• vuex
• vue-router
• axios
• echarts
• cropperJs
• mockjs
• js-sha256
• js-base64
• vue-json-editor
• Element-plus

总体架构

说明

• 前后端交互 HttpStatus Code 说明

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

部署运行

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

一、环境搭建

（一）安装 node.js，并验证

node -v

（二）设置淘宝 npm 镜像

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

（三）安装升级插件

npm install -g npm-check-updates

二、依赖插件

（一）安装

npm install

（二）更新

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、全局工程配置文件

vue.config.js

配置参考

2、项目配置文件

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

（四）静态资源

• 路径：src/assets

（五）Router

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

（六）http 请求

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

（七）页面布局

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

四、部署

（一）编译打包

• 工程根目录下运行

npm run build

• 执行成功后工程根目录下会出现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 X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_read_timeout 3600s;
}

五、界面展示

• 登录
• 首页
• 个人信息
• 头像裁剪
• 应用配置
• 菜单配置
• 模块功能配置
• 机构配置
• 角色配置
• 运行参数配置
• 用户配置
• 用户编辑
• 404页面
• 500页面
• 后台日志文件查询、下载
• 路由配置
• 路由日志
• 操作日志
• 登录日志
• demo
  • 文件上传

Customize configuration

See Configuration Reference.