基于vue2.0 +vuex+ element-ui后台管理系统:包括本地开发调试详细步骤

• 效果演示地址,
• github地址：

demo演示：

 

 

 

 

一、About

此项目是 vue2.0 + element-ui + node+mongodb 构建的后台管理系统，全部的数据都是从服务器实时获取的真实数据，具备真实的注册、登陆、数据显示、新增数据、修改数据、删除数据等功能。

 

二、说明

若是对您对此项目有兴趣，能够点 "Star" 支持一下 谢谢！ ^_^

或者您能够 "follow" 一下，我会不断开源更多的有趣的项目

开发环境 windows 64 、nodejs 6.10.0

若有问题请直接在 Issues 中提，或者您发现问题并有很是好的解决方案，欢迎 PR 

 

三、技术栈

前端技术栈：vue2 + vuex + vue-router + webpack2.0 + ES6/7 + less + element-ui

服务端技术栈：nodejs + express + mongodb

 

四、前序准备

运行前准备：

   4.一、不须要在本地调试及开发： 请访问本项目的服务器地址。

 

   4.二、须要在本地调试及开发：

 因为此项目是基于nodejs和mongodb的先后端结合项目，你须要进行nodejs和mongodb的相关准备工做。项目运行以前，请确保系统已经安装如下应用：

   (1)、node (6.0 及以上版本)。使用细节，请参考： node的下载及安装。

   (2)、mongodb 。 使用细节，请参考： mongodb的下载及使用。【下载，db/log配置，开启服务，use touzi，导入数据】

  　　（2.1）、下载地址(免安装版，下载完成以后，直接解压就行);

　　  （2.2）、指定mongodb的数据表和日志存放路径：

　　　　将解压后的mongodb文件重命名为mongodb,放入指定盘符，这里我默认放在E盘，个人目录为：E:/mongodb/。

              若是是windows 7系统，点击快捷键：windows键，打开cmd窗口，进入E:/mongodb/mongod/bin文件夹下，执行以下命令便可。

　　　　e:\mongodb\mongod\bin> mongod --dbpath=e:\mongodb\mongod\db --logpath=e:\mongodb\mongod\log\log.txt --install

 

              注意：若是是window 10系统，因为系统安全性较高，须要在微软小娜搜索框中，输入cmd,右键出现的“命令提示符”，以管理员身份运行，执行以下命令便可，如图：

              

　　　　

 

　　 （2.3）、启动服务，链接数据库:

　　　　若是是window系统，使用快捷键：windows+R,打开运行窗口，输入命令：services.msc，双击Mongo DB,启动类型：自动；点击“启动”按钮，肯定便可。如图：

　　　　

　　（2.4)、切换数据库；

　　进入mongodb/mongod/bin文件夹，双击mongo.exe文件，出现以下画面，表示mongodb默认链接的数据库名为test，咱们这个项目用到的数据库名为：tougu。

      

   

　　接下来，使用命令：>use tougu,即切换到tougu数据库。如图：

　　

　　（2.5）、导入初始化数据；

　　由于刚刚安装的本地数据库，db中的数据为空，若是您进行本地开发，须要拿到数据，必须导入初始化数据。初始化数据在 /outdb/文件夹下，复制到刚刚安装的本地数据mongodb/mongod/outdb文件夹下，导入方法以下：

　　进入bin文件夹，若是是windows系统，点击快捷键：windows键，打开cmd窗口，进入E:/mongodb/mongod/bin文件夹下,输入命令mongoimport逐个文件导入便可。注意：moneyIncomePay.txt为对应导入的文件名。

　　e:\mongodb\mongod\bin> mongoimport  -d tougu -c  moneyIncomePay  --file ../outdb/moneyIncomePay.txt --upsert

　　如图：表示数据导入成功。

       

     

　　(3)、robomongod。（注意：mongodb可视化视图工具，本项目不是必须安装，主要用于方便查看数据库数据）。

　　使用细节，请参考： robomongod的下载及使用。

　　免安装版，下载完成以后，直接解压就行。放到E:mongodb/文件夹下，重命名为：robomongod。

　　双击robomongo文件夹下的robo3t.exe，新建一个connection，输入主机名：localhost和端口号27017（mongod的默认端口），默认状况下不须要用户名密码。如图：

 　　

  　　链接后，咱们就能够看到test这个数据库。当咱们运行项目，调取接口的时候，就会自动建立数据库tougu及数据库下相应的表格数据.

　　  双击tougu这个集合，查看里面的数据。数据的展现分三种。树形（能够看到字段的类型），表格，文本。如图：

         

五、开发

    git clone https://github.com/wdlhao/vue2-element-touzi-admin

    cd vue2-element-touzi-admin npm install

    npm run dev (访问本地后台系统，需开启服务端express服务)。运行以后，会默认打开本地访问路径： http://localhost:8012。

      开启服务端express服务方法以下：双击server/start.bat启动文件，执行命令>node index.js便可，启动后切记不要关闭cmd窗口。

 

六、发布

   npm run bulid (生成打包以后的项目文件,此文件主要用于项目部署)。

 

七、功能列表

- 登陆/退出 -- 完成

- 首页 -- 完成

- 用户列表 -- 完成

- 信息列表 -- 完成

- 信息管理

• - 我的信息 -- 完成
• - 修改信息 -- 完成

- 资金管理

• - 资金流水 -- 完成
• - 支付单据 -- 完成

- 投资管理

• - 省份投资 -- 完成
• - 区域投资 -- 完成

- 金融文章

• - 文章发布 -- 完成
• - 文章编辑 -- 完成
• - 查看文章 -- 完成

- 资金数据

• - 投资分布 -- 完成
• - 项目分布 -- 完成
• - 收支统计 -- 完成

 八、项目总结

      vue2.0-element-touzi-admin项目，目前是首次上线版本，确定会存在有不少不足之处。欢迎各位大神，提出宝贵意见。后续会不断更新和优化。

     若是对您对此项目有兴趣，能够点 "Star" 支持一下 谢谢！ ^_^

     项目讨论qq群： 602515030，欢迎你们加群，一块儿来学习和交流。