高仿“饿了么”Vue项目（一）

高仿“饿了么”Vue项目（一）

　　当我们把Vue框架的概念过了一遍之后，要进一步提升，就要看看别人是怎么使用Vue框架来做项目了。

　　在github上有不少好的Vue项目，我找到了其中的一个，并把它作为下一步学习的目标。

　　链接地址：https://github.com/bailicangdu/vue2-elm

　　这是一个基于vue2+vuex构建的，具有45个页面的大型单页面应用，它高仿了“饿了么”外卖App。

　　第一讲，我们先看看这个项目的后台，即数据存储部分。

　　一、项目简介

　　该项目分成两部分，一个是前端，一个是后端，链接分别是：https://github.com/bailicangdu/vue2-elm和https://github.com/bailicangdu/node-elm

　　前端采用vue框架，后端基于node服务器，数据库使用MongoDB。

　　它们的运行方式相近：

• 　　打开一个命令窗口
• 　　进入项目所在的目录
• 　　npm install
• 　　npm run dev

　　一般先运行后端，再运行前端。

　　项目的一些截图：

　　二、MongoDB的安装

　　MongoDB可以去它的官网下载，网址为：www.mongodb.org

　　但官网首页不容易找到下载链接，下面的这个网址提供了比较齐全的下载链接：http://dl.mongodb.org/dl/win32/x86_64

　　选择“mongodb-win32-x86_64-v3.4-latest-signed.msi”这个安装包。

　　下载后，按照Windows应用程序的通用安装步骤，一路点“下一步”，直到完成。

　　默认安装在：C:\Program Files\MongoDB\Server\3.4。

　　在这个目录下新建两个目录：data和log，分别用于存放数据文件和日志文件。

　　在这个目录下新建一个文件，名为：mongo.conf，它是数据库的配置文件，内容如下：

dbpath=C:\Program Files\MongoDB\Server\3.4\data #存放数据库文件的目录
logpath=C:\Program Files\MongoDB\Server\3.4\log\mongo.log #日志文件
logappend=true #错误日志采用追加模式
journal=true #启用日志
port=27017 #端口号，27017是MongoDB的默认监听端口
quiet=true #可以过滤掉一些无用的日志信息

　　最终的目录结构如下：

　　bin目录中有两个常用的exe文件，一个是mongod，它是数据库服务器程序，，另一个是mongo，它是客户端程序。这一点很像MySQL数据库，MySQL也有mysqld和mysql。

　　最后，我们将MongoDB安装为Windows服务，以便开机启动。

• 　　将MongoDB的bin目录加入PATH环境变量
• 　　在命令窗口中输入：mongod --config "C:\Program Files\MongoDB\Server\3.4\mongo.conf" --install --serviceName "MongoDB"
• 　　输入如下命令启动服务：net start mongodb

　　至此，MongoDB就安装成了Windows服务，以后开机即可自动运行MongoDB数据库服务器。

　　三、图形界面管理工具

　　mongo.exe是一个命令行的客户端，使用起来不太方便，这里推荐一个图形界面管理工具：adminMongo。

　　在github上可以找到这个项目：https://github.com/mrvautin/adminMongo

　　使用方法：

• 　　下载，解压
• 　　打开命令窗口，进入解压目录
• 　　npm install
• 　　npm start

　　然后，就可以通过如下网址来管理MongoDB了：http://127.0.0.1:1234

　　进入管理界面，首先要求创建一个数据库连接，这时输入连接名称（mongodb，可以任意）和连接字符串（mongodb://127.0.0.1:27017），如下图所示：

　　点击“Connect”，就可以看到数据库的内容了：

　　可以看到饿了么（elm）应用有多个表，打开其中一个表：

　　可以直观地感觉到，MongoDB的数据存储格式很像常用的JSON格式。

　　好了，这一讲我们下载了要学习的Vue项目，并且把后台的数据库也搭建好了，下一讲，将详细分析后端项目是如何操作MongoDB数据库的。