Nodejs学习总结 -Express 登录注册实例（二）

项目创建后，我们来做个登录注册实例，详细操作步骤如下。

1、新建项目demo ，具体操作步骤参考上一章内容

https://www.cnblogs.com/Anlycp/

2、添加mysql和session包

package.json dependencies中添加下面内容后输入npm install进行安装

"mysql": "latest",
"express-session" : "latest",

输入下面语句进行和上面功能相同（多个安装包空格隔开）

npm install mysql express-session –save

3、app.js 添加session配置

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

// 设置 Session

//位置必须写在app.use(‘/‘, routes);前，否则下面中req.session.user 赋值时会报 TypeError: Cannot set property ‘user‘ of undefined错误
app.use(session({
     secret: ‘12345‘,
     name: ‘demo‘,   //这里的name值得是cookie的name，默认cookie的name是：connect.sid
     cookie: {maxAge: 80000 }, //设置maxAge是80000ms，即80s后session和相应的cookie失效过期
     resave: false,
     saveUninitialized: true,
}));

4、创建数据库及用户表

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=‘用户信息表‘;

5、新建models文件夹，创建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 :‘caip‘,
      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(QUERY_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(QUERY_LOGIN,[user.username],function(err,result){
      if (err) {
        console.log("SELECT_LOGIN Error: " + err.message);
        return;
      }
      connection.release();
      callback(err,result);
    });
  });
}
module.exports = User;

6、页面目录及详细代码

index 登录及注册链接跳转

main 登录成功系统界面调用session显示登录用户信息

regist 注册

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="注册" onclick="getRegist()" />
      </div>
      <div class="form-btn">
        <label class="warn"><%=errMsg %></label>
      </div>
    </form>
    <script type="text/javascript">
      function getRegist(){
        location.href = "/regist";
      }
    </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;

regist.html

<!DOCTYPE html>
<html>
  <head>
    <title>注册</title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
    <form action="/regist" 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>

regist.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(‘regist‘, {errMsg:""});
});

router.post(‘/‘,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(‘regist‘, {errMsg: err });
        return;
      }
      newUser.userSave(function(err,result){
        if(err){
          res.render(‘regist‘, {errMsg: err });
          return;
        }
        if(result.insertId > 0){
          res.locals.status = "success";
          res.render(‘regist‘, {errMsg:‘‘ });
        }
        else{
          res.render(‘regist‘, {errMsg: err });
        }
       });
    });
});

module.exports = router;

时间： 2024-11-09 14:10:47

Nodejs学习总结 -Express 登录注册实例（二）的相关文章

Node.js_express_中间件 middleware_登录/注册实例

静态资源: 都写死了的资源,如 css,html 解析规则: 所有路由和中间件都在一个数组中,js 引擎会按照代码先后顺序添加路由和中间件当请求发送到服务器时,服务器获取当前的请求信息(请求方式.请求路由路径) 遍历数组,找到第一个匹配(请求路由路径和请求方式必须完全一致)到的路由或者中间件,执行其回调函数意味着: 声明多个同名路由时,始终解析第一个如果没找到,返回一个状态码为 404 的响应, Cannot GET / xxx 或者 Cannot POST / xxx 中间件 m

Nodejs学习-2 express ejs 片段视图

在Express框架下,使用ejs模板引擎: 支持默认的layout布局需要express-partials模块: 使用include代替partials: 片段视图显示方式也与3.x版不同,采用如下方式: routers/index.js 添加: router.get('/list', function(req, res) { res.render('list',{ layout:false, title: 'Express', items: ['1', '2',

vue-cli——vue-resource登录注册实例

前言使用vue-resource请求接口非常方便,在使用前需安装vue-resource依赖并在入口文件main.js中声明. 实例功能简述本实例只有简单的两个模块:登录和注册,主要演示如何用vue-resource请求接口以及后期逻辑书写.各个功能如下所示:登录模块登录-用户不存在登录-密码错误登录-成功注销登录注册模块项目功能梳理在创建项目之前,我们先理一下整个项目的功能模块.登录模块1.用户输入用户名及密码,调用接口??1.1用户名未找到,提示用户"用户名不存在"

登录注册案例二

这个项目的登录注册表单最开始想当然的用了blur+focus,功能实现是实现了,然而那个用户体验,啊,有这种东西? 最近又开始做表单,谷歌了一下怎样优雅写表单然后发现了AngularJs...慕课上啃了一下验证视频然后开工用ng.刚好这个项目客户不满意验证表单这里,上面让我改,改就改咯,于是就用上了ng.体验感觉上是上去了,IE8那个兼容不想管了orz. 首先引入ng, 然后在body上加上这句 ng-app="validationApp" ng-controller="ma

express+nodecoffee写passport登录验证实例(二）

二:实现登录认证 passport官网文档: http://passportjs.org/guide/ passport验证使用一种被称为“策略”的方式来验证请求,策略支持3种类型的验证:用户名密码验证:OAuth委派验证,OpenID等联合身份验证(facebook,twitter等). 联合身份认证可参考这里常用的是LocalStrategy策略来为用户名密码验证,它通过use()函数来调用. 使用步骤: 1:安装模块,passport 和 passport-local 2:添加引用 p

黑马day07 登录注册案例(二)

1根据index.jsp我们先开发注册的功能,当点击注册按钮的时候,超链接到注册页面,下面是一个注册的jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> &l

小程序短视频项目———开发用户登录注册（二）

一.Session之有状态会话与无状态会话基本概念其实就是没用到缓存的,直接储存在主机内存上的一种session方法. 依靠redis的一套操作 Redis-session的好处二.开发用户Redis-session 首先在com.imooc.common中新建工具类RedisOperator类,注意要加入@Component注解,因为他要作为组件注入到spring容器中. package com.imooc.utils; import java.util.Map; import java.

nodejs学习(3) express+socket.io

//node var express=require('express'); var app = express(); var server = require('http').createServer(app); var io = require('socket.io')(server); app.use(express.static('public')); io.on('connection', function(socket){ socket.on('message', function(

nodejs 学习六 express 三种查询url参数方法

req.param() 是被废弃的api req.params 俗点:取带冒号的参数 req.body 可以肯定的一点是req.body一定是post请求,express里依赖的中间件必须有bodyParser,不然req.body是没有的. req.query 不一定是get,post里看不的,用req.body取. 具体文档地址原文地址:https://www.cnblogs.com/liangcheng11/p/8119336.html