基于vue2.0 +vuex+ element-ui后台管理系统:包括本地开发调试详细步骤
<ul><li>效果演示地址,</li>
<li>github地址：</li>
</ul>
<div>demo演示：</div>
<div><img src="https://images2017.cnblogs.com/blog/755150/201712/755150-20171221005841709-1230488257.jpg" alt=""></div>
<div> </div>
<div><strong><img src="https://images2017.cnblogs.com/blog/755150/201712/755150-20171221005856240-432824838.jpg" alt=""></strong></div>
<div> </div>
<div><strong><img src="https://images2017.cnblogs.com/blog/755150/201712/755150-20171221005918568-443165606.jpg" alt=""></strong></div>
<div> </div>
<div><strong><img src="https://images2017.cnblogs.com/blog/755150/201712/755150-20171221005934365-2014641540.gif" alt=""></strong></div>
<div> </div>
<div><strong><img src="https://images2017.cnblogs.com/blog/755150/201712/755150-20171221005954990-2121166273.gif" alt=""></strong></div>
<div><strong>1、About</strong>
<div style="margin-left: 30px">此项目是 vue2.0 + element-ui + node+mongodb 构建的后台管理系统，所有的数据都是从服务器实时获取的真实数据，具有真实的注册、登录、数据显示、新增数据、修改数据、删除数据等功能。</div>
<div> </div>
<div><strong>2、说明</strong></div>
<div style="margin-left: 30px">如果对您对此项目有兴趣，可以点 "Star" 支持一下 谢谢！ ^_^</div>
<div style="margin-left: 30px">或者您可以 "follow" 一下，我会不断开源更多的有趣的项目</div>
<div style="margin-left: 30px">开发环境 windows 64 、nodejs 6.10.0</div>
<div style="margin-left: 30px">如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR </div>
<div style="margin-left: 30px"> </div>
<div><strong>3、技术栈</strong>
<div style="margin-left: 30px">前端技术栈：vue2 + vuex + vue-router + webpack2.0 + ES6/7 + less + element-ui</div>
<div style="margin-left: 30px">服务端技术栈：nodejs + express + mongodb</div>
<div style="margin-left: 30px"> </div>
<div><strong>4、前序准备</strong>
<div>运行前准备：</div>
<div> 4.1、不需要在本地调试及开发： 请访问本项目的服务器地址。</div>
<div> </div>
<div> 4.2、需要在本地调试及开发：</div>
<div> 由于此项目是基于nodejs和mongodb的前后端结合项目，你需要进行nodejs和mongodb的相关准备工作。项目运行之前，请确保系统已经安装以下应用：</div>
<div> (1)、node (6.0 及以上版本)。使用细节，请参考：node的下载及安装。</div>
<div> (2)、mongodb 。 使用细节，请参考：mongodb的下载及使用。【下载，db/log配置，开启服务，use touzi，导入数据】</div>
<div> （2.1）、下载地址(免安装版，下载完成之后，直接解压就行);</div>
<div> （2.2）、指定mongodb的数据表和日志存放路径：</div>
<div> 将解压后的mongodb文件重命名为mongodb,放入指定盘符，这里我默认放在E盘，我的目录为：E:/mongodb/。</div>
<div> 如果是windows 7系统，点击快捷键：windows键，打开cmd窗口，进入E:/mongodb/mongod/bin文件夹下，执行如下命令即可。</div>
<div> e:\mongodb\mongod\bin><strong>mongod --dbpath=e:\mongodb\mongod\db --logpath=e:\mongodb\mongod\log\log.txt --install</strong></div>
<div> </div>
<div> 注意：如果是window 10系统，由于系统安全性较高，需要在微软小娜搜索框中，输入cmd,右键出现的“命令提示符”，以管理员身份运行，执行如下命令即可，如图：</div>
<div> <img src="https://images2018.cnblogs.com/blog/755150/201805/755150-20180510091255166-1746816508.png" alt=""></div>
<div> </div>
<div> </div>
<div> （2.3）、启动服务，连接数据库:</div>
<div> 如果是window系统，使用快捷键：windows+R,打开运行窗口，输入命令：services.msc，双击Mongo DB,启动类型：自动；点击“启动”按钮，确定即可。如图：</div>
<div> <img src="https://images2017.cnblogs.com/blog/755150/201712/755150-20171220201500553-709381039.png" alt=""></div>
<div>
<div> （2.4)、切换数据库；</div>
<div> 进入mongodb/mongod/bin文件夹，双击mongo.exe文件，出现如下画面，表示mongodb默认连接的数据库名为test，我们这个项目用到的数据库名为：tougu。</div>
<div> <img src="https://images2017.cnblogs.com/blog/755150/201712/755150-20171220205830146-332077997.png" alt=""></div>
<div>
<div> 接下来，使用命令：>use tougu,即切换到tougu数据库。如图：</div>
<div> <img src="https://images2017.cnblogs.com/blog/755150/201712/755150-20171220205905240-1261369584.png" alt=""></div>
<div>
<div> （2.5）、导入初始化数据；</div>
<div> 因为刚刚安装的本地数据库，db中的数据为空，如果您进行本地开发，需要拿到数据，必须导入初始化数据。初始化数据在<strong>/outdb/</strong>文件夹下，复制到刚刚安装的本地数据mongodb/mongod/outdb文件夹下，导入方法如下：</div>
<div> 进入bin文件夹，如果是windows系统，点击快捷键：windows键，打开cmd窗口，进入E:/mongodb/mongod/bin文件夹下,输入命令mongoimport逐个文件导入即可。注意：moneyIncomePay.txt为对应导入的文件名。</div>
<div> e:\mongodb\mongod\bin><strong>mongoimport -d tougu -c moneyIncomePay --file ../outdb/moneyIncomePay.txt --upsert</strong></div>
<div> 如图：表示数据导入成功。</div>
<div> <img src="https://images2017.cnblogs.com/blog/755150/201712/755150-20171221010339131-1499367098.jpg" alt=""></div>
<div>
<div> (3)、robomongod。（注意：mongodb可视化视图工具，本项目不是必须安装，主要用于方便查看数据库数据）。</div>
<div> 使用细节，请参考：robomongod的下载及使用。</div>
<div> 免安装版，下载完成之后，直接解压就行。放到E:mongodb/文件夹下，重命名为：robomongod。</div>
<div> 双击robomongo文件夹下的robo3t.exe，新建一个connection，输入主机名：localhost和端口号27017（mongod的默认端口），默认情况下不需要用户名密码。如图：</div>
</div>
<div> <img src="https://images2017.cnblogs.com/blog/755150/201712/755150-20171220210406459-729376199.png" alt=""></div>
<div>
<div> 连接后，我们就可以看到test这个数据库。当我们运行项目，调取接口的时候，就会自动创建数据库tougu及数据库下相应的表格数据.</div>
<div> 双击tougu这个集合，查看里面的数据。数据的展示分三种。树形（可以看到字段的类型），表格，文本。如图：</div>
<div> <img src="https://images2017.cnblogs.com/blog/755150/201712/755150-20171221010214678-1081732942.jpg" alt=""></div>
<div>
<div><strong>5、开发</strong></div>
<div> git clone https://github.com/wdlhao/vue2-element-touzi-admin</div>
<div> cd vue2-element-touzi-admin npm install</div>
<div> npm run dev (访问本地后台系统，需开启服务端express服务)。运行之后，会默认打开本地访问路径：http://localhost:8012。</div>
<div> 开启服务端express服务方法如下：双击server/start.bat启动文件，执行命令>node index.js即可，启动后切记不要关闭cmd窗口。</div>
<div> </div>
<div><strong>6、发布</strong></div>
<div> npm run bulid (生成打包之后的项目文件,此文件主要用于项目部署)。</div>
<div> </div>
<div>
<div><strong>7、功能列表</strong></div>
<div style="margin-left: 30px">- 登录/退出 -- 完成</div>
<div style="margin-left: 30px">- 首页 -- 完成</div>
<div style="margin-left: 30px">- 用户列表 -- 完成</div>
<div style="margin-left: 30px">- 信息列表 -- 完成</div>
<div style="margin-left: 30px">- 信息管理</div>
<ul>
<li style="margin-left: 30px">- 个人信息 -- 完成</li>
<li style="margin-left: 30px">- 修改信息 -- 完成</li>
</ul>
<div style="margin-left: 30px">- 资金管理</div>
<ul>
<li style="margin-left: 30px">- 资金流水 -- 完成</li>
<li style="margin-left: 30px">- 支付单据 -- 完成</li>
</ul>
<div style="margin-left: 30px">- 投资管理</div>
<ul>
<li style="margin-left: 30px">- 省份投资 -- 完成</li>
<li style="margin-left: 30px">- 区域投资 -- 完成</li>
</ul>
<div style="margin-left: 30px">- 金融文章</div>
<ul>
<li style="margin-left: 30px">- 文章发布 -- 完成</li>
<li style="margin-left: 30px">- 文章编辑 -- 完成</li>
<li style="margin-left: 30px">- 查看文章 -- 完成</li>
</ul>
<div style="margin-left: 30px">- 资金数据</div>
<ul>
<li style="margin-left: 30px">- 投资分布 -- 完成</li>
<li style="margin-left: 30px">- 项目分布 -- 完成</li>
<li style="margin-left: 30px">- 收支统计 -- 完成</li>
</ul>
<p><strong> 8、项目总结</strong></p>
<p> vue2.0-element-touzi-admin项目，目前是首次上线版本，肯定会存在有很多不足之处。欢迎各位大神，提出宝贵意见。后续会不断更新和优化。</p>
<p> 如果对您对此项目有兴趣，可以点 "Star" 支持一下 谢谢！ ^_^</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div> 项目讨论qq群：<span style="color: rgba(0, 255, 0, 1); font-size: 14pt"><strong>602515030</strong></span>，欢迎大家加群，一起来学习和交流。</div>
<div> <img src="https://img2018.cnblogs.com/blog/755150/201903/755150-20190328164014425-349970642.png" alt=""></div>
<div> </div>
</div>
</div>
</div>
</div>
<div id="MySignature" role="contentinfo">
<div style="width: 97%; height: 200px; border: 1px dashed #00bfff; line-height: 32px; font-size: 16px; padding: 10px 20px 0;">
<p>你的关注和支持是对我最大的动力~</p>
<p>书山有路群[一个非常活跃的读书分享群,每周都有新书分享]：452450927</p>
<p>微博：http://weibo.com/u/2241641312</p>
<p>出处：http://www.cnblogs.com/wdlhao/</p>
<p>github:https://github.com/wdlhao</p>
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面
</div><br><br>
来源：https://www.cnblogs.com/wdlhao/p/8075646.html
頁:
[1]