IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Node.js入门 -> 正文阅读

[JavaScript知识库]Node.js入门

目录

1了解Node.js的作用

2fs文件系统模块

3path路径模块

4http模块


1了解Node.js的作用

浏览器中的JS包括核心语法和WebAPI

不同的浏览器使用不同的JS解析引擎,就比如常用的Chrome 用的是V8的解析引擎。?

V8引擎负责解析和执行JS代码。内置API是由运行环境提供的特殊接口,只能在所属的运行环境中被调用。而Node.js是一个基于V8引擎的JS运行环境。这样理解浏览器是JS的前端运行环境

Node.js是JS的后端运行环境。Node中无法调用DOM和BOM等内置API

JS基础语法+内置API模块 fs path http +第三方API模块 express mysql?

2fs文件系统模块

用来操作文件的模块,提供了一些列的方法和属性,用来满足用户对文件的操作需求。

现在先来讲一讲readfile()的方法

const fs = require('fs')
//参数path 必选表示文件的路径,第二个表示以什么编码格式来读取文件 ,第三个表示通过回调函数拿到的结果
fs.readFile('./files/1.txt', 'utf8', function(err, dataStr) {
    if (err) {//如果读取成功,表示err=null 如果读取失败,err的值为一个对象,dataStr的值为undefined
        return console.log('读取文件失败!' + err.message)
    }
    console.log('读取文件成功!' + dataStr)
})

然后再来看一看writefile()的方法

// 1. 导入 fs 文件系统模块
const fs = require('fs')

// 2. 调用 fs.writeFile() 方法,写入文件的内容
//    参数1:表示文件的存放路径
//    参数2:表示要写入的内容
//    参数3:回调函数
fs.writeFile('./files/3.txt', 'ok123', function(err) {
    // 2.1 如果文件写入成功,则 err 的值等于 null
    // 2.2 如果文件写入失败,则 err 的值等于一个 错误对象
    // console.log(err)

    if (err) {
        return console.log('文件写入失败!' + err.message)
    }
    console.log('文件写入成功!')
})

我们来分析其中可能出现的问题,路径问题。很容易出现路劲动态拼接错误的问题。因此我们需要提供完成的路径,不要提供相对路径。因此我们引入path路径模块

3path路径模块

path.join()将多个路径片段拼接成一个完整的路径字符串

path.basename()用来从路径字符串中,将文件名解析出来

path.extname()可以获取路径的扩展名部分

const path = require('path')
const fs = require('fs')

// 注意:  ../ 会抵消前面的路径
// const pathStr = path.join('/a', '/b/c', '../../', './d', 'e')
// console.log(pathStr)  // \a\b\d\e

// fs.readFile(__dirname + '/files/1.txt')

fs.readFile(path.join(__dirname, './files/1.txt'), 'utf8', function(err, dataStr) {
  if (err) {
    return console.log(err.message)
  }
  console.log(dataStr)
})


// 定义文件的存放路径
const fpath = '/a/b/c/index.html'

// const fullName = path.basename(fpath)
// console.log(fullName)

const nameWithoutExt = path.basename(fpath, '.html')
console.log(nameWithoutExt)//index

const fpath = '/a/b/c/index.html'

const fext = path.extname(fpath)
console.log(fext) //.html

注意的是fs.writefile只能用来创建方法,不能用来创建路径。fs.writefile重复调用,写入同一个文件,新写入的内容会覆盖之前的内容

4http模块

是最重要的一个模块,是用来创建web服务器的模块,就能方便把一台普通的电脑,变成一台服务器,从而对外提供web资源服务

以下代码是一个基础的创造服务器的代码

const http = require('http')
const server = http.createServer()

server.on('request', (req, res) => {
    // 定义一个字符串,包含中文的内容
    const str = `您请求的 URL 地址是 ${req.url},请求的 method 类型为 ${req.method}`
        // 调用 res.setHeader() 方法,设置 Content-Type 响应头,解决中文乱码的问题
    res.setHeader('Content-Type', 'text/html; charset=utf-8')
        // res.end() 将内容响应给客户端
    res.end(str)
})

server.listen(80, () => {
    console.log('server running at http://127.0.0.1')
})

下面我们再来写一个复杂的服务器,主要目的是根据不同的URL可以响应不同的html内容,上述代码是建立在80端口的。(提示:尽量不要用80端口,因为很有可能已经被其他应用程序所占用,所以就会报错。如果报错的话,尝试更改以下端口号把!)

const http = require('http')
const server = http.createServer()

server.on('request', (req, res) => {
  // 1. 获取请求的 url 地址
  const url = req.url
  // 2. 设置默认的响应内容为 404 Not found
  let content = '<h1>404 Not found!</h1>'
  // 3. 判断用户请求的是否为 / 或 /index.html 首页
  // 4. 判断用户请求的是否为 /about.html 关于页面
  if (url === '/' || url === '/index.html') {
    content = '<h1>首页</h1>'
  } else if (url === '/about.html') {
    content = '<h1>关于页面</h1>'
  }
  // 5. 设置 Content-Type 响应头,防止中文乱码
  res.setHeader('Content-Type', 'text/html; charset=utf-8')
  // 6. 使用 res.end() 把内容响应给客户端
  res.end(content)
})

server.listen(80, () => {
  console.log('server running at http://127.0.0.1')
})

下面介绍一个综合案例,例子是http fs path三个模块同时用到。实现clock时钟的web服务器。

核心思路是 ,先通过自己的web服务器(搬运工)读取文件的存放路径。把每个页面index.html,index.css等想象成一个个单独的文件,那么我的核心目的就是将读取到的这些文件的内容(字符串)通过res.end响应给客户端。关键是浏览器收到的客户端请求回来的,不是具体的文件,而是文件中所存储的字符串。比如在浏览器中此时访问了/clock/index.html那么浏览器 就会像服务器进行请求,把文件的实际存放路径作为每个资源的请求URL地址,因此我们可以直接把请求的URL地址,当做读取文件的路径。

// 1.1 导入 http 模块
const http = require('http')
    // 1.2 导入 fs 模块
const fs = require('fs')
    // 1.3 导入 path 模块
const path = require('path')

// 2.1 创建 web 服务器
const server = http.createServer()
    // 2.2 监听 web 服务器的 request 事件
server.on('request', (req, res) => {
        // 3.1 获取到客户端请求的 URL 地址
        //     /clock/index.html
        //     /clock/index.css
        //     /clock/index.js
        const url = req.url
            // 3.2 把请求的 URL 地址映射为具体文件的存放路径
            // const fpath = path.join(__dirname, url)
            // 5.1 预定义一个空白的文件存放路径
        let fpath = ''
        if (url === '/') {
            fpath = path.join(__dirname, './clock/index.html')
        } else {

            //     /index.html
            //     /index.css
            //     /index.js
            fpath = path.join(__dirname, '/clock', url)
        }

        // 4.1 根据“映射”过来的文件路径读取文件的内容
        fs.readFile(fpath, 'utf8', (err, dataStr) => {
            // 4.2 读取失败,向客户端响应固定的“错误消息”
            if (err) return res.end('404 Not found.')
                // 4.3 读取成功,将读取成功的内容,响应给客户端
      // res.setHeader('Content-Type', 'text/html; charset=utf-8')
            res.end(dataStr)
        })
    })
    // 2.3 启动服务器
server.listen(3000, () => {
    console.log('server running at http://127.0.0.1:3000')
})

以上就实现了一个简单的web服务器,访问不同的页面,呈现不同的内容。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-23 10:38:28  更:2021-07-23 10:38:34 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/26 8:09:37-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码