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;
複製代碼

效果圖：

就能夠實現基本的登陸與註冊了，後續還會不斷完善~~~