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);    }})
原创粉丝点击