js高级笔记-12(商品信息增删改查完整版)

css部分：

* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			th {
				width: 200px;
				line-height: 30px;
				text-align: center;
				background-color: #DEE2E6;
			}

			table {
				margin: 20px auto;
			}

			td {
				width: 200px;
				line-height: 30px;
				text-align: center;
				background-color: white;
			}

			input {
				display: block;
				margin: 1px auto;
				text-align: center;
			}
			ul{
				overflow: hidden;
			}
			ul>li{
				width: 20px;
				height: 20px;
				float: left;
				text-align: center;
				line-height: 20px;
				background-color:  lightpink;
				margin-right: 15px;
				color: white;
				cursor: pointer;
			}
			ul>li:first-child{
				margin-left: 150px;
			}
			#myul{
				margin: 5px auto;
			}
			td input{
				width: 200px;
				line-height: 30px;
				border: none;
			}
			#searchButton{
				display: block;
				margin: 0 auto;
				width: 175px;
			}

html部分：

<input type="text" name="" id="title" value="" placeholder="请输入商品名称" /><br>
		<input type="text" name="" id="price" value="" placeholder="请输入商品价格" /><br>
		<input type="text" name="" id="num" value="" placeholder="请输入商品数量" /><br>
		<input type="submit" name="" id="add" value="提交" /><br>
		<input type="text" name="" id="search" value="" placeholder="请输入搜索内容" /><br>
		<button type="button" id="searchButton">搜索</button>
		<div id="myul">
			<ul></ul>
		</div>
		
		<table border="" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th>商品编号</th>
					<th>商品名称</th>
					<th>商品价格
						<button class="up" title="升序">↑</button>
						<button class="down" title="降序">↓</button>
					</th>
					<th>商品数量</th>
					<th>删除商品</th>
					<th>编辑商品</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>

js/jQuery部分：

$.ajax({
			url: 'http://localhost:8888/get',
			method: 'get',
			success: (res) => {
				// console.log(res);
				console.log('一共有数据'+res.length+'条');
				var allArr = res.length;
				var indiv = Math.ceil(res.length/5);
				console.log('分页数量为'+indiv);
				for (var i = 0; i < indiv; i++) {
					var tag = $('<li οnclick="skip(this)"></li>')
					tag.text(i+1)
					$('ul').append(tag);
				}
				for (var i = 0; i < 5; i++) {
					var tag = $('<tr></tr>')
					tag.html(`
						<td>${res[i]._id}</td>
						<td><input type="text" value=${res[i].title} disabled /></td>
						<td>${res[i].price}</td>
						<td>${res[i].num}</td>
						<td οnclick="del(this)">删除</td>
						<td οnclick="edmit(this)">编辑</td>`)
					$('table tbody').append(tag)
				}
			}
		})
		function skip(a){
			var index = $(a).index();
			console.log(index);
			$.ajax({
				url: 'http://localhost:8888/skip',
				method:'get',
				data:{
					m:5,
					n:index*5
				},
				success:(res)=>{
					console.log(res);
					$('table tbody').html('')
					for (var i = 0; i < res.length; i++) {
						var tag = $('<tr></tr>')
						tag.html(`
							<td>${res[i]._id}</td>
							<td><input type="text" value=${res[i].title} disabled /></td>
							<td>${res[i].price}</td>
							<td>${res[i].num}</td>
							<td οnclick="del(this)">删除</td>
							<td οnclick="edmit(this)">编辑</td>`)
						$('table tbody').append(tag)
					}
				}
			})
		}
		$('#add').click(() => {
			$.ajax({
				url: 'http://localhost:8888/add',
				data: {
					title: $('#title').val(),
					price: $('#price').val(),
					num: $('#num').val()
				},
				method: 'get',
				success: (res) => {
					console.log(res.ops[0]);
					if (res) {
						var tag = $('<tr></tr>')
						tag.html(`
						<td>${res.ops[0]._id}</td>
						<td><input type="text" value=${res.ops[0].title} disabled /></td>
						<td>${res.ops[0].price}</td>
						<td>${res.ops[0].num}</td>
						<td οnclick="del(this)">删除</td>
						<td οnclick="edmit(this)">编辑</td>`)
						$('table tbody').append(tag)
					}
				}
			})
		})
		$('.up').click(() => {
			$.ajax({
				url:'http://localhost:8888/sort',
				data:{
					price:1
				},
				method:'get',
				success:(res)=>{
					if(res){
						$('table tbody').html('')
						for (var i = 0; i < res.length; i++) {
							var tag = $('<tr></tr>')
							tag.html(`
								<td>${res[i]._id}</td>
								<td><input type="text" value=${res[i].title} disabled /></td>
								<td>${res[i].price}</td>
								<td>${res[i].num}</td>
								<td οnclick="del(this)">删除</td>
								<td οnclick="edmit(this)">编辑</td>`)
							$('table tbody').append(tag)
						}
					}
				}
			})
		})
		$('.down').click(() => {
			$.ajax({
				url:'http://localhost:8888/sort',
				data:{
					price:-1
				},
				method:'get',
				success:(res)=>{
					if(res){
						$('table tbody').html('')
						for (var i = 0; i < res.length; i++) {
							var tag = $('<tr></tr>')
							tag.html(`
								<td>${res[i]._id}</td>
								<td><input type="text" value=${res[i].title} disabled /></td>
								<td>${res[i].price}</td>
								<td>${res[i].num}</td>
								<td οnclick="del(this)">删除</td>
								<td οnclick="edmit(this)">编辑</td>`)
							$('table tbody').append(tag)
						}
					}
				}
			})
		})
		function del(a){
			var id = $(a).parent().children(0).html().trim();
			console.log(id);
			$.ajax({
				url:'http://localhost:8888/del',
				data:{
					_id:id
				},
				method:'get',
				success:(res)=>{
					console.log(res);
					if(res.result.n == 1){
						$(a).parent().remove();
					}
				}
			})
		}
		function edmit(a){
			var oldInput = $(a).parent().children(1).children(0);
			var newInput = '';
			var designation = '';
			if($(a).text() == '编辑'){
				oldInput.removeAttr('disabled');
				$(a).text('确认'); 
				designation = oldInput.val().trim(); 
				
			}else if($(a).text() == '确认'){
				oldInput.attr('disabled',true);
				$(a).text('编辑');
				newInput = oldInput.val().trim(); 
				
			}
			console.log('未修改之前的名字是'+ newInput);
			console.log('修改之后的名字是'+ designation);
			$.ajax({
				url:'http://localhost:8888/edmit',
				data:{
					title:designation,
					newtitle:newInput
				},
				method:'get',
				success:(res)=>{
					console.log(res);
				}
			})
		}
		$("#searchButton").click(()=>{
			$.ajax({
				url:'http://localhost:8888/search',
				data:{
					title:$("#search").val()
				},
				method:"get",
				success:(res)=>{
					console.log(res);
					if(res){
						$('table tbody').html('')
						for (var i = 0; i < res.length; i++) {
							var tag = $('<tr></tr>')
							tag.html(`
								<td>${res[i]._id}</td>
								<td><input type="text" value=${res[i].title} disabled /></td>
								<td>${res[i].price}</td>
								<td>${res[i].num}</td>
								<td οnclick="del(this)">删除</td>
								<td οnclick="edmit(this)">编辑</td>`)
							$('table tbody').append(tag)
						}
					}
					
				}
			})
		})

node main.js部分

const express = require('express');
const app = express();
const db = require('./model/db.js');
const ObjectID = require('mongodb').ObjectID;
app.use('/',express.static('./www/login'));
//add
app.use('/add',(req,res)=>{
	let obj = {
		title:req.query.title,
		price:parseInt(req.query.price),
		num:parseInt(req.query.num) 
	}
	db.insert('Product','cream',obj,(a)=>{
		res.send(a);
	})
})
// get
app.use('/get',(req,res)=>{
	let obj = {
		
	}
	db.find('Product','cream',obj,(a)=>{
		res.send(a);
	})
})
// 升序/降序
app.use('/sort',(req,res)=>{
	let obj = {
		
	}
	let sort ={
		price:parseInt(req.query.price)
	}
	db.find('Product','cream',obj,(a)=>{
		res.send(a);
	},sort)
})
// 分页显示
app.use('/skip',(req,res)=>{
	let obj = {
		
	}
	let sort = {
		
	}
	let limit = parseInt(req.query.m) 
	
	let skip = parseInt(req.query.n) 
	
	db.find('Product','cream',obj,(a)=>{
		// console.log(a);
		res.send(a);
	},sort,skip,limit)
})
// 删除
app.use('/del',(req,res)=>{
	let obj = {
		_id:new ObjectID(req.query._id)
	}
	console.log(obj);
	db.delete('Product','cream',obj,(a)=>{
		// console.log(a);
		res.send(a);
	})
})
// 更新
app.use('/edmit',(req,res)=>{
	let Old = {
		title:req.query.title
	}
	let New = {
		$set:{
			title:req.query.newtitle
		}
	}
	db.update('Product','cream',Old,New,(a)=>{
		// console.log(a);
		res.send(a);
	})
})
// 查询
app.use('/search',(req,res)=>{
	var str="^.*"+req.query.title+".*$"
	var reg = new RegExp(str)
	let obj = {
		title:reg
		// title:{
		// 	$regex:'req.query.title',
		// 	$options:'i'
		// }
		// title:req.query.title
	}
	let sort = {
		
	}
	let limit = 0
	
	let skip = 0 
	
	db.find('Product','cream',obj,(a)=>{
		console.log(a);
		res.send(a);
	},sort,skip,limit)
})
app.listen('8888')

模块增删改查的封装

// 引入MongoDB
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 = function(dbname,colname,obj,callback){
	_connect(function(db){
		db.db(dbname).collection(colname).insertOne(obj,(err,result)=>{
			if(err) throw err;
			console.log('插入数据成功');
			db.close();
			callback(result)
		})
	})
}
// 查找数据
module.exports.find = function(dbname,colname,obj,callback,sort={},skip=0,limit=0){
	_connect((db)=>{
		db.db(dbname).collection(colname).find(obj).sort(sort).skip(skip).limit(limit).toArray((err,result)=>{
			if(err) throw err;
			console.log('查找数据成功');
			db.close();
			callback(result)
		})
	})
}
// 更新数据
module.exports.update = function(dbname,colname,Old,New,callback){
	_connect((db)=>{
		db.db(dbname).collection(colname).updateOne(Old,New,(err,result)=>{
			if(err) throw err;
			console.log('更新数据成功');
			db.close();
			callback(result)
		})
	})
}
// 删除数据
module.exports.delete = function(dbname,colname,obj,callback){
	_connect((db)=>{
		db.db(dbname).collection(colname).deleteOne(obj,(err,result)=>{
			if(err) throw err;
			console.log('删除数据成功');
			db.close();
			callback(result)
		})
	})
}