logins-gzx v6.0.6

加油哦你可以的

 
//获取数据
let add = document.querySelector(".add"),//添加
search = document.querySelector(".search"),//搜索
tbody = document.querySelector("tbody"),//主体
mark = document.querySelector(".mark"),//遮罩
user = document.querySelector(".user"),
age = document.querySelector(".age"),
submit = document.querySelector(".submit"),
close = document.querySelector(".close");

let flag = true; //规定  值为真  添加  为假是编辑
let modifyId = "";//空数组


 //渲染函数
 function render(data){

     //赋值表格内容
     tbody.innerHTML=data.map(item=>{
         //返回摸板字符串
         return `<tr>
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>
               <img src="${item.url}" alt="">
            </td>
            <td>
                <b class="modify" id="${item.id}">编辑</b>
                <b class="del" id="${item.id}">删除</b>
            </td>
         </tr>`;

     }).join("")
 }


//渲染数据接口
    function getData(){ 
    //获取数据

    axios.get("/api/list").then(result=>{
        //渲染传过来的数据
        render(result.data);
    });

}

// // // 判断是不是modify

// if (tar.className === "modify") {
//     isAdd = false;
//     dialog.style.display = "block";
//     username.value = tar.parentNode.parentNode.children[1].innerHTML;
//     age.value = tar.parentNode.parentNode.children[2].innerHTML;
//     modifyId = tar.id;
// }

 //删除数据
 //封装函数
 function autoFn(){
    //事件
    tbody.addEventListener("click",(e)=>{
        //事件目标
        let tar = e.target;
        //判断类名
        if(tar.className==="del"){
            //接口接收
            axios.post("/api/del",{
                id: tar.id,//下标id
            }).then((result)=>{
    
                result.data.code && getData();//重新渲染数据
                
            })
        }

        //编辑数据
        if(tar.className==="modify"){
            //关闭开关
            flag=false;
            //显示弹框
            mark.style.display="block";
            //改变内容
            user.value = tar.parentNode.parentNode.children[1].innerHTML;
            //年龄
            age.value = tar.parentNode.parentNode.children[2].innerHTML;
            //赋值下标
            modifyId=tar.id;
        }

    });

     //模糊搜索
     search.addEventListener("input",()=>{
         
        //模糊搜索接口
        axios.post("/api/search",{
            searchValue: search.value,//input属性值

        }).then((result)=>{
            //渲染
            render(result.data);
        })

     })


    // 新增点击事件
    add.addEventListener("click", () => {

        // 显示弹框
        mark.style.display = "block";
        // 设置开关变量
        flag = true;//添加变量
    })
   
    //提交事件
    submit.addEventListener("click",()=>{
    //判断为真、
    if(flag){
        //接口
        axios.post("/api/add",{
            name:user.value,
            age:age.value,

        }).then((result)=>{
             result.data && getData();//渲染添加数据
             //隐藏mrk
             mark.style.display="none";
        })

     }else{
         //编译
         axios.post("/api/compile",{
            name:user.value,//数据渲染的名字
            age:age.value,
            id:modifyId,//渲染存的下标

         }).then((result)=>{
            result.data.code && getData();//渲染添加数据
            //隐藏mrk
            mark.style.display="none";
         })

     }
        
    })
    //点击关闭
    
    // 新增点击事件
    close.addEventListener("click", () => {
        // 关闭弹框
        mark.style.display = "none";

    })

 }
 

//初始化调用的数据
getData();
//调用数据
autoFn();

//添加
//引入模块
const fs = require("fs");
//引入exprots
const express = require("express");
const Mork =require("mockjs");//引入数据
//路由
const route = express.Router();
//抛出
module.exports = route;


//接口
route.post("/api/add",(req,res)=>{
  let data =JSON.parse(fs.readFileSync("mock/user.json"));

  //推入的数据
  data.push({
      ...req.body,//类数组
      //数据的id
      id:Mork.Random.id(),
      url:Mork.Random.image("50x50")
  });
  //写入
  fs.writeFileSync("mock/user.json",JSON.stringify(data));
  //返回
  res.send({
      code:1,
  })

})

//编译
//引入模块
const fs = require("fs");

const express =require("express");

const route  = express.Router();

//抛出模块
module.exports = route;


//编译接口
route.post("/api/compile",(req,res)=>{
    
 //获取数据
 let data = JSON.parse(fs.readFileSync("mock/user.json"));
 //查找里面的数据
 let obj = data.find(item=> item.id ===req.body.id);
 //存入对象
 Object.assign(obj,req.body);
 //转换
 fs.writeFileSync("mock/user.json",JSON.stringify(data));
 //返回
 res.send({
     code:1,
 })

})
//模糊搜索
//引入模块
const fs = require("fs");
//引入exprots
const express = require("express");

//路由
const route = express.Router();
//抛出
module.exports = route;



 //接口
 route.post("/api/del",(req,res)=>{
     //获取下标进行删除
     let id = req.body.id;
     //获取数据
     let data = JSON.parse(fs.readFileSync("./mock/user.json"));
     //过滤
     data=data.filter(item=>item.id !== id);//过滤
     //重新写入
     fs.writeFileSync("./mock/user.json",JSON.stringify(data));
     //返回
     res.send({
         code:1
     })
 })
//