chisandun v2.0.4

// 后端
// 登录
app.post('/api/login', (req, res) => {
    let { user, pwd } = req.body;
    let data = JSON.parse(fs.readFileSync('./public/data/login.json'));

    let flag = data.find(item => item.user === user && item.pwd === pwd)
    if (!flag) {
        res.end('0')
    } else {
        res.end('1')
    }
})

// 注册
app.post('/api/reaister', (req, res) => {
    let data = JSON.parse(fs.readFileSync('./public/data/login.json'));
    data.push(req.body);
    fs.writeFileSync('./public/data/login.json', JSON.stringify(data));
    res.end('1')
})


// 添加请求
app.post('/api/add', (req, res) => {
    let data = JSON.parse(fs.readFileSync('./public/data/data.json'));

    data.list.push(req.body);
    fs.writeFileSync('./public/data/data.json', JSON.stringify(data));
    res.end('1');
});

//渲染数据
app.post('/api/data', (req, res) => {
    let data = JSON.parse(fs.readFileSync('./public/data/data.json'));
    res.send(data)
});



//编辑数据
app.post('/api/requestData', (req, res) => {
    let data = JSON.parse(fs.readFileSync('./public/data/data.json'));
    let backData = data.list.filter(item => item.id === req.body.id);
    res.send(backData);
});

// 修改数据
app.post('/api/modification', (req, res) => {
    let newdata = JSON.parse(fs.readFileSync('./public/data/data.json'));
    let { name, id, phone, cadd, data, email } = req.body;
    newdata.list.forEach(item => {
        if (item.id === id) {
            item.name = name;
            item.phone = phone;
            item.cadd = cadd;
        }
    });
    fs.writeFileSync('./public/data/data.json', JSON.stringify(newdata));
    res.end('1');
});

//删除数据
app.post('/api/del', (req, res) => {
    let data = JSON.parse(fs.readFileSync('./public/data/data.json'));
    let newData = {
        list: data.list.filter(item => item.id != req.body.id),
    }
    fs.writeFileSync('./public/data/data.json', JSON.stringify(newData));
    res.end('1')
});


//搜索数据

app.post('/api/search', (req, res) => {
    let data = JSON.parse(fs.readFileSync('./public/data/data.json'));
    let { cold } = req.body;
    // console.log(cold)
    let newData = {
        list: data.list.filter(item => {
            return item.name.indexOf(cold) != -1 || item.id.indexOf(cold) != -1 || item.phone.indexOf(cold) != -1 || item.cadd.indexOf(cold) != -1;
        }),
    }
    fs.writeFileSync('./public/data/list.json', JSON.stringify(newData));
    res.send({
        newData,
    })
})

//渲染搜索数据

app.post('/api/seachdata', (req, res) => {
    let data = JSON.parse(fs.readFileSync('./public/data/list.json'));
    res.send(data)
});


// 数据代码

const fs = require('fs');
const Mock = require('mockjs');


let data = Mock.mock({
    'list|10': [{
        'name': '@cname',
        'id': '@id',
        'phone': /^1[385][1-9]\d{8}/,
        'cadd': '@province' + '@city' + '@county',
    }],
    'data|10': [{
        'user': '@cname',
        'pwd|': '@first(4-8)'
    }]
})
fs.writeFileSync('../data/data.json', JSON.stringify(data));
fs.writeFileSync('../data/login.json', JSON.stringify(data.data));


// 登录注册页面
const user = document.querySelector('.user'),
    pwd = document.querySelector('.pwd'),
    login = document.querySelector('.login'),
    register = document.querySelector('.register');


document.body.addEventListener('click', e => {
    let tar = e.target;

    switch (tar.className || tar.id || tar.nodeName) {
        //登录
        case 'login':
            axios.post('/api/login', {
                user: user.value,
                pwd: pwd.value,
            }).then(result => {
                if (result.data) {
                    location.href = '../html/index.html';
                } else {
                    user.value = '';
                    pwd.value = '';
                    alert('账号密码错误')
                }
            })
            break;
        case 'register':
            if (user.value == '' && pwd.value == '') {
                alert('账号密码不能为空')
                return;
            }
            axios.post('/api/reaister', {
                user: user.value,
                pwd: pwd.value,
            }).then(result => {
                alert('注册成功');
                user.value = '';
                pwd.value = ''
            })
            break;
    }
})


// 增删改查
// 获取元素
const tbody = document.querySelector('tbody'),
    warp = document.querySelector('.warp');
const searchData = document.querySelector('.search-data')
    //公共渲染
function Reander(newData) {
    if (newData != undefined) {
        axios.post('/api/seachdata').then(result => {
            let data = result.data;
            tbody.innerHTML = data.list.map(item => {
                return ` <tr>
                        <td>${item.name}</td>
                        <td>${item.id}</td>
                        <td>${item.phone}</td>
                        <td>${item.cadd}</td>
                        <td><button class='del' id=${item.id}>删除</button><button id=${item.id} class='compile'>编辑</button></td>
                    </tr>`
            }).join('');
        })
    } else {
        axios.post('/api/data').then(result => {
            let data = result.data;
            tbody.innerHTML = data.list.map(item => {
                return ` <tr>
                        <td>${item.name}</td>
                        <td>${item.id}</td>
                        <td>${item.phone}</td>
                        <td>${item.cadd}</td>
                        <td><button class='del' id=${item.id}>删除</button><button id=${item.id} class='compile'>编辑</button></td>
                    </tr>`
            }).join('');
        })
    }

}
Reander();

//公共添加和编辑
function Add(data) {
    if (!document.querySelector('.mark')) {
        const mark = document.createElement('div');
        mark.className = 'mark';
        if (data) {
            mark.innerHTML = ` <div class="mark-add">
                                <p><span>姓名</span><input type="text" placeholder="请输入姓名" value=${data[0].name}><span>工号</span><input type="text" placeholder="请输入工号"  value=${data[0].id}></p>
                                <p><span>手机号</span><input type="text" placeholder="请输入手机号"  value=${data[0].phone}><span>产品名称</span><input type="text" placeholder="请输入产品名称"  value=${data[0].cadd}></p>
                               
                                <div><button id='Dataconfirm'>确定</button><button class="cancel">取消</button></div>
                            </div>`;

        } else {
            mark.innerHTML = ` <div class="mark-add">
                                    <p><span>姓名</span><input type="text" placeholder="请输入姓名" ><span>工号</span><input type="text" placeholder="请输入工号"></p>
                                    <p><span>手机号</span><input type="text" placeholder="请输入手机号"><span>产品名称</span><input type="text" placeholder="请输入产品名称"></p>
                                  
                                    <div><button class="confirm">确定</button><button class="cancel">取消</button></div>
                                </div>`;
        }
        warp.appendChild(mark);
    }
}

// 公共删除遮罩层
function Removemark() {
    document.querySelector('.mark').remove();
}



document.body.addEventListener('click', e => {
    let tar = e.target;
    switch (tar.className || tar.id) {
        // 添加按钮
        case 'add':
            Add()
            break;

            // 添加里面的确定按钮
        case 'confirm':
            const inputs = [...document.querySelectorAll('.mark input')];
            axios.post('/api/add', {
                    name: inputs[0].value,
                    id: inputs[1].value,
                    phone: inputs[2].value,
                    cadd: inputs[3].value,

                })
                .then(result => {
                    if (result.data) {
                        Reander();
                        Removemark();
                    }
                })
            break;

            // 添加里面的取消按钮
        case 'cancel':
            Removemark()
            break;

            // 编辑按钮
        case 'compile':
            axios.post('/api/requestData', {
                id: tar.getAttribute('id'),
            }).then(result => {
                let newData = result.data;
                Add(newData)
            })
            break;
            // 编辑确定按钮
        case 'Dataconfirm':
            const input = [...document.querySelectorAll('.mark input')];
            axios.post('/api/modification', {
                name: input[0].value,
                id: input[1].value,
                phone: input[2].value,
                cadd: input[3].value,

            }).then(result => {
                if (result.data) {
                    Reander();
                    Removemark();
                }
            })
            break;
            //    删除
        case 'del':
            axios.post('/api/del', {
                id: tar.getAttribute('id'),
            }).then(result => {
                if (result.data) {
                    tar.parentNode.parentNode.remove();
                    Reander()
                }
            })
            break;

            //搜索
        case 'search':

            axios.post('/api/search', {
                cold: searchData.value,
            }).then(result => {
                Reander(result.data)
            })
            break;
            //重置按钮
        case 'reset':
            searchData.value = '';
            Reander();
            break;
    }
})