我們來花一個小時使用Node+Express+MongoDB來構建一個web應用程式吧

有一篇使用Node创建“Hello, World!”网页应用程序的教程,但是在我个人的经验中,能够访问数据库的教程比较少。所以,本文的主题将简要介绍从MongoDB中获取保存的数据以及将数据写入MongoDB的Web应用程序的步骤。

一、建立环境

步骤1:安装 Node.js。

只需点击Node.js官方网站,就可以自动检测使用的操作系统并按下安装按钮。
https://nodejs.org/en/
下载并运行安装文件,将安装Node.js和常用的包管理器NPM。
对于mac用户,请打开终端;对于Windows用户,请打开命令提示符,并切换到保存web应用程序的目录(例如:/Users/webapp)。

第二步:安装Express和Express Generator。

全局安装 Express:npm -g express
全局安装 Express 生成器:npm -g express-generator

第三步:安装MongoDB

以上以上是指搭建能够进行数据库访问的web应用程序运行环境已经完成。
接下来我们开始制作web应用程序吧。

创建一个名为「Hello World」的Web应用程序。

步骤1:利用Express generator创建Web应用的模板。

表达app1

让我们确认已经创建了一个名为app1的文件夹。

步骤2:前往app1文件夹。

切换到应用程序1的目录下。

步骤三:安装应用程序所需的依赖项以使其运行

使用npm安装

第四步:启动应用程序

运行 npm start

第五步:确认Web应用程序的运行

image.png

步骤6:输出“你好,世界”

请打开~/app3/routers/index.js,并确保以下代码存在。

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

在上述的module.exports = router行之前,添加以下代码。

/* GET Hello World page. */
router.get('/helloworld', function(req, res) {
res.render('helloworld', { title: 'Hello, World!' });
});

在~app3/views/路径下创建一个名为helloworld.jade的新文件。文件内容为

extends layout

block content
  h1= title
  p Welcome to #{title}

将其保存。

打开以下链接:http://localhost:3000/helloworld,查看“hello world”消息。

三、获取MongoDB数据.

第一步:关闭服务器,并添加用于访问MongoDB的包。

查看 app1/package.json 文件。

{
  "name": "app3",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "jade": "~1.11.0",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2"
  }
}

确认后,添加mongodb模块如下所示。

{
  "name": "app3",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "mongodb": "^2.2.25",
    "monk": "^4.0.0",
    "jade": "~1.11.0",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2"
  }
}

回到终端,执行 npm install 命令来安装添加的模块。

步骤2:创建用于保存MongoDB数据的目录。

创建与~/app1/data目录相同的目录。

步骤三:创建MongoDB数据库

他们转到~/mongodb/bin,然后设置Mongo的路径并启动服务器。
mongod –dbpath ~/app1/data/

打开另一个终端,并创建一个名为app1的数据库,使用app1db。

步骤四:将数据添加到数据库中

在MongoDB中,可以处理的数据格式是JSON格式。

{
 user:user1,
 e-mail:user1@gmail.com
}

将上述数据添加到app1db中。

db.usercollection.insert({"user":"user1","e-mail":"user1@gmail.com"})

步骤5:将app1db和app1进行关联

请查看~/app1/app.js文件的前几行。

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

添加以下代码以将其与MongoDB关联

// New Code
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/app1db');

接下来,将app1db配置为可以被app1访问。

app.use(function(req,res,next){
    req.db = db;
    next();
});

用汉语来解释上述代码

app.use('/', index);
app.use('/users', users);

将其插入在上面之上。

步骤6:从app1获取来自app1db的数据。

请打开”~/app1/routes/index.js”文件,并添加以下代码。

/* userlist htmlページを作成 */
router.get('/userlist', function(req, res) {
    var db = req.db;
    var collection = db.get('usercollection');
    collection.find({},{},function(e,docs){
        res.render('userlist', {
            "userlist" : docs
        });
    });
});

请在以下路径创建新页面~/app1/views/,并将文件命名为userlist.jade,并将下列代码插入其中。请注意,此处使用了jade引擎,请务必注意缩进。

extends layout

  block content
        h1.
             User List
        ul
             each user, i in userlist
                   li
                        a(href="mailto:#{user.e-mail}")= user.user

步骤七:确认已获取的数据

npm start:启动命令
http://localhost:3000/userlist:本地主机地址用户列表

image.png

我用Node+Express+MongoDB创建了一个Web应用程序。

请你提供更多参考。

bannerAds