原生js案例----增、删、改、查、排序功能

最新推荐文章于 2022-08-23 17:10:24 发布

weixin_48211419

最新推荐文章于 2022-08-23 17:10:24 发布

阅读量81

点赞数

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

版权

前端

css

*{
	margin: 0;
	padding: 0;
	outline: none;
	flex-direction: row;
}

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"/>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="text" id="name" placeholder="请输入姓名">
		<input type="text" id="age" placeholder="请输入年龄">
		<button type="button" id="add">添加</button>
		<button type="button" id="qdxg">确定修改</button>
		<button type="button" id="px">排序</button>
		<button type="button" id="alldel">全部删除</button>
		<button type="button" id="ss">搜索</button><br>
		<table border="1" cellspacing="0" cellpadding="0" width="">
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!-- <tr>
					<td>${arr[i].name}</td>
					<td>${arr[i].age}</td>		
					<td>
						<button type="button" onclick=del('${arr[i]._id}')>删除</button>
						<button type="button" onclick=del('${arr[i]._id}')>修改</button>
					</td>		
				</tr> -->
			</tbody>
		</table>
	</body>
	<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
	<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
</html>

js

show()
$('#add').click(function(){
    if ($('#name').val()==''&&$('#age').val()=='') {
        alert('不能为空')
    } else{
        var obj = {
            name:$('#name').val(),
            age:$('#age').val()
        }
        $.ajax({
            type:'post',
            url:'/tabData',
            data:{
                name:$('#name').val()
            },
            success:function(res){
                if(res.length == 0){
                    $.ajax({
                        type:'post',
                        url:'/addPost',
                        data:obj,
                        success:function(res){
                            show()
                        }
                    })
                }else{
                    alert('数据已存在') 
                } 
            }
        })
    }
})
function show(){
    $.ajax({
        type:'get',
        url:'/getContent',
        success:function(res){
            showDom(res)
        }
    })
}
//渲染2
function showDom (arr) {
    var str = ''
for(var i=0; i<arr.length; i++){
    str +=`
    <tr>
        <td>${arr[i].name}</td>
        <td>${arr[i].age}</td>		
        <td>
            <button type="button" onclick=del('${arr[i]._id}')>删除</button>
            <button type="button" onclick=xg(${JSON.stringify(arr[i])})>修改</button>
        </td>		
    </tr>
`}
$('tbody').html(str)
}
//删除
function del(myid){
    $.ajax({
        type:'post',
        url:'/delePost',
        data:{
            id:myid
        },
        success:function(res){
           show()
        }
    });
}
//修改
var p
function xg(obj){
    p = obj._id
    $('#name').val(obj.name)
    $('#age').val(obj.age)
}
//确定修改
$('#qdxg').click(function(){
    var obj = {
        name:$('#name').val(),
        age:$('#age').val(),
        id:p
    } 
    $.ajax({
        type:'post',
        url:'/updatePost',
        data:obj,
        success:function(res){
           show()
        }
    });
})
//搜索
$('#ss').click(function(){
    $.ajax({
        type:'post',
        url:'/tabData',
        data:{
            name:$('#name').val()
        },
        success:function(res){
           showDom(res)
        }
    });
})
//排序
$('#px').click(function(){
    $.ajax({
        type:'post',
        url:'/sortPost',
        data:{
           age:1
        },
        success:function(res){
            showDom(res)
        }
    });
})
//全部删除
$('#alldel').click(function(){
    $.ajax({
        type:'post',
        data:"",
        url:'/alldelPost',
        success:function(res){
           show()
        }
    });
})

后端

// 写录入系统的接口
var express = require('express')
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,
  "age":Number,
  "id":String
})
//生成数据模型
const appX=mongoose.model('shoppingList1',app)
// 解析数据
var bodyParser = require('body-parser')
var urlencodedParser = bodyParser.urlencoded({extended: false})
//cors跨域
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();
});
apps.get('/', function(req, res, next) {
    res.sendFile(__dirname+'/index.html');
});
//添加
apps.post('/addPost', urlencodedParser, function(req, res) {
  var obj = req.body;
  appX.create(obj, function(err){
    res.send('OK')
  })
});
//渲染
apps.get('/getContent', urlencodedParser, function(req, res) {
  appX.find({}, function(err, data){
    res.send(data)
  })
});
//删除
apps.post('/delePost', urlencodedParser, function(req, res) {
  var obj = req.body;
  appX.deleteMany({_id:obj.id}, function(err, data){
      res.send(data)
  })
});
//修改
apps.post('/updatePost', urlencodedParser, function(req, res) {
  var obj = req.body;
  console.log(obj)
  appX.update({_id:obj.id},{$set: obj}, function(err, data){
    res.send(data)
  })
});
//分页
apps.post('/fyPost', urlencodedParser, function(req, res) { 
  var obj = req.body;
  appX.find({}, {}, {limit:obj.limit,skip:obj.skip}, function(err, data){
    res.send(data)
  })
});
//查找
apps.post('/tabData', urlencodedParser, function(req, res) {
  var obj = req.body;
  appX.find(obj, function(err, data){
    res.send(data)
  })
});
//全部删除
apps.post('/alldelPost', urlencodedParser, function(req, res) {
  appX.deleteMany({}, function(err, data){
      res.send(data)
  })
});
//排序
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){
    res.send(data)
  }).sort(obj)
})
module.exports = apps;