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

时间:2022-12-18 09:46:57

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//查看版本)

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

第二部分:

概览:

1、新建一个工程

2、在views目录下新建ejs模板网页

3、连接mysql数据库dbConnect.js

4、配置app.js 和 package.json

5、配置路由(2种方式)

6、加入session和cookies

详细内容:

         NO 1. 新建工程

①、cd到要创建工程的目录: cd: NewCode\Node

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

②、使用express创建工程: express -e ejs testA

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

③、cd到testA: cd testA

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

④、安装node_modules:  npm install(这个过程有点慢)

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

⑤、启动工程: npm start

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

⑥、打开浏览器访问:http://localhost:3000(默认端口是3000)

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

         NO2.

在views目录下新建ejs模板: index.ejs(已有), error.ejs(已有),  header.ejs,  footer.ejs,  home.ejs,  login.ejs,  reg.ejs      如下图:

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

代码如下:

 <!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 %>

login.ejs

 <%- 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路由控制器,目录:

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

这种方式需要在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)

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

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

安装后的目录:

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

③、修改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)的更多相关文章

  1. Node&period;js:连接 MySQL

    ylbtech-Node.js:连接 MySQL 1.返回顶部 1. Node.js 连接 MySQL 本章节我们将为大家介绍如何使用 Node.js 来连接 MySQL,并对数据库进行操作. 如果你 ...

  2. 前端使用node&period;js&plus;express&plus;mockjs&plus;mysql实现简单服务端,2种方式模拟数据返回

    今天,我教大家来搭建一个简单服务端 参考文章: https://www.jianshu.com/p/cb89d9ac635e https://www.cnblogs.com/jj-notes/p/66 ...

  3. node&period;js&lpar;express&rpar;连接mongoDB入门指导

    一.写在前面 人人都想成为全栈码农,作为一个web前端开发人员,通往全栈的简洁之路,貌似就是node.js了.前段时间学习了node.js,来谈谈新手如何快速的搭建自己的web服务,开启全栈之路. 二 ...

  4. node&period;js(连接mysql)

    mysql语句中的SQL sql语句中的分类: ---DDL:(data define language)定义数据列(create,drop,alter,truncate) ---DML:(data ...

  5. Node&period;js&plus;Express&plus;MVC&plus;Mysql小白创建新项目

    1.打开CMD命令窗口,这一步不会的,回家休息,不要看了 2.npm install -g yo  等待时间看个人电脑情况. 如果没有npm命令,建议先安装npm ,npm安装介绍:https://d ...

  6. Python学习笔记&lowbar;02&colon;使用Tkinter连接MySQL数据库实现登陆注册功能

    1 环境搭建 1.1 Python安装 1.2 MySQL环境搭建 1.3安装MySQLdb  2 具体实现 2.1 登陆界面 2.2 注册界面 2.3 具体实现部分代码   1 环境搭建 1.1 P ...

  7. 使用Express连接mysql详细教程(附项目的完整代码我放在结尾了)

    使用Express连接mysql详细教程(附项目的完整代码我放在结尾了) 要使用Express连接本地数据库 我们首先需要安装好Express的依赖 我们使用这个框架呢首先要有一点ajax的基础 如果 ...

  8. Node&period;js Express 框架学习

    转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说 ...

  9. Node&period;js Express 框架

    Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP ...

随机推荐

  1. 【无私分享:ASP&period;NET CORE 项目实战(第十三章)】Asp&period;net Core 使用MyCat分布式数据库,实现读写分离

    目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 MyCat2.0版本很快就发布了,关于MyCat的动态和一些问题,大家可以加一下MyCat的官方QQ群:106088787.我 ...

  2. PHP无限级分类的实现(不使用递归)

    无限级分类在开发中经常使用,例如:部门结构.文章分类.无限级分类的难点在于“输出”和“查询”,例如 将文章分类输出为<ul>列表形式: 查找分类A下面所有分类包含的文章. 1.实现原理 在 ...

  3. 访问 Android Developers 403 错误

    原因: 以前改过 hosts. 现在用的 威-屁-恩. 解决办法: 把改过的 hosts 删掉就行了.

  4. Android Activity的加载模式和onActivityResult方法之间的冲突

    前言 今天在调试程序时,发现在某一Activity上点击返回键会调用该Activity的onActivityResult()方法.我一开始用log,后来用断点跟踪调试半天,还是百思不得其解.因为之前其 ...

  5. C语言有字符串这种数据类型吗?

    C/C++语言 用 char 数组 存放 字符串.例如: char str[]="abcd 1234";char *ss = "1234 XYZ";printf ...

  6. 转载——Python模拟登录代码

    ''' Created on 2014-2-20 @author: Vincent ''' import urllib.parse import gzip import json import re ...

  7. Android学习系列&lpar;1&rpar;--为App签名&lpar;为apk签名&rpar;

    写博客是一种快乐,前提是你有所写,与人分享,是另一种快乐,前提是你有舞台展示,博客园就是这样的舞台.这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1.签 ...

  8. WindowsPhone 在 根据公历 获取月球日期数据

    WindowsPhone 在 根据公历 获取月球日期数据 WindowsPhone 在 它们的定义 类,根据公历 获取月球日期数据 using System; using System.Collect ...

  9. 九度OJ题目1208:10进制 VS 2进制 &lpar;JAVA&rpar;

    题目描述: 对于一个十进制数A,将A转换为二进制数,然后按位逆序排列,再转换为十进制数B,我们乘B为A的二进制逆序数.     例如对于十进制数173,它的二进制形式为10101101,逆序排列得到1 ...

  10. canvas 从初级到XX 1&num; 部分非基础原生API的使用 &lbrack;初级向&rsqb;

    标题canvas 从初级到XX,XX是因为本文随机都可能会太监,并不会支持到入土.请慎重的往下看. 对于canvas的介绍,随处都可以找到,也就不啰嗦太多了.就直奔主题了. 先看一段代码,以及实现的效 ...