node.js + mongodb 作項目的詳解（一）

時間 2019-12-12

標籤 node.js node mongodb 項目詳解欄目 Node.js 简体版

原文原文鏈接

想寫博客很長時間了，由於一直身患懶癌，因此一直拖到了如今。markdown的語法也是剛剛學，試驗一下效果
好了不說了，直接上乾貨了。
------------------------------------------------------------------------------------------------css

1.準備工做

Nodejs、express和mongodb的安裝(這裏安裝的都是最新版的)html

### 安裝： ###
Nodejs的安裝沒什麼說的。不過安裝完以後測試是否成功用過原來版本的同窗可能會有一些問題。
原來的版本是：$ node -v 新版不在支持$,直接在命令行中：node -vnode

安裝最新版的express以後，須要在安裝：express-generator //express命令工具，不少初學者都會遇到這個問題(固然我也是)
mongodb的安裝下面會講解到。git

用express建立一個項目的框架。

這個我建立一個名字叫chihou的網站，用的模板引擎是ejs。github

>express -e chihuo mongodb

-e表示ejs模板引擎，不寫 -e 默認的建立jade模板引擎數據庫

而後在輸入：
cd chihuo //進入到你建立的項目目錄
npm install //讀取根目錄中的package.json文件而後安裝項目所依賴的包express

而後經過cmd命令行 cd 到 chihuo 的目錄下
>node appnpm

這樣就啓動項目了。json

提示1：若是不能啓動項目：看看app.js文件中沒有監聽端口。若是沒有,
在 module.exports = app; 語句以前添加app.listen(3000);

提示2：Ctrl + c 終止運行

而後咱們能夠在瀏覽器地址欄裏敲入 http://127.0.0.1:3000/ 或者 http://localhost:3000
這就是你的第一個express建立的node app。

到這裏你就完成了項目的重要的一步。

以後的講解咱們從目錄開始

--node_modules 項目中依賴的包
--public 公共資源放的目錄
--routes 學名路由，裏面放着一些路由文件
--views 放着就是頁面文件了
--app.js 項目的入口文件。固然你也能夠改爲其餘的名字。

2.如今基本的結果已經有了，以後就是建立數據庫了

mongodb的安裝

這裏只介紹window的安裝
在官網上下載zip，這個我裝在D盤的mongodb目錄下

1.在D盤中建立mongodb文件夾而後把下載的包解壓後把其中的bin文件夾拷貝到建立的mongodb文件夾中，
2.而後在mongodb文件夾中建立一個data文件夾，再在data文件夾中建立db文件夾
3.打開CMD命令行
>d:
>cd mongodb\bin
>mongod -dbpath D:\mongodb\data\db
4.在打開一個CMD命令行：
>d:
>cd mongodb\bin
>mongo
5.這樣就能夠用了。

接着就設計咱們的數據庫了

在剛纔的打開的mongodb數據庫中輸入：
>use chihuo \\建立一個叫chihuo的數據庫
>db.createCollection("users") \\建立一個集合
>db.users.insert({"name":"admin","password":"111"}) \\給users集合添加一個文檔。
>db.users.find() \\查詢你添加的文檔

再接着就是在項目中鏈接剛纔建立的數據庫了

在項目根目錄下建立一個的文件夾database，而後在建立一個
db.js

1 var mongoose = require('mongoose');
2 var db = mongoose.connect('mongodb://localhost/chihuo');//；鏈接數據庫
3 var Schema = mongoose.Schema; // 建立模型
4 var userScheMa = new Schema({
5 name: String,
6 password: String
7 }); // 定義了一個新的模型，可是此模式還未和users集合有關聯
8 exports.user = db.model('users', userScheMa); // 與users集合關聯

3.接着在views文件夾建立視圖文件了

咱們上面用express建立的項目視圖文件是ejs後綴名，咱們通常習慣使用html後綴名。
那麼咱們怎麼讓他識別html的視圖文件呢？

在app.js文件中找到
>app.set('view engine', 'ejs');
把它替換成：
>app.set( 'view engine', 'html' );
再用app.engine()方法註冊模板引擎的後綴名。代碼：
>app.engine('.html',require('ejs').__express);//裏面的下劃線是兩個

而後咱們建立一個login.html(登錄頁面),index.html(原來有，改一下後綴名就行)，ucenter(登錄以後的頁面)；

 1 login.html
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5   <title><%= title %></title>
 6   <link rel='stylesheet' href='/stylesheets/style.css' />
 7 </head>
 8 <body>
 9   <h1>Hello World</h1>
10   <p>Welcome to <%= title %></p>
11   <form action="ucenter" method="post">
12     <p>
13       <span>name:</span>
14       <br>
15       <input id="name" name="name" type="text">
16     </p>
17     <p>
18       <span>password:</span>
19       <br>
20       <input id="password" name="password" type="password">
21     </p>
22     <p><input type="submit" value="submit"></p>
23   </form>
24 </body>
25 </html>

 1 index.html
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5   <title><%= title %></title>
 6   <link rel='stylesheet' href='/stylesheets/style.css' />
 7 </head>
 8 <body>
 9   <h1>Hello World</h1>
10   <p>Welcome to <%= title %></p>
11   <p><a href="login">登錄</a></p>
12 </body>
13 </html>

ucenter.html
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
  <h1>Hello World</h1>
  <p>Welcome to <%= title %></p>
  <p>你已經登錄</p>
</body>
</html>

4.最後就是路由的控制了，在routes文件中的index.js

 1 var express = require('express');
 2 var router = express.Router();
 3 var user = require('../database/db').user;
 4 
 5 
 6 /* GET home page. */
 7 router.get('/', function(req, res) {
 8 　　res.render('index', { title: 'index' });
 9 });
10 
11 /*login*/
12 router.get('/login', function(req, res) {
13 　　res.render('login', { title: 'login' });
14 });
15 
16 /*ucenter*/
17 router.post('/ucenter', function(req, res) {
18 　　var query = {name: req.body.name, password: req.body.password};
19 　　(function(){
20 　　　　user.count(query, function(err, doc){
21 　　　　　　if(doc == 1){
22 　　　　　　　　console.log(query.name + ": 登錄成功 " + new Date());
23 　　　　　　　　res.render('ucenter', { user:doc });
24 　　　　　　}else{
25 　　　　　　　　console.log(query.name + ": 登錄失敗 " + new Date());
26 　　　　　　　　res.redirect('/');
27 　　　　　　}
28 　　　　});
29 　　})(query);
30 });
31 
32 module.exports = router;