JS服務端系列-nodejs+express+ejs+mongodb的數據顯示

時間 2019-11-05

標籤服務系列 nodejs+express+ejs+mongodb nodejs express ejs mongodb 數據顯示欄目 JavaScript 简体版

原文原文鏈接

1.咱們下載好mongodb數據庫，這個程序我放在nodejs的目錄下了，css

個人nodejs是安裝在d: nodejs目錄下，看圖能夠看到個人存放位置，這個隨便放置html

2.打開cmd窗口，轉到mongodb的bin目錄下，node

執行命令 mongod -dbpath "d:/nodejs/dbme" 指定建立的數據庫存放位置，也是在d：nodejs下git

第二條紅線下面的命令，成功設置數據庫路徑github

3.cmd再次打開一個命令行窗口，轉到mongodb的bin下，web

執行 start mongomongodb

會彈出下面窗口數據庫

4.上面的黑窗口打開後，咱們就進入能夠對mongodb的操做界面了，操做截圖express

建立數據庫 news npm

建立集合（數據表）nows 插入數據

咱們建立了news數據庫，數據庫下建立了nows集合，集合下有三個字段，id默認生成字段，其他兩個是本身添加

咱們打開 nodejs下的 dbme目錄，會發現建立的news已經在目錄下了

遇到MongoDB忽然沒法啓動，第一反應是刪除mongod.lock。這個文件在MongoDB的數據庫目錄下，當前的這個文件就是在d:nodejs/dume下

5.上面算是基礎處理，咱們建立好了要顯示在網頁中的數據。咱們要作的就是經過nodejs+express+ejs去顯示出mongodb數據庫集合的內容，至於如何鏈接數據庫，獲得集合內容咱們摸索而來（nodejs都是模塊作的，猜到須要第三方模塊去支持了）

6.咱們用express建立項目後，打開會看見以下內容

存放數據庫數據和數據庫程序就不用管了，咱們關注的就是appdu這個項目文件夾，咱們項目地址

瀏覽器輸入 http://localhost:3000/ 看見express這單詞表示項目成功建立，之後才能夠繼續進行

6.打開packagejson文件，下面的就是 dependencies內容，自動生成了，

"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"ejs": "~2.3.3",
"express": "~4.13.1",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0"
}

能夠看見已安裝的依賴，依賴模塊的名稱還有版本，既然express建立就會依賴這些模塊，這些必然是web開發必不可少的，咱們看看每一個模塊有什麼功能

http://www.expressjs.com.cn/migrating-4.html#overview

上面是否是必須我不關心，我如今就是要鏈接mongodb數據庫，鏈接數據庫能夠用這個模塊

"mongodb": "*",
"monk": "*"

鏈接數據庫mongodb的模塊，咱們添加到package中，執行npm install 安裝

pachage的dependencies部分代碼以下

"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"ejs": "~2.3.3",
"express": "~4.13.1",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0",
"mongoose":"~*",
"mongodb":"*",
"monk":"*"
}

package.json添加的新依賴

7.app.js請求到依賴

加入代碼 https://github.com/Automattic/monk

var mongo = require('mongodb');

var monk = require('monk');

var db = monk('localhost:27017/news'); 數據庫名字叫news 數據庫位置是本地，mongodb的端口號是 27017

8.咱們在index.js代碼修改以下

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


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

module.exports = router;

裏面代碼的意思就是，

1.請求monk模塊，運用monk方法鏈接到指定數據庫

2.打開db（news數據庫），獲取集合（noew），集合進行輸入，回調函數中的docs存放了返回的記錄，賦值給 ejs模板中index頁面的userlist變量

index.ejs修改以下

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

<ul>
<% for(i=0; i< userlist.length; i++) {%>
<li><a><%= userlist[i].title %></a></li>
<% } %>
</ul>
</body>
</html>

上面就是運動ejs提供的路徑進行再html裏面的數據綁出

對比mongodb存放的數據，和頁面顯示的數據圖

瀏覽器地址輸入localhost:3000

查看mongo中news數據庫下nows集合的數據

頁面控制輸出的是title字段，徹底正確，ok了！

1.安裝mongodb

2.建立數據庫和集合

3.運用依賴monk鏈接到數據

4.indes.js路由控制，把數據顯示在index.ejs中

5.瀏覽器查看

咱們算是完成了最基礎的一步，web開發固然還有不少功能：上傳，session，cookie等，這些也是須要第三方依賴的，要是什麼，就是摸索了

一套nodejs安裝