Node.js+Express+MongoDB資料庫實作網頁注冊登入功能

　　　　　　　　　　　　　　　　通過 Node.js + Express + MongoDB 實作網頁注冊賬號 和 登入賬號的功能

專案準備：

　　1： 事先準備好專案的頁面 （首頁頁面 index.html）(登入頁面 login.html) (注冊頁面 register.html) 

　　2:    安裝好 Node.js 需要使用的第三方模板

　　3：  設計路徑設計

　　4：  理清功能需求

　　5：  創建 app.js  router.js   mgdb.js 三個 js 檔案  和 public 和 views 檔案夾

作用：

　　app.js 檔案用于開啟服務器

　　router.js 檔案用于請求路徑設計

　　mgdb.js 檔案用于連接 MongoDB資料庫

　　public檔案夾用于存放公共檔案 例如：三個頁面的 css樣式檔案　　　　

　　views檔案夾用于存放3個準備要使用到的頁面

直接上代碼說話把：

在 app.js檔案中：

// 引入模板
var express = require('express');
// 引入第三方模塊 用于獲取POST請求資料
var bodyParser = require('body-parser');


// 加載 router.js 檔案
var router = require('./router.js');

// 創建app 
var app = express();

// 將 node_modules 和 public 的檔案公開
app.use('/node_modules', express.static('./node_modules/'));
app.use('/public', express.static('./public/'));

// 用Express使用引擎模板
app.engine('html', require('express-art-template'));

// body-parser 配置
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 把路由容器掛載到 app 服務中
app.use(router)

app.listen(3000, function(){
    console.log('服務器啟動成功了，可以通過 http://127.0.0.1:3000/ 來進行訪問');
});

在 router.js 檔案中

// 引入模板
var fs = require('fs');
var express = require('express')
// 引入 mgdb.js檔案
var Mgdb = require('./mgdb.js')

// 1:創建一個路由容器
var router = express.Router()

// 2: 把路由都掛載到 router 路由容器中
/*首頁頁面*/
router.get('/', function(req,res) {
    res.render('index.html')
})

/*注冊頁面*/
router.get('/register', function(req,res) {
    res.render('register.html')
})

/*登入頁面 */
router.get('/login', function(req,res) {
    res.render('login.html')
})
/* 注冊頁面 提交資料 POST*/
router.post('/login', function(req,res) {
    // 把資料保存在 MogoDB 資料庫中
    // req.body 就是保存的資料內容
    new Mgdb(req.body).save(function(err) {
        if (err) {
            return res.status(500).send('Server error.')
        }
        res.redirect('/login')
    })
})

/*登入頁面 POST*/
router.post('/', function(req,res) {
    // 輸入資料后 獲取資料 與資料庫的資料比對
    var username = req.body.username
    var password = req.body.password
    Mgdb.findOne({username:req.body.username, password:req.body.password}, function(err,ret) {
        if(err) {
            return res.status(500).send('Server error.')
        } else {
            // 如果賬號或者密碼有誤 ret 就是null
            if(ret === null) {
                res.send('賬號或密碼有誤')
            } else {
                // 如果賬號密碼正確 ret 回傳的就是資料庫中的資料物件
                // 獲取這個用戶名 渲染到首頁頁面
                var name = ret.username
                res.render('index.html', {
                    name: name
                })
            }
        }
       
    })
})

// 3. 把 router 匯出
module.exports = router

在 mgdb.js 檔案中

// 引入模板
var mongoose = require('mongoose')

// 定義一個 schema
var Schema = mongoose.Schema

// 1. 連接資料庫
// 指定連接的資料庫不需要存在，當你插入第一條資料之后就會自動被創建出來
mongoose.connect('mongodb://localhost/login')

// 2. 設計檔案結構（表結構）
var userSchema = new Schema({
  username: {
    type: String,
    required: true // 必須有
  },
  password: {
    type: String,
    required: true
  },
  mobile:{
      type: Number,
      required: true
  }
})

// 4. 當我們有了模型建構式之后，就可以使用這個建構式對 users 集合中的資料進行操作了（增刪改查）

// 3. 將檔案結構發布為模型
// 直接匯出模型建構式
module.exports = mongoose.model('Mgdb', userSchema)

　　寫好著三個主要檔案后，通過 cmd  執行 app.js 檔案，在瀏覽器可以通過   http://127.0.0.1:3000/  訪問來測驗

效果圖如下：

如果填寫密碼或者用戶名錯誤的話就會回應  賬號或密碼有誤   這就隨便的實作下功能沒有設計頁面了

這就是整個 網站頁面的 賬號注冊 和 賬號登入的基本功能， 實作整個小demo功能的思路還是比較清晰的，作為一個正著學習前端知識的小白，為了實作整個小demo，事先準備了好了路由設計來保證自己的思路清晰，大概寫了一個半小時把，

  2019-12-14   19:50:47

標籤：JavaScript

上一篇：VUE專案Eslint報錯

下一篇：案例——洗掉添加記錄