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 %>
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路由控制器，目录：
这种方式需要在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 ...
随机推荐
- JavaScript 中的数据类型
Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...
- ABP教程-打造一个《电话簿项目》-目录-MPA版本-基于ABP1.13版本
此系列文章会进行不定期的更新,应该会有6章左右. 感兴趣的朋友可以跟着看看,本教程适合已经看过ABP的文档但是又无从下手的小伙伴们. 初衷: 发布系列教程的原因是发现ABP在园子火了很久,但是发现还是 ...
- 游戏服务器菜鸟之C#初探一游戏服务
本人80后程序猿一枚,原来搞过C++/Java/C#,因为工作原因最后选择一直从事C#开发,因为读书时候对游戏一直比较感兴趣,机缘巧合公司做一个手游的项目,我就开始游戏服务器的折腾之旅. 游戏的构架是 ...
- HTML BOM Browser对象
BOM:Browser Object Model,即浏览器对象模型,提供了独立于内容的.可以与浏览器窗口进行互动的对象结构. Browser对象:指BOM提供的多个对象,包括:Window.Navig ...
- .NET平台开源项目速览(18)C#平台JSON实体类生成器JSON C# Class Generator
去年,我在一篇文章用原始方法解析复杂字符串,json一定要用JsonMapper么?中介绍了简单的JSON解析的问题,那种方法在当时的环境是非常方便的,因为不需要生成实体类,结构很容易解析.但随着业务 ...
- 【知识必备】RxJava+Retrofit二次封装最佳结合体验，打造懒人封装框架~
一.写在前面 相信各位看官对retrofit和rxjava已经耳熟能详了,最近一直在学习retrofit+rxjava的各种封装姿势,也结合自己的理解,一步一步的做起来. 骚年,如果你还没有掌握ret ...
- 声音分贝的概念，dBSPL.dBm,dBu,dBV,dBFS
需要做个音频的PPM表,看着一堆的音频术语真是懵了,苦苦在网上扒了几天的文档,终于有了点收获,下面关于声音的分贝做个总结. 分贝 Decibel 分贝(dB)是一个对数单位(logarithmic u ...
- java springMVC SSM 操作日志 4级别联动 文件管理 头像编辑 shiro redis
A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单; 技术:313596790freemaker模版技术 ,0个代码不用写 ...
- 【干货分享】流程DEMO-付款申请单
流程名: 付款申请单 业务描述: 包括每月固定开支.固定资产付款.办公用品付款.工资发放.个人所得税缴纳.营业税缴纳.公积金.社保缴纳和已签订合同的按期付款,最后是出纳付款,出纳核对发票. 流程发起 ...
- C#事件-使用事件需要的步骤
事件是C#中另一高级概念,使用方法和委托相关.奥运会参加百米的田径运动员听到枪声,比赛立即进行.其中枪声是事件,而运动员比赛就是这个事件发生后的动作.不参加该项比赛的人对枪声没有反应. 从程序员的角度 ...