Node.js 学习笔记11|express（五）增删改功能实现

本节实现用户增删改的功能

01 增加新用户

//STUDENT_ARR为用户信息对象 使用render将信息传入HTML模板
app.get("/students", (req,res) => {
    res.render("students", { stus:STUDENT_ARR})
})

app.post("/add-student", (req,res) => {
    //生成id
    const id = STUDENT_ARR.at(-1).id + 1

    //1.获取用户填写的信息
    const newUser ={
        id,
        name:req.body.name,
        age:+req.body.age,//前端传给服务器的都是字符串 将其转换为数字
        gender:req.body.gender
    }
    //2.验证用户信息
    //3.将用户信息添加到数组中 方法1 直接修改数组
    STUDENT_ARR.push(newUser)
   
    //方法2 将新的数据写入到json文件中
    fs.writeFile(path.resolve(__dirname,"./data/students.json"),
    JSON.stringify(STUDENT_ARR))//把对象转换为字符串
        .then(() => {
            //重定向 告诉浏览器向另外一个地址再发送一次请求
            res.redirect("/students")
        }).catch(()=>{})

}

02 删除用户

删除操作希望可以实现：点击删除链接后，删除当前数据 --> 点击某用户后的删除链接可以删除对应id的链接。

流程

        1.点击删除链接

        2.向路由发送请求（写一个路由）

        3.路由怎么写？

                获取学生id n --> 删除id为n的学生 --> 将新的数组写入文件 --> （更新id）--> 重定向到学生列表页面

app.get("/delete", (req,res) => {
    //获取要删除的学生id
    const id = +req.query.id //字符串
    //根据id删除
    STUDENT_ARR = STUDENT_ARR.filter(
        (stu) => stu.id !==id    )
    //更新id
    for(let i = id; i <= STUDENT_ARR.length; i++){
        const studUserD = STUDENT_ARR.find(item => item.id == i+1)
        studUserD.id = i
    }
    //将新的数组写入到文件中
    fs.writeFile(path.resolve(__dirname,"./data/students.json"),
    JSON.stringify(STUDENT_ARR))//把对象转换为字符串
        .then(() => {
            //重定向 告诉浏览器向另外一个地址再发送一次请求
            res.redirect("/students")
        }).catch(()=>{})
    // console.log(id);
})

03 修改

点击修改链接后，显示一个表单，表单中应该有要修改学生的信息。用户对学生信息进行修改，修改以后点击按钮提交表单。

流程：

        1.点击某用户的修改链接

        2.跳转到一个路由，这个路由会返回一个页面，页面中有一个表单，表单中应该显示该用户的各种信息。

        3.用户填写表单，点击按钮提交到一个新的路由，获取学生信息，并对信息进行修改

//点击修改链接后 使用get路由获取用户信息并将信息传入模板页面中
app.get("/to-update", (req,res) => {
    //获取点击修改链接后的学生的信息
    const id = +req.query.id
    const student = STUDENT_ARR.find(item => item.id === id)
    res.render("update",{stu:student}) //将信息传入update.ejs模板中
})

app.post("/update-user", (req,res) => {
    //获取id
    //方式1 查询字符串 update-user?id=<%=stu.id%>
    //方式2 <input type="hidden" name="id" value="<%=stu.id%>">
    //hidden是一个隐藏的表单项，可以通过它传递一些不希望被用户看见的数据
    //在修改页面获取修改后的用户信息
    const {id,name,age,gender} = req.body
    
    const studUser = STUDENT_ARR.find(item => item.id == id)
    studUser.name = name
    studUser.age = +age
    studUser.gender = gender

    fs.writeFile(path.resolve(__dirname,"./data/students.json"),
    JSON.stringify(STUDENT_ARR))//把对象转换为字符串
        .then(() => {
            //重定向 告诉浏览器向另外一个地址再发送一次请求
            res.redirect("/students")
        }).catch(()=>{})
   
})

其中涉及一个被遗忘的js知识：

    const studUser = STUDENT_ARR.find(item => item.id == id)
    studUser.name = name
    studUser.age = +age
    studUser.gender = gender

在该代码段中，修改对象时，所有指向该对象的变量都会受到影响。而修改变量只会影响当前的变量。而const只是禁止变量被重新赋值，对对象内的修改没有影响。因此以上代码段执行后STUDENT_ARR对象进行了信息的更新