nodejs使用文件操作进行crud

最新推荐文章于 2024-09-15 14:09:55 发布

玲儿响叮当xl

最新推荐文章于 2024-09-15 14:09:55 发布

阅读量364

点赞数

分类专栏： node.js 文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/liang_an_xl/article/details/106754003

版权

node.js 专栏收录该内容

1 篇文章

订阅专栏

案例简介

使用node结合express框架和art-template模板引擎做一个简单的增删查改案例。

第一步：渲染显示页面

index.html
这个页面是首页，主要用来显示所有人员的信息。
使用bootstrap，写一个简单的表格页面：

 <h2 class="sub-header">Section title</h2>
          <a href="/students/new" class="btn btn-success">添加学生</a>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>性别</th>
                  <th>爱好</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                {{each students}}
                <tr>
                  <td>{{$value.id}}</td>
                  <td>{{$value.name}}</td>
                  <td>{{$value.age}}</td>
                  <td>{{$value.gender}}</td>
                  <td>{{$value.hobbies}}</td>
                  <td>
                    <a href="/students/update?id={{$value.id}}">编辑</a>
                    <a href="/students/delete?id={{$value.id}}">删除</a>
                  </td>
                </tr>
                {{/each}}
                
              </tbody>
            </table>
          </div>

页面如下所示：
/student

update.html
此为编辑页面，可以根据id显示出人员原信息，并对修改后的信息进行提交保存。

<h2 class="sub-header">修改学生</h2>
          <form action="/students/update" method="post">
            <input type="hidden" value="{{student.id}}" name="id">
            <div class="form-group">

              <label for="">姓名</label>
              <input type="text" class="form-control" id="" name="name" value="{{student.name}}">
            </div>
            <div class="form-group">
              <label for="">年龄</label>
              <input type="number" class="form-control" id="" name="age" value="{{student.age}}">
            </div>
            <div class="form-group">
                <label for="">性别</label><br>
                <label class="radio-inline">
                    <input type="radio" name="gender" id="inlineRadio1" value="0" > 男
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="gender" id="inlineRadio2" value="1" > 女
                  </label>
                  
              
             
            </div>
            <div class="form-group">
                <label for="">爱好</label>
                <input type="text" class="form-control" id="" name="hobbies" value="{{student.hobbies}}">
              </div>
           
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
        </div>
      </div>
    </div>

    <script>
        //原来这样写其实是没有什么问题的
        var gender={{student.gender}}
        // check(gender)
        var check=function(){
            console.log(gender)
            var xb=document.getElementsByName("gender")
            if(gender===0){
                xb[0].checked='checked'
            }
            else if(gender===1){
                xb[1].checked='checked'
            }

       
        }
        check()

显示效果如下：
在这里插入图片描述

new.html
此为新增人员页面，用来添加学生，与update.html十分相似

 <h2 class="sub-header">添加学生</h2>
          <form action="/students/new" method="post">
            <div class="form-group">
              <label for="">姓名</label>
              <input type="text" class="form-control" id="" name="name">
            </div>
            <div class="form-group">
              <label for="">年龄</label>
              <input type="number" class="form-control" id="" name="age">
            </div>
            <div class="form-group">
                <label for="">性别</label><br>
                <label class="radio-inline">
                    <input type="radio" name="gender" id="inlineRadio1" value="0"> 男
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="gender" id="inlineRadio2" value="1"> 女
                  </label>
                  
              
             
            </div>
            <div class="form-group">
                <label for="">爱好</label>
                <input type="text" class="form-control" id="" name="hobbies">
              </div>
           
            <button type="submit" class="btn btn-default">Submit</button>
          </form>

显示效果：
在这里插入图片描述

第二步：设计人员信息文件并使用模板引擎渲染页面

db.json:为人员信息文件
如下：

{
    "students": [{
        "id": 3,
        "name": "张三",
        "age": 18,
        "gender": "0",
        "hobbies": "eat,drink,play,sleep"
    }, {
        "id": 4,
        "name": "张三",
        "age": 18,
        "gender": "0",
        "hobbies": "eat,drink,play,sleep"
    }, {
        "name": "王二",
        "age": "12",
        "gender": "0",
        "hobbies": "游泳",
        "id": 5
    }, {
        "name": "李四",
        "age": "34",
        "gender": "0",
        "hobbies": "睡觉",
        "id": 6
    }, {
        "name": "刘思",
        "age": "28",
        "gender": "1",
        "hobbies": "23233",
        "id": 8
    }, {
        "name": "阿娜",
        "age": "23",
        "gender": "0",
        "hobbies": "学习",
        "id": 10
    }]
}

使用art-template模板引擎渲染index.html:
在这里插入图片描述

第三步：路由设计

作用	路径	方法
显示所有人员信息	/students	get
渲染增加人员页面	/students/new	get
新增人员信息	/students/new	post
渲染修改人员页面	/students/update	get
修改人员信息	/students/update	post
删除人员信息	/students/delete	get

将所有的路由都提取出来写到router.js中：
在这里插入图片描述

第四步：crud

将所有与crud的操作都封装起来，写到student.js中。
由于API的异步性，需要使用到回调函数，上层实现，下层调用。

在首页（/students）将所有的人员信息显示出来——封装方法find()

exports.find=function(callback){
    fs.readFile(dbPath,'utf8',function(error,data){
        if(error){
            return callback(error)
        }
        else{
            callback(null,JSON.parse(data).students)
        }
    })
}

在router.js中调用方法find()，并定义回调函数：

router.get('/students',function(req,res){
    
    Student.find(function(err,students){
        if(err){
            return res.status(500).send('Server error.')
        }
        res.render('index.html',{
            students:students
        })
    })
   
})

2.新增人员信息并保存
首先在index.html中增加一个添加学生按钮

<a href="/students/new" class="btn btn-success">添加学生</a>

渲染新增人员页面：

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

    res.render('new.html')
})

提交新增人员的信息，首先封装方法save():

exports.save=function(student,callback){
    fs.readFile(dbPath,'utf8',function(error,data){
        if(error){
            return callback(error)
        }
        else{
        //将字符串转为对象
            var students=JSON.parse(data).students
           
            student.id=students[students.length-1].id+1
            //console.log(student.id)
            students.push(student)
            //将对象转为字符串
            var result=JSON.stringify({
                students:students
            })
            fs.writeFile(dbPath,result,function(err){
                if(err){
                    return callback(err)
                }
                callback(null)
            })
        }
    })
}

router.js:

router.post('/students/new',function(req,res){
    var student=req.body
    Student.save(student,function(err){
        if(err){
            return res.status(500).send('Server error.')
        }
        else{
            res.redirect('/students')
        }
    })

})

修改人员信息
首先在index.html中添加一个编辑按钮：

<a href="/students/update?id={{$value.id}}">编辑</a>

其次，渲染修改页面，这里要根据id显示出人员的原信息，可以封装一个方法findById():

exports.findById=function(id,callback){
    fs.readFile(dbPath,'utf8',function(error,data){
        if(error){
            return callback(error)
        }
        else{
            var students=JSON.parse(data).students
            var result=students.find(function(item){
                return item.id===parseInt(id)
            })
            callback(null,result)
        }
    })
}

然后使用findById()得到的人员信息来渲染页面：

router.get('/students/update',function(req,res){
    Student.findById(req.query.id,function(err,student){
        if(err){
            return res.status(500).send('Server error.')
        }
        else{
            //console.log(student.gender)
            res.render('update.html',{
                student:student
            })
        
        }
        //console.log(req.query.id)
    })
    
})

然后，需要将用户修改后的信息替换原信息并保存起来——封装方法update():

exports.update=function(student,callback){
    fs.readFile(dbPath,'utf8',function(error,data){
        if(error){
            return callback(error)
        }
        else{
            var students=JSON.parse(data).students
            student.id=parseInt(student.id)
            var stu=students.find(function(item){
                return item.id===parseInt(student.id)
            })

            for(var key in student){
                stu[key]=student[key]
            }
            var result=JSON.stringify({
                students:students
            })
            fs.writeFile(dbPath,result,function(err){
                if(err){
                    return callback(err)
                }
                callback(null)
            })

            
        }
    })
}

router.js:

router.post('/students/update',function(req,res){
    var student=req.body
    Student.update(student,function(err){
        if(err){
            return res.status(500).send('Server error.')
        }
        else{
            res.redirect('/students')
        }
    })
})

删除人员信息
首先，在index.html中添加一个删除按钮：

<a href="/students/delete?id={{$value.id}}">删除</a>

根据用户提交的id来删除相应的人员信息，先封装方法delete():

exports.delete=function(id,callback){
    fs.readFile(dbPath,'utf8',function(error,data){
        if(error){
            return callback(error)
        }
        else{
            var students=JSON.parse(data).students
            var deleteid=students.findIndex(function(item){
                return item.id===parseInt(id)
            })
            students.splice(deleteid,1)

            var result=JSON.stringify({
                students:students
            })
            fs.writeFile(dbPath,result,function(err){
                if(err){
                    return callback(err)
                }
                callback(null)
            })

        }
    })
}

router.js:

router.get('/students/delete',function(req,res){
    Student.delete(req.query.id,function(err){
        if(err){
            return res.status(500).send('Server error.')
        }
        else{
            res.redirect('/students')
        }
    })
    
})

代码：前往下载.