原生js案例----增、删功能

最新推荐文章于 2023-04-01 11:05:09 发布

weixin_48211419

最新推荐文章于 2023-04-01 11:05:09 发布

阅读量104

点赞数

本文链接：https://blog.csdn.net/weixin_48211419/article/details/111935937

版权

准备

1、npx express-generator
2、npm i
3、npm i mongoose
4、npm start

前端

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
		<ul type="none" id="ul1">
			<li onclick="k(this)" class="color">首页</li>
			<li onclick="k(this)">添加</li>
			<li onclick="k(this)">表格</li>
			<li onclick="k(this)">列表</li>
		</ul>
		<div id="box">
			<div id="box1">
				<h1>首页</h1>
			</div>
			<div id="box2" class="yc">
				<h1>添加</h1>
				<p><input type="text" id="name" placeholder="垃圾名称"></p>
				<p><select id="type">
					<option value="undefined">请选择</option>
					<option value="可回收垃圾">可回收垃圾</option>
					<option value="有害垃圾">有害垃圾</option>
					<option value="厨余垃圾">厨余垃圾</option>
					<option value="其他垃圾">其他垃圾</option>
				</select></p>
				<button type="button" id="add">添加</button>
			</div>
			<div id="box3" class="yc">
				<h1>表格</h1>
				<table border="1" cellspacing="0" cellpadding="0" width="800xp">
					<thead>
						<tr>
							<th>垃圾名称</th>
							<th>垃圾标志</th>
							<th>垃圾类别</th>
							<th>添加时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<!-- <tr>
							<td>${arr[i].name}</td>
							<td><img src="imgs/${arr[i].type=='undefined'?'':arr[i].type=='可回收垃圾'?'Recyclable_0.jpg':arr[i].type=='有害垃圾'?'Hazardous_0.jpg':arr[i].type=='厨余垃圾'?'food_0.jpg':'Residual_0.jpg'}" alt=""></td>
							<td>${arr[i].time}</td>
							<td><button type="button" onclick=del("${arr[i]._id}")>删除</button></td>
						</tr> -->
					</tbody>
				</table>
			</div>
			<div id="box4" class="yc">
				<h1>列表</h1>
				<div id="div">
					<div id="div1">
						<img src="imgs/Recyclable_1.jpg" alt="">
						<ul type="none" class="ul2">
							<!-- <li>${arr[i].name}</li> -->
						</ul>
					</div>
					<div id="div2">
						<img src="imgs/Hazardous_1.jpg" alt="">
						<ul type="none" class="ul2">
							<!-- <li>${arr[i].name}</li> -->
						</ul>
					</div>
					<div id="div3">
						<img src="imgs/food_1.jpg" alt="">
						<ul type="none" class="ul2">
							<!-- <li>${arr[i].name}</li> -->
						</ul>
					</div>
					<div id="div4">
						<img src="imgs/Residual_1.jpg" alt="">
						<ul type="none" class="ul2">
							<!-- <li>${arr[i].name}</li> -->
						</ul>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
</html>

css

*{
	margin: 0;
	padding: 0;
	outline: none;
	flex-direction: row;
}
#ul1{
	width: 100%;
	height: 30px;
	line-height: 30px;
	background-color: darkgray;
	text-align: center;
	display: flex;
}
#ul1>li{
	flex: 1;
}
#ul1>li:hover{
	cursor: pointer;
	background-color: gold;
	color: crimson;
}
#box{
	width: 100%;
}
#box>div{
	width: 100%;
}
table{
	line-height: 30px;
	text-align: center;
}
table img{
	margin-top: 10px;
	width: 100px;
	height: 100px;
}
#div{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#div>div{
	width: 200px;
}
#div>div>img{
	display: block;
	margin: 0 auto;
	width: 150px;
	height: 150px;
}
#box4 ul{
	width: 92%;
	height: 480px;
	text-align: center;
	border: 4px solid gold;
	border-radius: 20px;
}
#box4 ul>li{
	height: 24px;
	line-height: 24px;
}
.color{
	background-color: gold;
	color: crimson;
}
.yc{
	display: none;
}
img{
	border: none;
}

js

//首屏渲染
show()
//时间戳
function getDateTime(){
    var time = new Date()
    var n = time.getFullYear()
    var y = time.getMonth() + 1
    var d = time.getDate()
    var h = time.getHours()
    var f = time.getMinutes()
    var m = time.getSeconds()
    y < 10 ? y = '0' + y : y
    d < 10 ? d = '0' + d : d
    h < 10 ? h = '0' + h : h
    f < 10 ? f = '0' + f : f
    m < 10 ? m = '0' + m : m
    return n+'-'+ y + '-' + d + ' ' + h + ':' + f +':'+ m
}
//tog切换
var add = document.getElementById('add')
var ul = document.querySelectorAll('#ul1>li')
var divs = document.querySelectorAll('#box>div')
for(let i=0; i<ul.length; i++){
    ul[i].onclick=function(){
        for(let j=0; j<ul.length; j++){
            ul[j].classList.remove('color')
            divs[j].classList.add('yc')
        }
        ul[i].classList.add('color')
        divs[i].classList.remove('yc')
    }
}
//添加
add.onclick=function(){
    var name = document.getElementById('name').value
    var xml=new XMLHttpRequest()
    xml.open('POST', '/tabData', true)
    xml.setRequestHeader('Content-type','application/x-www-form-urlencoded')
    xml.send(`name=${name}`)
    xml.onreadystatechange=function(){
        if(JSON.parse(xml.responseText).length == 0){
            var type = document.getElementById('type').value
            var time = getDateTime()
            xml.open('POST', '/addPost', true)
            xml.setRequestHeader('Content-type','application/x-www-form-urlencoded')
            xml.send(`name=${name}&type=${type}&time=${time}`)
            xml.onreadystatechange=function(){
                show()
            }
        }else{
            alert('数据已存在')
        }
    }
}
//提取数据
function show(){
    var xml=new XMLHttpRequest()
    xml.open('GET', '/getContent', true)
    xml.send()
    xml.onreadystatechange=function(){
        showDom(JSON.parse(xml.responseText))
        showDome(JSON.parse(xml.responseText))
    }
}
//表格渲染
function showDom(arr){
    var str = ''
    for (let i = 0; i < arr.length; i++) {
        str += 
        `<tr>
            <td>${arr[i].name}</td>
            <td><img src="${arr[i].type=='undefined'?'imgs/00.jpg':arr[i].type=='可回收垃圾'?'imgs/Recyclable.jpg':arr[i].type=='有害垃圾'?'imgs/Hazardous.jpg':arr[i].type=='厨余垃圾'?'imgs/food.jpg':'imgs/Residual.jpg'}" alt=""></td>
            <td>${arr[i].type}</td>
            <td>${arr[i].time}</td>
            <td><button type="button" onclick=del("${arr[i]._id}")>删除</button></td>
        </tr>`
    }
    document.querySelector('tbody').innerHTML=str
}
//列表渲染
function showDome(arr){
    var str1=''
    var str2=''
    var str3=''
    var str4=''
    for (let i = 0; i < arr.length; i++) {
        if(arr[i].type=='可回收垃圾'){
            str1+=`<li>${arr[i].name}</li>`
        }else if(arr[i].type=='有害垃圾'){
            str2+=`<li>${arr[i].name}</li>`
        }else if(arr[i].type=='厨余垃圾'){
            str3+=`<li>${arr[i].name}</li>`    
        }else if(arr[i].type=='其他垃圾'){
            str4+=`<li>${arr[i].name}</li>`
        }
    }
    document.querySelector('#div1>ul').innerHTML=str1
    document.querySelector('#div2>ul').innerHTML=str2
    document.querySelector('#div3>ul').innerHTML=str3
    document.querySelector('#div4>ul').innerHTML=str4
}
//删除
function del(myid){
    var xml=new XMLHttpRequest()
    xml.open('POST', '/delePost', true)
    xml.setRequestHeader('Content-type','application/x-www-form-urlencoded')
    xml.send(`id=${myid}`)
    xml.onreadystatechange=function(){
        show()
    }
}

后台

// 写录入系统的接口
var express = require('express')
// var router = express.Router()
var apps = express()
// 引入mongoose 
var mongoose = require('mongoose')
mongoose.connect("mongodb://127.0.0.1:27017/myFiult",{ useUnifiedTopology: true, useNewUrlParser: true })
var con=mongoose.connection;
//判断是否连接成功
con.on("open",function(){
    console.log('YES')
})
con.on("error",function(){
  console.log('NO')
})
//创建骨架
const app= new mongoose.Schema({
  "name":String,
  "id":String,
  "time":String,
  "type":String
})
//生成数据模型
const appX=mongoose.model('shoppingList3',app)
// 解析数据
var bodyParser = require('body-parser')
var urlencodedParser = bodyParser.urlencoded({extended: false})
//cors跨域
// router.use('*', function(req, res, next) {
apps.use('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', '*');
    res.header('Access-Control-Allow-Headers', '*');
    next();
});
/* GET users listing. */
// router.get('/', function(req, res, next) {
apps.get('/', function(req, res, next) {
    //res.render('index', { title: 'Express' });
    res.sendFile(__dirname+'/index.html');
});
//添加
// router.post('/addPost', urlencodedParser, function(req, res) {
apps.post('/addPost', urlencodedParser, function(req, res) {
  var obj = req.body;
  appX.create(obj, function(err){
    // if (err) {
    //   res.send(err)
    // } else {
      res.send('OK')
    // }
  })
});
//渲染
// router.get('/getContent', urlencodedParser, function(req, res) {
apps.get('/getContent', urlencodedParser, function(req, res) {
  // var obj = req.query;
  appX.find({}, function(err, data){
    // if (err) {
    //   res.send(err)
    // } else {
      res.send(data)
    // }
  })
});
//删除
// router.post('/delePost', urlencodedParser, function(req, res) {
apps.post('/delePost', urlencodedParser, function(req, res) {
  var obj = req.body;
  appX.deleteMany({_id:obj.id}, function(err, data){
    // if (err) {
    //   res.send('err:',err)
    // } else {
      res.send(data)
    // }
  })
});
//修改
// router.post('/updatePost', urlencodedParser, function(req, res) {
apps.post('/updatePost', urlencodedParser, function(req, res) {
  var obj = req.body;
  console.log(obj)
  appX.update({_id:obj.id},{$set: obj}, function(err, data){
    // if (err) {
    //   res.send('err:',err)
    // } else {
      res.send(data)
    // }
  })
});
//分页
// router.post('/fyPost', urlencodedParser, function(req, res) {
apps.post('/fyPost', urlencodedParser, function(req, res) { 
  var obj = req.body;
  appX.find({}, {}, {limit:obj.limit,skip:obj.skip}, function(err, data){
    // if (err) {
    //   res.send('err:',err)
    // } else {
      res.send(data)
    // }
  })
});
//查找
// router.post('/tabData', urlencodedParser, function(req, res) {
apps.post('/tabData', urlencodedParser, function(req, res) {
  var obj = req.body;
  console.log(obj)
  appX.find(obj, function(err, data){
    // console.log(data)
    // if (err) {
    //   res.send('err:',err)
    // } else {
      res.send(data)
    // }
  })
});
//全部删除
// router.post('/alldelPost', urlencodedParser, function(req, res) {
apps.post('/alldelPost', urlencodedParser, function(req, res) {
  appX.deleteMany({}, function(err, data){
    // if (err) {
    //   res.send('err:',err)
    // } else {
      res.send(data)
    // }
  })
});
//排序
// router.post('/sortPost', urlencodedParser, function(req, res) {
apps.post('/sortPost', urlencodedParser, function(req, res) {
  var obj = req.body;
  var key = Object.keys(obj)[0];
  obj[key] ? obj[key] = obj[key] - 0 : "";
  appX.find({}, function(err, data){
  //   if (err) {
  //     res.send('err:',err)
  //   } else {
      res.send(data)
    // }
  }).sort(obj)
})
// module.exports = router;
module.exports = apps;

weixin_48211419

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js案例----增、删功能

目录准备前端htmlcssjs后台准备1、npx express-generator2、npm i3、npm i mongoose4、npm start前端html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!-- <meta name="viewport" content="width=devic
复制链接

扫一扫