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

Posted zhangmr

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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,请留言告诉我哟,在此不胜感激!!

 

以上是关于nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例的主要内容,如果未能解决你的问题,请参考以下文章

phonegap ajax 用户身份验证与 nodejs-express-mongodb-passport js

vue 安装教程

正则表达式(Regular Expresssion)

利用webpack构建vue项目

nodejs脚手架express-generator

怎么让新建的express包用公共的node