Need help with abp-vue-admin-element-typescript?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

colinin
339 Stars 92 Forks 576 Commits 8 Opened issues

Description

这是基于vue-admin ui适用于abp Vnext的前端管理项目,vben-admin的前端ui地址:https://github.com/colinin/vue-vben-admin-abp-vnext

Services available

!
?

Need anything else?

Contributors list

# 158,130
HTML
C#
rabbitm...
eventbu...
370 commits

English | 简体中文

更新说明 更新说明

总览

这是一个基于 vue-typescript-admin-template 的Abp框架后台管理界面

前端文档

文档

截图

登录页

租户管理

组织机构

审计日志

安全日志

角色页

权限页

实时通知

实时通讯

声明类型

客户端管理

Api资源管理

聚合路由

相关项目

后端项目

abpframework/abp (abp vNext)

EasyAbp/Cap (EasyAbp)

Typescript 版本:

Armour/vue-typescript-admin-mock-server (mock server for this project)

Armour/vue-typescript-admin-docs (documentation source for this project)

Javascript 版本:

PanJiaChen/vue-admin-template (a vue2.0 minimal admin template)

PanJiaChen/vue-element-admin (full features supported vue admin)

PanJiaChen/electron-vue-admin (a vue electron admin project)

功能

- 登录 / 注销

  • 权限验证

    • 页面权限
    • 指令权限
    • 权限配置
    • 二步登录
  • 多环境发布

    • Dev / Stage / Prod
  • 全局功能

    • 国际化多语言
    • 动态换肤
    • 动态侧边栏(支持多级路由嵌套)
    • 动态面包屑
    • 快捷导航(支持右键操作)
    • 粘贴板
    • Svg 图标
    • 搜索
    • 全屏
    • 设置
    • Mock 数据 / Mock 服务器
    • 支持 PWA
  • 组件

    • 编辑器
      • 富文本编辑器
      • Markdown 编辑器
      • JSON 编辑器
    • 头像上传
    • 返回顶部
    • CountTo
    • 拖放区
    • 拖拽弹窗
    • 拖拽看板
    • 拖拽列表
    • 拖拽选择
    • ECharts 图表
    • Mixin
    • 拆分窗格
    • 黏性组件
  • 表格

    • 动态表格
    • 拖拽表格
    • 内联编辑表格
    • 复杂表格
  • Excel

    • 导出excel
    • 导入excel
    • 前端可视化excel
  • Zip

    • 导出zip
  • PDF

    • 下载 pdf
  • 控制台

  • 引导页

  • 综合实例

  • 错误日志

  • 错误页面

    • 401
    • 404

前序准备

你需要在本地安装 nodegit。本项目技术栈基于 typescriptvuevuexvue-routervue-cliaxioselement-ui,提前了解和学习这些知识会对使用本项目有很大的帮助。

目录结构

本项目已经为你生成了一个完整的开发框架,提供了涵盖后台开发的各类功能和坑位,下面是整个项目的目录结构。

├── mock                       # mock 服务器 与 模拟数据
├── public                     # 静态资源 (会被直接复制)
│   │── favicon.ico            # favicon图标
│   │── manifest.json          # PWA 配置文件
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源 (由 webpack 处理加载)
│   ├── components             # 全局组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局过滤函数
│   ├── icons                  # svg 图标
│   ├── lang                   # 国际化
│   ├── layout                 # 全局布局
│   ├── pwa                    # PWA service worker 相关的文件
│   ├── router                 # 路由
│   ├── store                  # 全局 vuex store
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局方法
│   ├── views                  # 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   ├── permission.ts          # 权限管理
│   ├── settings.ts            # 设置文件
│   └── shims.d.ts             # 模块注入
├── tests                      # 测试
├── .circleci/                 # 自动化 CI 配置
├── .browserslistrc            # browserslistrc 配置文件 (用于支持 Autoprefixer)
├── .editorconfig              # 编辑相关配置
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置
├── babel.config.js            # babel-loader 配置
├── cypress.json               # e2e 测试配置
├── jest.config.js             # jest 单元测试配置
├── package.json               # package.json 依赖
├── postcss.config.js          # postcss 配置
├── tsconfig.json              # typescript 配置
└── vue.config.js              # vue-cli 配置

如何设置以及启动项目

安装依赖

yarn install

更改配置文件

修改开发环境用于代理的服务器地址,以下提供了三个分别为IdentityServer、SignalT、ApiService地址 如果自己变更了端口,需要改成自己的地址

    proxy: {
      // change xxx-api/login => /mock-api/v1/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_IDENTITY_SERVER]: {
        // IdentityServer4服务器地址,用于身份认证
        target: 'http://localhost:44385',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_IDENTITY_SERVER]: ''
        }
      },
      [process.env.VUE_APP_SIGNALR_SERVER]: {
        // 消息服务SignalR地址,SignalR使用WebSocket通讯,因此需要单独一个代理地址
        target: 'ws://localhost:30000',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_SIGNALR_SERVER]: ''
        },
        logLevel: 'debug'
      },
      [process.env.VUE_APP_BASE_API]: {
        // 其他所有业务都是通过网关代理,直接填写网关地址即可
        target: 'http://localhost:30000',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        },
        logLevel: 'debug'
      }
    }

修改生产环境真实地址,如上

# Base api
# Remeber to change this to your production server address
# Here I used my mock server for this project
# VUE_APP_BASE_API = 'https://vue-typescript-admin-mock-server.armour.now.sh/mock-api/v1/'

所有第一级请求路径为 /api 的为业务服务

VUE_APP_BASE_API = '/api'

所有第一级请求路径为 /signalr-hubs 的请求为SignalR请求

VUE_APP_SIGNALR_SERVER = '/signalr-hubs'

所有第一级请求路径为 /connect 的为 IdentityServer4 的请求

VUE_APP_BASE_IDENTITY_SERVER = '/connect'

默认的租户名称

VUE_APP_TENANT_NAME = ''

客户端标识

VUE_APP_CLIENT_ID = 'vue-admin-element'

客户端密钥

VUE_APP_CLIENT_SECRET = '1q2w3e*'

初始化 appsettings.json

当前所有启动项目配置存储在 ./aspnet-core/configuration 目录,请按照给定的项目名称复制到自己的项目目录(仅在您第一次克隆此仓库是这样做)

确保配置文件与您的开发环境中间件的连接配置相同,例如RabbitMQ、MySql、Redis等

EntityFramework 迁移

请切换到服务项目启动目录, 执行 dotnet ef 命令进行数据库迁移

例如: ``` shell

cd aspnet-core/services/admin/LINGYUN.BackendAdminApp.Host

dotnet ef database update

- 也可以使用快速迁移脚本文件: **./build/build-aspnetcore-ef-update.ps1**


初始化网关数据库

2020-08-05 16:25:00 的提交中, 已经将apigateway-init.sql文件内容读取并写入DataSeeder类型, 启动网关管理项目会自动初始化网关数据, 请确保aspnet-core/database/apigateway-init.sql文件存在

配置RabbitMQ

因此项目设计为微服务架构,服务间通讯采用分布式事件的方式,项目采用的是DotNetCore/CAP 通讯方式为RabbitMQ Server,所以您需要事先安装RabbitMQ,具体安装方式请查阅官网

然后您需要更改配置文件中的CAP:RabbitMQ配置项,设置为您自己定义的配置,推荐使用rabbitmq_management插件便于快速管理RabbitMQ

启动后台服务

```shell cd aspnet-core/services

start-all-service.bat

启动本地开发环境(自带热启动)

cd vueJs

start-vue-admin.bat

构建生产环境 (自带压缩)

yarn build:prod

关于docker容器部署

第一步: 构建后台服务, powershell脚本:./build/build-aspnetcore-release.ps1, 注意:发布后的服务需要 appsettings.Production.json 文件

第二步: 构建前端, ./build/build-vue-element-admin.ps1

第三步: 构建后的发布地址默认在cd ./aspnet-core/services/Publish ,变更nginx代理服务器地址: ./client/docker/nginx/default.conf

第四步: 运行此命令 sudo docker-compose down && sudo docker-compose -f docker-compose.yml -f docker-compose.override.yml up --build -d

推荐使用 jenkins 之类的ci工具,可以将此简化为一个步骤

代码格式检查以及自动修复

yarn lint

运行单元测试

yarn test:unit

运行端对端测试

yarn test:e2e

自动生成 svg 组件

yarn run svg

自定义 Vue 配置

请看 Configuration Reference.

浏览器支持

Modern browsers and Internet Explorer 10+.

| IE / EdgeIE / Edge | FirefoxFirefox | ChromeChrome | SafariSafari | | --------- | --------- | --------- | --------- | | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions

参与贡献

请看 CONTRIBUTING.md

License

MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.