高仿“饿了么”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数据库的。


Logo

前往低代码交流专区

更多推荐