前端对Node的理解

原创已于 2023-05-13 17:12:51 修改 · 624 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2023-05-09 21:44:04 首次发布

文章介绍了Node.js的基本概念，包括它是JavaScript的运行时环境，允许JavaScript脱离浏览器运行。内容涵盖Node.js的运行环境差异，如前后端的区别，以及文件系统的读写操作，重点讲解了流的概念和使用，包括流式读写及管道操作。此外，还涉及到了简单的HTTP服务器创建和Express框架的接口实现。

什么是Node

Node.js是一个基于 Chrome V8 引擎的JavaScript运行时

avaScript 诞生于 1995 年，几乎是和互联网同时出现；Node.js 诞生于 2009 年，比 JavaScript 晚了 15 年左右。

在 Node.js 之前，JavaScript 只能运行在浏览器中，作为网页脚本使用，为网页添加一些特效，或者和服务器进行通信。有了 Node.js 以后，JavaScript 就可以脱离浏览器，像其它编程语言一样直接在计算机上使用，想干什么就干什么，再也不受浏览器的限制了。

Node.js 不是一门新的编程语言，也不是一个 JavaScript 框架，它是一套 JavaScript 运行环境，用来支持 JavaScript 代码的执行。用编程术语来讲，Node.js 是一个 JavaScript 运行时（Runtime）。

运行环境

前端框架如vue，运行在浏览器环境

nodejs运行在后端服务器，系统有：window，server，linux

相同：

都是Js，语法相同

不同：

前端运行在浏览器，可以操作DOM元素

后端是使用js去操作数据库,文件,缓存服务等等

基本模块：文件

读取文件

引入fs模块，使用readFileSync同步方法对文件进行读取

// 引入fs模块
var fs = require('fs');
//引入路径
var path = require('path');

//从当前目录下拼接出绝对路径
var url = path.resolve(__dirname, './love.txt')

//同步读取文件内容
var data = fs.readFileSync(url, 'utf8')

console.log(data)

写入文件

// 引入fs模块
var fs = require('fs');
//引入路径
var path = require('path');

//从当前目录下拼接出绝对路径
var url = path.resolve(__dirname, './love.txt')

//writeFileSync同步方法 对文件进行修改
fs.writeFileSync(url,'这是我修改love.txt的字符串')

流

二进制数据，流是一个在node中与流数据工作的抽象接口，stream模块提供了一个基本的API，使得比较容易创建一个实现了流的接口的对象。

数据被读取/写入时，这个过程数据在流动，在数据流动过程中能对数据进行操作截取修改等

流式读取

在nodejs的文件模块中我们使用了readFile和writeFile,这两种方式在读取、写入体量较小的文件时使用体验较为良好，但是一旦文件体量较大时，就会明显出现卡顿，引发内存溢出等问题，针对这个问题，我们可以用流式读取来做到完美解决。

// 引入fs模块
var fs = require('fs');
//引入路径
var path = require('path');

//从当前目录下拼接出绝对路径
var url = path.resolve(__dirname, './love.txt')

//创建一个文件流
var rs = fs.createReadStream(url,'utf-8');

//分块读取数据
rs.on('data', function (chunk) {
    console.log(chunk)
})
 
//结束
rs.on('end', function () {
    console.log('读取完毕')
})

//报错
rs.on('error', function (err) {
    console.log(err)
})

流式写入

// 引入fs模块
var fs = require('fs');
//引入路径
var path = require('path');

//从当前目录下拼接出绝对路径
var url = path.resolve(__dirname, './love.txt')

//写入文件
var ws = fs.createWriteStream(url,'utf-8');

ws.write('流式写入 \n')    //  \n换行
ws.write('写入完毕')
ws.end()

管道pipe

不论是rs.on() 还是 readFile()，将一个文件读取并写入到另一个文件都需要两个各自方法的两个函数搭配使用才能达成效果，这样较为麻烦，而pipe方法可以完美解决这个问题

pipe为管道的意思，rs.pipe(ws)是将可读流与可写流直接连通在一起，自动完成数据的读写

// 引入fs模块
var fs = require('fs');
//引入路径
var path = require('path');

//从当前目录下拼接出绝对路径
var url = path.resolve(__dirname, './love.txt')

//准备写入的路径
var url2 = path.resolve(__dirname, './love2.txt')

//读取的文件
var read = fs.createReadStream(url,'utf-8');
var write =fs.createWriteStream(url2,'utf-8');
//将 love.txt的文件内容 通过管道pipe的方法，直接写入到love2文件内
read.pipe(write);

一个简单的HTTP请求

//最简单的http服务
var http = require('http')

//req == request, res ==response
var server = http.createServer(function(req, res){
    //浏览器请求的方法,地址
    console.log(req.method+":"+req.url)
    //简单的判断
    if(req.url.includes('/api/name')){
        //返回name
    }
    //状态200
    res.writeHead(200,{'Content-Type': 'text/html'})
    //返回一个简单的标题
    var html="<h1>hello word</h1>\n"
    res.end(html)
})

server.listen(8000,function(){
    console.log('8000端口已启动')
})

Express接口实现

Express是一个保持最小规模的灵活的Node.js Web应用程序开发框架，为Web和移动应用提供一组强大的功能

安装依赖包

1.创建package.json，命令 npm init

2.npm i安装依赖包

3.cnpm i -S express

启动命令

cmd打开命令窗口

输入：

node 文件名

接口请求方式

get,put,post,delete,option..

接口测试

浏览器上只能执行get请求,get参数才url后用?拼接

其余类型请求使用后postman发送，如post请求，参数在请求体body内

接口实现

//加载依赖包对象
var express = require('express')
//构建一个框架实例对象
var app = express()

//配置请求体的解析
app.use(express.json()) //前端发送的json数据
app.use(express.urlencoded({
    extended: true
})) //解析前端发送的表单数据

//本地端口 get请求
app.get('/', function (req, res) {
    res.status(200).send('hello!')
})

//post请求
app.post('/api/data', function (req, res) {
    console.log('api/data', req.body)
    var obj = {
        name: 'xiaoMing',
        data: req.body
    }
    //将json返回给前端
    res.status(200).json(obj)
})


//get请求
app.get('/api/data1', function (req, res) {
    console.log('api/data1', req.query)
    var obj = {
        name: 'xiaoMing',
        data: req.query
    }
    //将json返回给前端
    res.status(200).json(obj)
})


app.listen(8000, function () {
    console.log('8000端口已启动')
})