express 增删改查学习笔记

时间  2020-07-21
标签 express 增删 学习 笔记 繁體版
原文   原文链接 
# express crud demo

###  备注：数据的存储存在文件中

1.安装express

npm install -S expressjavascript

2.写入helloWord

const express=require('express')
const app=express();
app.get('/',function(req,res){html

res.send('hello word')

})
app.listen(3000,function(){java

console.log('server is running list:http://localhost:3000');

})git

3. 在项目的根目录下建立views目录，并引入art-template模板

   [art-template模板官网](**http://aui.github.io/art-template/express/**)

   * 在app.js中加入模板配置,而后使用art-template模板
app.engine('html', require('express-art-template'));
 ```
    • 在views目录中建立index.html模板

    1. 从文件中读取数据（获取列表R）github

      • 建立db.json文件
      • app.js获取文件并读取
      • 模板渲染

      • 关键代码以下express

        //app.js
app.get('/',function(req,res){
    fs.readFile('./db.json',(err,data)=>{
        if(err){
            return res.status(500).send('server error')
        }
        res.render('index.html',{
           students:JSON.parse(data.toString()).students
        })
    })
})
        //index.html
    <ul>
       {{each students}}
       <li>
           <div>{{$value.id}}</div>
           <div>{{$value.name}}</div>
           <div>{{$value.age}}</div>
           <div>{{$value.gender}}</div>
           <div>{{$value.hobbies}}</div>
       </li>
       {{/each}}
   </ul>
        //db.josn
{
    "students":[
        {
            "id":1,
            "name":"张三",
            "age":"12",
            "hobbies":"吃饭睡觉打豆豆",
            "gender":0
        },{
            "id":2,
            "name":"张三",
            "age":"12",
            "hobbies":"吃饭睡觉打豆豆",
            "gender":0
        },{
            "id":3,
            "name":"张三",
            "age":"12",
            "hobbies":"吃饭睡觉打豆豆",
            "gender":0
        },{
            "id":4,
            "name":"张三",
            "age":"12",
            "hobbies":"吃饭睡觉打豆豆",
            "gender":0
        },{
            "id":5,
            "name":"张三",
            "age":"12",
            "hobbies":"吃饭睡觉打豆豆",
            "gender":0
        },{
            "id":6,
            "name":"张三",
            "age":"12",
            "hobbies":"吃饭睡觉打豆豆",
            "gender":0
        },{
            "id":1,
            "name":"张三",
            "age":"12",
            "hobbies":"吃饭睡觉打豆豆",
            "gender":0
        }
    ]
}
    2. 路由抽离
    • 项目中建立routes文件夹
    • 在routes文件夹中新建index.js用于存放路由

    • index.js文件内容以下npm

      const express=require('express')
const router=express.Router();
router.get('/',funciton(req,res,next){
           
           })

    • app.js关键代码以下json

      const router=require('./routes/index');
app.use(router)
    • 中间件至关于请求拦截，有顺序，放在最前面的会先执行，而后会执行后面的。
    app.use(funciont(req,res,next){
        console.log(0)
        next()//这里的next方法必需要执行，不然程序会挂起
        })

    6.新增数据（A）api

    • 在views目录中建立add.html；其html主要代码以下
    <form action="/addmsg" method="POST">
        <div>
            姓名：<input type="text" name="name">
        </div>
        <div>
            年龄：<input type="text" name="age">
        </div>
        <div>
            爱好：<input type="text" name="hobbies">
        </div>
        <div>
            性别:<input type="radio" name="gender" value="0">
            <input type="radio" name="gender" value="1">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    • 在routes/index文件中新增以下代码
    // 渲染add页面
router.get('/addnews',function(req,res){
    res.render('add.html')
})
// post添加数据
router.post('/addmsg',function(req,res){
fs.readFile(path.resolve(__dirname,'../db.json'),function(err,data){
    if(err){
        console.log(err);
      return  res.status(500).send('读取数据失败')
    }
    let resdata=JSON.parse(data.toString())
    req.body.id=new Date().getTime();
    resdata.students.unshift(req.body)
    fs.writeFile(path.resolve(__dirname,'../db.json'),JSON.stringify(resdata),(err)=>{
        if(err){
            res.status(500).send('写入文件失败')
        }
        res.redirect('/')
    })
})
})
    1. 设计操做db.json的api用于增删改查数据
    • 在项目中建立utils文件夹，在该文件夹中新增students.js

    • students.js文件关键代码以下app

      const fs = require('fs')
const path = require('path')
const readUrl = path.resolve(__dirname, '../db.json')

function find(callback) {
    if (!callback || typeof callback !== 'function') {
        throw new Error('need callback function')

    }
    fs.readFile(readUrl, function (err, data) {
        if (err) {
            return callback(err)
        }
        const str = data.toString()
        callback(null, JSON.parse(str).students)
    })
}
/* 查询全部数据 */
exports.find = find
/*删除数据  */
exports.delete = function (id, callback) {
    find(function (err, students) {
        if (err) {
            return callback && callback(err)
        }
        for (let key in students) {
            const item = students[key]
            if (item.id == id) {
                delete students[key]
                break;
            }
        }
        fs.writeFile(readUrl, function (error, data) {
            if (error) {
                return callback && callback(error) || '删除失败'
            }
            callback && callback('删除成功')
        })
    })
}
/* 更新数据 */
exports.update = function (updateData, callback) {
    find((err, students) => {
        for (let key in students) {
            const item = students[key]
            if (updateData.id == item.id) {
                students[key] = {
                    ...students[key],
                    ...updateData
                }
            }
        }
        fs.writeFile(readUrl, JSON.stringify({
            students: students
        }), function (err) {
            if (err) {
                return callback && callback(err) || '更新失败'
            }
            callback && callback(err) || '更新成功'
        })
    })
}
// 新增
exports.add = function (addData, callback) {
    find((err, students) => {
        students.unshift(addData)
        fs.writeFile(readUrl, JSON.stringify({
            students: students
        }), function (err) {
          if (err) {
                return callback && callback(err) || '新增失败'
          }
            callback && callback(err) || '新增成功'
        })
    })
}
// 根据id获取具体的某一条数据 
exports.getDataByid = function (id, callback) {
    find(function (err, students) {
        let curData = null;
        for (let key in students) {
            if (students[key].id == id) {
                curData = students[key]
                break;
            }
        }
        callback(curData)
    })
}
// 删除
exports.delete=function(id,callback){
    find(function(err,students){
        for (let key in students) {
            if (students[key].id == id) {
               students.splice(key,1)
                break;
            }
        }
        console.log(students);
        fs.writeFile(readUrl,JSON.stringify({students:students}),function(err){
                if(err){
                    return callback(err)
                }
                callback('删除成功')
        })
    })
}

      8.优化路由文件,核心代码以下

      const studentsUtil=require('../utils/students')

// 渲染列表
router.get('/', function (req, res, next) {
    studentsUtil.find(function(err,students){
        res.render('index.html', {
            students: students
        })
    })
})
// 渲染add页面
router.get('/addnews', function (req, res) {
    res.render('add.html')
})
// post添加数据
router.post('/addmsg', function (req, res) {
    const data=req.body;
    data.id=new Date().getTime()
    studentsUtil.add(data)
    res.redirect('/')
})

    9.编辑数据（U）

    • 在views文件夹中新增edit.html
    <form action="/editMsg" method="POST">
        <input type="hidden" name="id" value="{{id}}">
        <div>
            姓名：<input type="text" name="name" value="{{name}}">
        </div>
        <div>
            年龄：<input type="text" name="age" value="{{age}}">
        </div>
        <div>
            爱好：<input type="text" name="hobbies" value="{{hobbies}}">
        </div>
        <div>
            性别:<input type="radio" name="gender" value="0"  >
            <input type="radio" name="gender" value="1">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    • 在路由文件中新增以下代码(routes/index.js)

      // 渲染编辑页面
router.get('/editPage',function(req,res){
    studentsUtil.getDataByid(req.query.id,function(students){
        // console.log(students);
        res.render('edit.html',{
        ...students
        })
    })
})
// 提交编辑页面
router.post('/editMsg',function(req,res){
    const data=req.body;
    studentsUtil.update(data,function(){
        res.redirect('/')
    })

})

    10.删除数据（D）

    • 在views/index.html中新增删除按钮

      <ul>
        {{each students}}
        <li>
            <div>{{$value.id}}</div>
            <div>{{$value.name}}</div>
            <div>{{$value.age}}</div>
            <div>{{$value.gender}}</div>
            <div>{{$value.hobbies}}</div>
            <a href="/editPage?id={{$value.id}}">编辑</a>
            <a href="/deletedata?id={{$value.id}}">删除</a>
        </li>
        {{/each}}
    </ul>

      • routes/index.js核心代码以下

        // 删除数据
router.get('/deletedata',function(req,res){
    studentsUtil.delete(req.query.id,function(err){
        res.redirect('/')
    })
})
    相关文章
    相关标签/搜索
    每日一句
      每一个你不满意的现在，都有一个你没有努力的曾经。
    本站公众号
       欢迎关注本站公众号,获取更多信息
    联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程