node项目---编辑修改学生信息页面

最新推荐文章于 2024-09-19 15:22:18 发布

七彩猫猫虫

最新推荐文章于 2024-09-19 15:22:18 发布

阅读量431

点赞数

分类专栏：自己动手丰衣足食文章标签： node.js bootstrap

本文链接：https://blog.csdn.net/SDAW_1/article/details/111941622

版权

本文档介绍了一个使用Node.js和Bootstrap框架实现的学生信息编辑和删除功能。通过配置路由和模板引擎，实现了对静态页面的展示。在`student.js`中封装了数据操作函数，如查询、更新、删除等，并通过`exports`导出供`router.js`调用，以保持代码组织的清晰。

摘要由CSDN通过智能技术生成

一、整体思路

主要使用bootstrap框架搭建页面样式
处理模板
配置开放静态资源
配置模板引擎
简单路由，/students渲染静态页面出来
路由设计
提取路由模块
由于一系列业务操作都需要处理文件数据，为了防止代码堆积在router.js文件中，所以需要封装文件student.js
先写好student.js文件结构：
查询所有学生列的API find
findByid
save
updateById
deleteById
实现具体功能
通过路由收到请求
接收请求中的数据（get,post）
req.query
req.body
调用数据操作API处理数据
根据操作结果给客户端发送响应

二、展示图

在这里插入图片描述

功能：点击编辑后可以对学生信息进行编辑，点击删除后可以删除学生数据

在这里插入图片描述

三、主要文件：router.js，student.js

router.js文件：路由配置

var express=require('express')
var fs=require('fs')

var Student= require('./student')
var router=express.Router()


router.get('/students',function(req,res){
   
    // fs.readFile('./db.json','utf8',function(err,data){
   
    //     if(err){
   
    //      console.log('文件读取失败')
    //     }
    //     //因为需要data数据，所以要放在fs.readfile中
    //     res.render('index.html',{
   
    //      fruits:[
    //          '苹果',
    //          '香蕉',
    //          '西瓜'
    //      ],
    //      //data是字符串，须要进行一定的转换，转成对象
    //      students:JSON.parse(data).students
    //  })
    //  })

    Student.find(function(err,students){
   
        if(err){
   
            console.log('文件读取失败')
           }
           res.render('index.html',{
   
            fruits:[
                '苹果',
                '香蕉',
                '西瓜'
            ],
            students:students
        })
    })
})

router.get('/students/new',function(req,res){
   
    res.render('new.html',{
   })
})

router.post('/students/new',function(req,res){
   
    Student.save(req.body,function (err) {
   
        if (err) {