express实现登录注册(mysql+mongodb),简单添加session(两种)
来源:互联网 发布:usb网卡改mac 编辑:程序博客网 时间:2024/06/05 07:46
当我们在浏览器输入一个url提交之后,浏览器会发出一个请求到服务器
其中一个很重要的内容就是资源的路径,服务器收到请求后会根据这个资源路径来匹配对应的模块
完成相应的业务逻辑处理,生成一个响应结果。
寻找匹配处理模块的过程就称为路由。(route)
生成响应结果之后会返回给浏览器,浏览器根据响应的数据完成内容的展示和处理,这就是完整的通信过程。
搭建好nodejs,express,websocket,session,cookie,ejs,mongodb等等环境,百度一下。
如图创建tmall项目在nodejs目录下,node—modules下面都是框架和各类环境的文件。
创建model文件装对数据库操作的代码,创建public文件夹装静态文件(图片,网页样式,js等等),
创建views。
首先对代码进行优化,路由数据库操作这些全写在一个文件显然是不合理的,所以分成三个区块(mvc)
登录注册页面放在views中,路由设置在主文件夹下,数据文件存在model中。
1.基于mysql的实现
1.视图文件
在tmall->views下放入用来展示的前端页面,后缀改为ejs
2.创建路由主文件
项目目录下创建文件tmall.jss
1.基本代码
//引入expressvar express = require('express');//请求解析中间件var bodyParser = require('body-parser');//创建app对象var app = express();//指定模板引擎app.set("view engine", 'ejs');//指定模板位置app.set('views', __dirname + '/views');//设置静态文件app.use(express.static('public'));app.use(bodyParser.json());//创建 application/x-www-form-urlencoded 编码解析app.use(bodyParser.urlencoded({ extended:false}));
2.路由
“/reg”是浏览器地址栏后面加的参数跳注册页面,指向views下的ejs文件
app.get('/reg', function (req, res) { res.render("register");})
跳首页和登录同理
app.get('/hom', function (req, res) { res.render("home");})
app.get('/log', function (req, res) { res.render("login");})
3.路由分发出去
我们把其他的路由全都放在单独的js文件中,单独创建个users.js在tmall.js同目录下
tmall.js添加路由使用路径
如果前端调用到某个方法就是/user/路由url
app.use('/user',require('./users.js'))
最后添加端口监听
app.listen(8080);
3.路由控制文件
现在在tmall.jss同目录创建users.jss
/** * Created by Administrator on 2017/7/16. *///引入expressvar express = require('express');//创建router对象var router = express.Router();//引入加密模块var crypto = require('crypto');//创建app对象var app = express();//这里是注册的控制router.post('/register',function (req,res) { console.log(req.body); //1,取出数据 var name = req.body.name; var passwd = req.body.password; var mobile = req.body.mobile; //获得UserModel (下面是调用封装的数据库方法)在model文件夹下的usermodel文件 var UserModel = require("./model/UserModel"); //创建userModel对象 var userModel = new UserModel(); //对数据初始化 userModel.init(); //进行插入数据 //生成口令的散列值,crypto 模块功能是加密并生成各种散列 var md5 = crypto.createHash('md5'); //3 digest([encoding])方法计算数据的hash摘要值,encoding是可选参数,不传则返回buff var en_data = md5.update(passwd).digest('hex');//调用insert方法,三个参数是个回调函数 userModel.insert(name,en_data,mobile,function (err, result){ if(err){ console.log('[INSERT ERROR] - ',err.message); res.render("register",{message:"成功失败"}); }else{ res.render("login",{message:"成功插入"}); } });});//登录路由router.post('/login',function (req,res) { var name = req.body.username; var passwd = req.body.password; var md5 = crypto.createHash('md5'); //3 digest([encoding])方法计算数据的hash摘要值,encoding是可选参数,不传则返回buff var en_data = md5.update(passwd).digest('hex'); console.log(en_data); var UserModel = require("./model/UserModel"); //创建userModel对象 var userModel = new UserModel(); //对数据初始化 userModel.init(); userModel.select(name,en_data,function (err,result) { console.log(result); if(err){ return res.json({ret_code: 2, ret_msg: '登录失败'}); }else if(result[0].passwd==en_data){ res.json({ret_code: 0, ret_msg: '登录成功'}); } else{ res.json({ret_code: 1, ret_msg: '账号或密码错误'}); } })});//这里把它暴露出去module.exports = router;
4.mysql封装
如图,usermodel.js就是上面路由文件指向的数据库操作文件
直接代码解释
//类 和文件同名 function UserModel() { var connection; //连接数据库的方法 this.init = function (){ //引入mysql var mysql = require('mysql'); connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '000433', port: '3306', database : 'mydata' });//连接数据库 connection.connect(); };//这里就是控制路由里面用的方法,回调函数callback (注册添加) this.insert=function (username,passwd,mobile,callback) {//编写sql语句 var userAddSql = 'INSERT INTO members(username,passwd,mobile) VALUES(?,?,?)';//sql语句中的值 var userAddSql_Params = [username,passwd,mobile];//插入数据操作,回调函数,err当执行错误就传回一个err值 , 成功传回result connection.query(userAddSql,userAddSql_Params,function (err, result) { callback(err,result); }); //5,连接结束 connection.end(); }; //查询数据库方法,包含个回调函数 (登录查询) this.select = function (name,en_data,callback) { var userGetSql = 'SELECT * FROM members where username = "'+name+'"'; connection.query(userGetSql,function (err,result) { callback(err,result); }); connection.end(); };};//同样把这个封装的类暴露出去module.exports=UserModel;
5.前端代码的实现
(1)登录
<div class="login-form"> <form method="post" action="/user/login"> <div class="user-name"> <label for="user"><i class="am-icon-user"></i></label> <input type="text" name="username" id="username" placeholder="用户名"> </div> <div class="user-pass"> <label for="password"><i class="am-icon-lock"></i></label> <input type="password" name="passwd" id="passwd" placeholder="请输入密码"> </div> </form> </div> <div class="login-links"> <label for="remember-me"><input id="remember-me" type="checkbox">记住密码</label> <a href="#" class="am-fr">忘记密码</a> <a href="/reg" class="zcnext am-fr am-btn-default">注册</a> <br /> </div>
样式忽略,给表单加上,指向路由login
输入框对应的id和name ,控件加点击事件
<form method="post" action="/user/login">
ajax请求
<script type="text/javascript"> $('#login').click(function(evt){ evt.preventDefault(); $.ajax({ url: '/user/login', type: 'POST', data: { username: $('#username').val(), password: $('#passwd').val() }, success: function(data){ console.log(data); if(data.ret_code === 0){ //成功就跳首页 window.location.href='/hom' } }, err : function (data) { } }); });</script>
(2)注册
<form method="post" action="/user/register"> <div class="user-email"> <label for="email"><i class="am-icon-envelope-o"></i></label> <input type="email" name="username" id="username" placeholder="请输入账号"> </div> <div class="user-pass"> <label for="password"><i class="am-icon-lock"></i></label> <input type="password" name="passwd" id="passwd" placeholder="设置密码"> </div> <div class="user-pass"> <label for="passwordRepeat"><i class="am-icon-lock"></i></label> <input type="text" name="mobile" id="mobile" placeholder="设置手机号"> </div> </form> <div class="login-links"> <label for="reader-me"> <input id="reader-me" type="checkbox"> 点击表示您同意商城《服务协议》 </label> </div> <div class="am-cf"> <input type="submit" name="" id="reg" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl"> </div>
<script type="text/javascript"> $('#reg').click(function(evt){ evt.preventDefault(); console.log($('#username').val()) $.ajax({ url: '/user/register', type: 'POST', data: { name: $('#username').val(), password: $('#passwd').val(), mobile : $('#mobile').val() }, success: function(data){ console.log('cheng'); window.location.href='/log' } }); }); </script>
6.简单session的两种方法
1.在tmall.js中
var session = require('express-session');var cookieParser = require('cookie-parser');app.use(cookieParser());app.use(session({ secret: '12345', name: 'testapp', //这里的name值得是cookie的name,默认cookie的name是:connect.sid cookie: {maxAge: 80000 }, //设置maxAge是80000ms,即80s后session和相应的cookie失效过期 resave: false, saveUninitialized: true,}));
在登录成功跳首页的路由中代码改为
app.get('/hom', function (req, res) { if(req.session.lastPage) { console.log('Last page was: ' + req.session.lastPage + "."); res.render("home"); }else{ //每一次访问时,session对象的lastPage会自动的保存或更新内存中的session中去。 // res.send("You're Awesome. And the session expired time is: " + req.session.cookie.maxAge); req.session.lastPage = '/hom'; res.render("login"); }})
2.第二种session和cookie方法
(1)session
var express = require('express');var session = require('express-session');var app = express();app.use(session({ secret: '12345', name: 'express_11_cookie', //这里的name值得是cookie的name,默认cookie的name是:connect.sid cookie: {maxAge: 80000 }, //设置maxAge是80000ms,即80s后session和相应的cookie失效过期}));app.get('/login', function(req, res){ if (req.session.sign) {//检查用户是否已经登录 console.log(req.session);//打印session的值 res.send('welecome <strong><a href="' + req.session.name + '"/></strong>, 欢迎你再次登录'); } else { req.session.sign = true; req.session.name = 'http://blog.csdn.net/wzjisking?viewmode=contents'; res.send('欢迎登陆!'); }});app.listen(8888);
(2)cookie
var express = require('express');var cookieParser = require('cookie-parser');var app = express();app.use(cookieParser());app.get('/', function (req, res) { // 如果请求中的 cookie 存在 isVisit, 则输出 cookie // 否则,设置 cookie 字段 isVisit, 并设置过期时间为1分钟 if (req.cookies.isVisit) { console.log(req.cookies); res.send("再次欢迎访问"); } else { res.cookie('isVisit', 1, {maxAge: 60 * 1000}); res.send("欢迎第一次访问"); }});app.listen(8888);
2.mongodb实现
mongodb的知识
实际上只是改变对数据库的操作,从mysql改成mongodb,其他不变
方法大同小异
model文件夹创建文件singermodel.js
model的js代码
function SingerModel() { var MongoClient; var DB_CONN_SIR; this.init=function () { //获得对象 MongoClient = require('mongodb').MongoClient; //获得连接信息 DB_CONN_SIR = 'mongodb://localhost:27017/local'; } //查询 this.find=function (mondodb,collback) { MongoClient.connect(DB_CONN_SIR,function (err,db) { console.log("连接成功!"); //连接到表 var collection = db.collection('members'); collection.find(mondodb).toArray(function (err,result) { callback(err,result); }) }) } //添加 this.insert=function (mondodb,collback) { MongoClient.connect(DB_CONN_SIR,function (err,db) { console.log('连接成功') var collection = db.collection('members'); //5,插入数据 // var data = [{"username":"wudi","passwd":"111"},{"username":"小美","passwd":"222"}]; collection.insert.insert(mondodb, function(err, result) { callback(err,result); }) }) } //删除 this.remove=function (mondodb,collback) { MongoClient.connect(DB_CONN_STR, function(err, db) { console.log("连接成功!"); var collection = db.collection('members'); // var whereStr = {"username":'刘德华'}; collection.remove(mondodb, function (err, result) { callback(err,result); }) }) } //更新 this.updata=function (whereStr,updateStr,collback) { MongoClient.connect(DB_CONN_STR, function(err, db) { console.log("连接成功!"); //连接到表 var collection = db.collection('members'); //更新数据 // var whereStr = {"name":'刘德华'}; // var updateStr = {$set: { "introduce" : "是一个老帅哥" }}; collection.update(whereStr,updateStr, function(err, result) { callback(err,result); }); }); }}Module.exports=SingerModel;
在控制路由users中写需要的路由
这里只示例查询
//根据SingerMoel封装数据库方法操作数据库//操作mongodb数据库 var SingerModel = require('./model/SingerModel');//2创建对象var singer = new SingerModel();//3数据初始化singer.init();//4编写mongodb数据var whereStr = {"username":'wudi'};//5执行插入singer.find(whereStr,function (err,result) { if (err){ console.error(err); }else { console.error(result); }})
- express实现登录注册(mysql+mongodb),简单添加session(两种)
- Node.js+Express+MongoDB实现简单登录注册功能
- Node+Express+MongoDB实现登录注册功能
- 基于Node.js+express+MySQL+Bootstrap实现的简单登录注册
- node学习 express + mysql + ejs实现注册登录
- 用node和express连接mysql实现登录注册
- Node.js+Express+MySql实现用户登录注册
- express-session实现登录控制
- Express + Session 实现登录验证
- MKNetworkit,Express实现简单登录验证(1)
- 例子:实现最新版本Node.js中Express+mongodb的登录注册页面
- 实现简单登录注册
- express使用session实现登录身份认证
- 04.Django实现完整登录系统的两种方法(cookie and session)
- (数据库)Android登录,注册界面简单实现。
- JavaWeb + mySQL + Android 实现Android简单的注册登录
- Java+Tomcat+MySQL实现简单的网页注册和登录
- Spring+Spring MVC+Spring JDBC+MySql实现简单登录注册
- springmvc视图
- 1000·整数运算
- HIbernate多对多_查询
- Hibernate问题 failed to lazily initialize a collection of role
- 关于Java中的null值探究
- express实现登录注册(mysql+mongodb),简单添加session(两种)
- Git常用指令
- 入口文件
- Hibernate多对多_查询
- redux+react+webpack+热加载+兼容IE8(持续更新)
- angular的父子controller通信
- 【worldwind学习】worldwindjava高程数据客户端和服务器端配置
- JAVA 攻城狮 第二十三天
- 如何用c打印进度条