Browse Source

带代码平台

master
陈裕财 2 years ago
parent
commit
aa2b6aa7e0
  1. 482
      README.zh-CN.md

482
README.zh-CN.md

@ -1,168 +1,346 @@
<p align="center">
<img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
</p>
<p align="center">
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.3.0-brightgreen.svg" alt="element-ui">
</a>
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
</a>
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
</a>
</p>
简体中文 | [English](./README.md)
## 简介
`vue-element-admin` 是一个后台集成解决方案,它基于 [Vue.js](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈,内置了i18国际化解决方案,动态路由,权限验证等很多功能特性,相信不管你的需求是什么,本项目都能帮助到你。
- [在线访问](http://panjiachen.github.io/vue-element-admin)
- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/)
- [Gitter讨论组](https://gitter.im/vue-element-admin/discuss)
- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
- [Donate](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/donate)
**本项目的定位是后台集成方案,不适合当基础模板来开发。**
- 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
**注意:该项目使用 element-ui@2.3.0+ 版本,所以最低兼容 vue@2.5.0+**
## 前序准备
你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) and [element-ui](https://github.com/ElemeFE/element),所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。
同时配套一个系列的教程文章,如何从零构建后一个完整的后台项目,建议大家先看完这些文章再来实践本项目
- [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
- [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
- [手摸手,带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
- [手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
- [手摸手,带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
- [手摸手,带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
**如有问题请先看上述使用文档和文章,若不能满足,欢迎 issue 和 pr**
**本项目并不是一个脚手架,更倾向于是一个集成解决方案**
**该项目不支持低版本浏览器(如ie),有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
<p align="center">
<img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
</p>
## 功能
```
- 登录/注销
- 权限验证
- 多环境发布
- 动态侧边栏(支持多级路由)
- 动态面包屑
- 国际化多语言
- 多种动态换肤
- 快捷导航(标签页)
- 富文本编辑器
- Markdown编辑器
- JSON编辑器
- Screenfull全屏
- 列表拖拽
- Svg Sprite 图标
- Dashboard
- 本地mock数据
- Echarts 图表
- Clipboard(剪贴复制)
- 401/404错误页面
- 错误日志
- 导出excel
- 导出zip
- 前端可视化excel
- 树形table
- Table example
- 动态table example
- 拖拽table example
- 内联编辑table example
- Form example
- 二步登录
- SplitPane
- 拖拽 Dialog
- Dropzone
- Sticky
- CountTo
- Markdown2html
```
## 开发
```bash
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
logo
多功能、高效率、低代码的前后端一体化、智能化的开发工具
gitee star github star
👉 https://maimengcloud.com/#/openCommunity 👈
📢 简介
mdp-sys-ui-web旨在为企业开发管理类的业务系统提供一个模板工程,该模板工程具有高效率、低代码、功能丰富等特点。企业可以在该工程之上,加入更多其它业务功能;也可以以该工程作为模板,创建新的工程,用于开发其它业务。使用该工程构建应用,您不用考虑多租户、登录、统一认证中心、权限、菜单管理、系统管理、公共组件、公共api、代码冗余、数据字典、图片库、文件库、智能表单、工作流、微服务互相调用、全局跟踪定位bug、多主键crud,复杂sql查询等各种问题,这些都内置其中了,轻松搞定。
如果非要给你一个使用mdp的理由:那就是代码大量减少、开发so easy mdp-sys-ui-web作为独立前端项目,企业可以单独使用该工程,另外单独开发后端系统;也可以直接使用唛盟团队 配套开源的后端系统[mdp-sys-backend](https://gitee.com/qingqinkj/mdp-sys-backend)作为后端服务。
唛盟mdp更多内容,请点击👉mdp-core 👈
💪 内置功能
角色权限
├── 角色管理 => 角色crud、分配菜单、分配权限
├── 权限定义 => 权限crud
├── 菜单管理 => 菜单(按钮)crud、分配菜单(按钮)给角色、
├── 模块管理 => 模块crud
├── 已开模块 => 查看企业(个人)已开通的模块
# 安装依赖
npm install
   
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
组织管理
├── 机构管理 => 企业信息维护、管理员维护、账户信息维护、企业产品维护、
├── 用户管理 => 用户的crud、分配岗位、分配部门、重置密码、邀请
├── 部门管理 => 部门curd、分配岗位到部门、查看部门用户
├── 公司管理 => 公司curd(超级管理员使用)
├── 岗位管理 => 岗位curd、分配角色到岗位、岗位人员查看
├── 注销审核 => 审核用户的注销申请
平台管理
├── 平台配置 => 配置平台的信息
├── 个人认证审核 => 审核个人的实名认证请求
├── 企业认证审核 => 审核企业的实名认证请求
元数据管理
├── 字典管理 => 数据字典的crud
├── 列表维护 => 下拉列表数据项的crud
├── 参数定义 => 公共系统参数的crud
审批中心
├── 待执行 => 我的待执行任务查询、任务执行
├── 日历任务 => 我的待执行任务查询、任务执行
├── 发起流程 => 发起流程
审批监控
├── 我发起的流程 => 查询我发起的流程
├── 我监控的流程 => 查询我监控的流程、催办
├── 我参与的流程 => 查询我参与过的流程
流程模型
├── 流程编辑器 => 在线流程编辑器
├── 模型发布 => 流程模型发布
├── 模型设置 => 设置流程与智能表单的关联、模型的启动条件、审批人、权限等
智能表单(低代码)
├── 表单中心 => 智能表单的门户
├── 表单设计 => 进行智能表单设计、权限设置等
├── 数据录入、查询 => 查询表单已录入的数据
组件库mdp-ui
mdp封装了几十个ui组件,使用mdp-ui与不使用mdp-ui的区别:写100行代码还是写1行代码的区别,代码量的减少立竿见影
# 启动服务
npm run dev
```
浏览器访问 http://localhost:9527
mdp-ui
mdp的核心组件,该组件库为纯前端页面组件,无须配置任何后端api接口即可正确运行
mdp-ui-ext
基于mdp-ui扩展的带有对接后台api业务加载能力的业务组件
⚠️注意:mdp-ui组件效果预览
## 发布
```bash
# 构建测试环境
npm run build:sit
⚙快速开始
找到main.js 添加下面代码
//mdp-ui 基础组件
import MdpComponents from '@/components/mdp-ui/index.js'
Vue.use(MdpComponents)
//mdp-ui-ext拓展的组件
import MdpUiExtComponents from '@/components/mdp-ui-ext/index.js'
Vue.use(MdpUiExtComponents)
// 公共api
import mdp from "@/api/mdp_pub";
Vue.prototype.$mdp = mdp;
mdp-dialog
弹框,可以把任意页面装配成弹框,无须定义多余的变量及函数
相对于el-dialog来说,要使用弹窗,事情还真不少。需要定义visible变量,定义showDialog,closeDialog两个函数,最关键一点是如果要父页面传递参数到窗口内组件,还得在父页面定义一个变量,通过props属性传递。相当麻烦。如果某个功能弹窗特别多,会有一堆的控制弹窗的变量及函数,非常恶心。mdp-dialog则完全解决上述问题。
mdp-table
表格,内置了增、删、改、查、高级查询、重置查询、导出、列配置、分页、批量编辑等功能、内置了对按钮权限的控制机制
功能非常强大,懂的都懂。
综合管理
可编辑表格
可编辑-树状表格
mdp-select
下拉列表,支持对数据字典、元数据的引用,支持对任意小表表格数据的引用,支持参数化加载后台数据,对后台加载的数据进行缓存
mdpselect
mdp-select-table
超大表格下拉列表,与mdp-select相比,该组件具有分页查询功能
mdp-select-user
用户选择下拉列表,与mdp-select-table组件类似,仅仅针对用户的头像做了特殊处理
mdp-input
输入框
mdp-date
日期
mdp-date-range
区间日期
mdp-number
数字输入
mdp-hi-query
高级查询,可以由用户自定义任意复杂的查询条件
# 构建生成环境
npm run build:prod
```
## 其它
```bash
# --report to build with bundle size analytics
npm run build:prod --report
mdp-table-configs
表格配置,用于控制表格的列显示与否
# --preview to start a server in local to preview
npm run build:prod --preview
# lint code
npm run lint
mdp-transfer
穿梭框
# auto fix
npm run lint -- --fix
```
mdp-cate-tree
文档、文章目录树
更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/deploy)
mdp-expand
智能表单相关组件
## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
mdp-ext-infos
自动扩展字段信息
## Online Demo
[在线 Demo](http://panjiachen.github.io/vue-element-admin)
mdp-image
图片库,图片的增删改查、上传、下载
## Donate
如果你觉得这个项目帮助到了你,你可以帮作者买一杯果汁表示鼓励 :tropical_drink:
![donate](https://panjiachen.github.io/donate/donation.png)
mdp-select-image
图片选择器,支持图片的上传下载、上传后的统一管理、共享
[Paypal Me](https://www.paypal.me/panfree23)
mdp-select-dept
部门选择,支持树状机构,异步加载,支持分页查询,任意大数据量
## License
mdp-select-att
附件库,支持附件的上传下载、上传后的统一管理、共享
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
mdp-select-cate
文档、文章目录树选择器
Copyright (c) 2017-present PanJiaChen
mdp-select-tag
标签库,支持标签的统一管理、共享
mdp-meta-item
元数据管理库、支持元数据的crud
mdp-meta-option
元数据管理库-列表数据组件、支持列表数据的crud
mdp-rich-text
富文本编辑器,整合了mdp-select-image作为插件
🔃 api
api
业务api,哪里用到哪里就单独引入
api/mdp_pub/index.js
公共api总入口,注册到vue全局函数中,可以在页面中任意地方直接使用,公共api总入口,如需要添加公共api,请在此文件添加
mdp_api_base.js
为mdp框架核心的与后端交互的api,自动注册为全局公共函数,可通过$mdp.xxx调用,可改,但不要新增,删除任何一个api.
mdp_api_ext.js
为mdp扩展的组件与后端交互的api,自动注册为全局公共函数,可通过$mdp.xxx调用,可改,但不要新增,删除任何一个api.
mdp_api_biz.js
为mdp扩展的组件与后端交互的api,自动注册为全局公共函数,可通过$mdp.xxx调用,可改,可新增必要的api.
<el-button @click="$mdp.xxxApi()"/>
this.$mdp.xxxApi()
login
登录相关api
↕️ 指令
v-adaptive 让表格自动适应,表格底部始终保持距离视窗底部一定距离(默认 30px)
<el-table v-adaptive="{bottomOffset:30}"/>
⌨ 技术栈
vue全家桶 + element-ui + axios
💻 样例项目
[系统管理] (https://maimengcloud.com/sys/m1/)
[协同办公] (https://maimengcloud.com/oa/m1/)
[项目管理] (https://maimengcloud.com/xm/m1/)
[流程管理] (https://maimengcloud.com/workflow/m1/)
⚙ 快速开始
⚠️注意:该项目使用 element-ui@2.3.0+ 版本,所以最低兼容 vue@2.5.0+
前序准备
你的本地环境需要安装 node 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) and [element-ui](https://github.com/ElemeFE/element),提前了解和学习这些知识会对使用本项目有很大的帮助。
该项目属于网页版前端项目,所有api由 [mdp-sys-backend](https://gitee.com/qingqinkj/mdp-sys-backend)提供,请下载该项目
代码生成器下载 mdp-code-generator
开发
# 克隆项目
git clone https://gitee.com/qingqinkj/mdp-sys-ui-web.git
# 安装依赖
npm install
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 启动服务
npm run dev
浏览器访问 http://localhost:8015
登录相关
登录api,对接后台接口有两种方式,分别为对接统一认证中心、对接mdp-sys-backend 默认对接mdp-sys-backend中的登录模块,如果想切换,更改mdp_config.js中的getOauth2LoginContext函数即可
对接统一认证中心进行登录
getOauth2LoginContext:function(){
return "oauth2client"
}
对接mdp-sys-backend进行登录
getOauth2LoginContext:function(){
return "sys"
}
发布
# 构建测试环境
npm run build:sit
# 构建生成环境
npm run build:prod
🔔️ 特别提醒
mdp 3.0 版本已经开始规划更新了,尽请期待新版本的诞生吧
🗒️ 版本更新日志
升级前必看:CHANGELOG.md
🚀 基于mdp框架拓展的开源项目
⚠️ 注意:以下拓展的框架或者子系统,由mdp开源团队基于项目经验进行总结抽取,可用可不用,可以以jar包方式合并到现有工程进行发布,也可单独发布成单体应用、微服务应用
第三方支付框架,整合了微信支付、支付宝支付、paypal支付
mdp-tpa-pay-backend 后端
即时通讯框架
mdp-im-uniapp 前端app
mdp-im-web 前端浏览器
mdp-im-backend 后端
统一认证中心框架
mdp-sys-ui-web 前端
mdp-oauth2-backend 后端
mdp-sys-backend 后端
微服务框架
mdp-cloud-backend 后端
工作流管理子系统
mdp-workflow-ui-web 前端
mdp-workflow-backend 后端
智能表单子系统
mdp-form-ui-web 前端
mdp-form-backend 后端
内容管理子系统
mdp-arc-ui-web 前端
mdp-arc-backend 后端
短信子系统
mdp-sms-ui-web 前端
mdp-sms-backend 后端
项目管理子系统
xm-crowd-ui-web 前端众包
xm-ui-web 前端管理端
xm-backend 后端
财务管理子系统
ac-core-ui-web 前端管理端
ac-backend 后端
📝 常见问题、操作说明
前端基础组件
前端扩展组件
前端公共api
后端公共api
文档主页
FQA
💯 实践案例
系统管理
协同办公
唛盟众包-网页
项目管理-网页
项目管理-小程序
drawing
流程管理
🔨贡献指南
贡献须知
mdp 作为开源项目,离不开社区的支持,欢迎任何人修改和提出建议。贡献无论大小,你的贡献会帮助背后成千上万的使用者以及开发者,你做出的贡献也会永远的保留在项目的贡献者名单中,这也是开源项目的意义所在!
为了保证项目代码的质量与规范,以及帮助你更快的了解项目的结构,请在贡献之前阅读:
mdp 贡献说明
贡献步骤
Fork 本仓库。
Fork 后会在你的帐号下多了一个和本仓库一模一样的仓库,把你帐号的仓库 clone 到本地。
注意替换掉链接中的分支名和用户名。
如果是贡献代码,分支名填 dev;如果是贡献文档,分支名填 docs
git clone -b 分支名 https://gitee.com/用户名/mdp-sys-ui-web.git
修改代码/文档,修改后提交上来。
# 把修改的文件添加到暂存区
git add .
# 提交到本地仓库,说明你具体做了什么修改
git commit -m '填写你做了什么修改'
# 推送到远程仓库,分支名替换成 dev 或者 docs
git push origin 分支名
登录你的仓库,然后会看到一条 PR 请求,点击请求合并,等待管理员把你的代码合并进来。
项目分支说明
分支 说明
master 主分支,受保护分支,此分支不接受 PR。在 dev 分支后经过测试没问题后会合并到此分支。
dev 开发分支,接受 PR,PR 请提交到 dev 分支。
🐞 交流讨论 、反馈 BUG、提出建议等
快扫描下方左侧微信二维码和我们一起交流讨论吧!(备注 唛盟-mdp 进群) drawing
唛盟微信公众号查看一些基础教程
drawing
反馈 BUG、提出建议,欢迎新建:[issues](https://gitee.com/qingqinkj/mdp-sys-ui-web/issues),开发人员会不定时查看回复。
参与贡献,请查看贡献指南。
💲 打赏
感谢所有赞赏以及参与贡献的小伙伴,你们的支持是我们不断更新前进的动力!微信扫一扫,赏杯咖啡呗!
drawing
🔔 精品项目推荐
项目名称 项目地址 项目介绍
SpringBoot_v2 https://gitee.com/bdj/SpringBoot_v2 - 基于springboot的一款纯净脚手架
Loading…
Cancel
Save