node+mongodb实现简单的登录和注册

最近在自学node，学习最好的方法就是实践，于是就想办法实现了一个简单的登录和注册页面。在此记录，以免忘记。后面继续努力。

1.首先要下载安装mongodb以及配置，开启

附上找到的连接
https://blog.csdn.net/littlely_ll/article/details/80479996

// 开启mongodb

1.mongod --dbpath "E:\data\db"
2.以管理员的身份去启动服务 mongo

//验证是否开启
浏览器输入http://localhost:27017 看是否连接成功，成功时会出现It looks like you are trying to access MongoDB over HTTP on the native driver port.
复制代码

2.搭建框架做好准备

我用的是express框架

npm init

npm install express --save

npm install express-generator -g

免重启，实时更新项目

npm i nodemon

///package.json配置
“devDependencies”: {
    'nodemon': '^1.18.9'
}

script部分
"scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  },

重启时，就可以用新建的devstart去重启命令了

$ DEBUG=express-locallibrary-tutorial:* npm run devstart

在vscode里面 直接执行

npm run devstart
复制代码

3.编写注册登录页面

登录页面：
  <div class="login">
        <h4>登录</h4>
        <div class="content">
            //点击提交路由变化
            <form action="http://127.0.0.1:3000/test/process_get" method="GET"">
                userName: <input type="text" name="userName">  <br>
                
                passWord: <input type="text" name="passWord">
                <input type="submit" value="login">
            </form>
            // 点击注册进到注册页面
            <form style="margin: 25px 10px;" action="http://127.0.0.1:3000/test/regin" method="GET">
                <input type="submit" value="regin">
            </form>
        </div>
    </div>
    
注册页面：
 <div class="login">
        <h4>注册</h4>
        <div class="content">
            //注册提交页面
            <form action="http://127.0.0.1:3000/test/Regin_get" method="GET"">
                userName: <input type="text" name="userName">  <br>
                
                passWord: <input type="text" name="passWord">
                <input type="submit" value="regin">
            </form>
            // 点击登录重回登录页面
            <form style="margin: 25px 10px;" action="http://127.0.0.1:3000/test/login" method="GET">
                <input type="submit" value="login">
            </form>
        <div>
    </div>
复制代码

4.编写app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
// 主讲test.js
var testRouter = require('./routes/test');

var app = express();

app.use('/', indexRouter)
app.use('/users', usersRouter);
app.use('/test', testRouter);

app.use(function(req, res, next) {
  console.log('use test ----------')
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  // set specical env
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

复制代码

5.test.js

var express = require('express');
var router = express.Router();
var fs = require('fs');
var path = require('path');
var ejs = require('ejs');
//存储在本地
var session = require('express-session');
var cookieParser = require('cookie-parser');
// var imghtml = require('./static/index')
var expImg = express();
//连接数据库操作
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";

//进去登录页面
router.get('/login', function (req, res) {
  //读取html文件
  fs.readFile('/nodeCodeTest/node_express_app/myapp/static/login.html', function(err,data) {
    if (err) return console.log(err)
    res.setHeader('Content-Type', 'text/html');
    res.send(data)
    // console.log('async: ' + data.toString())
  })
})

//进去注册页面
router.get('/regin', function (req, res) {
  fs.readFile('/nodeCodeTest/node_express_app/myapp/static/regin.html', function(err,data) {
    if (err) return console.log(err)
    res.setHeader('Content-Type', 'text/html');
    res.send(data)
  })
})

//点击登录触发事件
router.get('/process_get', function (req, res) {
    var response = {
      "userName":req.query.userName,
      "passWord":req.query.passWord
  };
  // 放入cookie中
  res.cookie('userInfo',response);
  // res.end(JSON.stringify(response));
  MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
    //数据库中的db是 fristNode 表格是userInfo，将登录信息放在这里
    var dbo = db.db("fristNode");
    dbo.collection("userInfo").find().toArray((err, result)=> { // 返回集合中所有数据
        if (err) throw err;
        console.log(result);
         let flag = false
        result.forEach( item => {
          if (item.name == req.query.userName) {
            flag = true
          }
          else {
            flag = false
            }
       })
       if(flag) {
          console.log(result, '登录成功');
          // 进入到登录成功的页面
          fs.readFile('/nodeCodeTest/node_express_app/myapp/static/test.html', function(err,data) {
            if (err) return console.log(err)
            // res.setHeader('Content-Type', 'text/html');
            res.end(data,JSON.stringify(response))
          })
        } else {
          res.render('loginerror');
        }
        db.close();
    });
  });
})

//点击注册触发事件
router.get('/regin_get', function (req, res) {
  var response = {
    "userName":req.query.userName,
    "passWord":req.query.passWord
  };
  // 放入cookie中
  res.cookie('userInfo',response);
  MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
      var dbo = db.db("fristNode");
      var myobj = {name: req.query.userName,password: req.query.passWord};
      dbo.collection("userInfo").insertOne(myobj, function(err, res) {
          if (err) throw err;
          console.log("注册成功");
          db.close();
      });
  });
  fs.readFile('/nodeCodeTest/node_express_app/myapp/static/login.html', function(err,data) {
    if (err) return console.log(err)
    res.setHeader('Content-Type', 'text/html');
    res.end(data,JSON.stringify(response))
  })
// 输出 JSON 格式
})

module.exports = router;
复制代码

效果图：

就可以实现基本的登录与注册了，后续还会不断完善~~~

转载于:https://juejin.im/post/5d4399695188255d9140768a