用Node实现登录注册功能（一）

版权声明：可任意转载，转载注明出处。 https://blog.csdn.net/Handsome_fan/article/details/82432621

环境搭建

首先要初始化项目，我们进入项目的目录后，运行npm init命令即可进行对项目的初始化：

项目初始化完毕后就要开始安装项目依赖了：

我们可以在package.json文件中dependencies字段下看到此项目所需要的依赖：

至此，项目环境搭建完成，项目的目录结构如下：

.
├── db             // 数据库存储目录
├── models         // 数据库模型文件目录
├── node_modules   // node第三方模块目录
├── public         // 静态文件目录(css、js、image......)
├── routers        // 路由文件目录
├── schemas        //数据库结构文件(schema)目录
├── views          //模板视图文件目录
├── app.js         // 应用（启动）入口文件
├── package.json   
.

app.js

app.js是项目的入口文件，配置如下：

/**
 * 应用程序的启动（入口）文件
 */

// 加载express模块
var express = require('express');
// 加载模板处理模块
var swig = require('swig');
// 加载数据库模块
var mongoose = require('mongoose');
// 加载body-parser，用来处理post提交过来的数据
var bodyParser = require('body-parser');
// 创建app应用 => NodeJS Http.createServer()
var app = express();

// 设置静态文件托管
// 当用户访问的url以/public开始，那么直接返回对应__dirname + '/public'下的文件
app.use('/public', express.static(__dirname + '/public'));

// 配置应用模板
// 定义当前应用所使用的模板引擎
// 第一个参数：模板引擎的名称，同时也是模板引擎文件的后缀，第二个参数表示用于解析处理模板内容的方法
app.engine('html', swig.renderFile);
// 设置模板文件存放的目录，第一个参数必须是views，第二个参数是目录
app.set('views', './views');
// 注册所使用的模板引擎，第一个参数必须是 view engine，第二个参数和app.engine这个方法中定义的模板引擎的名称（第一个参数）是一致的
app.set('view engine', 'html');
// 在开发过程中，需要取消模板缓存
swig.setDefaults({cache: false});

// bodyparser设置
app.use( bodyParser.urlencoded({extended: true}) );

/**
 * 根据不同的功能划分模块
 */
app.use('/api', require('./routers/api')); // 接口路由
app.use('/', require('./routers/main'));   // 首页

mongoose.connect('mongodb://localhost:27019/login', { useNewUrlParser: true }, function (err) {
  if (err) {
    console.log('数据库连接失败');
  } else {
    console.log('数据库连接成功');
    // 监听http请求
    app.listen(8081);
  }
});

定义schemas与models

定义好入口文件后，我们在schemas和models文件夹下分别建立users.js与User.js文件。
users.js文件代码如下：

var mongoose = require('mongoose');

// 用户的表结构
module.exports = new mongoose.Schema({

  // 用户名
  username: String,

  // 密码
  password: String

});

User.js文件的代码如下：

var mongoose = require('mongoose');
var usersSchema = require('../schemas/users');

module.exports = mongoose.model('User', usersSchema);

Schema主要用于定义集合的结构，Model则根据Schema的定义来创建一个集合到数据库中。

路由的定义

然后，我们在routers文件夹下建立main.js和api.js，在main.js下，我们定义主页的路由，在api.js下定义接口的路由。
main.js的代码如下：

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

router.get('/', function (req, res, next) {
  res.render('main/index');
});

module.exports = router;

api.js的代码如下：

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

// 统一返回格式
var responseData;

router.use(function (req, res, next) {
  responseData = {
    code: 0,
    message: ''
  }
  next();
});

/**
 * 用户注册
 *  注册逻辑
 *
 *  1.用户名不能为空
 *  2.密码不能为空
 *  3.两次输入密码必须一致
 *
 *  1.用户是否已经被注册了
 *    数据库查询
 */
router.post('/user/register', function (req, res, next) {

  // console.log(req.body);
  var username = req.body.username;
  var password = req.body.password;
  var repassword = req.body.repassword;

  // 用户是否为空
  if (username == '') {
    responseData.code = 1;
    responseData.message = '用户名不能为空';
    res.json(responseData);
    return;
  }
  // 密码不能为空
  if (password == '') {
    responseData.code = 2;
    responseData.message = '密码不能为空';
    res.json(responseData);
    return;
  }

  // 两次输入的密码必须一致
  if (password != repassword) {
    responseData.code = 3;
    responseData.message = '两次输入的密码不一致';
    res.json(responseData);
    return;
  }

  // 用户名是否已经被注册了，如果数据库中已经存在和我们要注册的用户名同名的数据，表示该用户名已经被注册了
  User.findOne({
    username: username
  }).then(function (userInfo) {
    // console.log(userInfo);
    if (userInfo) {
      // 表示数据库中有该记录
      responseData.code = 4;
      responseData.message = '用户名已经被注册了';
      res.json(responseData);
      return;
    }
    // 保存用户注册的信息到数据库中
    var user = new User({
      username: username,
      password: password
    });
    return user.save();
  }).then(function (newUserInfo) {
    // console.log(newUserInfo);
    responseData.message = '注册成功';
    res.json(responseData);
  });
});

/**
 * 登录
 */
router.post('/user/login', function (req, res) {
  var username = req.body.username;
  var password = req.body.password;

  if (username == '' || password == '') {
    responseData.code = 1;
    responseData.message = '用户名和密码不能为空';
    res.json(responseData);
    return;
  }

  // 查询数据库中相同用户名和密码的记录是否存在，如果存在则登录成功
  User.findOne({
    username: username,
    password: password
  }).then(function (userInfo) {
    if (!userInfo) {
      responseData.code = 2;
      responseData.message = '用户名或密码错误';
      res.json(responseData);
      return;
    }
    // 用户名和密码是正确的
    responseData.message = '登录成功';
    responseData.userInfo = {
      _id: userInfo._id,
      username: userInfo.username
    };
    res.json(responseData);
    return;
  })

});


module.exports = router;

我们在api.js中定义了用户注册的逻辑和用户登录的逻辑。

首页

我们完成了以上的步骤后，就要开始首页内容的编写了，我们在views文件夹下建立一个main文件夹，然后在main下建立一个index.html文件。
index.html文件的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>学院首页</title>
  <link href="/public/main/css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="login-register">
  <div class="login-main">
    <input type="text" placeholder="用户名" name="user"/>
    <input type="password" placeholder="密码" name="password" />
    <button>登录</button><a href="javascript:;">还没账号？</a>
  </div>
  <div class="register-main">
    <input type="text" placeholder="用户名" name="user"/>
    <input type="password" placeholder="密码" name="password" />
    <input type="password" placeholder="确认密码" name="repassword" />
    <button>注册</button><a href="javascript:;">已有账号？</a>
  </div>
</div>
<div class="info"></div>
<script src="/public/main/js/jquery-1.12.4.min.js"></script>
<script src="/public/main/js/index.js"></script>
</body>
</html>

然后，我们在public文件夹下编写首页的css与js。
index.css文件代码：

.login-register {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.login-register a {
  text-decoration: none;
  margin-left: 5px;
}

.login-register .login-main {
  width: 358px;
  box-sizing: border-box;
}

.login-register .login-main input {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.login-register .register-main {
  width: 358px;
  box-sizing: border-box;
  display: none;
}

.login-register .register-main input {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

index.js文件的代码如下：

$(function () {

  // 切换到注册面板
  $('.login-main a').on('click', function () {
    $('.register-main').show();
    $('.login-main').hide();
  });

  // 切换到登录面板
  $('.register-main a').on('click', function () {
    $('.register-main').hide();
    $('.login-main').show();
  });

  // 注册
  $('.register-main button').on('click', function () {
    // 通过ajax提交请求
    $.ajax({
      type: 'post',
      url: '/api/user/register',
      data: {
        username: $('.register-main input[name="user"]').val(),
        password: $('.register-main input[name="password"]').val(),
        repassword: $('.register-main input[name="repassword"]').val(),
      },
      dataType: 'json',
      success: function (result) {
        console.log(result);

        if (!result.code) {
          // 注册成功
          setTimeout(function () {
            $('.register-main').hide();
            $('.login-main').show();
          }, 1000)
        }
      }
    });
  });

  // 登录
  $('.login-main button').on('click', function () {
    // 通过ajax提交请求
    $.ajax({
      type: 'post',
      url: '/api/user/login',
      data: {
        username: $('.login-main input[name="user"]').val(),
        password: $('.login-main input[name="password"]').val()
      },
      dataType: 'json',
      success: function (result) {
        console.log(result);
        if (!result.code) {
          // 登录成功
          setTimeout(function () {
            $('.register-main').hide();
            $('.login-main').hide();

            // 登录成功后的显示
            $('.info').html('<h2>'+ result.userInfo.username +'，欢迎进入超级英雄学院！</h2>');
          }, 1000)
        }
      }
    });
  });

});

至此，我们的注册与登录功能就算是完成了。

效果演示