封装CURD（增删改查）

最新推荐文章于 2024-04-30 16:57:21 发布

不想写，还得写，写就写，慢慢写

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量245

点赞数

文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/m0_74331185/article/details/128089088

版权

const  express = require("express")
const router =express.Router()

const op=require("sequelize").Op //导入op子模块
//导入studuent模型
const  student =require("../db/modele/studentModeo")
//创建接口测试
router.get("/student",(req,res)=>{
    res.json({
        code:1000,
        msg:"接口测试"
    })
})



//插入记录的接口:http://127.0.0.1:3000/studentApi/stu
//创建新用户

router.post("/stu",(req,res)=>{
    cjStu(req).then((result)=>{

              res.json({
                  code:1002
              })

      })
})
//删除用户
router.post("/sc",(req,res)=>{
    ccStu(req).then(result=>{

            res.json({
                code:1004
            })

    })
})

//修改用户
router.post("/xg",(req,res)=>{
    GGStu(req).then((restul)=>{

            res.json({
                code:1006
            })

    })


})

//查询学生
router.get("/cx",(req,res)=>{
    student.findAll().then((result)=>{
        res.send(JSON.stringify(result))
        // console.log(JSON.stringify(result) )
    })

})


//模糊查询（按性别查询）
router.post("/mhcx",(req,res)=>{
    //获取客户端发送的性别
    let fistSex = req.body.sex
    //模糊查询
    student.findAll({
     where:{
        sex:{
            [op.like]: "男%"
        }
     }
    }).then((result)=>{
        res.json(result)
    })
})

//导出路由器
module.exports= router

//--------------------------------------------------
//封装增删改查

//创建新学生

 async  function cjStu(req){
    const result =  await student.create({
        id:req.body.student_id,
        name:req.body.student_name,
        sex:req.body.student_sex,
        age: req.body.student_age,
     address: req.body.student_address,
    })
     return result
 }

//删除

async  function ccStu(req){
    const result =  await student.destroy({
        where:{
            id:req.body.student_id,
            name:req.body.student_name,
        }

    })
    return result
}

//更改
async  function GGStu(req){
    const result =  await student.update({

        name:req.body.student_name,
        sex:req.body.student_sex,
        age: req.body.student_age,
        address: req.body.student_address,
    },{
        where:{
            id:req.body.student_id,
        }
    })
    return result
}

服务器↑

浏览器↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../ajax/jquery-3.5.1.js"></script>
    <style>
    *{
        margin: 0;
        padding:0;
    }    
    #student{
        width: 600px;
        background-color: skyblue;
        margin: 50px auto;
        overflow: hidden;
    }    
    #stu{
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        margin-left:180px ;
    }
    #dl{
        margin-left: 50px;
    }
    #dh{
        margin-top: 100px;
        margin-bottom: 50px;
        float: left;
        
    }
    #cx{
         float: left;
         margin-top: 20px;
         margin-left: 150px;
    }
    #f1,#f2,#f3{
        display: none;
    }
    </style>
</head>
<body>
    <div id="student">
     <header>
        <span id="stu">学生信息统计表</span>
        <button type="button" id="dl">用户登录信息</button>
        <span id="yh"></span>
    </header>  
    
    <section>
        <div id="dh">
            <button id="zj">增加学生</button><br><br>
            <button id="sc">删除学生</button><br><br>
            <button id="gg">更改学生</button><br><br>
            <button id="ck">查询学生</button>
        </div>
        <div id="cx">
            <!-- 添加表单 -->
            <form id="f1">
                <label >
                    id
                    <input type="text" name="student_id" >
                </label>
                <br><br>
                <label >
                    姓名
                    <input type="text"name="student_name">
                </label>
                <br><br>
                <label >
                    性别
                    <input type="text"name="student_sex">
                </label>
                <br><br>
                <label >
                    年龄
                    <input type="text"name="student_age">
                </label>
                <br><br>
                <label >
                    地址
                    <input type="text"name="student_address">
                </label>
                <br><br>
                <button type="button" id="btn">提交</button>
                <button type="reset" >重置</button>
            </form>
            <!-- 删除表单 -->
            <form id="f2">
                <label >
                    id
                    <input type="text" name="student_id" >
                </label>
                <br><br>
                <label >
                    姓名
                    <input type="text"name="student_name">
                </label>
                <br><br>
                <button type="button" id="btn_sc">提交</button>
                <button type="reset" >重置</button>
            </form>

            <!-- 修改表单 -->
            <form id="f3">
                <label >
                    id
                    <input type="text" name="student_id" >
                </label>
                <br><br>
                <label >
                    姓名
                    <input type="text"name="student_name">
                </label>
                <br><br>
                <label >
                    性别
                    <input type="text"name="student_sex">
                </label>
                <br><br>
                <label >
                    年龄
                    <input type="text"name="student_age">
                </label>
                <br><br>
                <label >
                    地址
                    <input type="text"name="student_address">
                </label>
                <br><br>
                <button type="button" id="btn_xg">提交</button>
                <button type="reset" >重置</button>
            </form>
        </div>
    </section>
    </div>

    <script>
        $(function(){

            //添加
            $("#zj").bind("click",function(){
                $("#f1").css("display","block")
                $("#f2").css("display","none")
                $("#f3").css("display","none")
            })
            $("#btn").bind("click",function(){
              $.ajax({
                    url:"http://127.0.0.1:3000/studentApi/stu",
                    type:"post",
                    data:$("#f1").serialize(), //表单序列化
                    dataType:"json",
                    success:function(result){
                        if(result.code===1002){
                            alert("添加成功")
                        }
                    }
                })  
            }) 
            
            //删除
            $("#sc").bind("click",function(){
                $("#f2").css("display","block")
                $("#f1").css("display","none")
                $("#f3").css("display","none")
            })
            $("#btn_sc").bind("click",function(){
                $.ajax({
                    url:"http://127.0.0.1:3000/studentApi/sc",
                    type:"post",
                    data:$("#f2").serialize(), //表单序列化
                    dataType:"json",
                    success:function(result){
                        if(result.code===1004){
                            alert("删除成功")
                        }
                    } 
                })
            })
            
            //修改
            $("#gg").bind("click",function(){
                $("#f3").css("display","block")
                $("#f1").css("display","none")
                $("#f2").css("display","none")
            })

            $("#btn_xg").bind("click",function(){
                $.ajax({
                    url:"http://127.0.0.1:3000/studentApi/xg",
                    type:"post",
                    data:$("#f3").serialize(), //表单序列化
                    dataType:"json",
                    success:function(result){
                        if(result.code===1006){
                            alert("修改成功")
                        }
                    } 
                })
            })


            //查询
            $("#ck").bind("click",function(){
                $("#f3").css("display","none")
                $("#f1").css("display","none")
                $("#f2").css("display","none")
                $.ajax({
                    url:"http://127.0.0.1:3000/studentApi/cx",
                    type:"get",
                    dataType:"json",
                    success:function(result){
                        for(let k of result){
                             $("#cx").append(` <table border="1" style="width: 200px;">
        <tr>
           <td>${k.id}</td>
           <td>${k.name}</td>
           <td>${k.sex}</td>
           <td>${k.age}</td>
           <td>${k.address}</td>
        </tr>
    </table>`)
                        }
                          
                    } 
                })
            })




            //登录


        })


        
    </script>
   
</body>
</html>