nodejs

一、fs模块

1.fs模块的导入

const fs = require('fs');

2.异步读取文件

const fs = require('fs');
fs.readFile('./1.txt', function(error, data) {
   console.log(error); // 读取成功显示null，读取失败显示失败原因
   console.log(data.toString()); // 读取成功，data.toString()可以显示字符，读取失败显示undefined
})

2.1优化异步读取文件

const fs = require('fs');
fs.readFile('./1.txt', function(err, data) {
    if (err) return console.log('文件错误'); // if执行语句只包含一条时，{}可省略
    console.log(data.toString());
})

3.同步读取文件

const fs = require('fs');
// 因为成功返回的是一个值，所以要定义一个变量来存储
const data = fs.readFileSync('./1.txt', 'utf8');
console.log(data);

3.1 try catch捕获错误

const fs = require('fs');

try {
    // 正常执行try里的代码，一旦报错则跳到catch里执行catch里的代码
    console.log(1);
    const data = fs.readFileSync('./11.txt');
    console.log(data);
} catch (error) {
    console.log('错误');
}
// 输出 1 和 '错误'

4.异步写入文件

const fs = require('fs');
// 写入的内容会覆盖之前文本的内容，文件名不存在会新建文件，实在新建不了文件(路径上的盘符不存在)才会报错
fs.writeFile('./1.txt', 'asoul', err => {
    if (err) return console.log('错误');
    console.log('成功');
})

4.1异步写入复杂数据

const fs = require('fs');
const arr = [{ id: 1 }, { id: 2 }]
// 传入数据只能是字符串格式，如果要写入复杂数据类型，要进行数据处理
fs.writeFile('./data.js', `arr=${JSON.stringify(arr)}`, err => {
    if (err) return console.log('错误');
    console.log('成功');
})

二、http模块

1.开启服务器

const http = require('http');

// req => request 请求
// res => reponse 响应
const server = http.createServer((req, res) => {
    console.log('接收到了客户端请求',req.url,req.method);
    // end默认只能传字符串格式，并且只能是英文字母和数字
    // 通过这行代码，可以在end传入中文和标签
    res.setHeader('Content-Type', 'text/html;charset=utf8')
    res.end('OK');
})

// 8001 => 端口
server.listen(8001, () => {
    console.log('服务器可以访问');
})

tips： req.url可以获取127.0.0.1:8001/...的...的值(包括/)，例如127.0.0.1:8001/abcd，获取的就是/abcd

req.method可以获取用户的请求方式，在浏览器输入地址请求的都是get请求方式

2.下载express包

①在要下载的目标文件夹打开cmd

②输入 npm init ，然后给项目文件起名字（注意只能英文），然后一直输入enter

③输入 npm install express 进行下载

3.通过express创建服务器

// 导入express模块
const express = require('express');
// 创建服务
const server = express();

// 通过get方式发送请求，send与end不同，send是可以自动识别所传的参数类型
server.get('/', (req, res) => {
    res.send('获取数据');
})

// 通过post方式发送请求，send与end不同，send是可以自动识别所传的参数类型
server.post('/', (req, res) => {
    res.send('新增数据')
})

// 通过delete方式发送请求，send与end不同，send是可以自动识别所传的参数类型
server.delete('/', (req, res) => {
    res.send('删除数据')
})

// 监听服务器启动
server.listen(8000, () => {
    console.log('服务器开启');
})

4.通过express进行后端传输数据模拟

const express = require('express');
const fs = require('fs')
const serve = express();
serve.use(express.urlencoded())

// 回应get请求
serve.get('/student', (req, res) => {
    // 读取文件
    fs.readFile('./data.json', (err, data) => {
        // 读取成功发送数据，同时返回业务码code:0
        res.send({
            code: 0,
            message: "查询成功",
            // JSON.parse()可以转换buffer二进制格式
            data: JSON.parse(data)
        })
    })
})

// 回应post请求
serve.post('/student', (req, res) => {
    // 先读取再写入
    fs.readFile('./data.json', (err, data) => {
        // 将读取出来的数据作为一个数组
        const arr = JSON.parse(data);
        // 将年龄转换成数字类型
        req.body.age = Number(req.body.age);
        // 添加id
        const stu = {
            id: Date.now(),
            // 对象解构
            ...req.body
        }
        arr.push(stu);
        // 传入参数为json类型格式，stringify的2表示2个空格
        fs.writeFile('./data.json', JSON.stringify(arr, null, 2), err => {
            if (err) return console.log({ code: 1, message: "未写入成功" });
        })
    })
    res.send({ code: 0, message: "添加成功" })
})

// 回应删除请求
serve.delete('/student', (req, res) => {
    // 读写文件
    fs.readFile('./data.json', (err, data) => {
        // 经典的格式转换
        const arr = JSON.parse(data);
        // 过滤掉id为前端所传入的那个id
        const newArr = arr.filter(value => value.id !== Number(req.query.id));
        // 将返回的新数组重新传入文件，覆盖之前的内容
        fs.writeFile('./data.json', JSON.stringify(newArr, null, 2), err => {
            if (err) return res.send({ code: 1, message: "写入失败", });
        })
    })
    res.send({ code: 0, message: "删除成功" })
})

// 回应修改请求
serve.put('/student', (req, res) => {
    // 经典读写文件
    fs.readFile('./data.json', (err, data) => {
        const arr = JSON.parse(data);
        // 将选定修改的数据单独拿出来
        const obj = arr.find(value => value.id === Number(req.body.id))

        // 因为对象是引用类型，不能直接用前端所传的额数据对象直接覆盖，要通过修改属性值的方式来修改
        obj.name = req.body.name;
        obj.age = Number(req.body.age);
        obj.sex = req.body.sex;
        // 如果直接用对象覆盖，这里的arr就还是原值，不会发生修改
        fs.writeFile('./data.json', JSON.stringify(arr, null, 2), err => {
            if (err) return res.send({ code: 1, message: "未写入成功" });
        })
    })
    res.send({ code: 0, message: "修改成功", })
})

serve.listen(8000, () => {
    console.log('服务器开启');
})

三、webpack

1. webpack基本概念

webpack本身是, node的一个第三方模块包, 用于打包代码

• 现代 javascript 应用程序的 静态模块打包器 (module bundler)

• 为要学的 vue-cli 开发环境做铺垫

其中功能:

• less/sass -> css

• ES6/7/8 -> ES5

• html/css/js -> 压缩合并

2. webpack的使用步骤

默认入口: ./src/index.js

默认出口: ./dist/main.js

注意:路径上, 文件夹, 文件名不能叫webpack/其他已知的模块名==

1. 初始化包环境

   npm init
   
   # 或者 yarn init
   

2. 安装依赖包

   npm install webpack webpack-cli -D
   
   # 或者 yarn add webpack webpack-cli -D
   

3. 配置scripts(自定义命令)

   scripts: {
   	"build": "webpack"
   }
   

4. 新建目录src

5. 新建src/add/add.js - 定义求和函数导出

   export const addFn = (a, b) => a + b
   

6. 新建src/index.js导入使用

   import {addFn} from './add/add'
   
   console.log(addFn(10, 20));
   

7. 运行打包命令

   npm run build
   #或者 yarn build
   

3. webpack的配置

3.1webpack-入口和出口

默认入口: ./src/index.js

默认出口: ./dist/main.js

webpack配置 - webpack.config.js(默认)

1. 新建src并列处, webpack.config.js
2. 填入配置项

const path = require("path")

module.exports = {
    entry: "./src/main.js", // 入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "bundle.js" // 出口文件名
    }
}

3. 修改package.json, 自定义打包命令 - 让webpack使用配置文件

"scripts": {
    "build": "webpack"
},

4. 打包观察效果

3.2插件-自动生成html文件

1. 下载插件

   npm install html-webpack-plugin  -D
   

2. webpack.config.js配置

   // 引入自动生成 html 的插件
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
       // ...省略其他代码
       plugins: [
           new HtmlWebpackPlugin({
               template: './public/index.html' // 以此为基准生成打包后html文件
           })
       ]
   }
   

3. 重新打包后观察dist下是否多出html并运行看效果

3.3加载器 - 处理css文件问题

1.新建 - src/css/index.css

2.编写去除li圆点样式代码

3.(重要) 一定要引入到入口才会被webpack打包

4.执行打包命令观察效果

3.4加载器 - 处理css文件

1. 安装依赖

   npm install style-loader css-loader -D
   

2. webpack.config.js 配置

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
       // ...其他代码
       module: { 
           rules: [ // loader的规则
             {
               test: /\.css$/, // 匹配所有的css文件
               // use数组里从右向左运行
               // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
               // 再用 style-loader 将样式, 把css插入到dom中
               use: [ "style-loader", "css-loader"]
             }
           ]
       }
   }
   

3. 新建src/css/li.css - 去掉li默认样式

   ul, li{
       list-style: none;
   }
   

4. 引入到main.js (因为这里是入口需要产生关系, 才会被webpack找到打包起来)

   import "./css/index.css"
   

5. 运行打包后dist/index.html观察效果和css引入情况

总结: 万物皆模块, 引到入口, 才会被webpack打包, css打包进js中, 然后被嵌入在style标签插入dom上

3.5加载器 - 处理less文件

目标: less-loader让webpack处理less文件, less模块翻译less代码

1. 下载依赖包

   npm install less less-loader -D
   

2. webpack.config.js 配置

   module: {
     rules: [ // loader的规则
       // ...省略其他
       {
       	test: /\.less$/,
       	// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
           use: [ "style-loader", "css-loader", 'less-loader']
       }
     ]
   }
   

3. src/less/index.less - 设置li字体大小24px

   @size:24px;
   
   ul, li{
       font-size: @size
   }
   

4. 引入到main.js中

   import "./less/index.less"
   

3.6加载器 - 处理图片文件

如果使用的是webpack5版本的, 直接配置在webpack.config.js - 的 rules里即可

{
    test: /\.(png|jpg|gif|jpeg)$/i,
    type: 'asset'
}

4.webpack开启服务器

1. 下载包

   npm install webpack-dev-server -D
   

2. 配置自定义命令

   scripts: {
   	"build": "webpack",
   	"serve": "webpack serve"
   }
   

3. 运行命令-启动webpack开发服务器

   yarn serve
   #或者 npm run serve
   

4.1webpack-dev-server配置

module.exports = {
    // ...其他配置
    
    // development 开发环境
    // production  生成环境(最终用于上线的环境)
    mode: 'development',
    devServer: {
      port: 3000 // 端口号
    }
}