node.js实现用户登录注册简单示例

最新推荐文章于 2024-08-31 08:05:36 发布

wisdom_bo

最新推荐文章于 2024-08-31 08:05:36 发布

阅读量8.2k

点赞数 9

分类专栏： web前端文章标签： nodejs 登录注册 routes views app.js

本文链接：https://blog.csdn.net/hh12211221/article/details/77573292

版权

web前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

在前面已经讲述如何创建一个nodejs项目，此处不在做介绍，具体可查看http://blog.csdn.net/hh12211221/article/details/77555344，选择一个视图工具打开nodejs项目。

在正式写功能之前，先做一些准备工作，创建数据库及下载所需要的模板

创建数据库

创建数据库userdb及表userinfo

CREATE DATABASE IF NOT EXISTS nodedb CHARACTER SET UTF8;

USE nodedb;

SET FOREIGN_KEY_CHECKS=0;

DROP TABLE IF EXISTS `userinfo`;
CREATE TABLE `userinfo` (
  `userid` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `username` varchar(64) NOT NULL COMMENT '用户名',
  `userpwd` varchar(64) NOT NULL COMMENT '用户密码',
  PRIMARY KEY (`userid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='用户信息表';

修改package.json

{
  "name": "nodejs",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "ejs": "~2.3.1",
    "jade": "~1.11.0",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2",
    "express-session" : "latest",
    "mysql" : "latest",//指定mysql是最新版本
  }
}

加载模块

npm install

修改app.js

1、jade模板修改为html模板

app.set('views', path.join(__dirname, 'views'));
//app.set('view engine', 'jade');
app.engine("html",require("ejs").__express);
//设置视图模板引擎为html
app.set('view engine', 'html');

2、添加session中间件

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

...

app.use(session({

  secret:'12345',
  name:'nodejs',
  cookie:{maxAge:80000},
  resave:false,
  saveUninitialized:true,
}));

创建文件

按照下图所示，依次创建所需要的文件

即在routes目录下分别创建index.js、mian.js、regist.js、users.js

views目录下分别创建error.html、index.html、main.html、register.html

创建models文件夹，并创建user.js用于存放数据库配置至于其他文件中的代码，后面会做详细介绍。

app.js中添加代码

...

var regist = require('./routes/regist');
var main = require('./routes/main');

...

app.use('/register', regist);  
app.use('/main', main);

数据库访问方法

新建modules文件夹，并在其中创建user.js，具体代码如下

var mysql = require('mysql');

var DB_NAME= 'nodedb';

//创建连接池 createPool(Object)
// Object和createConnection参数相同。
var pool = mysql.createPool({
      host : '127.0.0.1',
      user : 'root',
      password :'root',
      database:'nodedb',
      port : 3306
  });
//可以监听connection事件，并设置session值
pool.on('connnection',function(connection){
  console.log("pool on");
  connection.query('SET SESSION auto_increment_increment=1')
});

function User(user){
  this.username = user.username;
  this.userpwd = user.userpwd;
}

User.prototype.userSave = function save(callback){
  var user = {
    username : this.username,
    userpwd : this.userpwd
  };
  var INSERT_USER= "INSERT INTO USERINFO (USERID,USERNAME,USERPWD) VALUES (0,?,?)";
  pool.getConnection(function(err,connection){
    connection.query(INSERT_USER,[user.username,user.userpwd],function(err,result){
      if(err){
        console.log("INSERT_USER Error: " + err.message);
        return;
      }
      connection.release();
      callback(err,result);
    });
  });
};


//根据用户名得到用户数量
User.prototype.userNum = function(username, callback) {
  pool.getConnection(function(err,connection){
    console.log("getConnection");
    console.log("getUserNumByName");
    var SELECT_NUM = "SELECT COUNT(1) AS num FROM USERINFO WHERE USERNAME = ?";
    connection.query(SELECT_NUM, [username], function (err, result) {
      if (err) {
        console.log("SELECT_NUM Error: " + err.message);
        return;
      }
      connection.release();
      callback(err,result);
    });
  });
};

User.prototype.userInfo = function(callback){
  var user = {
    username : this.username,
    userpwd : this.userpwd
  };
  var SELECT_LOGIN ="SELECT * FROM USERINFO WHERE USERNAME = ?";
  pool.getConnection(function(err,connection){
    connection.query(SELECT_LOGIN,[user.username],function(err,result){
      if (err) {
        console.log("SELECT_LOGIN Error: " + err.message);
        return;
      }
      connection.release();
      callback(err,result);
    });
  });
}
module.exports = User;

用户注册register.html

<!DOCTYPE html>
<html>
<head>
    <title>注册</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<form action="/register/aa" method="post">
    <div class="form-group">
        <div class="form-name left">
            <label>用户名</label>
        </div>
        <input type="text" name="username" class="form-input left"/>
    </div>
    <div class="form-group">
        <div class="form-name left">
            <label>密码</label>
        </div>
        <input type="password" name="password" class="form-input left"/>
    </div>
    <div class="form-btn">
        <input type="submit" value="注册"  />
    </div>
    <div class="form-btn">
        <label class="warn"><%= errMsg %></label>
    </div>
    <% if(locals.status=="success"){ %>
    <div class="form-btn">
        注册成功，请点击<a href='/' >登录</a>
    </div>
    <%} %>
</form>
</body>
</html>

实现注册功能register.js

var express = require('express');
var router = express.Router();
var User = require("../models/user.js");

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('register', {errMsg:""});
});


router.post('/aa',function(req, res) {
    var username = req.body.username;
    var password = req.body.password;
    var newUser = new User({
      username : username,
      userpwd : password
    });
    //检查用户名是否已经存在
    newUser.userNum(newUser.username, function (err, results) {
      if (results != null && results[0]['num'] > 0) {
        err = '用户名已存在';
      }

      if (err) {
        res.render('register', {errMsg: err });
        return;
      }
      newUser.userSave(function(err,result){
        if(err){
          res.render('register', {errMsg: err });
          return;
        }
        if(result.insertId > 0){
          res.locals.status = "success";
          res.render('register', {errMsg:'' });
        }
        else{
          res.render('register', {errMsg: err });
        }
       });
    });
});

module.exports = router;

用户登录index.html

<!DOCTYPE html>
<html>
<head>
    <title>登录界面</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<form action="/" method="post">
    <div class="form-group">
        <div class="form-name left">
            <label>用户名</label>
        </div>
        <input type="text" name="username" class="form-input left"/>
    </div>
    <div class="form-group">
        <div class="form-name left">
            <label>密码</label>
        </div>
        <input type="password" name="password" class="form-input left"/>
    </div>
    <div class="form-btn">
        <input type="submit" value="登录"  />
        <input type="button" value="注册" οnclick="getRegist()" />
    </div>
    <div class="form-btn">
        <label class="warn"><%=errMsg %></label>
    </div>
</form>
<script type="text/javascript">
    function getRegist(){
        location.href = "/register";
    }
</script>
</body>
</html>

实现登录功能index.js

var express = require('express');
var router = express.Router();
var User = require("../models/user.js");

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index',{ errMsg: '' });
});

router.post("/",function(req, res) {
    //获取form表单提交的登录数据
    var username = req.body.username;
    var password = req.body.password;
    var loginUser = new User({
      username : username,
      userpwd : password
    });
    //通过用户名取到用户信息
    loginUser.userInfo(function(err,result){
      if(err){
        res.render('index', {errMsg: err });
        return;
      }
      if(result == ''){
         res.render('index', {errMsg: '用户不存在' });
         return;
      }
      else{
        //判断用户密码是否填写正确  演示没做加密，等有时间再加
        if(result[0]['userpwd'] == password){
          var user = {'username':username};
          req.session.user = user;//保存用户session信息
          res.redirect('/main');
        }
        else{
           res.render('index', {errMsg: '密码有误' });
        }
      }
     });
});

module.exports = router;

登录成功主页面main.html

<!DOCTYPE html>
<html>
<head>
    <title>系统界面</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="/javascripts/jquery.min.js" type="text/javascript"></script>
</head>
<body>
欢迎  <%= username %>
</body>

实现主页面功能main.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  var user = req.session.user;
   res.render('main', { username:user.username});
});

module.exports = router;

至此，用户注册登录项目圆满完成，运行项目，输入“http://127.0.0.1:3100/”进入主界面，可分别做注册、登录功能，此处不再具体展示。

完整代码可以查看http://download.csdn.net/download/hh12211221/9948087
package.json详解可查看http://blog.csdn.net/hh12211221/article/details/77567627
app.js详解可查看http://blog.csdn.net/hh12211221/article/details/77570555