node.js + mongodb 做項目的詳解(一)


想寫博客很長時間了,因為一直身患懶癌,所以一直拖到了現在。markdown的語法也是剛剛學,試驗一下效果
好了不說了,直接上干貨了。
------------------------------------------------------------------------------------------------

1.准備工作

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

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

安裝最新版的express之后,需要在安裝:express-generator //express命令工具,很多初學者都會遇到這個問題(當然我也是)
mongodb的安裝下面會講解到。


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

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

>express -e chihuo

-e表示ejs模板引擎,不寫 -e 默認的創建jade模板引擎


然后在輸入:
cd chihuo //進入到你創建的項目目錄
npm install //讀取根目錄中的package.json文件然后安裝項目所依賴的包

然后通過cmd命令行 cd 到 chihuo 的目錄下
>node app

這樣就啟動項目了。

提示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;

 


目前就講解這么多,之后的博客我會講解最新版本的session問題還有前台頁面中應用到bootstrap等等,不斷的把項目完善。

github地址:https://github.com/songtanjichuan/chihuo_0.0.1.git

mongoose參考地址:http://www.hubwiz.com/course/543b2e7788dba02718b5a4bd

如果覺得還不錯,求推薦。轉載的話,請加原文鏈接。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM