Node.js Express連接mysql完整的登陸註冊系統(windows)

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

初學Node.js,不到之處,懇請包涵。

轉自:http://www.cnblogs.com/allsmy/p/4221593.html
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章