這里,准備從零開始用nodejs實現一個微博系統。功能包括路由控制、頁面模板、數據庫訪問、用戶注冊、登錄、用戶會話等內容。
將會介紹Express框架、MVC設計模式、ejs模板引擎以及MongoDB數據庫的操作。
准備工作
使用http模塊,Express框架,
nodejs的抽象如此之差,把不該有的細節暴露給開發者。你可以用它做任何HTTP服務器能做的事情,不僅僅是做一個網站,甚至實現一個HTTP代理服務器都行。
Express是WEB開發框架。
實現:
為HTTP模塊提供了更高層的接口,
路由控制,
模板解析支持,
動態視圖,
用戶會話,
CSRF保護,
靜態文件服務,
錯誤控制器,
訪問日志,
緩存,
插件支持。
多數功能只是對HTTP協議中常用操作的封裝,更多的功能需要插件或者整合其他模塊來完成。
快速開發
安裝Express
在項目目錄下
npm install -g express-generator
express --help
建立工程
express -t ejs microblog 由於新版本沒有-t命令
1.如何在項目中安裝ejs模板引擎
在NodeJS指南中利用利用以下命令建立網站的基本結構:
express -t ejs microblog
運行這個命令后繼續運行
cd microblog && npm install(安裝項目的依賴屬性),
發現安裝的模板引擎是jade,而不是ejs。原因是現在的版本已經沒有-t這個命令了,改為
express -e microblog
運行完這個命令,繼續運行cd microblog && npm install,ejs模板引擎就安裝好了
但是express3以上的版本把layout默認給取消了,所以現在在views文件夾下並沒有生成layout.ejs。
2.安裝了ejs后,如何使用ejs的layout模板
安裝express-partials
在cmd中切換到項目目錄,運行
(1)npm install express-partials或者
(2)在 package.json 里面的 dependencies 添加 "express-partials": "*"。然后在項目目錄下運行 npm install 。
(3)然后在app.js 里面引用 express-partials,引用方法:
1.在path = require('path')后,添加引用 var partials = require('express-partials');
2.在 app.set('view engine', 'ejs')后,添加 app.use(partials());
3.增長端口,
app.listen(8100,function(){
console.log("Server Start!");
});
http://cnodejs.org/topic/515b009a6d38277306192e4e
啟動服務器
http://localhost:8100
工程的結構
package.json
js文件: app.js, routes/index.js
模板引擎ejs也有2個文件index.ejs, layout.ejs
style.css
路由控制
工作原理
瀏覽器會向服務器發送請求,
app.js有一行app.get('/',routes.index),規定路徑"/"的GET請求由routes.index函數處理。
最終視圖模板生成HTML頁面,返回給瀏覽器,
瀏覽器發現要獲取style.css會再次向服務器發起請求,app.use()配置了靜態文件服務器,找到文件,向客戶端返回信息。
MVC架構,瀏覽器發起請求,由路由控制器接受,根據不同的路徑定向到不同的控制器。
創建路由規則
app.get('/hello', routes.hello);
app.get是路由規則創建函數,接受2個參數,一個是請求的路徑,一個是回調函數。
路徑匹配
REST風格的路由規則
REST表征狀態轉移
GET app.get(path, callback);
POST app.post(path, callback);
PUT app.put(path, callback);
DELETE app.delete(path, callback);
控制權轉移
同一路徑綁定多個路由響應函數,
通過調用next(),會將路由控制權轉移給后面的規則。
模板引擎
什么是模板引擎
是一個從頁面模板根據一定的規則生成HTML的工具。
功能是將頁面模板和要顯示的數據結合起來生成HTML頁面。目前的主流還是由服務器運行模板引擎。
使用模板引擎
推薦使用ejs
app.js中設置了模板引擎和頁面模板的位置
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
調用模板routes/index.js
res.render('index', {title:'Express'});
模板文件index.ejs
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
頁面布局
layout.ejs
片段視圖
partials接受2個參數,第一個是片段視圖的名稱,第二個是一個對象或一個數組。
<%- partial('listitem', items)%>
視圖助手
允許在視圖中訪問一個全局的函數或對象,不用每次調用視圖解析的時候單獨傳入。partial就是視圖助手。
兩類,靜態(對象)和動態(函數,不接受參數,可以訪問req res對象)。
建立微博網站
功能分析
路由規划
界面設計
使用Bootstrap
用戶注冊和登錄
訪問數據庫
NoSQL非關系型數據庫
MongoDB對象數據庫,沒有表行等概念,沒有固定的模式和結構。
鏈接數據庫
(
開啟服務器
C:\Program Files\mongodb\bin
> mongod.exe -dbpath "E:\mongodbfiles"
打開瀏覽器輸入:http://127.0.0.1:27017/
mongo.exe
use cnblogs
> db.users.insert({'name':'xumingxiang','sex':'man'})
在shell 命令窗口鍵入如下命令:
> show dbs // 顯示所有數據庫
>show collections // 顯示當前數據庫下的所有集合
>db.users.find() // 顯示users集合下的所有數據文檔
)
會話支持
注冊和登入
注冊頁面
注冊響應
用戶模型
視圖交互
登入和登出
頁面權限控制
發表微博
