后台
const express=require('express');
const app=express();
const fs=require('fs');
app.use(express.static('public',{
index:'index.html'
}));
app.use(express.json());
// 页面
app.post('/api/list',(req,res)=>{
let data=JSON.parse(fs.readFileSync('mock/list.json'));
res.send(data)
});
// 编辑
app.post('/api/compile',(req,res)=>{
let {name,city,title,id}=req.body
let data=JSON.parse(fs.readFileSync('mock/list.json'));
let o=data.find(item=>item.id===req.body.id);
// console.log(o,req.body);
Object.assign(o,req.body);
fs.writeFileSync('mock/list.json',JSON.stringify(data))
res.send({code:1})
})
app.listen(8080,()=>console.log('8080启动了!'));
// 删除
app.post('/api/del',(req,res)=>{
let { id }=req.body;
let data=JSON.parse(fs.readFileSync('mock/list.json'));
data=data.filter(item=>item.id!==id);
fs.writeFileSync('mock/list.json',JSON.stringify(data));
res.send({code:1})
})
前台
let wrap=document.querySelector('.wrap'),
ullist=document.querySelector('.ullist'),
mask=document.querySelector('.mask'),
city=document.querySelector('.city'),
name=document.querySelector('.name'),
title=document.querySelector('.title'),
ID,
ollist=document.querySelector('.ollist');
// 列表
rander()
function rander(){
axios.post('/api/list').then(result=>{
console.log(result.data);
ollist.innerHTML=result.data.map(item=>{
return`<li my-id='${item.id}'>
<span>></span>
<span>${item.name}</span>
<span>${item.city}</span>
<span>${item.title}</span>
<span>
<button class="compile" my-id='${item.id}'>编辑</button>
<button class="add" my-id='${item.id}'>添加食品</button>
<button class="del" my-id='${item.id}'>删除</button>
</span>
</li>`
}).join('')
})
}
// 编辑
ollist.addEventListener('click',e=>{
let tar=e.target;
if(tar.className==='compile'){
mask.style.display='block';
ID=tar.getAttribute('my-id');
}
})
mask.addEventListener('click',e=>{
let tar=e.target;
if(tar.className==='no'){
mask.style.display='none'
}
if(tar.className==='ok'){
mask.style.display='none';
// let id=tar.getAttribute('my-id')
console.log(ID);
axios.post('/api/compile',{
name:name.value,
city:city.value,
title:title.value,
id:ID
}).then(result=>{
result.data.code&&rander()
})
}
})
// 删除
ollist.addEventListener('click',e=>{
let tar=e.target;
if(tar.className==='del'){
ID=tar.getAttribute('my-id')
console.log(ID);
axios.post('/api/del',{id:ID}).then(result=>{
result.data.code&&rander()
})
}
})
// 增加
ollist.addEventListener('click',e=>{
let tar=e.target;
if(tar.className==='add'){
ID=tar.getAttribute('my-id')
console.log(ID);
axios.post('/api/del',{id:ID}).then(result=>{
result.data.code&&rander()
})
}
})