windows學習環境：
node 版本： v0.10.35
express版本：4.10.0
mysql版本：5.6.21-log
第一部分：安裝node 、Express(win8系統 需要"命令行【管理員】"執行" msiexec+/package+安裝包路徑 "安裝，否則會安裝失敗)
1）、下載nodejs,官方下載地址:http://nodejs.org/
2）、安裝過程，選擇下一步直到安裝完成。(node -v | npm-v //查看版本)
3）、打開命令行執行命令 "npm install -g express-generator" 等待安裝完成就好了。(express -V//查看版本)
第二部分：
概覽：
1、新建一個工程
2、在views目錄下新建ejs模板網頁
3、連接mysql數據庫dbConnect.js
4、配置app.js 和 package.json
5、配置路由(2種方式)
6、加入session和cookies
詳細內容：
NO 1. 新建工程
①、cd到要創建工程的目錄： cd: NewCode\Node
②、使用express創建工程： express -e ejs testA
③、cd到testA: cd testA
④、安裝node_modules: npm install(這個過程有點慢)
⑤、啟動工程： npm start
⑥、打開瀏覽器訪問：http://localhost:3000(默認端口是3000)
NO2.
在views目錄下新建ejs模板： index.ejs(已有), error.ejs(已有), header.ejs, footer.ejs, home.ejs, login.ejs, reg.ejs 如下圖：
代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"/> 5 <title>Test</title> 6 <link rel="stylesheet" href="/stylesheets/style.css"> 7 </head> 8 <body> 9 <header> 10 <h1><%= title %></h1> 11 </header> 12 <nav> 13 <span><a title="主頁" href="/">home</a></span> 14 <span><a title="登陸" href="/login">login</a></span> 15 <span><a title="注冊" href="/reg">register</a></span> 16 </nav> 17 <article>
1 </article> 2 </body> 3 </html>
1 <%- include header %> 2 <div class="container"> 3 <form class="col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post"> 4 <fieldset> 5 <% if(locals.islogin) { %> 6 用戶：<h3> <%= test %></h3>已經登陸。<br> 7 <a class="btn" href="/logout">登出</a> 8 <% } else{ %> 9 <div class="form-group"> 10 <label class="col-sm-3 control-label" for="username">用戶名</label> 11 <div class="col-sm-9"> 12 <input type="text" class="form-control" id="username" name="username" placeholder="用戶名" required> 13 </div> 14 </div> 15 <div class="form-group"> 16 <label class="col-sm-3 control-label" for="password">密碼</label> 17 <div class="col-sm-9"> 18 <input type="password" class="form-control" id="password" name="password" placeholder="密碼" required> 19 </div> 20 </div> 21 <div class="form-group"> 22 <div class="col-sm-offset-3 col-sm-9"> 23 <button type="submit" class="btn btn-primary">登錄</button> 24 </div> 25 </div> 26 <% } %> 27 </fieldset> 28 </form> 29 </div> 30 <%- include footer %>
1 <%- include header %> 2 <div class="container"> 3 <form class=" col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post"> 4 <fieldset> 5 6 <div class="form-group"> 7 <label class="col-sm-3 control-label" for="username">用戶名</label> 8 <div class="col-sm-9"> 9 <input type="text" class="form-control" id="username" name="username" placeholder="用戶名" required> 10 </div> 11 </div> 12 <div class="form-group"> 13 <label class="col-sm-3 control-label" for="password2">密碼</label> 14 <div class="col-sm-9"> 15 <input type="password" class="form-control" id="password2" name="password2" placeholder="密碼" required> 16 </div> 17 </div> 18 <div class="form-group"> 19 <div class="col-sm-offset-3 col-sm-9"> 20 <button type="submit" class="btn btn-primary">注冊</button> 21 </div> 22 </div> 23 </fieldset> 24 </form> 25 </div> 26 <%- include footer %>
1 <% include header %> 2 用戶：<%= user %><h1> 歡迎登錄！！</h1> 3 <a class="btn" href="/logout">退出</a> 4 <% include footer %>
1 <%- include header %> 2 <% if(locals.islogin){%> 3 用戶：<h2><%= test %></h2>已經登陸 4 <% }else{%> 5 <p><a href="/login">登錄</a></p> 6 <%}%> 7 <%- include footer %>
NO 3. 連接mysql數據庫dbConnect.js
在node_modules目錄下創建一個文件夾dao存放dbConnect.js,目錄為： /node_modules/dao/dbConnect.js
1 var mysql=require('mysql'); 2 3 function connectServer(){ 4 5 var client=mysql.createConnection({ 6 host:'localhost', 7 user:'root', 8 password:'abc123456', 9 database:'dby' 10 }) 11 12 return client; 13 } 14 15 16 function selectFun(client,username,callback){ 17 //client為一個mysql連接對象 18 client.query('select password from table_1 where username="'+username+'"',function(err,results,fields){ 19 if(err) throw err; 20 21 callback(results); 22 }); 23 } 24 25 function insertFun(client , username , password,callback){ 26 client.query('insert into table_1 value(?,?)', [username, password], function(err,result){ 27 if( err ){ 28 console.log( "error:" + err.message); 29 return err; 30 } 31 callback(err); 32 }); 33 } 34 35 exports.connect = connectServer; 36 exports.selectFun = selectFun; 37 exports.insertFun = insertFun;
NO 4. 配置app.js , package.json
其中注明有： // 需要添加的 和 //需要修改的
1 var express = require('express'); 2 var path = require('path'); 3 var favicon = require('serve-favicon'); 4 var logger = require('morgan'); 5 var cookieParser = require('cookie-parser'); 6 var bodyParser = require('body-parser'); 7 var routes = require('./routes/index'); 8 var users = require('./routes/users'); 9 // 需要添加的 10 var session=require('express-session'); 11 12 13 14 var app = express(); 15 16 // view engine setup 17 app.set('views', path.join(__dirname, 'views')); 18 app.set('view engine', 'ejs'); 19 20 app.use(logger('dev')); 21 app.use(bodyParser.json()); 22 app.use(bodyParser.urlencoded({ extended: false })); 23 24 //需要修改的 25 app.use(cookieParser("An")); 26 //需要添加的 27 app.use(session({ 28 secret:'an', 29 resave:false, 30 saveUninitialized:true 31 })); 32 33 34 app.use(express.static(path.join(__dirname, 'public'))); 35 36 app.use('/', routes); 37 app.use('/users', users); 38 39 // catch 404 and forward to error handler 40 app.use(function(req, res, next) { 41 var err = new Error('Not Found'); 42 err.status = 404; 43 next(err); 44 }); 45 46 // error handlers 47 48 // development error handler 49 // will print stacktrace 50 if (app.get('env') === 'development') { 51 app.use(function(err, req, res, next) { 52 res.status(err.status || 500); 53 res.render('error', { 54 message: err.message, 55 error: err 56 }); 57 }); 58 } 59 60 // production error handler 61 // no stacktraces leaked to user 62 app.use(function(err, req, res, next) { 63 res.status(err.status || 500); 64 res.render('error', { 65 message: err.message, 66 error: {} 67 }); 68 }); 69 70 module.exports = app;
1 { 2 "name": "test4", 3 "version": "0.0.0", 4 "private": true, 5 "scripts": { 6 "start": "node ./bin/www" 7 }, 8 "dependencies": { 9 "express": "~4.10.6", 10 "body-parser": "~1.10.1", 11 "cookie-parser": "~1.3.3", 12 "morgan": "~1.5.1", 13 "serve-favicon": "~2.2.0", 14 "debug": "~2.1.1", 15 "ejs": "~1.0.0", 16 //需要添加的，也可以從其他地方拷貝到node_modules目錄下 17 "mysql":"latest", 18 "express-session":"latest" 19 } 20 }
NO 5. 配置路由
第一種方式：全部路由規則集中寫在 routes目錄下的index.js文件中，代碼如下：
1 var express = require('express'); 2 var router = express.Router(); 3 var usr=require('dao/dbConnect'); 4 5 /* GET home page. */ 6 router.get('/', function(req, res) { 7 if(req.cookies.islogin){ 8 req.session.islogin=req.cookies.islogin; 9 } 10 if(req.session.islogin){ 11 res.locals.islogin=req.session.islogin; 12 } 13 res.render('index', { title: 'HOME',test:res.locals.islogin}); 14 }); 15 16 17 router.route('/login') 18 .get(function(req, res) { 19 if(req.session.islogin){ 20 res.locals.islogin=req.session.islogin; 21 } 22 23 if(req.cookies.islogin){ 24 req.session.islogin=req.cookies.islogin; 25 } 26 res.render('login', { title: '用戶登錄' ,test:res.locals.islogin}); 27 }) 28 .post(function(req, res) { 29 client=usr.connect(); 30 result=null; 31 usr.selectFun(client,req.body.username, function (result) { 32 if(result[0]===undefined){ 33 res.send('沒有該用戶'); 34 }else{ 35 if(result[0].password===req.body.password){ 36 req.session.islogin=req.body.username; 37 res.locals.islogin=req.session.islogin; 38 res.cookie('islogin',res.locals.islogin,{maxAge:60000}); 39 res.redirect('/home'); 40 }else 41 { 42 res.redirect('/login'); 43 } 44 } 45 }); 46 }); 47 48 router.get('/logout', function(req, res) { 49 res.clearCookie('islogin'); 50 req.session.destroy(); 51 res.redirect('/'); 52 }); 53 54 router.get('/home', function(req, res) { 55 if(req.session.islogin){ 56 res.locals.islogin=req.session.islogin; 57 } 58 if(req.cookies.islogin){ 59 req.session.islogin=req.cookies.islogin; 60 } 61 res.render('home', { title: 'Home', user: res.locals.islogin }); 62 }); 63 64 router.route('/reg') 65 .get(function(req,res){ 66 res.render('reg',{title:'注冊'}); 67 }) 68 .post(function(req,res) { 69 client = usr.connect(); 70 71 usr.insertFun(client,req.body.username ,req.body.password2, function (err) { 72 if(err) throw err; 73 res.send('注冊成功'); 74 }); 75 }); 76 77 module.exports = router;
第二種方式： 每一個views目錄下有的ejs文件，都在 routes目錄下 建立對應的.js路由控制器，目錄：
這種方式需要在app.js中指定路由路徑，示例如下：
1 //需要添加的 2 var a=require('./routes/a'); 3 var b=require('./routes/b'); 4 var c=require('./routes/c'); 5 6 ... 7 var app=Express(); 8 ... 9 10 //需要添加的 11 app.use('/a',a); 12 app.use('/b',b); 13 app.use('/c',c);
NO 6.加入session 和 cookies
①、在package.json中添加mysql 和 express-session，添加內容：
package.json里面的注釋不能有，需要刪除
1 //需要添加的，也可以從其他地方拷貝到node_modules目錄下 2 "mysql":"latest", 3 "express-session":"latest"
②、執行命令安裝，必須先cd到指定的工程目錄下，命令： npm install （示例如下，工程為:testA）
安裝后的目錄：
③、修改app.js,添加和修改代碼：
1 // 需要添加的, 在[ var app = express(); ] 上方 2 var session=require('express-session'); 3 4 var app = express(); 5 6 //需要修改的 7 app.use(cookieParser("An")); 8 9 //需要添加的, 在[ var app = express(); ] 下方 10 app.use(session({ 11 secret:'an', 12 resave:false, 13 saveUninitialized:true 14 }));
④、路由控制器routes中index.js的session和cookies, router.route('/login') ：
1 router.route('/login') 2 .get(function(req, res) { 3 if(req.session.islogin){ 4 res.locals.islogin=req.session.islogin; 5 } 6 7 if(req.cookies.islogin){ 8 req.session.islogin=req.cookies.islogin; 9 } 10 res.render('login', { title: '用戶登錄' ,test:res.locals.islogin}); 11 }) 12 .post(function(req, res) { 13 client=usr.connect(); 14 result=null; 15 usr.selectFun(client,req.body.username, function (result) { 16 if(result[0]===undefined){ 17 res.send('沒有該用戶'); 18 }else{ 19 if(result[0].password===req.body.password){ 20 req.session.islogin=req.body.username; 21 res.locals.islogin=req.session.islogin; 22 res.cookie('islogin',res.locals.islogin,{maxAge:60000}); 23 res.redirect('/home'); 24 }else 25 { 26 res.redirect('/login'); 27 } 28 } 29 }); 30 });
⑤、前端的session使用，views目錄下的login.ejs:
1 <%- include header %> 2 <div class="container"> 3 <form class="col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post"> 4 <fieldset> 5 <% if(locals.islogin) { %> 6 用戶：<h3> <%= test %></h3>已經登陸。<br> 7 <a class="btn" href="/logout">登出</a> 8 <% } else{ %> 9 <div class="form-group"> 10 <label class="col-sm-3 control-label" for="username">用戶名</label> 11 <div class="col-sm-9"> 12 <input type="text" class="form-control" id="username" name="username" placeholder="用戶名" required> 13 </div> 14 </div> 15 <div class="form-group"> 16 <label class="col-sm-3 control-label" for="password">密碼</label> 17 <div class="col-sm-9"> 18 <input type="password" class="form-control" id="password" name="password" placeholder="密碼" required> 19 </div> 20 </div> 21 <div class="form-group"> 22 <div class="col-sm-offset-3 col-sm-9"> 23 <button type="submit" class="btn btn-primary">登錄</button> 24 </div> 25 </div> 26 <% } %> 27 </fieldset> 28 </form> 29 </div> 30 <%- include footer %>
⑥、對於session和cookies的經驗：
session:單一的session使用在一次回話中，session會保存直到瀏覽器關閉。
寫入session:
req.session.islogin="write";
res.locals.islogin=req.session.islogin;
使用session(前端):
<% if(locals.islogin){ %>
session為真。
<% }else{ %>
<%- include html引用 %>
<% } %>
cookie: cookie是為session服務的，cookie依賴session：
寫入cookie:
res.cookie('islogin','wirteCookie',{maxAge:60000}); //毫秒為單位
使用cookie(路由控制器端):
if(req.cookies.islogin){ req.session.islogin=req.cookies.islogin; }
if(req.session.islogin){ res.locals.islogin=req.session.islogin; }
源碼下載鏈接：http://pan.baidu.com/s/1ntkmCmH（日久失效）
方便需要的人，新的地址引導：https://blog.allsmy.com//2017/01/07/nodelogin-complete-registration-system-source-code-download-url/
初學Node.js,不到之處，懇請包涵。
---------------------------------------------------------------------end---------------------------------------------------------------------