封裝模組實現商品增刪改查
01.前端
<input type="text" placeholder="請輸入商品名字" class="proname">
<input type="text" placeholder="請輸入商品價格" class="price">
<button class="add">增加商品</button>
<input type="text" placeholder="請輸入查詢的商品" class='findpro'>
<button class="find">查詢商品</button>
<table>
<thead>
<tr>
<td>商品名字</td>
<td>商品價格</td>
<td>編輯商品</td>
<td>刪除商品</td>
</tr>
</thead>
<tbody>
<tr>
<td>華為手機</td>
<td>5600</td>
<td onclick="update(this)">編輯</td>
<td onclick="del(this)">刪除</td>
</tr>
</tbody>
</table>
02.封裝的模組
const MongoClient=require('mongodb').MongoClient;
const url='mongodb://localhost:27017';
// 把資料庫連線的操作，封裝起來。
function connect(callback){
MongoClient.connect(url,(err,db)=>{
if(err) throw err;
// 說明連線資料庫成功了 db代表連線成功以後返回的資料
callback(db);
})
}
//增加
module.exports.insert=(dbname,col,myobj,callback)=>{
connect(db=>{
let dbo=db.db(dbname);
myobj=myobj instanceof Array?myobj:[myobj];
dbo.collection(col).insertMany(myobj,(err,result)=>{
if(err) throw err;
console.log("資料新增成功");
db.close();
callback(result);
})
});
}
// 查詢封裝的時候，考慮是否需要分頁是否需要排序
//需要書寫函式引數的預設值，因為條件可能沒有
module.exports.find=(dbname,col,callback,myobj={},mysort={},myskip=0,mylimit=0)=>{
connect(db=>{
let dbo=db.db(dbname);
console.log(myobj);
// sort排序
// skip跳過多少條資料
// limit()限制取資料的數量
dbo.collection(col).find(myobj).sort(mysort).skip(myskip).limit(mylimit).toArray((err,result)=>{
if(err) throw err;
console.log("資料查詢成功");
db.close();
callback(result);
});
});
}
//更新
module.exports.update=(dbname,col,myobj,updateobj,callback)=>{
connect(db=>{
let dbo=db.db(dbname);
let updatestr={$set:updateobj};
dbo.collection(col).updateOne(myobj,updatestr,(err,res)=>{
if(err) throw err;
console.log("資料更新成功");
db.close();
callback(res);
});
});
}
//刪除
module.exports.delete=(dbname,col,myobj,callback)=>{
connect(db=>{
let dbo=db.db(dbname);
dbo.collection(col).deleteOne(myobj,(err,obj)=>{
console.log("資料刪除成功");
db.close();
callback(obj);
});
});
}
03.後臺和資料庫
後天：
const express=require('express');
//引入封裝的模組
const dao=require('./model/dao.js');
const app=express();
//呈遞靜態資源
app.use('/',express.static('./www'));
app.use('/public',express.static('./public/'));
app.listen('8989');
初始資料庫：
04.新增
前端ajax：
$(".add").click(()=>{
$.ajax({
//請求後臺指定的藉口
url:'http://localhost:8989/add',
method:'get',
//發生新增的資料
data:{
proname:$(".proname").val(),
proprice:$(".price").val()
},
//成功了就新增一行
success(data){
console.log(data);
$("tbody").append(`
<tr>
<td>${data.ops[0].proname}</td>
<td>${data.ops[0].proprice}</td>
<td οnclick="update(this)">編輯</td>
<td οnclick="del(this)">刪除</td>
</tr>
`);
}
});
});
後臺：
app.get('/add',(req,res)=>{
let obj={
proname:req.query.proname,
proprice:req.query.proprice
}
dao.insert('product','phone',obj,reslut=>{
res.send(reslut);
});
});
增加小米手機：
05.刪除
前端ajax：
function del(a){
$.ajax({
url:'http://localhost:8989/del',
method:'get',
data:{
//獲取到商品要刪除的名字和價格
proname:$(a).siblings().eq(0).html(),
proprice:$(a).siblings().eq(1).html()
},
//成功移除這一行
success(res){
console.log('資料刪除成功');
//拿到父元素的index
$("tbody tr").eq($(a).parent().index()).remove();
}
});
}
後臺：
app.get("/del",(req,res)=>{
//拿到藥刪除的名字和價格
let pro={
proname:req.query.proname,
proprice:req.query.proprice
}
dao.delete('product','phone',pro,data=>{
res.send(data);
});
});
刪除華為手機：
06.更新
前端ajax:
function update(b){
//彈出修改框
let newprice=prompt('請輸入新的價格');
//輸入為空或者點選取消就不執行
if(newprice!=''&&newprice!=null){
$.ajax({
url:'http://localhost:8989/update',
method:'get',
data:{
proname:$(b).siblings().eq(0).html(),
proprice:$(b).siblings().eq(1).html(),
//要修改的值
newprice:newprice
},
success(data){
console.log('資料更新成功');
//修改值
$(b).prev().html(newprice);
}
});
}
}
後臺：
app.get('/update',(req,res)=>{
//原資料
let obj={
proname:req.query.proname,
proprice:req.query.proprice
}
//新資料
let updateobj={
proprice:req.query.newprice
}
dao.update('product','phone',obj,updateobj,data=>{
res.send(data);
});
});
將小米手機的價格修改為10000
07.查詢
前端ajax：
$(".find").click(()=>{
$.ajax({
url:'http://localhost:8989/find',
method:'get',
//查詢條件
data:{
proname:$(".findpro").val()
},
success(data){
console.log('資料查詢成功');
//查詢到幾個資料就新增幾行
for(let i in data){
$("tbody").append(`
<tr>
<td>${data[i].proname}</td>
<td>${data[i].proprice}</td>
<td οnclick="update(this)">編輯</td>
<td οnclick="del(this)">刪除</td>
</tr>
`);
}
}
});
});
後臺：
app.get('/find',(req,res)=>{
let obj={
proname:req.query.proname
}
dao.find('product','phone',data=>{
res.send(data);
},obj,{},0,10);
})
資料庫：
查詢蘋果手機：
08.利用cookie驗證是否登陸過
前端:
<div id="box">
<h1>LOGIN</h1>
<div id="inputBox">
<div class="inputText">
<i class="fa fa-user-o"></i>
<input type="text" placeholder="Username" name="username">
</div>
<div class="inputText">
<i class="fa fa-lock"></i>
<input type="password" placeholder="Password" name='password'>
</div>
<input type="submit" id="login" value='登陸'>
</div>
</div>
後臺：
const express=require('express');
const app=express();
// 引入處理cookie的包
var cookieParser=require('cookie-parser');
// 配置app可以使用cookie
app.use(cookieParser());
app.use('/',express.static('./www/'));
app.use('/form',express.static('./www/form.html'));
app.use('/public',express.static('./public/'));
app.get('/login',(req,res)=>{
//設定cookie的名為login，值為使用者名稱
res.cookie('login',req.query.username,{maxAge:86400000});
res.send();
});
app.get('/rayshaan',(req,res)=>{
if(req.cookies.login){
//如果cookie存在就傳送給前端
res.send(`cookie:${req.cookies.login}`);
}else{
res.send('cookie不存在');
}
});
app.listen('8989');
前端ajax：
//每次載入網頁根據cookie判斷是否登陸過，登陸過就跳轉到其他頁面
$.ajax({
url:'http://localhost:8989/rayshaan',
success:function(res){
//輸出cookie
console.log(res);
//當cookie存在時就跳轉
if(res!=''){
//location.href='http://localhost:8989/form';
}
}
});
//第一次登陸的時候寫入cookie
$("#login").click(()=>{
$.ajax({
url:'http://localhost:8989/login',
method:'get',
data:{
username:$("input[type=text]").val(),
password:$("input[type=password]").val()
},
success(data){
console.log(data);
}
});
});
第一次登陸寫入cookie(值為rayshaan)：
重新整理：
瀏覽器中檢視cookie:
相關文章
- 使用Promise封裝fetch庫(增刪改查)Promise封裝
- Mongodb write寫(增、刪、改)模組原始碼實現MongoDB原始碼
- Node連線MySQL並封裝其增刪查改MySql封裝
- SQLAlchemy - 模組檔案以及增刪改查(CURD操作)SQL
- js實現表格的增刪改查JS
- 運用layui實現增刪改查UI
- uniapp雲函式教程② ：商品列表增刪改查APP函式
- 單連結串列實現增刪改查
- Go實現對MySQL的增刪改查GoMySql
- 字典，元組，集合的增刪改查
- 增刪改查
- Node.js+Express+Mysql 實現增刪改查Node.jsExpressMySql
- Java實現簡單的增刪改查操作Java
- Mybatis-plus實現簡單增刪改查MyBatis
- jQuery實現購物車的增刪改查jQuery
- Entity Framework使用DBContext實現增刪改查示例FrameworkContext
- webpack4+express+mongodb+vue 實現增刪改查WebExpressMongoDBVue
- JDBC連線mysql-8.0實現增刪改查JDBCMySql
- python 連線mongodb實現增刪改查例項PythonMongoDB
- SpringMVC+Spring Data JPA實現增刪改查操作SpringMVC
- 第一個mybatis程式，實現增刪改查CRUDMyBatis
- 連線資料庫並實現增、刪、改、查資料庫
- JDBC連線資料庫實現增刪改查JDBC資料庫
- koa+mysql實現增刪改查-全棧之路MySql全棧
- IDEA SpringBoot-Mybatis-plus 實現增刪改查(CRUD)IdeaSpring BootMyBatis
- mybatis實現MySQL資料庫的增刪改查MyBatisMySql資料庫
- SQL增刪改查SQL
- Mongoose查增改刪Go
- indexedDB 增刪改查Index
- mysql增刪改查MySql
- SpringBoot+Mybatis增刪改查實戰Spring BootMyBatis
- Node+Vue實現對資料的增刪改查Vue
- 寫一個簡單的Linkedlist，實現增刪改查
- 使用express+mongoose對mongodb實現增刪改查操作ExpressMongoDB
- 使用Mongoose類庫實現簡單的增刪改查Go
- 關於ToDolist 的增刪改查 用jQuery來實現jQuery
- express+mongodb+vue實現增刪改查-全棧之路ExpressMongoDBVue全棧
- 列表的增刪改查