node+express+mongDB實現簡單登陸註冊

時間 2019-12-07

標籤 node+express+mongdb node express mongdb 實現簡單登陸註冊简体版

原文原文鏈接

exprss學習參考資料
 npm 與 package.json 快速入門
 MongoDB的數據庫和集合的基礎操做html

安裝依賴包

` npm install express -save
npm install mongoose -save
`node

編寫入口文件

app.js:mongodb

var express = require('express')
var path = require("path")
var app=express()
var mongoose=require('mongoose')
require('./Schemas/UserSchema.js')
var User=mongoose.model('u2');//User爲model name

var url = "mongodb://127.0.0.1:27017/nodejs";   //mongo是個人數據庫
var db = mongoose.connect(url);                     //鏈接數據庫

/**
 * 端口監聽
 */
var  server=app.listen(3000,function () {
    console.log("start");
})
//靜態文件放在view裏
app.use(express.static('view'));
// view engine setup
app.set('views', path.join(__dirname, 'view'));
app.set('view engine', 'html');
// 拿出login的視圖
app.get('/',function(req,res){
    res.sendfile(__dirname+'/'+'view/login.html')
})
//
// 登陸的處理邏輯
//
app.get('/login',function(req,res){
    var name=req.query.name;
    var pwd=req.query.pwd;
    User.findOne({name:name,pwd:pwd},function(err,result){
        //把返回的值，傳入回調函數
        if (result==null) {
            res.sendfile(__dirname+'/'+'view/no.html');
        } else {
            res.sendfile(__dirname+'/'+'view/index.html');
        }
    })

})

//註冊邏輯
//
app.get('/register',function(req,res){
    var name=req.query.name;
    var pwd=req.query.pwd;
    //經過model創建一個document
    var user=new User(
        {
        name: name,
        pwd: pwd
        }
    )
    //保存到數據庫裏
//MongoDB 使用 insert() 或 save() 方法向集合中插入文檔
//若是不指定 _id 字段 save() 方法相似於 insert() 方法。若是指定 _id 字段，則會更新該 _id 的數據。
user.save(function(err,result){
    if(result==null){
        res.sendfile(__dirname + "/" + "view/no.html" );
    }else {
        res.sendfile(__dirname + "/" + "view/register_OK.html" );}
})

})

數據庫的schema文件 schemas/userSchema.js

var mongoose = require('mongoose');
var UserSchema =new mongoose.Schema({
    //定義數據模型
    name:String,
    pwd:String
});
// 將這個User Schema,發佈爲Model,第一個參數爲數據庫的一個集合（表），沒有 會自動建立
mongoose.model('u2',UserSchema);

建立視圖文件view

eg:register.html數據庫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>註冊</title>
</head>
<body>
    <form action="http://127.0.0.1:3000/register" >
        <p>
            <span>name:</span>
            <br>
            <input name="name" type="text">
        </p>
        <p>
            <span>password:</span>
            <br>
            <input  name="pwd" >
        </p>
        <p><input type="submit" value="submit"></p>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陸</title>
</head>
<body>
    <h1>Hello World</h1>
<p>Welcome to</p>
<form action="http://127.0.0.1:3000/login" >
    <p>
        <span>name:</span>
        <br>
        <input name="name" type="text">
    </p>
    <p>
        <span>password:</span>
        <br>
        <input  name="pwd" >
    </p>
    <p><input type="submit" value="submit"></p>
</form>
<a href="./register.html">註冊</a>
</body>
</html>

成功了！看看咱們的MongoDB數據庫（這裏用了可視化工具）npm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。