你想了解的node.js与数据库的交互效果

时间 2019-11-11

标签了解 node.js node 数据库交互效果栏目 Node.js 繁體版

原文原文链接

今天咱们来说一些node.js相关的简单的登录注册所用到的数据库为mongodbcss

做为你操做的基础固然是要有html页面了,html

　　一、首先咱们来写一下html页面node

　　a.共同的页面content.html(在js中咱们是把html页面放入js中而后经过js的调用来实现公共的头/尾部)jquery

　　此处用了bootstrap,读者若是有兴趣的话也能够了解一下,当年的英雄ajax

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">后台管理系统</a>

</div>

<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

</ul>

</div>

</form>

{% if !username %}

</ul>

{% else %}

<li><a href="/#">用户名:{{username}}</a></li>

</ul>

{% endif %}

</div>

</div>

</nav>

</body>

</html>

{% block content %}

{% endblock %}

{% block registjs %}

{% endblock %}

{% block loginjs %}

{% endblock %}

b.书写首页home.htmlmongodb

{% extends 'content.html' %}
<!-- 理解为引入content.html -->
{% block content %}
<h1>首页</h1>
{% endblock %}

c.书写login.html数据库

{% extends './content.html' %}
{% block content %}
<div>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="text" class="form-control" id="username" placeholder="name">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-default" id="login">登陆</button>
    <button type="submit" class="btn btn-default" id="cancel">取消</button>    
</div>
{% endblock %}
{% block loginjs %}
<script src="/static/login.js"></script>
{% endblock %}

d.书写regist.htmlexpress

{% extends './content.html' %}
{% block content %}
<div>
    <div class="form-group">
      <label for="exampleInputEmail1">用户名</label>
      <input type="text" class="form-control" id="exampleInputname" placeholder="name">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="rePassword1" placeholder="Password">
      </div>
    <button type="submit" class="btn btn-default" id="confim">注册</button>
    <button type="submit" class="btn btn-default" id="cancel">取消</button>    
</div>
{% endblock %}

{% block registjs %}
<script src="/static/regist.js"></script>
{% endblock %}

到如今为止咱们的HTML页面写完了吗?实际上是没有的由于咱们还有js没有书写json

二、书写js代码bootstrap

　　a.书写login.js

var login=$('#login');
var username=$("#username")
var exampleInputPassword1=$("#exampleInputPassword1")
var cancel=$('#cancel')
login.on('click',function(){
    var user = username.val()
    var psd= exampleInputPassword1.val();
    console.log(user,psd)
    $.ajax({
        url:'/ajax/ab',
        method:'POST',
        data:{
            usename:user,
            password:psd
        },
        success:function(data){
            console.log(data);
            if(data.status == 0){
                // 登陆成功跳转到根目录(首页)
                window.location.href='/';
            }else{
                console.log(data.message)
            }
        }
    })
})
cancel.on("click",function(){
    location.href="/"
})

　　b.书写regist.js

var confim=$('#confim');
var exampleInputname=$("#exampleInputname")
var exampleInputPassword1=$("#exampleInputPassword1")
var rePassword1=$("#rePassword1")
var cancel=$('#cancel')
confim.on('click',function(){
    var user = exampleInputname.val()
    var psd= exampleInputPassword1.val();
    var repsd = rePassword1.val();
    if(psd !=repsd){
        alert("两次密码验证不一致,请从新输入")
        return;
    }
    $.ajax({
        url:'/ajax/a',
        method:'POST',
        data:{
            usename:user,
            password:psd
        },
        success:function(data){
            if(status==0){
                //注册成功,跳转到登陆页面
                location.href="/login";
            }else{
                alert(status.message)
            }
        }
    })
})
cancel.on("click",function(){
    console.log("取消")
    location.href="/"
})

3.咱们在数据库中建立一张表

const mongoose = require('mongoose');
//建立表格
const userSchema = new mongoose.Schema({
    usename: String,
    password:String
})
// 建立表名为userpeoson,模型为userSchema的表
const User=mongoose.model('userpeoson',userSchema)
module.exports = User;

4.引入中间文件(server.js)将客户端和数据库链接起来

const express = require("express")
const swig = require('swig');
const mongoose = require('mongoose');
const htmlrouter= require('./handlerequest/htmlrouter')
const ajaxrouter= require('./handlerequest/ajaxRouter')
new Promise((resolve,reject)=>{
    //链接数据库(27017为咱们设置的port值如图一)
    mongoose.connect('mongodb://localhost:27017',(error)=>{
        if(error){
            console.log('链接数据库失败');
        }else{
            console.log('链接数据库成功')
            resolve();
        }
    })
})
.then(()=>{
    //启动服务器
    const app = express();
    //处理静态的文件(好比js等不会改变的文件)
    app.use('/static',express.static('./public'));
    //处理www文件下变化的页面
    app.set('view engine','html')
    app.set('views','./www');
    app.engine('html',swig.renderFile);
    swig.setDefaults({cache:false});
    //使用中间键htmlrouter处理变化的HTML文件
    app.use('/',htmlrouter)
    //使用中间键ajaxrouter处理变化的ajax文件
    app.use('/ajax',ajaxrouter)   
    app.listen(9000,(error)=>{
        if(error){
            console.log('服务器启动失败');
        }else{
            console.log('服务器启动成功');
            console.log('http://localhost:9000')
        }
    })
})

5.编写htmlrouter.js处理变化的HTML文件

//处理html请求
const express= require('express');
const bodyParser = require('body-parser')
const user = require("../model/database")
const cookie = require('cookies')
const router = new express.Router();
router.get('/',(req,res)=>{
    //判断用户是否登陆了
    let cookies = new cookie(req,res)
    let userid = cookies.get('userid');
    if(userid){
        //用户已经登陆
        user.findById(userid).then(info=>{
            res.render('home',{
                isHome:'active',
                username:info.usename
            })
        })
    }else{
        //用户没有登陆
        //根路径解析为home.html
        res.render('home',{
            isHome:'active'
        })
    }
})
router.get("/login",(req,res)=>{
    
    res.render('login',{
        isLogin: 'active'
    })
})
router.get('/regist',(req,res)=>{
    res.render('regist',{
        isReg: 'active'
    })
})
router.get('/logout',(req,res)=>{
//点击退出时让cookies中的userid变为空
    let cookies = new cookie(req,res);
    cookies.set('userid',null);
    //让页面跳转到首页
    res.redirect('/');
})
module.exports = router;

6.编写ajaxrouter.js处理变化的ajax文件

//处理ajax请求
const express = require('express')
const use = require('../model/database')//?
const bodypar = require('body-parser')
const Cookie = require("cookies");
const router = new express.Router();
module.exports = router;
router.use("/a",bodypar());
router.post('/a',(req,res)=>{
    
    let username=req.body.usename;
    let password = req.body.password;
    console.log(username,password)
    //判断用户名是否存在
use.findOne({
    usename:username
})
.then(
    info=>{
        if(info){
            //若是用户注册了
            res.json({
                status:1,
                message:'该用户已经注册'
            })
        }else{
            console.log(username,password)
            let useinfo = new use({
                usename:username,
                password:password
            });
            useinfo.save().then(()=>{
                res.json({
                    status:0,
                    message:'注册成功'
                })
            })
        }
    }
)
})
router.use("/ab",bodypar());
router.post('/ab',(req,res)=>{
    
    let username=req.body.usename;
    let password = req.body.password;
    console.log(username,password)
    //判断用户名是否存在
use.findOne({
    usename:username
})
.then(
    info=>{
        if(info){
            //数据库存在用户
            if(info.password == password){
                //建立cookie
                let cookies= new Cookie(req,res);
                cookies.set('userid',info._id);
                res.json({
                    message:'登陆成功',
                    status:0
                })
            }else{
                res.json({
                    message:'登陆失败,密码错误',
                    status:2
                })
            }
        }else{
            res.json({
                message:'该用户不存在',
                status:1
            })
        }
    }
)
})

7.到如今为止咱们基本的基础工做已经完成了,须要的就是开启数据库,运行咱们书写的server.js文件了

　　a.运行mongod --dbpath D:\练习\db-project\db(D:\练习\db-project\db为你数据库想要存放的地方)

　　注意点:安装mongodb须要运行的地址是

　　你若是想直接用Windows+r快捷键直接运行的话就须要将这个路径添加到系统的path路径下

运行结果(图一)端口27017

8.在你的server地址下运行server.js文件(http://localhost:9000是我在server.js中设置的地址,也是你要访问的地址)

9.运行http://localhost:9000结果以下图.

恭喜你如今一个简单的node注册登陆就完成了