vue DBM

Notice! This project has been refactored. The current version is 2.0. For older versions, please check release to download version 1.0.

illustrate

DBM is a data source management system that includes two modules: data source management and open authorization. Data source management refers to functions such as one-click import, on-demand filtering, and designated export of relational data. Open authorization refers to the data owner opening data to users. Add, delete, modify, check and other operation permissions. Deploying or using this system can bring the function of data persistence to your front-end project, instead of data simulation.

The DBM front-end is a SPA application built using the vue-cli scaffolding. It mainly relies on DBM. In order to make the separation of the front-end and the back-end more complete, the front-end will use Mockjs to simulate the response according to the interface protocol agreed with the back-end during development, and complete the interface on the back-end. After writing, use different startup commands to transfer the back-end interface to complete the test of the entire system.

If you also want to use vue.js combined with back-end languages ​​(nodejs, java, etc.) to develop a complete application with front-end and back-end, referring to the implementation of DBM front-end project may be able to help you solve the following problems

• How to improve the reusability of components?
• How to use multiple modules in state management?
• How to implement page-level and element-level permission processing?
• How to intercept HTTP requests and simulate response driven UI using Mockjs?
• How to use the render function to customize business components with frameworks such as element-ui?
• How to implement multi-environment packaging, improve packaging efficiency, and reduce packaging volume, etc.

Since this project is done in spare time, the development cycle is long, and the cleanliness of the code still needs to be improved. I will continue to modify it until I am satisfied. If you find problems, please raise them directly in Issues, or if you have any questions about the implementation of the module. Better solutions welcome PR

Preparation before development

Your local environment needs to contain nodejs and git if you use git clone. This project mainly uses vue, vuex, vue-router, element-ui, axios, Mock.js and other technology stacks. Familiar with these technologies, you can better master this project.

During the development of the project, I took some targeted notes. It is recommended to read these notes first before understanding the source code of this project.

• Project structure overview
• Main layout of the system
• routing
• Status management
• Permission management
• Control encapsulation and use
• mix in
• Data simulation
• Packaging optimization and user experience

target function

• Login page
• Dashboard
• Data table management page
• Database management page
• Data open authorization page

Development and release

 # 克隆项目
git clone https://github.com/calebman/vue-DBM.git

# 安装依赖
npm install
   
# 如果下载依赖报错可通过以下方式尝试解决
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

# 浏览器访问
http://localhost:8060

# 打包发布
npm run build

Change log

Click here to view the update log.

Demo

Click me to view Demo

Acknowledgments

The architecture of this project refers to the implementation of vue-element-admin . The table component has been customized and modified based on vue-easytable . I would like to thank the two project authors PanJiaChen and huangshuwei.

License

MIT

Copyright (c) 2018-calebman