nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例

## 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$(".xg").click(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,请留言告诉我哟,在此不胜感激!!

原文地址:https://www.cnblogs.com/zhangMr/p/11665767.html

时间: 2024-10-18 05:05:44

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

Swift中利用单例管理FMDB数据库

1.进入短信界面 2.菜单-设置 3.修改短信中心号码(Set the SIM's smsc number) 保存 [测试结果]:提示保存成功,但是号码没有改变,退出重新进入设置才会看到号码更新 [预期结果]:提示保存成功,号码变为修改过的号码 相关Activity:通过Logcat中I/ActivityManager( 896):我们可以定位到该类-MessagingPreferenceActivity: 相关控件:mSmscPrefList.add(pref); 根据分析我们发现在Messa

SQL中利用脚本恢复数据库

SQL中利用脚本恢复数据库   编写人:CC阿爸 2014-6-15 在日常SQL数据库的操作中,如何恢复数据库 use master drop database SCS1 RESTORE DATABASE SCS1 from disk='C:\Documents and Settings\kevinzhang\桌面\eee.bak' USE master RESTORE DATABASE SCS1 from disk='C:\Documents and Settings\kevinzhang\

bootstrap中利用Tag实现多个div的上下页切换

添加 nav 和 nav-tabs 类到 ul 中,将会应用 Bootstrap 标签样式,添加 nav 和 nav-pills 类到 ul 中,将会应用 Bootstrap 胶囊式样式 <ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#center&quo

Node.js(十二)——NodeJs中的Promise

爬虫基于回调和事件的方式去实现,回调也是被诟病已久的问题尤其是callback这种,无论是阅读还是调试都很费劲,甚至我们连代码的堆栈都看不到,这是一种反人类的写法,Promise来拜托这种痛苦的方式 传统方式实现动画效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Promise animation</title> <style&g

[转]nodejs中的process模块--child_process.exec

1.process是一个全局进程,你可以直接通过process变量直接访问它. process实现了EventEmitter接口,exit方法会在当进程退出的时候执行.因为进程退出之后将不再执行事件循环,所有只有那些没有回调函数的代码才会被执行. 在下面例子中,setTimeout里面的语句是没有办法执行到的. 1 process.on('exit', function () { 2 setTimeout(function () { 3 console.log('This will not ru

Hadoop 中利用 mapreduce 读写 mysql 数据

Hadoop 中利用 mapreduce 读写 mysql 数据 有时候我们在项目中会遇到输入结果集很大,但是输出结果很小,比如一些 pv.uv 数据,然后为了实时查询的需求,或者一些 OLAP 的需求,我们需要 mapreduce 与 mysql 进行数据的交互,而这些特性正是 hbase 或者 hive 目前亟待改进的地方. 好了言归正传,简单的说说背景.原理以及需要注意的地方: 1.为了方便 MapReduce 直接访问关系型数据库(Mysql,Oracle),Hadoop提供了DBInp

在NodeJS中玩转Protocol Buffer

Protocol Buffer入门教程 Protocol Buffer是个什么鬼 NodeJS开发者为何要跟Protocol Buffer打交道 在NodeJS中实践Protocol Buffer协议 选择支持protobuf的NodeJS第三方模块 一个栗子 书写proto文件 编译 proto 文件 编写 Writer 编写Reader 运行结果 再举一个栗子 编写proto 编写client 书写server 运行结果 其他高级特性 嵌套Message Import Message 总结一

Spring利用propertyConfigurer类 读取.property数据库配置文件

1.Spring的框架中,org.springframework.beans.factory.config.PropertyPlaceholderConfigurer类可以将.properties(key/value形式)文件中 一些动态设定的值(value),在XML中替换为占位该键($key$)的值, .properties文件可以根据客户需求,自定义一些相关的参数,这样的设计可提供程序的灵活性. 2.在Spring中,使用PropertyPlaceholderConfigurer可以在XM

Flex中利用事件机制进行主程序与子窗体间参数传递

在开发具有子窗体,或者itemrenderer的应用时,常常涉及到子窗体向父窗体传递参数或者从itemrenderer内的控件向外部的主程序传递参数的需求.这些都可以通过事件机制这一统一方法加以解决.在我的应用中有两个需求: 1.左侧的List控件的itemrenderer中包含CheckBox控件,当其状态改变时需要同时改变主程序中的一个数组变量的内容:2.左下方的"新增届次"按钮会弹出一个窗口,窗口中输入届次信息后需要修改数据库中的表,同时表的更改结果要能够在List控件中体现出来