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 如下图：

代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8"/>

 <title>Test</title>

 <link rel="stylesheet" href="/stylesheets/style.css">

 </head>

 <body>

 <header>

 <h1><%= title %></h1>

 </header>

 <nav>

 <span><a title="主页" href="/">home</a></span>

 <span><a title="登陆" href="/login">login</a></span>

 <span><a title="注册" href="/reg">register</a></span>

 </nav>

 <article>

header.ejs

 </article>

 </body>

 </html>

footer.ejs

 <%- include header %>

 <div class="container">

     <form class="col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post">

         <fieldset>

         <% if(locals.islogin) { %>

            用户：<h3> <%= test %></h3>已经登陆。<br>

            <a class="btn" href="/logout">登出</a>

             <% } else{ %>

             <div class="form-group">

                 <label class="col-sm-3 control-label" for="username">用户名</label>

                 <div class="col-sm-9">

                     <input type="text" class="form-control" id="username" name="username" placeholder="用户名" required>

                 </div>

             </div>

             <div class="form-group">

                 <label class="col-sm-3 control-label" for="password">密码</label>

                 <div class="col-sm-9">

                     <input type="password" class="form-control" id="password" name="password" placeholder="密码" required>

                 </div>

             </div>

             <div class="form-group">

                 <div class="col-sm-offset-3 col-sm-9">

                     <button type="submit" class="btn btn-primary">登录</button>

                 </div>

             </div>

             <% } %>

         </fieldset>

     </form>

 </div>

 <%- include footer %>

 <%- include header %>

 <div class="container">

     <form class=" col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post">

         <fieldset>

             <div class="form-group">

                 <label class="col-sm-3 control-label" for="username">用户名</label>

                 <div class="col-sm-9">

                     <input type="text" class="form-control" id="username" name="username" placeholder="用户名" required>

                 </div>

             </div>

             <div class="form-group">

                 <label class="col-sm-3 control-label" for="password2">密码</label>

                 <div class="col-sm-9">

                     <input type="password" class="form-control" id="password2" name="password2" placeholder="密码" required>

                 </div>

             </div>

             <div class="form-group">

                 <div class="col-sm-offset-3 col-sm-9">

                     <button type="submit" class="btn btn-primary">注册</button>

                 </div>

             </div>

         </fieldset>

     </form>

 </div>

 <%- include footer %>

reg.ejs

  <% include header %>

  用户：<%= user %><h1>  欢迎登录！！</h1>

  <a class="btn" href="/logout">退出</a>

  <% include footer %>

home.ejs

 <%- include header %>

    <% if(locals.islogin){%>

   用户：<h2><%= test %></h2>已经登陆

 <% }else{%>

 <p><a href="/login">登录</a></p>

 <%}%>

 <%- include footer %>

index.ejs

NO 3. 连接mysql数据库dbConnect.js

在node_modules目录下创建一个文件夹dao存放dbConnect.js,目录为： /node_modules/dao/dbConnect.js

 var mysql=require('mysql');

 function connectServer(){

     var client=mysql.createConnection({

         host:'localhost',

         user:'root',

         password:'abc123456',

         database:'dby'

     })

     return client;

 }

 function  selectFun(client,username,callback){

     //client为一个mysql连接对象

     client.query('select password from table_1 where username="'+username+'"',function(err,results,fields){

         if(err) throw err;

         callback(results);

     });

 }

 function insertFun(client , username , password,callback){

     client.query('insert into table_1 value(?,?)', [username, password], function(err,result){

         if( err ){

             console.log( "error:" + err.message);

             return err;

         }

           callback(err);

     });

 }

 exports.connect = connectServer;

 exports.selectFun  = selectFun;

 exports.insertFun = insertFun;

dbConnect.js

NO 4. 配置app.js , package.json

其中注明有： // 需要添加的和 //需要修改的

 var express = require('express');

 var path = require('path');

 var favicon = require('serve-favicon');

 var logger = require('morgan');

 var cookieParser = require('cookie-parser');

 var bodyParser = require('body-parser');

 var routes = require('./routes/index');

 var users = require('./routes/users');

 //  需要添加的

 var session=require('express-session');

 var app = express();

 // view engine setup

 app.set('views', path.join(__dirname, 'views'));

 app.set('view engine', 'ejs');

 app.use(logger('dev'));

 app.use(bodyParser.json());

 app.use(bodyParser.urlencoded({ extended: false }));

 //需要修改的

 app.use(cookieParser("An"));

 //需要添加的

 app.use(session({

     secret:'an',

     resave:false,

     saveUninitialized:true

 }));

 app.use(express.static(path.join(__dirname, 'public')));

 app.use('/', routes);

 app.use('/users', users);

 // catch 404 and forward to error handler

 app.use(function(req, res, next) {

     var err = new Error('Not Found');

     err.status = 404;

     next(err);

 });

 // error handlers

 // development error handler

 // will print stacktrace

 if (app.get('env') === 'development') {

     app.use(function(err, req, res, next) {

         res.status(err.status || 500);

         res.render('error', {

             message: err.message,

             error: err

         });

     });

 }

 // production error handler

 // no stacktraces leaked to user

 app.use(function(err, req, res, next) {

     res.status(err.status || 500);

     res.render('error', {

         message: err.message,

         error: {}

     });

 });

 module.exports = app;

app.js

 {

   "name": "test4",

   "version": "0.0.0",

   "private": true,

   "scripts": {

     "start": "node ./bin/www"

   },

   "dependencies": {

     "express": "~4.10.6",

     "body-parser": "~1.10.1",

     "cookie-parser": "~1.3.3",

     "morgan": "~1.5.1",

     "serve-favicon": "~2.2.0",

     "debug": "~2.1.1",

     "ejs": "~1.0.0",

       //需要添加的，也可以从其他地方拷贝到node_modules目录下

     "mysql":"latest",

     "express-session":"latest"

   }

 }

package.json

NO 5. 配置路由

第一种方式：全部路由规则集中写在 routes目录下的index.js文件中，代码如下：

 var express = require('express');

 var router = express.Router();

 var usr=require('dao/dbConnect');

 /* GET home page. */

 router.get('/', function(req, res) {

     if(req.cookies.islogin){

         req.session.islogin=req.cookies.islogin;

     }

 if(req.session.islogin){

     res.locals.islogin=req.session.islogin;

 }

   res.render('index', { title: 'HOME',test:res.locals.islogin});

 });

 router.route('/login')

     .get(function(req, res) {

         if(req.session.islogin){

             res.locals.islogin=req.session.islogin;

         }

         if(req.cookies.islogin){

             req.session.islogin=req.cookies.islogin;

         }

         res.render('login', { title: '用户登录' ,test:res.locals.islogin});

     })

     .post(function(req, res) {

         client=usr.connect();

         result=null;

         usr.selectFun(client,req.body.username, function (result) {

             if(result[0]===undefined){

                 res.send('没有该用户');

             }else{

                 if(result[0].password===req.body.password){

                     req.session.islogin=req.body.username;

                     res.locals.islogin=req.session.islogin;

                     res.cookie('islogin',res.locals.islogin,{maxAge:60000});

                     res.redirect('/home');

                 }else

                 {

                     res.redirect('/login');

                 }

                }

         });

     });

 router.get('/logout', function(req, res) {

     res.clearCookie('islogin');

     req.session.destroy();

     res.redirect('/');

 });

 router.get('/home', function(req, res) {

     if(req.session.islogin){

         res.locals.islogin=req.session.islogin;

     }

     if(req.cookies.islogin){

         req.session.islogin=req.cookies.islogin;

     }

     res.render('home', { title: 'Home', user: res.locals.islogin });

 });

 router.route('/reg')

     .get(function(req,res){

         res.render('reg',{title:'注册'});

     })

     .post(function(req,res) {

         client = usr.connect();

         usr.insertFun(client,req.body.username ,req.body.password2, function (err) {

               if(err) throw err;

               res.send('注册成功');

         });

     });

 module.exports = router;

index.js

第二种方式：每一个views目录下有的ejs文件，都在 routes目录下建立对应的.js路由控制器，目录：

这种方式需要在app.js中指定路由路径，示例如下：

 //需要添加的

 var a=require('./routes/a');

 var b=require('./routes/b');

 var c=require('./routes/c');

          ...

  var app=Express();

          ...

 //需要添加的

 app.use('/a',a);

 app.use('/b',b);

 app.use('/c',c);

app修改示例

NO 6.加入session 和 cookies

①、在package.json中添加mysql 和 express-session，添加内容：

package.json里面的注释不能有，需要删除

     //需要添加的，也可以从其他地方拷贝到node_modules目录下

     "mysql":"latest",

     "express-session":"latest"

session-package

②、执行命令安装，必须先cd到指定的工程目录下，命令： npm install （示例如下，工程为:testA）

安装后的目录：

③、修改app.js,添加和修改代码：

 //  需要添加的, 在[ var app = express(); ] 上方

 var session=require('express-session');

 var app = express();

 //需要修改的

 app.use(cookieParser("An"));

 //需要添加的, 在[ var app = express(); ] 下方

 app.use(session({

     secret:'an',

     resave:false,

     saveUninitialized:true

 }));

session-app

④、路由控制器routes中index.js的session和cookies, router.route('/login') ：

 router.route('/login')

     .get(function(req, res) {

         if(req.session.islogin){

             res.locals.islogin=req.session.islogin;

         }

         if(req.cookies.islogin){

             req.session.islogin=req.cookies.islogin;

         }

         res.render('login', { title: '用户登录' ,test:res.locals.islogin});

     })

     .post(function(req, res) {

         client=usr.connect();

         result=null;

         usr.selectFun(client,req.body.username, function (result) {

             if(result[0]===undefined){

                 res.send('没有该用户');

             }else{

                 if(result[0].password===req.body.password){

                     req.session.islogin=req.body.username;

                     res.locals.islogin=req.session.islogin;

                     res.cookie('islogin',res.locals.islogin,{maxAge:60000});

                     res.redirect('/home');

                 }else

                 {

                     res.redirect('/login');

                 }

                }

         });

     });

routes-login

⑤、前端的session使用，views目录下的login.ejs:

 <%- include header %>

 <div class="container">

     <form class="col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post">

         <fieldset>

         <% if(locals.islogin) { %>

            用户：<h3> <%= test %></h3>已经登陆。<br>

            <a class="btn" href="/logout">登出</a>

             <% } else{ %>

             <div class="form-group">

                 <label class="col-sm-3 control-label" for="username">用户名</label>

                 <div class="col-sm-9">

                     <input type="text" class="form-control" id="username" name="username" placeholder="用户名" required>

                 </div>

             </div>

             <div class="form-group">

                 <label class="col-sm-3 control-label" for="password">密码</label>

                 <div class="col-sm-9">

                     <input type="password" class="form-control" id="password" name="password" placeholder="密码" required>

                 </div>

             </div>

             <div class="form-group">

                 <div class="col-sm-offset-3 col-sm-9">

                     <button type="submit" class="btn btn-primary">登录</button>

                 </div>

             </div>

             <% } %>

         </fieldset>

     </form>

 </div>

 <%- include footer %>

views-login

⑥、对于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---------------------------------------------------------------------

Node.js Express连接mysql完整的登陆注册系统(windows)的更多相关文章

Node.js：连接 MySQL
ylbtech-Node.js:连接 MySQL 1.返回顶部 1. Node.js 连接 MySQL 本章节我们将为大家介绍如何使用 Node.js 来连接 MySQL,并对数据库进行操作. 如果你 ...
前端使用node.js+express+mockjs+mysql实现简单服务端，2种方式模拟数据返回
今天,我教大家来搭建一个简单服务端参考文章: https://www.jianshu.com/p/cb89d9ac635e https://www.cnblogs.com/jj-notes/p/66 ...
node.js(express)连接mongoDB入门指导
一.写在前面人人都想成为全栈码农,作为一个web前端开发人员,通往全栈的简洁之路,貌似就是node.js了.前段时间学习了node.js,来谈谈新手如何快速的搭建自己的web服务,开启全栈之路. 二 ...
node.js（连接mysql）
mysql语句中的SQL sql语句中的分类: ---DDL:(data define language)定义数据列(create,drop,alter,truncate) ---DML:(data ...
Node.js+Express+MVC+Mysql小白创建新项目
1.打开CMD命令窗口,这一步不会的,回家休息,不要看了 2.npm install -g yo 等待时间看个人电脑情况. 如果没有npm命令,建议先安装npm ,npm安装介绍:https://d ...
Python学习笔记_02:使用Tkinter连接MySQL数据库实现登陆注册功能
1 环境搭建 1.1 Python安装 1.2 MySQL环境搭建 1.3安装MySQLdb 2 具体实现 2.1 登陆界面 2.2 注册界面 2.3 具体实现部分代码 1 环境搭建 1.1 P ...
使用Express连接mysql详细教程（附项目的完整代码我放在结尾了）
使用Express连接mysql详细教程(附项目的完整代码我放在结尾了) 要使用Express连接本地数据库我们首先需要安装好Express的依赖我们使用这个框架呢首先要有一点ajax的基础如果 ...
Node.js Express 框架学习
转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说 ...
Node.js Express 框架
Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP ...

随机推荐

Swift与C#的基础语法比较
背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...
Partition2：对表分区
在SQL Server中,普通表可以转化为分区表,而分区表不能转化为普通表,普通表转化成分区表的过程是不可逆的,将普通表转化为分区表的方法是: 在分区架构(Partition Scheme)上创建聚集 ...
Android性能优化之利用Rxlifecycle解决RxJava内存泄漏
前言: 其实RxJava引起的内存泄漏是我无意中发现了,本来是想了解Retrofit与RxJava相结合中是如何通过适配器模式解决的,结果却发现了RxJava是会引起内存泄漏的,所有想着查找一下资料学 ...
EventBus实现activity跟fragment交互数据
最近老是听到技术群里面有人提出需求,activity跟fragment交互数据,或者从一个activity跳转到另外一个activity的fragment,所以我给大家介绍一个开源项目,EventBu ...
从Vue.js窥探前端行业
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
Java中的Socket的用法
Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...
【干货分享】流程DEMO-合同会审表
流程名: 合同会审表业务描述: 合同的审批及签订流程相关文件: 流程包.xml 事务呈批表业务服务.xml 事务呈批表主数据.xml 流程说明: 1.此流程必须先进行事务呈批表流程的配置才可 ...
DevExpress - 使用 GaugeControl 标尺组件制作抽奖程序附源码
前不久,公司举办了15周年庆,其中添加了一个抽奖环节,要从在读学员中随机抽取幸运学员,当然,这个任务就分到了我这里. 最后的效果如下,启动有个欢迎页面,数据是来自Excel的,点击开始则上面的学号及姓 ...
join Linq
List<Publisher> Publishers = new List<Publisher>(); Publisher publish1 = new Publisher() ...
Ubuntu下开启php调试模式，显示报错信息
在Ubuntu下php的缺省设置是不显示错误信息的,如果程序出错会显示“无法处理此请求的错误提示”,这在开发环境下非常不方便. 其实我们只要编辑下apache的配置文件就好 1.我的apache 配置 ...

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

Node.js Express连接mysql完整的登陆注册系统(windows)的更多相关文章

随机推荐

热门专题