## 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="https://www.cnblogs.com/zhangMr/p/css/bootstrap.css">
<style>
.box{
margin: 100px auto;
}
table{
margin: 100px auto;
}
table th{
text-align: center;
}
</style>
</head>
<body>
<!--添加的表單-->
<div >
<form>
<div >
<label for="xh">學號：</label>
<input type="text" id="xh" placeholder="請輸入學號">
</div>
<div >
<label for="xm">姓名：</label>
<input type="text" id="xm" placeholder="請輸入姓名">
</div>
<div >
<label for="nl">年齡：</label>
<input type="text" id="nl" placeholder="請輸入年齡">
</div>
<div >
<label for="tel">電話：</label>
<input type="text" id="tel" placeholder="請輸入電話">
</div>
<button type="button" >添加</button>
<button type="reset" >重置</button>
</form>
<!--表格-->
<table >
<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" >洗掉</button>
<button type="button" >修改</button>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
<td>男</td>
<td>
<button type="button" >洗掉</button>-->
<button type="button" >修改</button>-->
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<button type="button" >全部洗掉</button>
</td>
</tr>
</tfoot>
</table>
<!--模態框，當點擊修改按鈕時，彈出此框-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div role="document">
<div >
<div >
<button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 id="myModalLabel">修改資料</h4>
</div>
<div >
<div >
<label for="xh">學號：</label>
<input type="text" id="xh" placeholder="請輸入學號">
</div>
<div >
<label for="xm">姓名：</label>
<input type="text" id="xm" placeholder="請輸入姓名">
</div>
<div >
<label for="nl">年齡：</label>
<input type="text" id="nl" placeholder="請輸入年齡">
</div>
<div >
<label for="tel">電話：</label>
<input type="text" id="tel" placeholder="請輸入電話">
</div>
</div>
<div >
<button type="button" data-dismiss="modal">關閉</button>
<button type="button" data-dismiss="modal">保存</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://www.cnblogs.com/zhangMr/p/js/jquery-3.4.1.js"></script>
<script src="https://www.cnblogs.com/zhangMr/p/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" >洗掉</button>
<button type="button" 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="https://www.cnblogs.com/" "）,但是有因為下面的表格式要異步更新的，所以不能整個頁面重繪
//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=https://www.cnblogs.com/zhangMr/p/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" >洗掉</button>
<button type="button" 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=https://www.cnblogs.com/zhangMr/p/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=https://www.cnblogs.com/zhangMr/p/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，請留言告訴我喲，在此不勝感激！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/114529.html
標籤：其他
上一篇：QR 碼詳解（上）
下一篇：命令