Node.js Express连接mysql完整的登陆注册系统(windows)

来源：互联网发布：c语言代码在线测试编辑：程序博客网时间：2024/06/08 03:32

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 setup17 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:true31 }));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 handler40 app.use(function(req, res, next) {41     var err = new Error('Not Found');42     err.status = 404;43     next(err);44 });45 46 // error handlers47 48 // development error handler49 // will print stacktrace50 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: err56         });57     });58 }59 60 // production error handler61 // no stacktraces leaked to user62 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                 }else41                 {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:true14 }));

④、路由控制器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                 }else25                 {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

0 0