60分鐘學會使用Node.js+Express+Ejs+mongoDB

時間 2019-11-09

標籤 60分學會使用 node.js+express+ejs+mongodb node express ejs mongodb 欄目 JavaScript 简体版

原文原文鏈接

60分鐘學會使用Node.js+Express+Ejs+mongoDB

本文出自從零到壹全棧部落javascript

(Node+Vue+微信公衆號開發)企業級產品全棧開發速成周末班首期班(10.28號正式開班，歡迎搶座)css

第1部分 – 15分鐘安裝

本文改編自THE DEAD-SIMPLE STEP-BY-STEP GUIDE FOR FRONT-END DEVELOPERS TO GETTING UP AND RUNNING WITH NODE.JS, EXPRESS, JADE, AND MONGODBhtml

第1步 - 環境安裝java

請直接移步Node.js官網,以下圖所示，直接點擊最新版下載並進行安裝。
node

Node.js安裝完畢後，打開終端，在終端分別輸入以下命令，檢測是否安裝成功。git

Last login: Tue Jun 27 09:19:38 on console
liyuechun:~ yuechunli$ node -v
v8.1.3
liyuechun:~ yuechunli$ npm -v
5.0.3
liyuechun:~ yuechunli$

若是可以正確顯示node和npm的版本，說明Node.js安裝成功。程序員

第2步 - 安裝Expressgithub

Last login: Mon Jul 10 11:14:16 on ttys001
liyuechun:~ yuechunli$ npm install -g express
+ express@4.15.3
added 42 packages in 7.337s
liyuechun:~ yuechunli$

第3步 - 建立一個Express項目web

咱們準備使用Express和Ejs，這不是用來作CSS預處理的。咱們會手寫一些CSS。咱們要用Ejs或者其它的模板引擎來處理Node和Express的數據。若是你會HTML的話，Ejs並不難。只要記住你須要集中精神，不然很容易出錯。ajax

liyuechun:Desktop yuechunli$ pwd
/Users/liyuechun/Desktop
liyuechun:Desktop yuechunli$ mkdir 60MINUTES
liyuechun:Desktop yuechunli$ cd 60MINUTES/
bogon:60MINUTES yuechunli$ express -e nodetest1

  warning: option `--ejs' has been renamed to `--view=ejs'


   create : nodetest1
   create : nodetest1/package.json
   create : nodetest1/app.js
   create : nodetest1/public
   create : nodetest1/views
   create : nodetest1/views/index.ejs
   create : nodetest1/views/error.ejs
   create : nodetest1/routes
   create : nodetest1/routes/index.js
   create : nodetest1/routes/users.js
   create : nodetest1/bin
   create : nodetest1/bin/www
   create : nodetest1/public/javascripts
   create : nodetest1/public/stylesheets
   create : nodetest1/public/stylesheets/style.css

   install dependencies:
     $ cd nodetest1 && npm install

   run the app:
     $ DEBUG=nodetest1:* npm start

   create : nodetest1/public/images
bogon:60MINUTES yuechunli$

VSCode打開，項目結構以下：

第4步 - 編輯依賴項

好了，咱們如今有一些基本項目結構，可是還沒完。你會注意到express的安裝過程在你的nodetest1目錄裏建立了一個叫package.json的文件，用文本編輯器打開這個文件，它應該是長這樣的:

{
  "name": "nodetest1",
  "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",
    "ejs": "~2.5.6",
    "express": "~4.15.2",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2"
  }
}

這是一個標準的JSON格式文件，代表了咱們應用的依賴。咱們須要添加一點東西。好比對mongodb和Monk的調用。把dependencies部分改爲這樣：

{
  "name": "nodetest1",
  "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",
    "ejs": "~2.5.6",
    "express": "~4.15.2",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2",
    "mongodb": "*",
    "monk": "*"
  }
}

第5步 – 安裝依賴

如今咱們定義好了項目的依賴項。*號會告訴NPM「安裝最新版本」。回到命令行窗口，進入nodetest1目錄，輸入：

bogon:nodetest1 yuechunli$ ls
app.js          package.json    routes
bin             public          views
bogon:nodetest1 yuechunli$ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
added 80 packages in 4.563s
bogon:nodetest1 yuechunli$ npm start

> nodetest1@0.0.0 start /Users/liyuechun/Desktop/60MINUTES/nodetest1
> node ./bin/www

Express server listening on port 3000...
GET / 200 13.288 ms - 207
GET /stylesheets/style.css 200 3.295 ms - 111
GET /favicon.ico 404 1.757 ms - 1136

瀏覽器輸入http://127.0.0.1:3000,效果圖以下：

第2部分 – 好了，咱們來寫「Hello, World!」吧

查閱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');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

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

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

console.log("Express server listening on port 3000...");

module.exports = app;

app.js中添加代碼

如今，咱們寫點有用的。咱們不會直接在咱們的index頁面裏寫「Hello World!」，咱們借這個機會學習一下如何使用route路由，同時學習一下Ejs引擎是如何工做的。在上面的app.js文件中添加以下兩行代碼：

建立helloworld.js文件

內容以下：

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

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

module.exports = router;

建立helloworld.ejs文件

內容以下：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
  </body>
</html>

運行程序
npm start啓動服務器,而後在瀏覽器打開http://localhost:3000/helloworld,應該能看到這個漂亮的界面了：

ejs⚠️去除

如上圖所示，在VSCode中使用ejs代碼會出現語法不識別的問題，啓動VSCode，經過快捷鍵⌘+P快速打開窗口，將以下代碼拷貝粘貼到裏面，回車安裝插件，而後重啓便可。

ext install ejs-language-support

EJS Language Support

掃碼申請加入全棧部落

第3部分 – 建立數據庫並讀取數據

第1步 - 更新HomeBrew

Last login: Wed Jul 12 09:27:06 on ttys000
liyuechun:~ yuechunli$ brew update
Updated 1 tap (homebrew/core).
==> Updated Formulae
radare2

第2步 – 安裝Mongodb

liyuechun:~ yuechunli$ brew install mongodb
==> Downloading https://homebrew.bintray.com/bottles/mongodb-3.4.6.sierra.bottle
Already downloaded: /Users/liyuechun/Library/Caches/Homebrew/mongodb-3.4.6.sierra.bottle.tar.gz
==> Pouring mongodb-3.4.6.sierra.bottle.tar.gz
==> Using the sandbox
==> Caveats
To have launchd start mongodb now and restart at login:
  brew services start mongodb
Or, if you don't want/need a background service you can just run:
  mongod --config /usr/local/etc/mongod.conf
==> Summary
?  /usr/local/Cellar/mongodb/3.4.6: 18 files, 266.9MB

第3步 - 配置環境環境變量

liyuechun:~ yuechunli$ echo 'export PATH="/usr/local/opt/openssl/bin:$PATH"' >> ~/.bash_profile

第4步 - 建立數據庫路徑

liyuechun:~ yuechunli$ mkdir -p /data/db

第5步 - 啓動MongoDb（安裝成功後命令行有提示）

liyuechun:~ yuechunli$ mongod --config /usr/local/etc/mongod.conf

第6步 - 鏈接到mongo

Last login: Wed Jul 12 11:00:21 on ttys000
liyuechun:~ yuechunli$ mongo
MongoDB shell version v3.4.6
connecting to: mongodb://127.0.0.1:27017
MongoDB server version: 3.4.6
> 1+1
2
>

第7步 - 瀏覽器訪問http://127.0.0.1:27017/

第8步 - 建立數據庫

use nodetest1這個命令，只有咱們插入數據時，纔會真正建立數據庫。

Last login: Wed Jul 12 11:35:52 on ttys001
liyuechun:~ yuechunli$ mongo
MongoDB shell version v3.4.6
connecting to: mongodb://127.0.0.1:27017
MongoDB server version: 3.4.6
> use nodetest1
switched to db nodetest1
>

第9步 - 添加一些數據

我最喜歡的MongoDB的特性就是它使用JSON做爲數據結構，這就意味着咱們對此很是的熟悉。若是你不熟悉JSON，先去讀點相關資料吧，這超出了本教程的範圍。

咱們添加一些數據到collection中。在這個教程裏，咱們只有一個簡單的數據庫，username和email兩個字段。咱們的數據看起來是這個樣子的：

{
    "_id" : 1234,
    "username" : "liyuechun",
    "email" : "liyuechun@cldy.org"
}

你能夠建立你本身的_id字段的值，不過我以爲最好仍是讓mongo來作這件事。它會爲每一條記錄建立一個惟一的值。咱們看看它是怎麼工做的。在mongo的窗口中，輸入：

> db.usercollection.insert({"username" : "liyuechun", "email" : "liyuechun@cldy.org" })
WriteResult({ "nInserted" : 1 })
>

重要提示：db就是咱們上面建立的nodetest1數據庫，就是咱們的collection，至關於一張數據表。注意咱們不須要提早建立這個collection，它會在第一次使用的時候自動建立。好了，按下回車。

第10步 - 數據庫查詢

> db.usercollection.find().pretty()
{
    "_id" : ObjectId("59659d8fbd3dbae3899471c2"),
    "username" : "liyuechun",
    "email" : "liyuechun@cldy.org"
}
>

固然，你獲得ObjectID應該是不同的，mongo會自動生成一個。若是你之前使用過JSON接口的服務，如今是否是會以爲，哇，在web裏調用這個應該很簡單吧！嗯，你說對了。

提示：做爲正式服務，你應該不但願全部的數據都存在最頂層。關於mongodb數據結構的設計，多看看Google吧。

如今咱們有了一條數據，咱們多添加點吧。

> db.usercollection.insert(
[
    {"username":"yanan","email":"yanan@cldy.org"},
    {"username":"fujinliang","email":"fujinliang@cldy.org"},
    {"username":"shenpingping","email":"shenpingping@cldy.org"}
])
BulkWriteResult({
    "writeErrors" : [ ],
    "writeConcernErrors" : [ ],
    "nInserted" : 3,
    "nUpserted" : 0,
    "nMatched" : 0,
    "nModified" : 0,
    "nRemoved" : 0,
    "upserted" : [ ]
})
> db.usercollection.find().pretty()
{
    "_id" : ObjectId("59659d8fbd3dbae3899471c2"),
    "username" : "liyuechun",
    "email" : "liyuechun@cldy.org"
}
{
    "_id" : ObjectId("59659ffebd3dbae3899471c3"),
    "username" : "yanan",
    "email" : "yanan@cldy.org"
}
{
    "_id" : ObjectId("59659ffebd3dbae3899471c4"),
    "username" : "fujinliang",
    "email" : "fujinliang@cldy.org"
}
{
    "_id" : ObjectId("59659ffebd3dbae3899471c5"),
    "username" : "shenpingping",
    "email" : "shenpingping@cldy.org"
}
>

第11步 – 把mongo鏈接到node

如今咱們來創建一個頁面，把數據庫裏的記錄顯示成一個漂亮的表格。這是咱們準備生成的HTML內容：

<ul>
    <li><a href="mailto:liyuechun@cldy.org">liyuechun</a></li>
    <li><a href="mailto:yanan@testdomain.com">yanan</a></li>
    <li><a href="mailto:fujinliang@testdomain.com">fujinliang</a></li>
    <li><a href="mailto:shenpingping@testdomain.com">shenpingping</a></li>
</ul>

打開nodetest1項目的app.js，如今接着往下看：

var index = require('./routes/index');
var users = require('./routes/users');
var helloworld = require('./routes/helloworld');

下面添加一行：

var userlist = require('./routes/userlist');

繼續，找到下面代碼的位置：

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

下面添加一行：

app.use('/userlist', userlist);

第12步 – 建立 userlist.js 路由和 userlist.ejs 視圖文件

以下圖所示：

userlist.js內容以下：

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

/**
 * 這幾行會告訴app咱們須要鏈接MongoDB，咱們用Monk來負責這個鏈接，咱們數據庫位置是localhost:27017/nodetest1。注意27017是mongodb的默認端口，若是由於某些緣由你修改了端口，記錄這裏也要跟着改。
 */
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('127.0.0.1:27017/nodetest1');

/* GET userlist page. */
router.get('/', function (req, res, next) {
    var collection = db.get('usercollection');
    collection.find({}, {}, function (e, docs) {
        res.render('userlist', {"userlist": docs});
    });
});

module.exports = router;

userlist.ejs內容以下：

<!DOCTYPE html>
<html>

<head>
    <title>USERLIST</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>
    <h1>Userlist</h1>
    <ul>

<%
for(var i in userlist){
%>
            <li>
                <a href="mailto:<%=userlist[i].email%>">
                    <%=userlist[i].username%>
                </a>
            </li>
            <% } %>
    </ul>
</body>

</html>

保存文件，重啓node服務器。但願你還記得怎麼重啓。打開瀏覽器，訪問http://localhost:3000/userlist，你應該能看到這樣的界面：

如今你從數據庫裏取到了數據而且顯示到了網頁上。太棒了。

第4部分 – 終於到了：往數據庫裏寫入數據

往數據庫裏寫入數據也不是很困難。咱們須要一個route來接收POST請求而不是GET。咱們可使用Ajax，這是我最經常使用的方式。不過那可能須要另一篇教程了，因此這裏咱們仍是用最原始的post手段。固然，要記住，若是你願意，用ajax並不難。

第1步 – 創建你的數據輸入頁面

這裏咱們須要快一點：創建兩個醜陋的不加樣式的文本框和一個提交按鈕。像上面同樣，咱們從app.use()開始。打開app.js找到下面的代碼：

var index = require('./routes/index');
var users = require('./routes/users');
var helloworld = require('./routes/helloworld');
var userlist = require('./routes/userlist');

在下面加上：

var newuser = require('./routes/newuser');

再找到下面的代碼：

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

在下面加上：

app.use('/newuser', newuser);

在routs文件夾中建立newuser.js文件，內容以下：

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

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.render('newuser', { title: 'Add New User' });
});

module.exports = router;

在views文件夾中建立newuser.ejs文件，內容以下：

<!DOCTYPE html>
<html>

<head>
    <title>Add User</title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
</head>

<body>
    <h1>
        <%= title %>
    </h1>
    <form name="adduser" method="post" action="/adduser">
        <input type="text" placeholder="username" name="username" />
        <input type="text" placeholder="useremail" name="useremail" />
        <input type="submit" value="submit" />
    </form>
</body>

</html>

這裏咱們建立一個form，method是post，action是adducer。簡單明瞭。下面咱們定義了兩個輸入框和一個提交按鈕。啓動服務器，瀏覽器打開http://localhost:3000/newuser效果圖以下：

點提交按鈕，會出現以下錯誤，咱們來修正錯誤。

Not Found

404

Error: Not Found
    at /Users/liyuechun/Desktop/60MINUTES/nodetest1/app.js:36:13
    at Layer.handle [as handle_request] (/Users/liyuechun/Desktop/60MINUTES/nodetest1/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/liyuechun/Desktop/60MINUTES/nodetest1/node_modules/express/lib/router/index.js:317:13)
    at /Users/liyuechun/Desktop/60MINUTES/nodetest1/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/liyuechun/Desktop/60MINUTES/nodetest1/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/liyuechun/Desktop/60MINUTES/nodetest1/node_modules/express/lib/router/index.js:275:10)
    at /Users/liyuechun/Desktop/60MINUTES/nodetest1/node_modules/express/lib/router/index.js:635:15
    at next (/Users/liyuechun/Desktop/60MINUTES/nodetest1/node_modules/express/lib/router/index.js:260:14)
    at Function.handle (/Users/liyuechun/Desktop/60MINUTES/nodetest1/node_modules/express/lib/router/index.js:174:3)
    at router (/Users/liyuechun/Desktop/60MINUTES/nodetest1/node_modules/express/lib/router/index.js:47:12)

第2步 – 建立你的數據庫處理函數

打開app.js文件，找到下面的代碼：

var index = require('./routes/index');
var users = require('./routes/users');
var helloworld = require('./routes/helloworld');
var userlist = require('./routes/userlist');
var newuser = require('./routes/newuser');

在下面添加一行：

var adduser = require('./routes/adduser');

再次找到下面的代碼：

app.use('/', index);
app.use('/users', users);
app.use('/helloworld', helloworld);
app.use('/userlist', userlist);
app.use('/newuser', newuser);

在下面添加一行：

app.use('/adduser', adduser);

接下來在routes文件夾下面建立adduser.js文件，內容以下：

var express = require('express');
var router = express.Router();
// New Code
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/nodetest1');

/* POST userlist page. */
router.post('/', function (req, res, next) {
    // Get our form values. These rely on the "name" attributes
    var userName = req.body.username;
    var userEmail = req.body.useremail;

    // Set our collection
    var collection = db.get('usercollection');

    // Submit to the DB
    collection.insert({
        "username": userName,
        "email": userEmail
    }, function (err, doc) {
        if (err) {
            // If it failed, return error
            res.send("There was a problem adding the information to the database.");
        } else {
            // If it worked, set the header so the address bar doesn't still say /adduser
            res.location("userlist");
            // And forward to success page
            res.redirect("userlist");
        }
    });

});

module.exports = router;

上面的代碼是經過post請求拿到表單中的username和email，而後重定向到userlist頁面。

啓動服務器，在瀏覽器中打開http://localhost:3000/newuser，效果以下所示：

在裏面輸入用戶名和郵箱，就會跳轉到userlist頁面，以下面所示：

如今咱們正式的完成了使用Node.js，Exress，Ejs讀取和寫入Mongodb數據庫，咱們已是牛X的程序員了。

恭喜你，真的。若是你認真的看完了這篇教程，而且很認真的學習而不僅是複製代碼，你應該對routes, views，讀數據，寫入數據有了完整的概念。這是你用來開發任何其它完整的Web網站所須要的一切知識點！無論你怎麼想，我以爲這真挺酷的。

源碼下載