## 1. 先打開(kāi)編輯器赦颇，創(chuàng)建一個(gè)項(xiàng)目
## 2. 再打開(kāi)cmd命令提示符下載express腳手架
? ? ? ? express? ?項(xiàng)目名? ?--view=ejs 或express? ?-e? ? 項(xiàng)目名
## 3. 在cmd中進(jìn)入項(xiàng)目名（myapp）下載所需的依賴
? ? ? ? ?cd myapp? --------->cnpm? install?
## 4. 在下載mongoose(前提你電腦上要安裝數(shù)據(jù)庫(kù)的插件)
? ? ? ? cn cnpm mongoose? --save
## 5. 在myapp項(xiàng)目中在創(chuàng)建一個(gè)文件夾滥壕，里面在新建三個(gè)文件
? ? ? ? ?文件夾名? lib? ? ------->三個(gè)文件名? mongoose.js? ? schema,js? ? ?appModel.js
## 6. 在mongoose.js 中連接數(shù)據(jù)庫(kù)
? ? ? ? ? ?//先引入mongoose模塊
? ? ? ? ?var mongoose=require("mongoose");
? ? ? ? ? //連接數(shù)據(jù)庫(kù)服務(wù)器
? ? ? ? ?mongoose.connect("mongodb://localhost/數(shù)據(jù)庫(kù)名(bao)",function(error){
? ? ? ? ? ? ? ? ? ? ? ?if(error){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?console.log("數(shù)據(jù)庫(kù)連接失敗")
? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?console.log("數(shù)據(jù)庫(kù)連接成功")
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? })
? ? ? ? ?//導(dǎo)出
? ? ? module.exports=mongoose;
## 7. 在schema.js 文件中定義schema
? ? ? ?//引入mongoose.js文件
? ? ?var mongoose=require("./mongoose.js")? ? ? //這里的.js可省略不寫(xiě)
? ? ?//定義schema
? ? var? ?schema=mongoose.Schema({
? ? ? ? ? ? ? ? ?//這里是數(shù)據(jù)庫(kù)自己創(chuàng)建的屬性名：他的屬性類(lèi)型? ?如：
id:String,
name:String,
age:Number,
tel:Number
? ? ?})
? ? ?//導(dǎo)出
? ? ? module.exports=schema;
## 8. 在appModel.js 文件中定義模型
? ? ? ? ? ? ?//引入mongoose.js 文件
? ? ? ? ? ? ?var mongoose=require("./mongoose");
? ? ? ? ? ? ? //引入schema.js 文件
? ? ? ? ? ? ?var schema=require("./schema");
? ? ? ? ? ? ?//定義模型
? ? ? ? ? ? ? var appModel=mongoose.model("appModel",schema,"數(shù)據(jù)庫(kù)中的集合名（app）");
? ? ? ? ? ? ? //導(dǎo)出
? ? ? ? ? ? ? ?module.exports=appModel;
## 9. 在views文件夾中找到index.els編輯
? ? ? ? ? ? ? ? ? //先引入bootstrap的css樣式，js樣式，不過(guò)要把jquery的js插件引入在bootstrap.js的前面，bootstrap連接的樣式可通過(guò)本地下載迎膜，也可網(wǎng)上連接地址即可
? ? ? ? ? ? ? ? ? ? ? ? ?//本地下載? ? cnpm install bootstrap? ?--save
? ? ? ? ? ? ? ? //通過(guò)Bootstrap官網(wǎng)找到我們需要的樣式直接復(fù)制粘貼
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
留言板練習(xí)
.box{
margin: 100px auto;
}
table{
margin: 100px auto;
}
table th{
text-align: center;
}
學(xué)號(hào)：
姓名：
年齡：
電話：
添加
重置
學(xué)號(hào)
姓名
年齡
電話
操作
1
張三
20
男
刪除
修改
2
李四
20
男
刪除-->
修改-->
全部刪除
×
修改數(shù)據(jù)
學(xué)號(hào)：
姓名：
年齡：
電話：
關(guān)閉
保存
## 10. 在routes路由文件夾中創(chuàng)建兩個(gè)文件? ?
? ? ? ? ? ? ? ? ?index.js 渲染頁(yè)面的二級(jí)路由? ?users.js增刪改查的接口
## 11. 在app.js中引入這兩個(gè)二級(jí)路由文件
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");
//設(shè)置渲染頁(yè)面路由
/* GET home page. */
//主頁(yè)從數(shù)據(jù)庫(kù)找到數(shù)據(jù)，返回前臺(tái)浆兰，并渲染
router.get('/', function(req, res, next) {
mm.find({},function (err,docs) {
if(err){
console.log("查找數(shù)據(jù)庫(kù)數(shù)據(jù)失敗")
}else{
res.render('index', {
data:docs
});
}
})
});
//導(dǎo)出路由
module.exports = router;
## 13. 在index.ejs 文件中渲染的部分
<%for(var i=0;i
<%=data[i].id%>
<%=data[i].name%>
<%=data[i].age%>
<%=data[i].tel%>
" type="button" class="del btn btn-warning">刪除
修改
<%}%>
</tbody>
## 14. 在users.js二級(jí)路由文件中設(shè)置增刪改查
//增（也可以說(shuō)是添加）
//引入express模塊
var express=require("express");
//獲取路由
var router=express.Router();
//引入model.js文件
var mm=require("../lib/model");
//設(shè)置數(shù)據(jù)接口路由
//添加數(shù)據(jù)到數(shù)據(jù)庫(kù)
router.get("/write",function (req, res,next) {
var da=req.query;//獲取前臺(tái)請(qǐng)求的數(shù)據(jù)磕仅，返回來(lái)是一個(gè)對(duì)象
console.log(da)//{id:xh.name:xm,age:nl,tel:tel}
//實(shí)例化
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:"添加成功"
})
}
})
});
//導(dǎo)出
module.exprots=router;
## 15. 在index.ejs中的 增 代碼
$(".add").click(function () {
//獲取學(xué)號(hào)，姓名簸呈，年齡榕订，性別的內(nèi)容
var xh=$("#xh").val();
var xm=$("#xm").val();
var nl=$("#nl").val();
var tel=$("#tel").val();
// alert(xh); alert(xm); alert(nl); alert(tel)檢測(cè)獲取數(shù)據(jù)成功
$.ajax({
url:"/api/write",
data:{
id:xh,
name:xm,
age:nl,
tel:tel
},
success:function (ret) {//成功返回?cái)?shù)據(jù)
console.log(ret)
},error:function (msg) {//失敗返回?cái)?shù)據(jù)
console.log(msg)
}
})
});
## 16. 解決點(diǎn)擊添加按鈕后，要刷新一次才能把添加的內(nèi)容顯示在頁(yè)面
//1. 可以是添加完蜕便，是整個(gè)頁(yè)面刷新（"location.href="/"??"）,但是有因?yàn)橄旅娴谋砀袷揭惒礁碌慕俸悖圆荒苷麄€(gè)頁(yè)面刷新
//2. 我們要讓它點(diǎn)擊添加按鈕后，tbody的里面內(nèi)容變空$("tbody").html(" ")轿腺，在通過(guò)ajax讀取后臺(tái)數(shù)據(jù)庫(kù)里的數(shù)據(jù)两嘴，把他渲染，添加到當(dāng)前的tbody里
//讀取數(shù)據(jù)庫(kù)里的數(shù)據(jù)
//讀取數(shù)據(jù)庫(kù)中的數(shù)據(jù)
router.get("/read",function (req, res, next) {
mm.find({},function (err,docs) {
if(err){
res.send({
code:2,
message:"讀取數(shù)據(jù)失敗"
});
}else{
res.send({
code:0,
data:docs,
message:"讀取數(shù)據(jù)成功"
})
}
})
});
//通過(guò)ajax渲染添加到頁(yè)面
/*添加數(shù)據(jù)族壳，憔辫，，用ajax*/
$(".add").click(function () {
//獲取學(xué)號(hào)仿荆，姓名螺垢，年齡，性別的內(nèi)容
var xh=$("#xh").val();
var xm=$("#xm").val();
var nl=$("#nl").val();
var tel=$("#tel").val();
// alert(xh); alert(xm); alert(nl); alert(tel)檢測(cè)獲取數(shù)據(jù)成功
$.ajax({
url:"/api/write",
data:{
id:xh,
name:xm,
age:nl,
tel:tel
},
success:function (ret) {//成功返回?cái)?shù)據(jù)
console.log(ret);
if(ret.code==0){//在這里判斷后
//當(dāng)后臺(tái)返回?cái)?shù)據(jù)是寫(xiě)入數(shù)據(jù)成功赖歌，讓當(dāng)前的tbody中的內(nèi)容變空，
$("tbody").html("");
//在通過(guò)ajax讀取后臺(tái)在數(shù)據(jù)庫(kù)中的內(nèi)容功茴，在渲染到tbody中
add(); //封裝的函數(shù)
}
},error:function (msg) {//失敗返回?cái)?shù)據(jù)
console.log(msg)
}
})
});
//在這里因?yàn)楹竺娑夹枰玫铰耄苑庋b到函數(shù)里，后面用的話直接調(diào)用就可以了
//包裝函數(shù)
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+=`
${data[i].id}
${data[i].name}
${data[i].age}
${data[i].tel}
刪除
修改
`
}
$("tbody").html(str);
//當(dāng)渲染后（局部更新后）讓當(dāng)前的學(xué)號(hào)坎穿，姓名展父，年齡返劲，電話框都為空
$("#xh").val("");
$("#xm").val("");
$("#nl").val("");
$("#tel").val("");
}
},error:function (msg) {
console.log(msg)
}
})
}
## 17. 全部刪除? ?users.js
//全部刪除數(shù)據(jù)
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) {
//獲取前臺(tái)請(qǐng)求的數(shù)據(jù)
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的值，來(lái)確定當(dāng)前行的位置（如：id,name,age,del都可）
var a=$(this).attr("v");
// alert(a);//檢測(cè)當(dāng)前彈出的_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. 修改數(shù)據(jù)? users.js
//修改數(shù)據(jù)庫(kù)內(nèi)容
router.get("/xg",function (req, res, next) {
//獲取前臺(tái)請(qǐng)求數(shù)據(jù)
var data=req.query;
console.log(data);
//獲取前臺(tái)的_id
console.log(data.f);
//獲取前臺(tái)的數(shù)據(jù)請(qǐng)求
console.log(data.da);
//修改數(shù)據(jù)
mm.update(data.f,data.da,function (err) {
if(err) {
res.send({
code: 5,
message: "修改數(shù)據(jù)失敗"
});
}else{
res.send({
code:0,
message:"修改數(shù)據(jù)成功"
});
}
})
});
## 22. 修改數(shù)據(jù)? index.ejs
// 當(dāng)點(diǎn)擊修改時(shí)栖茉，獲取他的兄弟元素刪除的_id,渲染的都需要用到事件委托
$("tbody").on("click",".xg",function () {
var a=$(this).siblings().attr("v");
// alert(a)//檢測(cè)他兄弟刪除的_id
$(".bc").attr("v",a);//將他兄弟刪除的屬性也添加成了自己的屬性
});
// 當(dāng)點(diǎn)擊彈框保存時(shí)篮绿，修改數(shù)據(jù),有點(diǎn)問(wèn)題，一次只能修改一次吕漂，下次要刷新
$(".bc").click(function () {
//attr一個(gè)參數(shù)是獲取亲配，兩個(gè)參數(shù)是設(shè)置
var _id=$(this).attr("v");
alert(_id)
//獲取彈框里的學(xué)號(hào)，姓名惶凝，年齡吼虎，性別的內(nèi)容
//注意：這里要用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. 到這里項(xiàng)目就結(jié)束了苍鲜，說(shuō)明一下：我也是一個(gè)剛學(xué)的小白思灰，這個(gè)修改數(shù)據(jù)里有點(diǎn)小問(wèn)題，等你自己去發(fā)現(xiàn)喲混滔！?
? ? ? ? ? ? ?有哪位大佬解決了這個(gè)bug洒疚，請(qǐng)留言告訴我喲，在此不勝感激Ｅ饔臁油湖！
