webpack-fristDay-CSDN博客

本文链接：https://blog.csdn.net/qq_41219789/article/details/100654712

本文深入浅出地介绍了Node.js的基础知识，包括文件系统操作、异步与同步读写，以及通过实例演示如何实现本地JSON数据的增删改查。同时，文章还覆盖了Webpack的安装与配置过程，引导读者从零开始搭建项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

firstDay（2019/7/25）

wabpack学习

一、node.js学习

了解node.js是什么。

Node.js 就是运行在服务端的 JavaScript；可以让js可以开发后端程序，实现几乎后端语言实现的所有功能。

node.js第一个项目

vscode中新建一个hello.js文件,并输入一行命令，执行结果如下。

在这里插入图片描述
3. 学习node.js文件系统语法

node导入文件系统模块(fs)语法如下

var fs = require(“fs”)

异步(fs.readFile())和同步(fs.readFileSync())

创建file.js文件，代码如下：

var fs = require("fs");

// 异步读取
fs.readFile('input.txt', function (err, data) {
   if (err) {
       return console.error(err);
   }
   console.log("异步读取: " + data.toString());
});
// 同步读取
var data = fs.readFileSync('input.txt');
console.log("同步读取: " + data.toString());

console.log("程序执行完毕。");

运行如下

异步打开文件

console.log("准备打开文件！");
fs.open('input.txt', 'r+', function(err, fd) {
   if (err) {
       return console.error(err);
   }
  console.log("文件打开成功！");     
});

运行如下：

写入文件

语法格式 fs.writeFile(file, data[, options], callback)

读取文件

语法 fs.read(fd, buffer, offset, length, position, callback)

课堂小作业(实现本地json数据的增删改查)

①实现读取查询json文件（该文件中有13条数据，操作后只显示6条数据）数据，代码中p为页数,第一页，第二页… ,s为每页多少条数据。代码与运行结果如下：

function pagination(p,s){ 
    fs.readFile('./content.json',function(err,data){
        if(err){
            console.log(err)
        }
        var person = data.toString();
        person = JSON.parse(person);
        //把数据读出来
        var length = person.data.length;
        var pagePerson = person.data.splice(s*p,(p+1)*s);
        console.log("查询第"+p+"页,"+"每页"+s+"数据")
        console.log("-------------------查询成功-------------")
        console.log(pagePerson);
    })
}
pagination(0,6);//查询第一页，每页的数据条数为6条

在这里插入图片描述

②添加一个对象，代码与运行结果如下：

function wirteJson(){
    //将json文件读出来
    fs.readFile('./person.json',function(err,data){
        if(err){
           return console.log(err)
        }
        var person = data.toString();//将二进制的数据转换为字符串
        person = JSON.parse(person);//将字符串转化为json对象
        person.data.push(params);//将传进来的对象push进数组对象中
        person.total = person.data.length; //定义一下总条数，为以后的分页打基础
        console.log(person.data)
        var str = JSON.stringify(person);
        fs.writeFile('./person.json',str,function(){
            if(err){
                return console.log(err)
            }
            console.log('----------添加成功-------------')
        })
    })
}

在这里插入图片描述

③修改json对象数据，代码与结果如下：

function updateJson(id,params){
    fs.readFile('./person.json',function(err,data){
        if(err){
            console.log(err)
        }
        var person = data.toString();
        person = JSON.parse(person);
        //把数据读出来
        for(var i = 0;i<person.data.length;i++){
            if(id == person.data[i].id){
                console.log("找到要修改的id"+id);
                for(var key in params){
                    if(person.data[i][key]){
                        person.data[i][key] =params[key]; //把修改内容更新到json数据中
                    }
                }
            }
        }
        person.total = person.data.length;
        var str = JSON.stringify(person);
        fs.writeFile('./person.json',str,function(){
            if(err){
                console.log(err)
            }
            console.log("--------------修改成功---------------")
            console.log(person.data)
        })
    })
}

在这里插入图片描述

④删除jason数据中的其中一个对象。

function deleteJson(id){
    fs.readFile('./person.json',function(err,data){
        if(err){
            return console.log(err)
        }
        var person = data.toString();
        person = JSON.parse(person);
        //把数据读出来删掉
        for(var i = 0;i<person.data.length;i++){
            if(id == person.data[i].id){
                console.log("要删掉的id为："+id)                
                person.data.splice(i,1);
            }
        }
        console.log(person.data);
        person.total = person.data.length;
        var str = JSON.stringify(person);
        //再把数据写进去
        fs.writeFile('./person.json',str,function(err){
            if(err){
                console.log(err)
            }
            console.log("删除成功")
        })
    })
}

在这里插入图片描述