採用Node.js+Express+Jade實現用戶註冊登陸功能

Node.js是一個JavaScript運行環境，發佈於2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。V8引擎執行Javascript的速度很是快，性能很是好。 Node.js是一個基於Chrome JavaScript運行時創建的平臺，用於方便地搭建響應速度快、易於擴展的網絡應用。Node.js使用事件驅動、非阻塞I/O模型，具有輕量和高效的特色，很是適合在分佈式設備上運行數據密集型的實時應用。請參考另外一篇博客完成Node.js的安裝。這裏假設已經完成Node.js的安裝。

這裏經過一個實例介紹如何使用Node.js實現用戶註冊登陸功能，其中，用戶名和密碼會被保存在MySQL數據庫中，主要包括如下步驟：
（1）建立MySQL數據庫；
（2）建立項目目錄；
（3）安裝Express開發框架；
（4）安裝Jade模板引擎；
（5）安裝MySQL驅動模塊；
（6）建立服務器；
（7）建立網頁；
（8）測試網頁。javascript

建立MySQL數據庫

在Linux終端中，使用以下命令進入MySQL Shell交互式執行環境：html

mysql -u root –p

按照系統提示輸入MySQL數據庫的root用戶的密碼，而後會進入MySQL Shell交互式執行環境，在「mysql>」命令提示符後面輸入以下命令建立數據庫：前端

mysql> create database userlogin;
mysql> use userlogin;
mysql> create table user (userid int(20) not null auto_increment, username char(50), password char(50), primary key(userid));
mysql> desc user;
mysql> select * from user;

建立好的數據庫user表的模式信息以下圖所示。java

建立項目目錄

在Linux終端中，使用以下命令建立項目目錄並完成初始化：node

cd ~
mkdir userloginjadeapp
cd userloginjadeapp
npm init

在輸入初始化項目命令「npm init」後，終端會提示輸入項目的相關信息，並自動把這些信息記錄在package.json中。若是想進行快捷開發，不想手動輸入項目信息，只須要一直按「Enter」鍵便可，接受默認的自動配置。mysql

安裝Express開發框架

在Linux終端中繼續以下命令來安裝Express開發框架：sql

cd ~/userloginjadeapp
npm install express --save   #save前面是兩個英文短橫線

經過上面命令安裝的模塊，都會放在當前項目文件夾下的node_modules文件夾下，並更新到package.json文件中。Node.js引用該模塊的時候，會自動從node_modules文件夾下尋找模塊。數據庫

安裝Jade模板引擎

在Linux終端中執行以下命令往項目文件夾中繼續添加Jade模板引擎軟件包：express

cd ~/userloginjadeapp
npm install jade --save   #save前面是兩個英文短橫線

安裝MySQL驅動模塊

爲了讓Node.js可以順利訪問MySQL數據庫，須要單獨安裝MySQL驅動模塊。在Linux終端中執行以下命令：npm

cd ~/ userloginjadeapp
npm install mysql --save

安裝body-parser

爲了讓Node.js可以正確解析從前端採用POST方式提交過來的數據，還須要安裝body-parser。在Linux終端中執行以下命令：

cd ~/ userloginjadeapp
npm install body-parser --save

建立服務器

在userloginjadeapp項目目錄中，建立一個名爲userloginjade.js的文件，這個文件是整個網頁應用的入口，該文件的內容以下：

/**
     * Created by linziyu on 2018/7/3.
     */
    /**
     * express接收html傳遞的參數
     */

    var  express=require('express');
    var  bodyParser = require('body-parser')
    var  app=express();
    var mysql=require('mysql');
    app.set('view engine', 'jade'); 
    app.set('views', __dirname);
    app.use(bodyParser.urlencoded({extended: false}))
    app.use(bodyParser.json())

    /**
     * 配置MySQL
     */
    var connection = mysql.createConnection({
        host     : '127.0.0.1',
        user     : 'root',
        password : '123456',
        database : 'movierecommend',
        port:'3306'
    });
    connection.connect();

   /**
     * 跳轉到網站首頁，也就是用戶登陸頁面
     */
    app.get('/',function (req,res) {
        res.render('index');
    })

    /**
     * 實現登陸驗證功能
     */
    app.post('/login',function (req,res) {
        var  name=req.body.username.trim();
        var pwd=req.body.pwd.trim();
    console.log('username:'+name+'password:'+pwd);

        var selectSQL = "select * from user where username = '"+name+"' and password = '"+pwd+"'";
        connection.query(selectSQL,function (err,rs) {
            if (err) throw  err;
                        if (rs.length==0){
                res.render('error',{title:'WARNING',message:'對不起，用戶名：'+name+ ' 不存在'});
                return;
                                }
            console.log(rs);
            console.log('ok');
            res.render('ok',{title:'Welcome User',message:name});
        })
    })

    /**
     * 跳轉到註冊頁面
     */     
    app.get('/registerpage',function (req,res) {
      res.render('registerpage',{title:'註冊'});
    })

    /**
     * 實現註冊功能
     */
    app.post('/register',function (req,res) {
        var  name=req.body.username.trim();
        var  pwd=req.body.pwd.trim();
        var  user={username:name,password:pwd};
        connection.query('insert into user set ?',user,function (err,rs) {
            if (err) throw  err;
            console.log('ok');
           res.render('ok',{title:'Welcome User',message:name});
        })
    })

    var  server=app.listen(3000,function () {
        console.log("userloginjade server start......");
    })

上面的代碼用於啓動一個HTTP服務器，並監遵從3000端口進入的全部鏈接請求。

建立模板文件

如今建立四個網頁模板文件，具體功能以下：
（1）index.jade：用戶訪問網站後默認呈現的頁面，提供了用戶登陸界面和註冊頁面連接；
（2）registerpage.jade：用戶註冊頁面；
（3）ok.jade：呈現成功登陸的確認信息。
（4）error.jade：呈現錯誤提示信息。

1.index.jade文件

html
  head
    title!= title
  body

    form(action='/login', method='post')

      p 用戶登陸
      p User Name:
      input(type='text',name='username')
      p Password:
      input(type='text',name='pwd')
      br
      input(type='submit',value='登陸')
      br
    a(href='/registerpage', title='註冊') 註冊

registerpage.jade文件

html
  head
    title!= title
  body

    form(action='/register', method='post')

      p 用戶註冊
      p User Name:
input(type='text',name='username')
p Password:
      input(type='text',name='pwd')
      br
      input(type='submit',value='註冊')

ok.jade文件

html
  head
    title!= title
  body
    h1 熱烈歡迎用戶: #{message}

error.jade文件

html
  head
    title!= title
  body
    h1 #{message}

測試網頁

在Linux終端中，執行以下命令啓動剛纔已經建立好的HTTP服務器：

cd ~/ userloginjadeapp
node userloginjade.js

而後，在Linux系統中打開一個瀏覽器，在地址欄目輸入「http://localhost:3000」，就能夠看到以下圖所示的網頁效果。

點擊「註冊」連接，就會跳轉到註冊頁面，以下圖所示：

輸入用戶名「xmudblab」和密碼「123456」之後，點擊「註冊」，就會完成用戶註冊，並跳轉到歡迎用戶頁面，以下圖所示。

在Linux系統中打開一個瀏覽器，再次在地址欄目輸入「http://localhost:3000」，從新回到以下圖所示的登陸頁面。

輸入用戶名「xmudblab」和密碼「123456」之後，點擊「登陸」，就會跳轉到歡迎用戶頁面，以下圖所示。