## 1. 先打开编辑器，创建一个项目

## 2. 再打开cmd命令提示符下载express脚手架

express   项目名   --view=ejs 或express   -e    项目名

## 3. 在cmd中进入项目名（myapp）下载所需的依赖

cd myapp  --------->cnpm  install

## 4. 在下载mongoose(前提你电脑上要安装数据库的插件)

cn cnpm mongoose  --save

## 5. 在myapp项目中在创建一个文件夹，里面在新建三个文件

文件夹名  lib    ------->三个文件名  mongoose.js    schema,js     appModel.js

## 6. 在mongoose.js 中连接数据库

//先引入mongoose模块

var mongoose=require("mongoose");

//连接数据库服务器

mongoose.connect("mongodb://localhost/数据库名(bao)",function(error){

if(error){

console.log("数据库连接失败")

}else{

console.log("数据库连接成功")

}

})

//导出

module.exports=mongoose;

## 7. 在schema.js 文件中定义schema

//引入mongoose.js文件

var mongoose=require("./mongoose.js")      //这里的.js可省略不写

//定义schema

var   schema=mongoose.Schema({

//这里是数据库自己创建的属性名：他的属性类型   如：

                id:String,
                name:String,
                age:Number,
                tel:Number

})

//导出

module.exports=schema;

## 8. 在appModel.js 文件中定义模型

//引入mongoose.js 文件

var mongoose=require("./mongoose");

//引入schema.js 文件

var schema=require("./schema");

//定义模型

var appModel=mongoose.model("appModel",schema,"数据库中的集合名（app）");

//导出

module.exports=appModel;

## 9. 在views文件夹中找到index.els编辑

//先引入bootstrap的css样式，js样式，不过要把jquery的js插件引入在bootstrap.js的前面，bootstrap连接的样式可通过本地下载，也可网上连接地址即可

//本地下载    cnpm install bootstrap   --save

//通过Bootstrap官网找到我们需要的样式直接复制粘贴

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>留言板练习</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <style>
    .box{
      margin: 100px auto;
    }
    table{
      margin: 100px auto;
    }
    table th{
      text-align: center;
    }
  </style>
</head>
<body>
         <!--添加的表单-->
       <div class="container box">
         <form>
           <div class="form-group">
             <label for="xh">学号：</label>
             <input type="text" class="form-control" id="xh" placeholder="请输入学号">
           </div>
           <div class="form-group">
             <label for="xm">姓名：</label>
             <input type="text" class="form-control" id="xm" placeholder="请输入姓名">
           </div>
           <div class="form-group">
             <label for="nl">年龄：</label>
             <input type="text" class="form-control" id="nl" placeholder="请输入年龄">
           </div>
             <div class="form-group">
                 <label for="tel">电话：</label>
                 <input type="text" class="form-control" id="tel" placeholder="请输入电话">
             </div>
           <button type="button" class="add btn btn-info">添加</button>
           <button type="reset" class="btn btn-info">重置</button>
         </form>
         <!--表格-->
         <table class="table table-bordered text-center">
          <thead>
          <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>电话</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>

          <tr>
            <td>1</td>
            <td>张三</td>
            <td>20</td>
            <td>男</td>
            <td>
              <button type="button" class="del btn btn-warning">删除</button>
              <button type="button" class="xg btn btn-danger">修改</button>
            </td>
         </tr>
          <tr>
            <td>2</td>
           <td>李四</td>
            <td>20</td>
            <td>男</td>
            <td>
              <button type="button" class="del btn btn-warning">删除</button>-->
              <button type="button" class="xg btn btn-danger">修改</button>-->
            </td>
          </tr>
          </tbody>
           <tfoot>
           <tr>
             <td colspan="5">
               <button type="button" class="delAll btn btn-warning">全部删除</button>
             </td>
           </tr>
           </tfoot>
         </table>
           <!--模态框，当点击修改按钮时，弹出此框-->
           <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
               <div class="modal-dialog" role="document">
                   <div class="modal-content">
                       <div class="modal-header">
                           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                           <h4 class="modal-title" id="myModalLabel">修改数据</h4>
                       </div>
                       <div class="modal-body">
                           <div class="form-group">
                               <label for="xh">学号：</label>
                               <input type="text" class="xh form-control" id="xh" placeholder="请输入学号">
                           </div>
                           <div class="form-group">
                               <label for="xm">姓名：</label>
                               <input type="text" class="form-control xm" id="xm" placeholder="请输入姓名">
                           </div>
                           <div class="form-group">
                               <label for="nl">年龄：</label>
                               <input type="text" class="form-control nl" id="nl" placeholder="请输入年龄">
                           </div>
                           <div class="form-group">
                               <label for="tel">电话：</label>
                               <input type="text" class="form-control tel" id="tel" placeholder="请输入电话">
                           </div>
                       </div>
                       <div class="modal-footer">
                           <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                           <button type="button" class="bc btn btn-primary" data-dismiss="modal">保存</button>
                       </div>
                   </div>
               </div>
           </div>
       </div>
</body>
</html>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.js"></script>

## 10. 在routes路由文件夹中创建两个文件

index.js 渲染页面的二级路由   users.js增删改查的接口

## 11. 在app.js中引入这两个二级路由文件

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

app.use('/', indexRouter);
app.use('/api', usersRouter);

## 12. 在index.js文件中

//引入express模块
var express = require('express');
//获取路由
var router = express.Router();
//引入model.js文件
var mm=require("../lib/appModel");
//设置渲染页面路由
/* GET home page. */
//主页从数据库找到数据，返回前台，并渲染
router.get('/', function(req, res, next) {
  mm.find({},function (err,docs) {
    if(err){
      console.log("查找数据库数据失败")
    }else{
      res.render('index', {

        data:docs

      });
    }
  })

});

//导出路由
module.exports = router;

## 13. 在index.ejs 文件中渲染的部分

<tbody>
<%for(var i=0;i<data.length;i++){%>
    <tr>
        <td><%=data[i].id%></td>
        <td><%=data[i].name%></td>
        <td><%=data[i].age%></td>
        <td><%=data[i].tel%></td>
        <td>
            <!--_id是数据库中自带的id号-->
            <button v="<%=data[i]._id%>" type="button" class="del btn btn-warning">删除</button>
            <button type="button" class="xg btn btn-danger" data-toggle="modal" data-target="#myModal">修改</button>
        </td>
    </tr>
<%}%>
</tbody>

## 14. 在users.js二级路由文件中设置增删改查

//增（也可以说是添加）

//引入express模块
var express=require("express");

//获取路由
var router=express.Router();

//引入model.js文件
var mm=require("../lib/model");

//设置数据接口路由

//添加数据到数据库
router.get("/write",function (req, res,next) {
  var da=req.query;//获取前台请求的数据，返回来是一个对象
  console.log(da)//{id:xh.name:xm,age:nl,tel:tel}
  //实例化
  var aa=new mm(da);//mm({id:..,name:..,age:..,tel:...})
  //添加
  aa.save(function (err) {
    if(err){//如果失败就输出
      res.send({
        code:1,
        message:"添加失败"
      });
    }else{//否则
      res.send({
        code:0,
        message:"添加成功"
      })
    }

  })

});
//导出
module.exprots=router;

## 15. 在index.ejs中的 增 代码

$(".add").click(function () {
    //获取学号，姓名，年龄，性别的内容
    var xh=$("#xh").val();
    var xm=$("#xm").val();
    var nl=$("#nl").val();
    var tel=$("#tel").val();

    // alert(xh); alert(xm); alert(nl); alert(tel)检测获取数据成功

    $.ajax({
        url:"/api/write",
        data:{
            id:xh,
            name:xm,
            age:nl,
            tel:tel
        },
        success:function (ret) {//成功返回数据
            console.log(ret)

        },error:function (msg) {//失败返回数据
            console.log(msg)
        }
    })
});

## 16. 解决点击添加按钮后，要刷新一次才能把添加的内容显示在页面

//1. 可以是添加完，是整个页面刷新（"location.href="/"  "）,但是有因为下面的表格式要异步更新的，所以不能整个页面刷新

//2. 我们要让它点击添加按钮后，tbody的里面内容变空$("tbody").html(" ")，在通过ajax读取后台数据库里的数据，把他渲染，添加到当前的tbody里

//读取数据库里的数据

//读取数据库中的数据
router.get("/read",function (req, res, next) {
  mm.find({},function (err,docs) {
    if(err){
      res.send({
        code:2,
        message:"读取数据失败"
      });
    }else{
      res.send({
        code:0,
        data:docs,
        message:"读取数据成功"
      })
    }

  })

});

//通过ajax渲染添加到页面

/*添加数据，，，用ajax*/
$(".add").click(function () {
    //获取学号，姓名，年龄，性别的内容
    var xh=$("#xh").val();
    var xm=$("#xm").val();
    var nl=$("#nl").val();
    var tel=$("#tel").val();

    // alert(xh); alert(xm); alert(nl); alert(tel)检测获取数据成功

    $.ajax({
        url:"/api/write",
        data:{
            id:xh,
            name:xm,
            age:nl,
            tel:tel
        },
        success:function (ret) {//成功返回数据
            console.log(ret);
            if(ret.code==0){  //在这里判断后
                //当后台返回数据是写入数据成功，让当前的tbody中的内容变空，
                $("tbody").html("");
                //在通过ajax读取后台在数据库中的内容，在渲染到tbody中
               add();  //封装的函数
            }

        },error:function (msg) {//失败返回数据
            console.log(msg)
        }
    })
});

//在这里因为后面都需要用到，所以封装到函数里，后面用的话直接调用就可以了

//包装函数
function add(){
    $.ajax({
        url:"/api/read",
        success:function(ret){
            if(ret.code==0){
                var str="";
                var data=ret.data;
                for(var i in data){
                    str+=`<tr>
                                      <td>${data[i].id}</td>
                                      <td>${data[i].name}</td>
                                      <td>${data[i].age}</td>
                                      <td>${data[i].tel}</td>
                                      <td>
                                         <button v="${data[i]._id}" type="button" class="del btn btn-warning">删除</button>
                                         <button type="button" class="xg btn btn-danger" data-toggle="modal" data-target="#myModal">修改</button>
                                      </td>
                                     </tr>`
                }
                $("tbody").html(str);
                //当渲染后（局部更新后）让当前的学号，姓名，年龄，电话框都为空
                $("#xh").val("");
                $("#xm").val("");
                $("#nl").val("");
                $("#tel").val("");
            }
        },error:function (msg) {
            console.log(msg)
        }
    })
}

## 17. 全部删除   users.js

//全部删除数据
router.get("/delAll",function (req, res, next) {
  mm.remove({},function (err) {
    if(err){
      res.send({
        code:3,
        message:"全部删除失败"
      });
    }else{
      res.send({
        code:0,
        message:"全部删除成功"
      })
    }
  })
});

## 18. 全部删除   index.ejs

//全部删除
$(".delAll").click(function () {
    $.ajax({
        url:"/api/delAll",
        success:function (ret) {
            console.log(ret);
            if(ret.code==0){
                add();
            }
        },error:function (msg) {
            console.log(msg);
        }
    })
});

## 19. 单行删除   users.js

//单行删除
router.get("/del",function (req, res, next) {
  //获取前台请求的数据
  var data=req.query;
  mm.remove(data,function (err) {
    if(err){
      res.send({
        code:4,
        message:"单行删除失败"
      });
    }else{
      res.send({
        code:0,
        message:"单行删除成功"
      })
    }
  })
});

## 20. 单行删除   index.ejs

//单行删除,需要用到事件委托
$("tbody").on("click",".del",function () {
    // alert(111)
    //获取_id的值，来确定当前行的位置（如：id,name,age,del都可）
    var a=$(this).attr("v");
    // alert(a);//检测当前弹出的_id是否不同
    $.ajax({
        url:"/api/del",
        data:{
            _id:a
        },
        success:function (ret) {
            console.log(ret);
            if(ret.code==0){
                add();
            }
        },error:function (msg) {
            console.log(msg);
        }

    })
});

## 21. 修改数据  users.js

//修改数据库内容
router.get("/xg",function (req, res, next) {
  //获取前台请求数据
  var data=req.query;
  console.log(data);
  //获取前台的_id
  console.log(data.f);
  //获取前台的数据请求
  console.log(data.da);
  //修改数据
  mm.update(data.f,data.da,function (err) {
    if(err) {
      res.send({
        code: 5,
        message: "修改数据失败"
      });
    }else{
      res.send({
        code:0,
        message:"修改数据成功"
      });

    }

  })

});

## 22. 修改数据  index.ejs

// 当点击修改时，获取他的兄弟元素删除的_id,渲染的都需要用到事件委托
$("tbody").on("click",".xg",function () {
    var a=$(this).siblings().attr("v");
    // alert(a)//检测他兄弟删除的_id

    $(".bc").attr("v",a);//将他兄弟删除的属性也添加成了自己的属性
});

// 当点击弹框保存时，修改数据,有点问题，一次只能修改一次，下次要刷新
$(".bc").click(function () {
    //attr一个参数是获取，两个参数是设置
    var _id=$(this).attr("v");
    alert(_id)
    //获取弹框里的学号，姓名，年龄，性别的内容
    //注意：这里要用class名，id名只能用一次
    var xh=$(".xh").val();
    var xm=$(".xm").val();
    var nl=$(".nl").val();
    var tel=$(".tel").val();
    // alert(xh); alert(xm); alert(nl); alert(tel);
    //ajax
    $.ajax({
        url:"/api/xg",
        data:{
            f:{
                _id:_id
            },
            da:{
                id:xh,
                name:xm,
                age:nl,
                tel:tel
            }
        },
        success:function (ret) {
            console.log(ret);
            if(ret.code==0){
                $("tbody").html("");
                add();
            }
        },error:function (msg) {
            console.log(msg)
        }

    })

});

## 23. 到这里项目就结束了，说明一下：我也是一个刚学的小白，这个修改数据里有点小问题，等你自己去发现哟！

有哪位大佬解决了这个bug，请留言告诉我哟，在此不胜感激！！

nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例的更多相关文章

  1. 在VB中利用Nuget包使用SQLite数据库和Linq to SQLite

    上午解决了在C#中利用Nuget包使用SQLite数据库和Linq to SQLite,但是最后生成的是C#的cs类文件,对于我这熟悉VB而对C#白痴的来说怎么能行呢? 于是下午接着研究,既然生成的是 ...

  2. 在C#中利用Nuget包使用SQLite数据库和Linq to SQLite

    本来是学习在VB中使用SQLite数据库和Linq to SQLite,结果先学习到了在C#中使用SQLite数据库和Linq to SQLite的方法,写出来与大家共同学习.(不知道算不算不务正业) ...

  3. 在nodejs中利用 Proxy监听对象值的获取

    1 window = new Proxy(global, { 2 get: function (target, key, receiver) { 3 console.log("window. ...

  4. （转载）在Delphi中利用MSDASC来配置数据库链接

    在Delphi中利用MSDASC来配置数据库链接 在运行期进行数据库的连接是一个问题,自己写一个窗体配置吧,数据库不一样,所用的参数也不一样,还有那讨厌的连接字符串,有时真不知该写什么好.那天无意中发 ...

  5. nodejs中如何使用mysql数据库[node-mysql翻译]

    nodejs中如何使用mysql数据库 db-mysql因为node-waf: not found已经不能使用,可以使用mysql代替. 本文主要是[node-mysql]: https://www. ...

  6. SQL中利用脚本恢复数据库

    SQL中利用脚本恢复数据库   编写人:CC阿爸 2014-6-15 在日常SQL数据库的操作中,如何恢复数据库 use master drop database SCS1 RESTORE DATAB ...

  7. 利用express-session插件实现nodejs中登录状态的保存

    什么是session? session就是会话,客户端和服务器直接的会话.他的粒度比http链接更粗,一次会话包含了多次连接.即一个session是多次http连接的集合.从我的客户端连接到服务器到关 ...

  8. nodejs中常用加密算法

    在常用的nodejs+express工程中,为了安全在登录及表单传输时,应该都需进行加密传输,目前个人常用到的加密方式有下列几种: 1.Hash算法加密: 创建一个nodejs文件hash.js,输入 ...

  9. 浅谈nodejs中HTTP模块应用

    这里给大家分享下后端人员如果利用nodejs对数据的一些处理情况  适用于初学者使用 大牛勿喷 给大家分享下主要后端思想部分代码,前端部分就不展示了 const http = require(&quo ...

随机推荐

  1. fread和fwrite和feof读写二进制文件

    #include <stdio.h> #include <stdlib.h> void text_to_bin(char *argv[]); void bin_to_text( ...

  2. Python逆向（一）—— 前言及Python运行原理

    一.前言 最近在学习Python逆向相关,涉及到python字节码的阅读,编译及反汇编一些问题.经过长时间的学习有了一些眉目,为了方便大家交流,特地将学习过程整理,形成了这篇专题.专题对python逆 ...

  3. 记录一个奇怪的异常，无法还原此异常。 普通的Maven Java Web 项目

    项目 : 普通的Maven Java Web 项目 操作记录: 使用 Maven 构建项目,指令 tomcat7:run 无异常 但使用 eclipse 的 tomcat 运行项目,报此异常. 后面从 ...

  4. shell 命令的重命名alias

    1.实现别名:alias ddd="df -Th": 2.删除别名:unalias ddd: 3.显示所有别名命令列表:alias: 4.存放位置:~/.bashrc  (加入该文 ...

  5. mac webstorm 安装破解

    下载: 链接:https://pan.baidu.com/s/1A1afhcpPWMrQtOr1Suqs-g  密码:5r7b 激活码 K6IXATEF43-eyJsaWNlbnNlSWQiOiJLN ...

  6. vue后台_纯前端实现excel导出/csv导出

    之前的文件下载功能一般是由前后端配合实现,由于项目需要,纯前端实现了一把excel的导出功能: 一.excel导出 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还 ...

  7. nginx压力测试和并发预估

    一.Nginx并发预估 预估算法:{(?G)*1024-system}/请求大小 (?G):表示内存大小1024:表示内存容量标准进制system:表示系统和服务占用的额外内存和需要预留的内存请求大小 ...

  8. zabbix与agent端通信加密

    Zabbix版本从3.0之后,开始支持Zabbix server, Zabbix proxy, Zabbix agent, zabbix_sender and zabbix_get之间的通信加密,加密 ...

  9. Cesium - Fabric 材质【转官网】

    https://github.com/AnalyticalGraphicsInc/cesium/wiki/Fabric Fabric Hannah edited this page on 24 Dec ...

  10. 如何将eclipse项目导入到idea

    intellij idea中文资料网上比较少,对于eclipse的项目如何导入intellij idea也没有完整的说明,本人在这里整理下,方便更多人加入到intellij idea的阵容里. 直接上 ...