資訊專欄INFORMATION COLUMN
摘要：安裝完畢后，打開終端，在終端分別輸入如下命令，檢測是否安裝成功。號會告訴安裝最新版本。它會為每一條記錄創(chuàng)建一個唯一的值。注意我們不需要提前創(chuàng)建這個，它會在第一次使用的時候自動創(chuàng)建。我們可以使用，這是我最常用的方式。
60分鐘學(xué)會使用Node.js+Express+Ejs+mongoDB
本文出自從零到壹全棧部落
(Node+Vue+微信公眾號開發(fā))企業(yè)級產(chǎn)品全棧開發(fā)速成周末班首期班(10.28號正式開班，歡迎搶座)
第1部分 – 15分鐘安裝本文改編自THE DEAD-SIMPLE STEP-BY-STEP GUIDE FOR FRONT-END DEVELOPERS TO GETTING UP AND RUNNING WITH NODE.JS, EXPRESS, JADE, AND MONGODB
第1步 - 環(huán)境安裝
請直接移步Node.js官網(wǎng),如下圖所示，直接點擊最新版下載并進行安裝。
Node.js安裝完畢后，打開終端，在終端分別輸入如下命令，檢測是否安裝成功。
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步 - 安裝Express
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步 - 創(chuàng)建一個Express項目
我們準備使用Express和Ejs，這不是用來做CSS預(yù)處理的。我們會手寫一些CSS。我們要用Ejs或者其它的模板引擎來處理Node和Express的數(shù)據(jù)。如果你會HTML的話，Ejs并不難。只要記住你需要集中精神，否則很容易出錯。
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打開，項目結(jié)構(gòu)如下：
第4步 - 編輯依賴項
好了，我們現(xiàn)在有一些基本項目結(jié)構(gòu)，但是還沒完。你會注意到express的安裝過程在你的nodetest1目錄里創(chuàng)建了一個叫package.json的文件，用文本編輯器打開這個文件，它應(yīng)該是長這樣的:
{
"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格式文件，表明了我們應(yīng)用的依賴。我們需要添加一點東西。比如對mongodb和Monk的調(diào)用。把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步 – 安裝依賴
現(xiàn)在我們定義好了項目的依賴項。*號會告訴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中添加代碼
現(xiàn)在，我們寫點有用的。我們不會直接在我們的index頁面里寫“Hello World!”，我們借這個機會學(xué)習(xí)一下如何使用route路由，同時學(xué)習(xí)一下Ejs引擎是如何工作的。在上面的app.js文件中添加如下兩行代碼：
創(chuàng)建helloworld.js文件
內(nèi)容如下：
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;
創(chuàng)建helloworld.ejs文件
內(nèi)容如下：
<%= title %>
<%= title %>
運行程序
npm start啟動服務(wù)器,然后在瀏覽器打開http://localhost:3000/helloworld,應(yīng)該能看到這個漂亮的界面了：
ejs??去除
如上圖所示，在VSCode中使用ejs代碼會出現(xiàn)語法不識別的問題，啟動VSCode，通過快捷鍵?+P快速打開窗口，將如下代碼拷貝粘貼到里面，回車安裝插件，然后重啟即可。
ext install ejs-language-support
EJS Language Support
| 掃碼申請加入全棧部落 |
|---|
第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步 - 配置環(huán)境環(huán)境變量
liyuechun:~ yuechunli$ echo "export PATH="/usr/local/opt/openssl/bin:$PATH"" >> ~/.bash_profile
第4步 - 創(chuàng)建數(shù)據(jù)庫路徑
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步 - 創(chuàng)建數(shù)據(jù)庫
use nodetest1這個命令，只有我們插入數(shù)據(jù)時，才會真正創(chuàng)建數(shù)據(jù)庫。
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步 - 添加一些數(shù)據(jù)
我最喜歡的MongoDB的特性就是它使用JSON作為數(shù)據(jù)結(jié)構(gòu)，這就意味著我們對此非常的熟悉。如果你不熟悉JSON，先去讀點相關(guān)資料吧，這超出了本教程的范圍。
我們添加一些數(shù)據(jù)到collection中。在這個教程里，我們只有一個簡單的數(shù)據(jù)庫，username和email兩個字段。我們的數(shù)據(jù)看起來是這個樣子的：
{
"_id" : 1234,
"username" : "liyuechun",
"email" : "liyuechun@cldy.org"
}
你可以創(chuàng)建你自己的_id字段的值，不過我覺得最好還是讓mongo來做這件事。它會為每一條記錄創(chuàng)建一個唯一的值。我們看看它是怎么工作的。在mongo的窗口中，輸入：
> db.usercollection.insert({"username" : "liyuechun", "email" : "liyuechun@cldy.org" })
WriteResult({ "nInserted" : 1 })
>
重要提示：db就是我們上面創(chuàng)建的nodetest1數(shù)據(jù)庫，就是我們的collection，相當于一張數(shù)據(jù)表。注意我們不需要提前創(chuàng)建這個collection，它會在第一次使用的時候自動創(chuàng)建。好了，按下回車。
第10步 - 數(shù)據(jù)庫查詢
> db.usercollection.find().pretty()
{
"_id" : ObjectId("59659d8fbd3dbae3899471c2"),
"username" : "liyuechun",
"email" : "liyuechun@cldy.org"
}
>
當然，你得到ObjectID應(yīng)該是不一樣的，mongo會自動生成一個。如果你以前使用過JSON接口的服務(wù)，現(xiàn)在是不是會覺得，哇，在web里調(diào)用這個應(yīng)該很簡單吧！嗯，你說對了。
提示：作為正式服務(wù)，你應(yīng)該不希望所有的數(shù)據(jù)都存在最頂層。關(guān)于mongodb數(shù)據(jù)結(jié)構(gòu)的設(shè)計，多看看Google吧。
現(xiàn)在我們有了一條數(shù)據(jù)，我們多添加點吧。
> 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
現(xiàn)在我們來建立一個頁面，把數(shù)據(jù)庫里的記錄顯示成一個漂亮的表格。這是我們準備生成的HTML內(nèi)容：
打開nodetest1項目的app.js，現(xiàn)在接著往下看：
var index = require("./routes/index");
var users = require("./routes/users");
var helloworld = require("./routes/helloworld");
下面添加一行：
var userlist = require("./routes/userlist");
繼續(xù)，找到下面代碼的位置：
app.use("/", index);
app.use("/users", users);
app.use("/helloworld", helloworld);
下面添加一行：
app.use("/userlist", userlist);
第12步 – 創(chuàng)建 userlist.js 路由和 userlist.ejs 視圖文件
如下圖所示：
userlist.js內(nèi)容如下：
var express = require("express");
var router = express.Router();
/**
* 這幾行會告訴app我們需要連接MongoDB，我們用Monk來負責(zé)這個連接，我們數(shù)據(jù)庫位置是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內(nèi)容如下：
USERLIST
Userlist
保存文件，重啟node服務(wù)器。希望你還記得怎么重啟。打開瀏覽器，訪問http://localhost:3000/userlist，你應(yīng)該能看到這樣的界面：
現(xiàn)在你從數(shù)據(jù)庫里取到了數(shù)據(jù)并且顯示到了網(wǎng)頁上。太棒了。
第4部分 – 終于到了：往數(shù)據(jù)庫里寫入數(shù)據(jù)往數(shù)據(jù)庫里寫入數(shù)據(jù)也不是很困難。我們需要一個route來接收POST請求而不是GET。我們可以使用Ajax，這是我最常用的方式。不過那可能需要另外一篇教程了，所以這里我們還是用最原始的post手段。當然，要記住，如果你愿意，用ajax并不難。
第1步 – 建立你的數(shù)據(jù)輸入頁面
這里我們需要快一點：建立兩個丑陋的不加樣式的文本框和一個提交按鈕。像上面一樣，我們從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文件夾中創(chuàng)建newuser.js文件，內(nèi)容如下：
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文件夾中創(chuàng)建newuser.ejs文件，內(nèi)容如下：
Add User
<%= title %>
這里我們創(chuàng)建一個form，method是post，action是adducer。簡單明了。下面我們定義了兩個輸入框和一個提交按鈕。啟動服務(wù)器，瀏覽器打開http://localhost:3000/newuser效果圖如下：
點提交按鈕，會出現(xiàn)如下錯誤，我們來修正錯誤。
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步 – 創(chuàng)建你的數(shù)據(jù)庫處理函數(shù)
打開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文件夾下面創(chuàng)建adduser.js文件，內(nèi)容如下：
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頁面。
啟動服務(wù)器，在瀏覽器中打開http://localhost:3000/newuser，效果如下所示：
在里面輸入用戶名和郵箱，就會跳轉(zhuǎn)到userlist頁面，如下面所示：
現(xiàn)在我們正式的完成了使用Node.js，Exress，Ejs讀取和寫入Mongodb數(shù)據(jù)庫，我們已經(jīng)是牛X的程序員了。
恭喜你，真的。如果你認真的看完了這篇教程，并且很認真的學(xué)習(xí)而不只是復(fù)制代碼，你應(yīng)該對routes, views，讀數(shù)據(jù)，寫入數(shù)據(jù)有了完整的概念。這是你用來開發(fā)任何其它完整的Web網(wǎng)站所需要的一切知識點！不管你怎么想，我覺得這真挺酷的。
源碼下載
社群品牌：從零到壹全棧部落
定位：尋找共好，共同學(xué)習(xí)，持續(xù)輸出全棧技術(shù)社群
業(yè)界榮譽：IT界的邏輯思維
文化：輸出是最好的學(xué)習(xí)方式
官方公眾號：全棧部落
社群發(fā)起人：春哥(從零到壹創(chuàng)始人，交流微信：liyc1215)
技術(shù)交流社區(qū)：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書學(xué)習(xí)筆記
| 關(guān)注全棧部落官方公眾號，每晚十點接收系列原創(chuàng)技術(shù)推送 |
|---|
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/87110.html
摘要：一默認使用的模塊化方案，默認是的模塊化方案，兩者有本質(zhì)區(qū)別。的去尋找引入的依賴時，如果是自帶的模塊，比如文件模塊，只需要填寫即可。這是版本入口文件使用了兩個路由器路由，分別處理和請求邏輯。核心操作全部依賴模型對象來執(zhí)行。 一、Node.js默認使用commonJs的模塊化方案，TypeScript默認是ES6的模塊化方案，兩者有本質(zhì)區(qū)別。 1.Node.js的去尋找引入的依賴時，如果...
摘要：一默認使用的模塊化方案，默認是的模塊化方案，兩者有本質(zhì)區(qū)別。的去尋找引入的依賴時，如果是自帶的模塊，比如文件模塊，只需要填寫即可。這是版本入口文件使用了兩個路由器路由，分別處理和請求邏輯。核心操作全部依賴模型對象來執(zhí)行。 一、Node.js默認使用commonJs的模塊化方案，TypeScript默認是ES6的模塊化方案，兩者有本質(zhì)區(qū)別。 1.Node.js的去尋找引入的依賴時，如果...
摘要：一默認使用的模塊化方案，默認是的模塊化方案，兩者有本質(zhì)區(qū)別。的去尋找引入的依賴時，如果是自帶的模塊，比如文件模塊，只需要填寫即可。這是版本入口文件使用了兩個路由器路由，分別處理和請求邏輯。核心操作全部依賴模型對象來執(zhí)行。 一、Node.js默認使用commonJs的模塊化方案，TypeScript默認是ES6的模塊化方案，兩者有本質(zhì)區(qū)別。 1.Node.js的去尋找引入的依賴時，如果...
摘要：前言要做一個全沾的工程師，對于后端和數(shù)據(jù)庫來說，即使不認識也要見個面的?；玖私獾母拍罹秃?，主要是安裝上數(shù)據(jù)庫，并進行簡單的增刪操作。 前言：要做一個全沾的工程師，對于后端和數(shù)據(jù)庫來說，即使不認識也要見個面的。本文給的例子很簡單，也貼出來源碼，只要一步步下來，就可以跑起來啦~~~ 思考一個需求：做一個登錄頁面，自己搭建服務(wù)和數(shù)據(jù)庫，將用戶輸入的登錄信息保存到數(shù)據(jù)庫如何完成呢：首先選擇...
摘要：中文資料導(dǎo)航官網(wǎng)七牛鏡像深入淺出系列進階必讀中文文檔被誤解的編寫實戰(zhàn)系列熱門模塊排行榜，方便找出你想要的模塊多線程，真正的非阻塞淺析的類利用編寫異步多線程的實例中與的區(qū)別管道拒絕服務(wù)漏洞高級編程業(yè)界新聞看如何評價他們的首次嘗鮮程序員如何說服 node.js中文資料導(dǎo)航 Node.js HomePage Node官網(wǎng)七牛鏡像 Infoq深入淺出Node.js系列（進階必讀） Nod...
閱讀 1952·2021-09-28 09:36
閱讀 2519·2021-09-08 09:35
閱讀 3122·2019-08-30 15:53
閱讀 1608·2019-08-30 14:08
閱讀 727·2019-08-29 18:40
閱讀 2916·2019-08-29 13:57
閱讀 2757·2019-08-29 13:55
閱讀 747·2019-08-26 13:45
