Skip to content

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

License

Notifications You must be signed in to change notification settings

zhangbinhub/acp-admin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b5c9521 · Mar 12, 2022
Mar 9, 2022
May 14, 2021
Mar 9, 2022
Dec 14, 2018
Sep 30, 2019
Aug 27, 2021
Mar 12, 2022
Dec 8, 2020
Mar 9, 2022
Jan 9, 2022

Repository files navigation

acp-admin

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

浏览器兼容性

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

支持的浏览器:

  • Chrome latest(推荐,完美)
  • Firefox latest(完全支持)
  • Edge(完全支持)

简介

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

相关组件官方文档

技术栈

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

总体架构

Architecture diagram

说明

  • 前后端交互 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、项目配置文件

(四)静态资源
  • 路径:src/assets
(五)Router
(六)http 请求
(七)页面布局
  • 独立页面路径: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;
}

五、界面展示

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

Customize configuration

See Configuration Reference.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published