1. 程式人生 > >用express搭建一個簡單的部落格系統

用express搭建一個簡單的部落格系統

Express 簡介

Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你建立各種 Web 應用,和豐富的 HTTP 工具。

使用 Express 可以快速地搭建一個完整功能的網站,它有一套健壯的特性,可用於開發單頁、多頁和混合Web應用。

此文介紹如何使用Express搭建多人部落格。

學習環境

Node.js: 0.10.32

Express: 4.10.2

MongoDB: 2.6.1

快速開始

安裝 Express

express 是 Node.js 上最流行的 Web 開發框架,正如他的名字一樣,使用它我們可以快速的開發一個 Web 應用。我們用 express 來搭建我們的部落格,開啟命令列,輸入:

$ npm install -g express-generator

安裝 express 命令列工具,使用它我們可以初始化一個 express 專案。

新建一個工程

在命令列中輸入:

$ express -e blog
$ cd blog && npm install

初始化一個 express 專案並安裝所需模組,如下圖所示:

然後執行:

$ DEBUG=blog node ./bin/www(windows 下:DEBUG=blog:* npm start )

(上面的程式碼報錯的話,可以這樣執行啟動專案:npm start) 啟動專案,此時命令列中會顯示 blog Express server listening on port 3000 +0ms

 ,在瀏覽器裡訪問  localhost:3000 ,如下圖所示:

至此,我們用 express 初始化了一個工程專案,並指定使用 ejs 模板引擎,下一節我們講解工程的內部結構。

工程結構

我們回頭看看生成的工程目錄裡面都有什麼,開啟我們的 blog 資料夾,裡面如圖所示:

app.js:啟動檔案,或者說入口檔案

package.json:儲存著工程的資訊及模組依賴,當在 dependencies 中新增依賴的模組時,執行 npm install ,npm 會檢查當前目錄下的 package.json,並自動安裝所有指定的模組

node_modules:存放 package.json 中安裝的模組,當你在 package.json 新增依賴的模組並安裝後,存放在這個資料夾下

public:存放 image、css、js 等檔案

routes:存放路由檔案

views:存放檢視檔案或者說模版檔案

bin:存放可執行檔案

開啟app.js,讓我們看看裡面究竟有什麼:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

這裡我們通過require()載入了express、path 等模組,以及 routes 資料夾下的index. js和 users.js 路由檔案。 下面來講解每行程式碼的含義。

(1) var app = express():生成一個express例項 app。

(2)app.set('views', path.join(__dirname, 'views’)):設定 views 資料夾為存放檢視檔案的目錄, 即存放模板檔案的地方,__dirname 為全域性變數,儲存當前正在執行的指令碼所在的目錄。

(3)app.set('view engine', 'ejs’):設定檢視模板引擎為 ejs。

(4)app.use(favicon(__dirname + '/public/favicon.ico’)):設定/public/favicon.ico為favicon圖示。

(5)app.use(logger('dev’)):載入日誌中介軟體。

(6)app.use(bodyParser.json()):載入解析json的中介軟體。

(7)app.use(bodyParser.urlencoded({ extended: false })):載入解析urlencoded請求體的中介軟體。

(8)app.use(cookieParser()):載入解析cookie的中介軟體。

(9)app.use(express.static(path.join(__dirname, 'public'))):設定public資料夾為存放靜態檔案的目錄。

(10)app.use('/', routes);和app.use('/users', users):路由控制器。

(11)

app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

捕獲404錯誤,並轉發到錯誤處理器。(12)

if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

開發環境下的錯誤處理器,將錯誤資訊渲染error模版並顯示到瀏覽器中。(13)

app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

生產環境下的錯誤處理器,將錯誤資訊渲染error模版並顯示到瀏覽器中。(14)module.exports = app :匯出app例項供其他模組呼叫。

我們再看 bin/www 檔案:

#!/usr/bin/env node
var debug = require('debug')('blog');
var app = require('../app');

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
});

(1)#!/usr/bin/env node:表明是 node 可執行檔案。

(2)var debug = require('debug')('blog’):引入debug模組,列印除錯日誌。

(3)var app = require('../app’):引入我們上面匯出的app例項。

(4)app.set('port', process.env.PORT || 3000):設定埠號。

(5)

var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
});

啟動工程並監聽3000埠,成功後列印 Express server listening on port 3000。

我們再看 routes/index.js 檔案:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

生成一個路由例項用來捕獲訪問主頁的GET請求,匯出這個路由並在app.js中通過app.use('/', routes); 載入。這樣,當訪問主頁時,就會呼叫res.render('index', { title: 'Express' });渲染views/index.ejs模版並顯示到瀏覽器中。

我們再看看 views/index.ejs 檔案:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

在渲染模板時我們傳入了一個變數 title 值為 express 字串,模板引擎會將所有 <%= title %> 替換為 express ,然後將渲染後生成的html顯示到瀏覽器中,如上圖所示。

在這一小節我們學習瞭如何建立一個工程並啟動它,瞭解了工程的大體結構和運作流程,下一小節我們將學習 express 的基本使用及路由控制。

路由控制

工作原理

routes/index.js 中有以下程式碼:

router.get('/', function(req, res){
  res.render('index', { title: 'Express' });
});

這段程式碼的意思是當訪問主頁時,呼叫 ejs 模板引擎,來渲染 index.ejs 模版檔案(即將 title 變數全部替換為字串 Express),生成靜態頁面並顯示在瀏覽器中。

我們來作一些修改,以上程式碼實現了路由的功能,我們當然可以不要 routes/index.js 檔案,把實現路由功能的程式碼都放在 app.js 裡,但隨著時間的推移 app.js 會變得臃腫難以維護,這也違背了程式碼模組化的思想,所以我們把實現路由功能的程式碼都放在 routes/index.js 裡。官方給出的寫法是在 app.js 中實現了簡單的路由分配,然後再去 index.js 中找到對應的路由函式,最終實現路由功能。我們不妨把路由控制器和實現路由功能的函式都放到 index.js 裡,app.js 中只有一個總的路由介面。

最終將 app.js 修改為:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');

var app = express();

app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

routes(app);

app.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

修改 index.js 如下:

module.exports = function(app) {
  app.get('/', function (req, res) {
    res.render('index', { title: 'Express' });
  });
};

現在,再執行你的 app,你會發現主頁毫無二致。這裡我們在 routes/index.js 中通過 module.exports 匯出了一個函式介面,在 app.js 中通過  require 載入了 index.js 然後通過 routes(app) 呼叫了 index.js 匯出的函式。

路由規則

express 封裝了多種 http 請求方式,我們主要只使用 get 和  post 兩種,即  app.get() 和 app.post() 。

app.get() 和  app.post() 的第一個引數都為請求的路徑,第二個引數為處理請求的回撥函式,回撥函式有兩個引數分別是 req 和 res,代表請求資訊和響應資訊 。路徑請求及對應的獲取路徑有以下幾種形式:

req.query

// GET /search?q=tobi+ferret  
req.query.q  
// => "tobi ferret"  

// GET /shoes?order=desc&shoe[color]=blue&shoe[type]=converse  
req.query.order  
// => "desc"  

req.query.shoe.color  
// => "blue"  

req.query.shoe.type  
// => "converse"  

req.body

// POST user[name]=tobi&user[email][email protected]  
req.body.user.name  
// => "tobi"  

req.body.user.email  
// => "[email protected]"  

// POST { "name": "tobi" }  
req.body.name  
// => "tobi"  

req.params

// GET /user/tj  
req.params.name  
// => "tj"  

// GET /file/javascripts/jquery.js  
req.params[0]  
// => "javascripts/jquery.js"  

req.param(name)

// ?name=tobi  
req.param('name')  
// => "tobi"  

// POST name=tobi  
req.param('name')  
// => "tobi"  

// /user/tobi for /user/:name   
req.param('name')  
// => "tobi"  

不難看出:

  • req.query : 處理 get 請求,獲取 get 請求引數
  • req.params : 處理 /:xxx 形式的 get 或 post 請求,獲取請求引數
  • req.body : 處理 post 請求,獲取 post 請求體
  • req.param() : 處理 get 和 post 請求,但查詢優先順序由高到低為 req.params→req.body→req.query

路徑規則還支援正則表示式,更多請查閱 Express 官方文件 。

新增路由規則

當我們訪問 localhost:3000 時,會顯示:

當我們訪問 localhost:3000/nswbmw 這種不存在的頁面時就會顯示:

這是因為不存在 /nswbmw 的路由規則,而且它也不是一個 public 目錄下的檔案,所以 express 返回了 404 Not Found 的錯誤。下面我們來新增這條路由規則,使得當訪問 localhost:3000/nswbmw 時,頁面顯示 hello,world!

注意:以下修改僅用於測試,看到效果後再把程式碼還原回來。

修改 index.js,在 app.get('/') 函式後新增一條路由規則:

app.get('/nswbmw', function (req, res) {
  res.send('hello,world!');
});

重啟之後,訪問 localhost:3000/nswbmw 頁面顯示如下:

很簡單吧?這一節我們學習了基本的路由規則及如何新增一條路由規則,下一節我們將學習模板引擎的知識。

模版引擎

什麼是模板引擎

模板引擎(Template Engine)是一個將頁面模板和要顯示的資料結合起來生成 HTML 頁面的工具。如果說上面講到的 express 中的路由控制方法相當於 MVC 中的控制器的話,那模板引擎就相當於 MVC 中的檢視。

模板引擎的功能是將頁面模板和要顯示的資料結合起來生成 HTML 頁面。它既可以運 行在伺服器端又可以執行在客戶端,大多數時候它都在伺服器端直接被解析為 HTML,解析完成後再傳輸給客戶端,因此客戶端甚至無法判斷頁面是否是模板引擎生成的。有時候模板引擎也可以執行在客戶端,即瀏覽器中,典型的代表就是 XSLT,它以 XML 為輸入,在客戶端生成 HTML 頁面。但是由於瀏覽器相容性問題,XSLT 並不是很流行。目前的主流還是由伺服器執行模板引擎。

在 MVC 架構中,模板引擎包含在伺服器端。控制器得到使用者請求後,從模型獲取資料,呼叫模板引擎。模板引擎以資料和頁面模板為輸入,生成 HTML 頁面,然後返回給控制器,由控制器交回客戶端。

——《Node.js開發指南》

什麼是 ejs ?

ejs 是模板引擎的一種,也是我們這個教程中使用的模板引擎,因為它使用起來十分簡單,而且與 express 整合良好。

使用模板引擎

前面我們通過以下兩行程式碼設定了模板檔案的儲存位置和使用的模板引擎:

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

注意:我們通過  express -e blog 只是初始化了一個使用 ejs 模板引擎的工程而已,比如 node_modules 下添加了 ejs 模組,views 資料夾下有 index.ejs 。並不是說強制該工程只能使用 ejs 不能使用其他的模板引擎比如 jade,真正指定使用哪個模板引擎的是  app.set('view engine', 'ejs'); 。

在 routes/index.js 中通過呼叫 res.render() 渲染模版,並將其產生的頁面直接返回給客戶端。它接受兩個引數,第一個是模板的名稱,即 views 目錄下的模板檔名,副檔名 .ejs 可選。第二個引數是傳遞給模板的資料物件,用於模板翻譯。

開啟 views/index.ejs ,內容如下:

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

當我們 res.render('index', { title: 'Express' }); 時,模板引擎會把 <%= title %> 替換成 Express,然後把替換後的頁面顯示給使用者。

渲染後生成的頁面程式碼為:

<!DOCTYPE html>
<html>
  <head>
    <title>Express</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>Express</h1>
    <p>Welcome to Express</p>
  </body>
</html>

注意:我們通過  app.use(express.static(path.join(__dirname, 'public'))) 設定了靜態檔案目錄為 public 資料夾,所以上面程式碼中的  href='/stylesheets/style.css' 就相當於 href='public/stylesheets/style.css' 。

ejs 的標籤系統非常簡單,它只有以下三種標籤:

  • <% code %>:JavaScript 程式碼。
  • <%= code %>:顯示替換過 HTML 特殊字元的內容。
  • <%- code %>:顯示原始 HTML 內容。

注意:  <%= code %> 和  <%- code %> 的區別,當變數 code 為普通字串時,兩者沒有區別。當 code 比如為  <h1>hello</h1> 這種字串時, <%= code %> 會原樣輸出  <h1>hello</h1> ,而  <%- code %> 則會顯示 H1 大的 hello 字串。

我們可以在 <% %> 內使用 JavaScript 程式碼。下面是 ejs 的官方示例:

The Data

supplies: ['mop', 'broom', 'duster']

The Template

<ul>
<% for(var i=0; i<supplies.length; i++) {%>
   <li><%= supplies[i] %></li>
<% } %>
</ul>

The Result

<ul>
  <li>mop</li>
  <li>broom</li>
  <li>duster</li>
</ul>

我們可以用上述三種標籤實現頁面模板系統能實現的任何內容。

頁面佈局

這裡我們不使用layout進行頁面佈局,而是使用更為簡單靈活的include。include 的簡單使用如下:

index.ejs

<%- include a %>
hello,world!
<%- include b %>

a.ejs

this is a.ejs

b.ejs

this is b.ejs

最終 index.ejs 會顯示:

this is a.ejs
hello,world!
this is b.ejs

這一節我們學習了模版引擎的相關知識,下一節我們正式開始學習如何從頭開始搭建一個多人部落格。

搭建多人部落格

功能分析

搭建一個簡單的具有多人註冊、登入、發表文章、登出功能的部落格。

設計目標

未登入:主頁左側導航顯示 home、login、register,右側顯示已發表的文章、發表日期及作者。

登陸後:主頁左側導航顯示 home、post、logout,右側顯示已發表的文章、發表日期及作者。

使用者登入、註冊、發表成功以及登出後都返回到主頁。

未登入:

主頁:

登入頁:

註冊頁:

登入後:

主頁:

發表頁:

注意:沒有登出頁,當點選 LOGOUT 後,退出登陸並返回到主頁。

路由規劃

我們已經把設計的構想圖貼出來了,接下來的任務就是完成路由規劃了。路由規劃,或者說控制器規劃是整個網站的骨架部分,因為它處於整個架構的樞紐位置,相當於各個介面之間的粘合劑,所以應該優先考慮。

根據構思的設計圖,我們作以下路由規劃:

/ :首頁
/login :使用者登入
/reg :使用者註冊
/post :發表文章
/logout :登出

我們要求 /login 和  /reg 只能是未登入的使用者訪問,而  /post 和  /logout 只能是已登入的使用者訪問。左側導航列表則針對已登入和未登入的使用者顯示不同的內容。

修改 index.js 如下:

module.exports = function(app) {
  app.get('/', function (req, res) {
    res.render('index', { title: '主頁' });
  });
  app.get('/reg', function (req, res) {
    res.render('reg', { title: '註冊' });
  });
  app.post('/reg', function (req, res) {
  });
  app.get('/login', function (req, res) {
    res.render('login', { title: '登入' });
  });
  app.post('/login', function (req, res) {
  });
  app.get('/post', function (req, res) {
    res.render('post', { title: '發表' });
  });
  app.post('/post', function (req, res) {
  });
  app.get('/logout', function (req, res) {
  });
};

如何針對已登入和未登入的使用者顯示不同的內容呢?或者說如何判斷使用者是否已經登陸了呢?進一步說如何記住使用者的登入狀態呢?我們通過引入會話(session)機制記錄使用者登入狀態,還要訪問資料庫來儲存和讀取使用者資訊。下一節我們將學習如何使用資料庫。

使用資料庫

MongoDB簡介

MongoDB 是一個基於分散式檔案儲存的 NoSQL(非關係型資料庫)的一種,由 C++ 語言編寫,旨在為 WEB 應用提供可擴充套件的高效能資料儲存解決方案。MongoDB 支援的資料結構非常鬆散,是類似 json 的 bjson 格式,因此可以儲存比較複雜的資料型別。MongoDB 最大的特點是他支援的查詢語言非常強大,其語法有點類似於面向物件的查詢語言,幾乎可以實現類似關係資料庫單表查詢的絕大部分功能,而且還支援對資料建立索引。

MongoDB 沒有關係型資料庫中行和表的概念,不過有類似的文件和集合的概念。文件是 MongoDB 最基本的單位,每個文件都會以唯一的 _id 標識,文件的屬性為 key/value 的鍵值對形式,文件內可以巢狀另一個文件,因此可以儲存比較複雜的資料型別。集合是許多文件的總和,一個數據庫可以有多個集合,一個集合可以有多個文件。

下面是一個 MongoDB 文件的示例:

{ 
  "_id" : ObjectId( "4f7fe8432b4a1077a7c551e8" ),
  "name" : "nswbmw",
  "age" : 22,
  "email" : [ "[email protected]", "[email protected]" ],
  "family" : {
    "mother" : { ... },
    "father" : { ... },
    "sister : {
      "name" : "miaomiao",
      "age" : 27,
      "email" : "[email protected]",
      "family" : {
        "mother" : { ... },
        "father" : { ... },
        "brother : { ... },
        "husband" : { ... },
        "son" : { ... }
      }
    }
  }
}

安裝MongoDB

安裝 MongoDB 很簡單,去 官網 下載對應系統的 MongoDB msi檔案解壓到已經建好的mongodb資料夾內,並在 mongodb 資料夾裡新建 blog 資料夾作為我們部落格內容的儲存目錄。進入到 bin 目錄下:執行:

./mongod --dbpath ../blog/

以上命令的意思是:設定 blog 資料夾作為我們工程的儲存目錄並啟動資料庫。

連線MongoDB

資料庫雖然安裝並啟動成功了,但我們需要連線資料庫後才能使用資料庫。怎麼才能在 Node.js 中使用 呢?我們使用官方提供的 mongoose驅動模組,開啟 package.json,在 dependencies 中新增一行:

"mongoose": "^4.4.12",

然後執行 npm install 更新依賴的模組,稍等片刻後 mongoose 模組就下載並安裝完成了。

var mongoose =require('mongoose');
module.exports=newmongoose.Schema({
 username:String,
	password:String
});

schemas下面表示要存的資料 

接下來在根目錄下新建 models 資料夾,並在 models 資料夾下新建 User.js ,新增如下程式碼:

var mongoose =require('mongoose');
var usersSchema =require('../schemas/users') //拿到匯出的資料集模組
var User =mongoose.model('user', usersSchema) // 編譯生成Movie 模型
module.exports= User;

開啟 app.js,在 var routes = require('./routes/index'); 下新增:

var mongoose =require('mongoose');

會話支援

會話是一種持久的網路協議,用於完成伺服器和客戶端之間的一些互動行為。會話是一個比連線粒度更大的概念, 一次會話可能包含多次連線,每次連線都被認為是會話的一次操作。在網路應用開發中,有必要實現會話以幫助使用者互動。例如網上購物的場景,使用者瀏覽了多個頁面,購買了一些物品,這些請求在多次連線中完成。許多應用層網路協議都是由會話支援的,如 FTP、Telnet 等,而 HTTP 協議是無狀態的,本身不支援會話,因此在沒有額外手段的幫助下,前面場景中伺服器不知道使用者購買了什麼。

為了在無狀態的 HTTP 協議之上實現會話,Cookie 誕生了。Cookie 是一些儲存在客戶端的資訊,每次連線的時候由瀏覽器向伺服器遞交,伺服器也向瀏覽器發起儲存 Cookie 的請求,依靠這樣的手段伺服器可以識別客戶端。我們通常意義上的 HTTP 會話功能就是這樣實現的。具體來說,瀏覽器首次向伺服器發起請求時,伺服器生成一個唯一識別符號併發送給客戶端瀏覽器,瀏覽器將這個唯一識別符號儲存在 Cookie 中,以後每次再發起請求,客戶端瀏覽器都會向伺服器傳送這個唯一識別符號,伺服器通過這個唯一識別符號來識別使用者。 對於開發者來說,我們無須關心瀏覽器端的儲存,需要關注的僅僅是如何通過這個唯一識別符號來識別使用者。很多服務端指令碼語言都有會話功能,如 PHP,把每個唯一識別符號儲存到檔案中。

——《Node.js開發指南》

express 也提供了會話中介軟體,預設情況下是把使用者資訊儲存在記憶體中,但我們既然已經有了 MongoDB,不妨把會話資訊儲存在資料庫中,便於持久維護。為了使用這一功能,我們需要藉助 express-session 和 connect-mongo 這兩個第三方中介軟體,在 package.json 中新增:

"express-session": "1.9.1",
"connect-mongo": "0.4.1"

注意:如報"error setting ttl index on collection : sessions"錯誤,把"mongodb"&"connect-mongo"版本號更到最新。

執行npm install安裝模組,開啟app.js,新增以下程式碼:

var session = require('express-session');
var MongoStore = require('connect-mongo')(session);

app.use(session({
  secret: settings.cookieSecret,
  key: settings.db,//cookie name
  cookie: {maxAge: 1000 * 60 * 60 * 24 * 30},//30 days
  store: new MongoStore({
    db: settings.db,
    host: settings.host,
    port: settings.port
  })
}));

使用 express-session 和 connect-mongo 模組實現了將會化資訊儲存到mongoldb中。secret 用來防止篡改 cookie,key 的值為 cookie 的名字,通過設定 cookie 的 maxAge 值設定 cookie 的生存期,這裡我們設定 cookie 的生存期為 30 天,設定它的 store 引數為 MongoStore 例項,把會話資訊儲存到資料庫中,以避免丟失。在後面的小節中,我們可以通過 req.session 獲取當前使用者的會話物件,獲取使用者的相關資訊。

註冊和登陸

我們已經準備好了資料庫訪問和會話的相關資訊,接下來我們完成使用者註冊和登入功能。

頁面設計

首先我們來完成主頁、登入頁和註冊頁的頁面設計。

相關推薦

express搭建一個簡單部落系統

Express 簡介 Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你建立各種 Web 應用,和豐富的 HTTP 工具。 使用 Express 可以快速地搭建一個完整功能的網站,它有一套健壯的特性,可用於開發單頁、多頁和

Jekyll + Github = 簡單搭建一個個人部落

在我成功試水,搭建了自己的個人部落格後,我體會到了 Jekyll 製作網站的輕便性。而 GitHub Pages 對 Jekyll 的支援,又省去了建站時伺服器和域名的搭建過程。在查閱網上的資料時,大牛們都是先在本地做好 Ruby + Jekyll 的環境,除錯完成後再上傳至 GitHub 上

shell寫一個簡單的告警系統

shell用shell寫一個簡單的告警系統 創建目錄結構 mkdir -p /usr/local/sbin/mon/{bin,conf,shares,mail,log} mon //主目錄 bin //主程序目錄 shares //子程序目錄 mail //發郵件目錄 log //日誌目錄 程序主入

Java簡單部落系統(一)基於實體聯絡模型設計資料庫

  基本概念 簡單屬性:不能劃分為更小的部分(其他屬性)。 單值屬性:一個特定實體有隻有單獨的一個值。 派生屬性:可以從別的相關屬性或實體派生出來。 最簡單的部落格系統 (一)實體集:使用者,部落格,評論,實體及其屬性列出如下: (二)聯絡集: 以上設計的實體集,聯絡集表示如

Java簡單部落系統(二)靜態頁面動態化顯示資料表內容

(一)準備工作 建立java Web專案基礎的四個package 將JSP相關庫和MySQL資料驅動包放到相應的目錄 下面列出com.java.util中的三個類的程式碼,在專案中經常用到,基本是參照java1234.com小鋒老師的專案程式碼稍作寫出來的。 public class D

java簡單部落系統(二)導航標籤頁點選後頁面內容改變及背景色改變

一、同一個Servlet處理多個請求,顯示不同的頁面內容 導航標籤頁 bootStrap模板: <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home

使用tale搭建一個個人部落

使用騰訊雲伺服器->Ubuntu16.04 LTS 64 + 域名  tale github -> github https://github.com/otale/tale/blob/master/install.sh  putty ->&nb

騰訊雲搭建自己的部落系統

畢業論文寫完了,在記錄下自己的生活吧,騰訊的學生主機還有點時間,趁著還有學生特權,搭建一個自己的部落格玩玩。 使用的工具: 騰訊雲主機(centos 7.0) 域名(解析) Blog_mini 獲取Blog_mini原始碼 Blog_mini的原始碼在github上,

Python搭建一個簡單的代理池!經理再也不用擔心我的IP被封了

其實每次爬東西的時候,特怕IP被封,所以每次都要把時間延遲設定得長一點... 這次用Python搭建一個簡單的代理池。獲取代理IP,然後驗證其有效性。 不過結果好像不是很理想,為什麼西刺代理的高匿代理都能用??? 不是說免費代理不好使嗎?真的是黑人問號臉... / 01 / 代理獲取

初學javaeeservlet寫一個簡單的登陸系統

使用 servlet編寫一個登陸網頁 首先第一步是將靜態網頁寫好,這裡面涉及一點html的知識 裡面核心的內容是一個input複選框的使用 <td class="controler"><input type="password" name="m

hexo+碼雲搭建自己的部落系統

1.之前使用githup沒有成功,說是可以從coding上搭建,既然這樣 我最後還是直接使用的碼雲的page服務來搭建的 在搭建之前做好準備工作  hexo 相關的知識   2.登入自己的碼雲建好倉庫   記住自己 的git賬號密碼 把程

基於sklearn庫,搭建一個簡單的問答系統

第一部分: 在這部分裡,首先需要去讀取給定的檔案,並把檔案裡的內容讀取到list裡面。這部分的任務主要需要檔案IO操作方面的基本知識。 # 讀取檔案 def read_corpus(file): with open(file) as f: list = []

利用gitlab pages和hexo搭建一個個人部落

AI’boy原創,轉載請註明出處。 1.使用github pages存在的問題 目前網上有很多利用github pages和hexo搭建個人部落格的教程,但是github目前拒絕了百度蜘蛛的爬取,因此如果希望自己的部落格能夠被百度收錄,就需要採用一些

如何搭建一個獨立部落——簡明Github Pages與Hexo教程

http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/ 摘要:這是一篇很詳盡的獨立部落格搭建教程,裡面介紹了域名註冊、DNS設定、github和Hexo設定等過程,這是我寫得最長的一篇教程。我想將我搭建獨立

python寫一個簡單的推薦系統

前言 在上篇文章豆瓣電影,電視劇DM實戰中提及到,我和室友們產生了劇荒,萌生出要做一個個人用的推薦系統,解決劇荒的問題,經過一輪的死纏爛打,這個個人推薦系統終於成型了。 今天來分享一下心得,對此感興趣的朋友可以自己對著寫一個。 傳統推薦系統演算法 首先介紹一下傳統

Django學習筆記--第一天--搭建一個簡易部落

前言:最近準備寫一個自己的個人部落格。本來想用.net開發的,由於VS有點裝不上,最近學習Python。選擇了python的web框架Django。 開發環境:Ubuntu 14.04 開發工具:Pychram 2016.1.0 社群版 Python版本:

Flutter學習:Flutter搭建一個簡單登入介面

搭建如下圖所示的登入介面 看到結構圖,可以使用一個列布局即可完成,對於輸入框,使用TextField控制元件,對於輸入控制元件樣式,通過Container控制元件來裝飾。 看程式碼: //登入介面 class LoginView extends StatelessWidget {

基於hexo+github搭建一個獨立部落

一直聽說用hexo搭建一個擁有自己域名的部落格是很酷炫的事情~,在這十一花上半個小時整個hexo部落格豈不美哉。 使用Hexo吸引我的是,其簡單優雅, 而且風格多變, 適合程式設計師搭建個人部落格,而且支援多平臺的搭建,再加上有些node,git基礎,分分鐘創建出一個高大上的部落格。廢話少說,開始吧。 準

nodeJS從入門到放棄(一)nodeJS搭建一個簡單的伺服器

現在前端招聘要求中,經常會傾向於招懂nodeJS的前端開發人員,說明懂nodeJS的前端是更具競爭力的,所以動起了學nodeJs的打算,作博n篇,鞏固總結+給後面的人鋪路 前端開發人員學習

教你親手Django搭建一個基金模擬交易系統

親手教你如何搭建一個基金模擬系統(基於Django框架) 第一步:建立專案、APP以及靜態檔案儲存資料夾 django-admin startproject Chongyang django-admin startapp Stock # Chong