Node.js的基本使用

Vscode中的Node.js代码提示插件: npm install –save-dev @types/node

1. Node客户端与服务端JS的区别:

  1. 浏览器JS部分: 变量、运算符、流程控制、数据类型、DOM、BOM

  2. 服务端node.js只有一个部分: ECMAScript

  3. 在node.js中不能执行DOM、BOM

js
1
2
3
4
5
// 使用node环境下的node命令来执行代码 tab键补全
function fn(x, y) {
    return x + y
}
console.log(fn(1, 2))

2 .模块化开发思想

  1. 将大文件拆分为小文件, 然后用特定语法组合在一起
  2. 好处: 1.用什么引入什么 2.避免变量污染 一个文件就是独立的作用域
  3. 业务分离: 不同功能在不同文件, 便于维护

4. 模块化语法有两种

  • Commonjs规范: 运行在node环境 (vue项目编译.less .vue文件会有)

  • ES6规范: 运行在浏览器环境, ES6规范文档

  • CommonJS规范文档: 点击查询

3. Commonjs模块化语法: 只有两个

1. 文件导出

  • 模块化语法有缓存机制, 不会重复导入对象
js
1
2
3
4
5
6
7
8
9
10
11
12
// module.exports = {属性名: 属性值}
// 1. 模块 == 文件
// 2. 每个模块都有自己的独立作用域 外部无法访问
let name = '张三'
let age = 10
// 3. 导出模块: 想让哪个文件用就导出哪个
module.exports = {
    name: name,
    age
}
// 4. 不会重复导入对象
console.log(111)

2. 文件模块导入

js
1
2
3
4
5
6
7
// let 模块名 = require('文件路径')
let mokuai = require('./mokuai.js')
console.log(mokuai)
// 模块化语法有缓存机制
let m = require('./mokuai.js')
console.log(m)
console.log(mokuai == m) // true

4. FS读写模块

1. 导入fs模块-fs在node.js中

js
1
let fs = require('fs')

2. 读取文件 readFile

  1. 参数1: path 文件路径
  2. 参数2: encoding 文件默认十六进制 使用中文utf8
  3. 参数3: (err错误信息, data文件数据/buffer数据流对象)
js
1
2
3
4
5
6
7
8
fs.readFile('./txt/1.txt', 'utf8', (err, data) => {
// 有err说明失败 没有则成功
    if (err) {
        throw err
    } else {
        console.log(data)
    }
})

3. 写入文件 writeFile

  1. 参数1: 文件路径
  2. 参数2: 要写入的数据
  3. 参数3: 文件编码 默认是本身数据格式
  4. 参数4: err => {}
js
1
2
3
4
5
6
7
8
fs.writeFile('./txt/1.txt', '你好啊', err => {
// 如果本身有文件会覆盖 没有则创建文件
    if (err) {
        throw err
    } else {
        console.log('写入成功')
    }
})

5. Path模块: 处理文件路径

1. 导入path模块–拼接路径

js
1
let path = require('path')

2. 使用模块

js
1
2
3
4
5
6
7
8
9
10
// 1. 获取文件扩展名 告诉你文件是什么格式 extname
console.log(path.extname('./txt/1.txt'))
// 2. 拼接相对路径 a/b/c 用join方法 对象join跟这个不一样
console.log(path.join('a', 'b', 'c'))
// 3. 拼接绝对路径 默认从磁盘拼接 c://xxxx/a/b resolve
console.log(path.resolve('a', 'b'))
// 4. 获取当前文件的绝对路径 __dirname
console.log(__dirname)
// dirname可以代替resolve方法 区别为: 用dirname不用导入模块
console.log(`${__dirname}/a/b`)

6. Http服务器模块: 用于搭建服务器

1. 导入http模块

js
1
let http = require('http')

2. 创建服务器 createSecureServer

  1. 参数: 请求报文 响应报文
  2. url中遇到中文则会变成URI编码 用decodeURI解析出来
  3. 想实现不同路径响应不同数据 先判断url 根据不同url响应不同数据
  4. end方法: 结束本次响应 返回响应体
  5. 服务器响应中文 浏览器会乱码 在响应头设置数据格式来解决
  6. 用plain最小字体显示 html为默认大小
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let app = http.createServer((request, response) => {
    console.log(request.url, decodeURI(request.url)) // 请求报文
    response.writeHead(200, {
        'Content-Type': 'text/html;charset=utf-8'
    })
// 想实现不同路径响应不同数据 先判断url 根据不同url响应不同数据
    if (request.url === '/') {
        response.end('我是首页')
    } else if (request.url === '/login') {
        response.end('我是登录页')
    } else {
        response.end('404 not found')
    }
})

3. 运行服务器

  1. 参数1: port端口号 系统为区分上网软件 每个软件会分配编号 (1-65535范围 3000以内会被系统占用)
  2. 参数2: hostname主机名 (ip地址)
  3. 参数3: 运行成功回调 () => {}
  4. ip省略不写默认为 127.0.0.1 只能本机访问
js
1
2
3
4
app.listen('3000', '192.168.0.103', () => {
    // 192.168.0.103:3000
    console.log('开启成功')
})

7. Http模块响应Html文件

  1. 导入http模块

  2. 创建服务器 createSecureServer

  3. 运行服务器

这里主要创建服务器, 其他都一样

  1. 使用fs模块读取文件响应给浏览器 用dirname获取文件路径
  2. 判断成功则响应文件数据
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let app = http.createServer((req, res) => {
    console.log(req.url, decodeURI(req.url))
// 1.使用fs模块读取文件响应给浏览器 用dirname获取文件路径
    if (req.url == '/') {
        fs.readFile(`${__dirname}/index.html`, (err, data) => {
// 2.判断成功则响应文件数据
             if (err) throw err
             res.end(data)
            })
    } else if (req.url == '/o') {
        fs.readFile(`${__dirname}/login.html`, (err, data) => {
             if (err) throw err
             res.end(data)
        })
    }
})

8. 使用Http、FS、Path模块渲染网页

  1. html中所有外部资料都会变成网络请求
  2. 静态资源请求url 与文件路径一致 一般会自动拼接路径响应返回
  3. 文件夹结构:

1. 导入http模块 fs模块

js
1
2
let http = require('http')
let fs = require('fs')

2. 创建服务器

  1. 断url 并使用fs模块读取文件 判断文件并响应文件
  2. 根据请求的url拼接读取对应文件的路径并返回
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let app = http.createServer((req, res) => {
    console.log(req.url)
// 4. 判断url 并使用fs模块读取文件 判断文件并响应文件
    if (req.url == '/') {
        fs.readFile(`${__dirname}/www/index.html`, (err, data) => {
            if (err) {
                throw err
            } else {
                res.end(data)
            }
        })
    } else {
// 5. 根据请求的url拼接读取对应文件的路径并返回
        fs.readFile(`${__dirname}/www/${decodeURI(req.url)}`, (err, data) => {
            if (err) {
                throw err
            } else {
                res.end(data)
            }
        })
    }
})

3. 开启服务器

js
1
2
3
app.listen('3000', '192.168.0.103', () => {
    console.log('开启成功')
})