使用nodejs進行WEB開發


這里,准備從零開始用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集合下的所有數據文檔

  

  )

會話支持

注冊和登入

  注冊頁面

      注冊響應

      用戶模型

      視圖交互

      登入和登出

頁面權限控制

 

 

 

發表微博

 


免責聲明!

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



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