完整的項目代碼（github）：express框架+jade+bootstrap+mysql開發用戶注冊登錄項目
express是基於Node.js平台的web應用開發框架，用express框架開發web項目可以直接構建整個項目框架並且將前端頁面跟后台貫穿起來，用起來還是靈活的；最近剛開始學習，寫篇博客總結下，涉及到的東西比較多比較雜，可能會有遺漏什么的，有意見或者建議歡迎提出....
要開始這個項目，首先要對express框架、jade、html、bootstrap、js、jQuery、mysql數據庫這些知識點有一定的基礎。
目錄：
一、項目環境准備
1、安裝node.js
該項目的重點是express框架，而express是node.js的一部分，下載node.js可以到Node.js官網直接下載，下載好了之后直接一直下一步下一步就行；安裝好了之后可以用cmd命令行來看一下是否安裝成功，如果如下圖出現版本號則表示安裝成功（有小問題自己百度）：
2、npm簡單說明
npm是隨同Node.js一起安裝的包管理工具，同樣也可以用cmd命令行來查看：
npm可以用來安裝卸載一些api包，該項目只要記住下面這條安裝命令就行了，npm install (要安裝的包)，這樣安裝的包默認是本地安裝，如果要全局安裝可以在后面加上-g或者--global,詳細用法可參考npm使用小結.
3、用npm安裝express
用express安裝全局express，依次執行下面這兩條命令行：
如果出現一堆包則表示express已經安裝成功了，第二條命令是為了等會可以直接用express命令創建整個項目框架用的；
二、mysql數據庫設計
項目用戶注冊登錄都要涉及到數據庫，我用的是mysql數據庫，mysql服務我用的是wampserver集成的mysql，另外用navicat數據庫管理軟件直接跟wampserver建立連接，用navicat相對比較方便，直接操作圖形化界面。
1、啟動wampserver，用navicat建立連接
wampserver環境搭建可以參考我之前的博客WampServer集成環境安裝與配置，啟動wampserver之后，打開navicat，新建連接：
在連接之前可以先進行連接測試，通過則點擊確定繼續下一步，然后雙擊連接項建立連接：
2、新建數據庫，設計數據庫表
在navicat建立的連接項右鍵->新建數據庫，輸入數據庫名express-demo就好：
在新建的數據庫雙擊展開，在表處右鍵->新建表：
表設計如下：
id字段為主鍵且自動增加，name字段字符集設置為gb2312讓其支持中文，再為username字段設置Unique索引表示這個字段是唯一的不可重復；設計好了之后按ctrl+s保存並輸入表名users.
三、項目編寫
1、用express命令行新建項目框架
用cmd命令express epxress-demo可以直接創建express項目整體框架：
簡單說明項目框架，如果想深入了解可以自己查找資料:
/bin: www.js文件用於應用啟動，里面包含var port = normalizePort(process.env.PORT || '3000');，這里的3000就是項目的運行端口，可以根據自己需要更改，其他地方都不用改動；
/public: 靜態資源目錄：images用來放置項目圖片，javascript用來放置像jquery等其他js類，stylesheets放置頁面的一些css樣式；
/routes：可以認為是controller（控制器）目錄，個人理解成就是后台服務器的一些操作；
/views: jade模板目錄，可以認為是view(視圖)目錄，個人理解是用來放置前端頁面的；
app.js：程序的主文件夾，目前項目中有用到的就是添加新的頁面以及頁面相應的路由需要在這里配置；
package.json：項目中用到的一些包的版本信息.
2、試運行項目
項目創建好了之后，用命令行進入項目根目錄，然后用npm install命令安裝項目中package.json包中必備的一些工具包：
然后用npm start啟動項目：
在瀏覽器輸入：localhost:3000可以看到項目已經運行起來了：
3、編寫登錄界面login.jade文件
（1）下載jQuery、bootstrap到項目中
到jQuery官網下載相應的文件，拷貝到項目的public->javascript目錄底下；到bootstrap官網下載相應的文件，拷貝到項目的public目錄底下；
（2）編寫login.jade文件
在views文件夾底下新建一個login.jade文件，該頁面就是簡單的登錄界面，然后用$.ajax()的post方法向服務器發起登錄請求，請求地址為/login/userLogin，完整代碼如下：
doctype html
html
head
title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/bootstrap-3.3.7-dist/css/bootstrap.min.css')
script(src='/javascripts/jquery-3.1.1.min.js')
script(src='/bootstrap-3.3.7-dist/js/bootstrap.min.js')
body(style='background: #dcd9da')
// h1= title
.container
.row
.col-md-4.col-md-offset-4
.panel.panel-default(style='margin-top: 100px')
.panel-heading(style='background: #0d6aad')
h4(align='center', style='color: #ffffff;')
| express-jade-bootstrap-mysql-demo
.panel-body(style='background: #e0e1ea')
.form-group
.input-group
span.input-group-addon 账号
input#username.form-control(type='text', placeholder='請輸入賬號')
.form-group
.input-group
span.input-group-addon 密码
input#password.form-control(type='password', placeholder='請輸入密碼')
.form-group
.col-lg-offset-7
| 没有账号？
a(href='/register') 注册
.form-group
button#login.btn.btn-success.btn-block(type='button')
| 登录
#popup.alert.alert-warning
a#close.close(href='#') ×
div(align='center')
strong#popup-content(style='color: #b12e30;')
script(type='text/javascript').
$(document).ready(function () {
var username = $("#username");
var password = $("#password");
var login = $("#login");
var popup = $("#popup");
var popupContent = $("#popup-content");
var close = $("#close");
popup.hide();
close.click(function () {
popup.hide();
});
login.click(function () {
if (username.val() == "" || password.val() == "") {
popup.show();
popupContent.html("賬號或密碼不能為空！");
} else {
$.ajax({
url: "/login/userLogin",
data: {
username: $("#username").val(),
password: $("#password").val()
},
type: "POST",
timeout: 36000,
dataType: "text",
success: function (data, textStatus) {
//alert(data);
var dataJson = eval("(" + data + ")");
if (dataJson.code == 200) {
alert("登錄成功");
window.location.href = "/";
} else if (dataJson.code == 300) {
popup.show();
popupContent.html("賬號不存在，請重新輸入！");
} else if (dataJson.code == 400) {
popup.show();
popupContent.html("密碼有誤，請重新輸入！");
} else {
popup.show();
popupContent.html("登錄出錯！");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error:" + textStatus);
}
}
);
}
})
;
})
;
4、編寫登錄界面路由login.js文件
（1）設置連接數據庫參數
在項目根目錄新建一個文件夾model，然后在該文件夾底下新建一個config.js文件，用來配置連接本地mysql數據庫的一些參數：
module.exports = {
mysql: {
host: '127.0.0.1',
user: 'root',
password: '',
database: 'express-demo',
port: 3306
}
};
（2）npm安裝mysql模塊
項目中有涉及到數據庫操作，需要安裝mysql包，在項目根目錄用命令行npm install mysql --save，加上--save可以將安裝的包版本信息保存到項目的package.json文件中；
（3）編寫login.js文件
在routes文件夾底下新建一個login.js文件，用來渲染登錄界面login.jade以及登錄界面的服務器請求處理，通過連接數據庫來進行賬號密碼判斷，完整代碼如下：
var express = require('express');
var router = express.Router();
// 實現與MySQL交互
var mysql = require('mysql');
var config = require('../model/config');
// 使用連接池，提升性能
var pool = mysql.createPool(config.mysql);
/* GET home page. */
router.get('/', function (req, res, next) {
res.render('login', {title: 'login'});
});
router.post('/userLogin', function (req, res, next) {
var username = req.body.username;//獲取前台請求的參數
var password = req.body.password;
pool.getConnection(function (err, connection) {
//先判斷該賬號是否存在
var $sql = "select * from users where username=?";
connection.query($sql, [username], function (err, result) {
var resultJson = result;
console.log(resultJson.length);
if (resultJson.length === 0) {
result = {
code: 300,
msg: '該賬號不存在'
};
res.json(result);
connection.release();
} else { //賬號存在，可以登錄，進行密碼判斷
var $sql1 = "select password from users where username=?";
connection.query($sql1, [username], function (err, result) {
var temp = result[0].password; //取得數據庫查詢字段值
console.log(temp);
if (temp == password) {
result = {
code: 200,
msg: '密碼正確'
};
} else {
result = {
code: 400,
msg: '密碼錯誤'
};
}
res.json(result); // 以json形式，把操作結果返回給前台頁面
connection.release();// 釋放連接
});
}
});
});
});
module.exports = router;
5、編寫注冊界面register.jade文件
在views文件夾底下新建一個register.jade文件，該頁面就是簡單的用戶注冊界面，用來填寫用戶信息，然后用$.ajax()的post方法向服務器發起登錄請求，請求地址為/register/userRegister，完整代碼如下：
doctype html
html
head
title
link(rel='stylesheet', href='/bootstrap-3.3.7-dist/css/bootstrap.min.css')
script(src='/javascripts/jquery-3.1.1.min.js')
script(src='/bootstrap-3.3.7-dist/js/bootstrap.min.js')
body(style='background: #dcd9da')
nav.collapse.navbar-collapse.navbar-inverse
.navbar-header
a.navbar-brand express-jade-bootstrap-mysql-demo
ul.nav.navbar-nav.navbar-right
li(style='margin-right: 20px')
a(href='/login')
span.glyphicon.glyphicon-log-in
| 登录
.container
.row
.col-md-4.col-md-offset-4
.panel.panel-default(style='margin-top: 40px')
.panel-heading(style='background: #0d6aad')
h3(align='center', style='color: #ffffff;')
| 账号注册
.panel-body(style='background: #e0e1ea')
.form-group
.input-group
span.input-group-addon 账 号
input#username.form-control(type='text', placeholder='請輸入賬號')
.form-group
.input-group
span.input-group-addon 密 码
input#password.form-control(type='password', placeholder='請輸入密碼')
.form-group
.input-group
span.input-group-addon 确认密码
input#password1.form-control(type='password', placeholder='請再次輸入密碼')
.form-group
.input-group
span.input-group-addon 姓 名
input#name.form-control(type='text', placeholder='請輸入姓名')
.form-group
button#register.btn.btn-success.btn-block(type='button')
| 注册
#popup.alert.alert-warning
a#close.close(href='#') ×
div(align='center')
strong#popup-content(style='color: #b12e30;')
script(type='text/javascript').
$(document).ready(function () {
var username = $("#username");
var password = $("#password");
var password1 = $("#password1");
var name = $("#name");
var register = $("#register");
var popup = $("#popup");
var popupContent = $("#popup-content");
var close = $("#close");
popup.hide();
close.click(function () {
popup.hide();
});
register.click(function () {
if (username.val() == "" || password.val() == "" || password1.val() == "" || name.val() == "") {
popup.show();
popupContent.html("注冊信息不能為空！");
} else if (password.val() !== password1.val()) {
popup.show();
popupContent.html("兩次輸入的密碼不一樣！");
} else {
//訪問服務器，將注冊信息寫入數據庫
$.ajax({
url: "/register/userRegister",
data: {
username: $("#username").val(),
password: $("#password").val(),
name: $("#name").val()
},
type: "POST",
timeout: 36000,
dataType: "text",
success: function (data, textStatus) {
var dataJson = eval("(" + data + ")");
if (dataJson.code == 200) {
alert("注冊成功");
window.location.href = "/login";
} else if (dataJson.code == 300) {
popup.show();
popupContent.html("該賬號已存在！");
} else if (dataJson.code == 400) {
popup.show();
popupContent.html("注冊失敗，請重新注冊！");
} else {
popup.show();
popupContent.html("注冊出錯！");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error:" + textStatus);
}
});
}
});
});
6、編寫注冊界面路由login.js文件
在routes文件夾底下新建一個register.js文件，用來渲染登錄界面register.jade以及登錄界面的服務器請求處理，通過連接數據庫來進行數據的查詢以及插入，完整代碼如下：
var express = require('express');
var router = express.Router();
// 實現與MySQL交互
var mysql = require('mysql');
var config = require('../model/config');
// 使用連接池，提升性能
var pool = mysql.createPool(config.mysql);
/* GET home page. */
router.get('/', function (req, res, next) {
res.render('register', {title: 'register'});
});
router.post('/userRegister', function (req, res, next) {
var username = req.body.username;
var password = req.body.password;
var name = req.body.name; //獲取前台請求的參數
pool.getConnection(function (err, connection) {
//先判斷該賬號是否存在
var $sql = "select * from users where username=?";
connection.query($sql, [username], function (err, result) {
var resultJson = result;
console.log(resultJson.length);
if (resultJson.length !== 0) {
result = {
code: 300,
msg: '該賬號已存在'
};
res.json(result);
connection.release();
} else { //賬號不存在，可以注冊賬號
// 建立連接，向表中插入值 數據庫表名為user-info會出錯
var $sql1 = "INSERT INTO users(id, username, password, name) VALUES(0,?,?,?)";
connection.query($sql1, [username, password, name], function (err, result) {
console.log(result);
if (result) {
result = {
code: 200,
msg: '注冊成功'
};
} else {
result = {
code: 400,
msg: '注冊失敗'
};
}
res.json(result); // 以json形式，把操作結果返回給前台頁面
connection.release();// 釋放連接
});
}
});
});
});
module.exports = router;
7、到app.js增加代碼
在app.js中增加登錄login跟注冊register的界面以及路由：
8、項目運行
在命令行輸入npm start啟動項目，如果沒有報錯證明項目沒問題了：
這時候我們通過瀏覽器訪問：http://localhost:3000/login：
點擊注冊按鈕可以調到注冊賬號界面進行賬號注冊：
根據提示填寫信息，注冊成功后跳轉到登錄界面，這時候再輸入已經注冊好的賬號密碼可以進行登錄，登錄成功后跳轉到主界面：
