sujinw / vue-dbm

基于vue+vuex+iview构建的数据表格管理系统前端

说明

刚开始学习nodejs时不免枯燥，总想着如何造一个好看的前端页面，尝试着在网上搜索相关的项目找找灵感，发现对于前端使用vue.js搭配后台nodejs的教程不多（也可能是我没找着:camel:），不管怎样，在这个大前提下DMB的开发工作开始了。

DMB是针对经常使用excel的个人或者团体（比如公司每月提交excel报表）而开发的excel数据管理系统，他能够帮助您完成表格的整合、编辑、数据筛选以及导出等等功能，一键导入、按需筛选、指定导出，DMB能让你不再被一堆excel文件折磨。

DBM前端是使用vue-cli脚手架构建的一个大型的SPA应用，vue.js的版本为2.0，为了让前后端分离更加彻底，针对每个Http请求模拟了对应的响应数据，这些json文件既可以作为模拟的数据源让前端演示运行，也可以作为各个请求的接口描述文件，想知道构建表格的时候服务端将回传什么数据给你？查看对应的json文件即可。

如果您也想使用vue.js结合nodejs开发一个带前后端的完整应用的话，参考DBM前端工程的实现也许能够帮您解决如下问题

如何使用render函数渲染自定义组件？

在iview的基础上如何动态的添加标签页？

如何拦截路由实现未登录的页面不允许访问？

如何使用静态文件mock数据驱动UI？

如何使用代理链接后端的web服务？

如何将vue工程打包整合到后端运行等等

由于此项目使用业余时间来做且属于边学边做，开发周期较长，代码的整洁程度仍待提高，我将不断修改做到自己满意为止，如果您发现问题请直接在Issues中提出，或者您对模块的实现有更好的解决方案欢迎Pull Requset

如果对您有帮助，您可以点击右上角 "Star" 支持一哈！谢谢！

目标功能

• 标签页、菜单栏
• 登录页面
• 用户设置菜单
• 主页设计
• 角色列表
• 角色创建对话框
• 角色权限修改对话框
• 用户列表
• 新建、编辑用户对话框
• 表格瀑布
• 新建表格步骤条
• 操作日志列表
• 数据表格树
• 包含（文本、数字、时间、选项、图片）五种列类型的数据表格
• 数据筛选项的自定义对话框
• 数据表的添加、编辑对话框
• 数据表分页

项目运行

克隆到本地

git clone https://github.com/carrayboy/vue-DBM.git

安装依赖包

npm install

开启本地服务器localhost:8000

npm run dev

打包页面

npm run build

登录系统

由于演示版本使用模拟数据，登录账号与密码可随意输入

效果演示

demo地址

对应的后端工程

地址在这里

部分截图