Node.js学习笔记(1)

Node.js

Node.js是什么?

Node.js不是编程语言.

Node.js是一个JavaScript运行环境

Node.js能做什么?

  1. 服务器端开发

  2. 命令行工具CLI command line interface

  3. PC端的应用开发 Electron

课程的学习目标

  1. 了解服务器端应用程序的工作原理

  2. 可以使用Node.js实现动态网页的开发

  3. 可以是用Node.js为网站提供数据接口 JSON-SERVER

浏览器的工作原理

浏览器的组成部分

  1. 用户交互部分(UI)

  2. 网络请求部分(Socket)

  3. 渲染引擎,浏览器内核(Render Engine)

  4. JavaScript引擎

  5. 数据存储部分(Storage)

渲染引擎的工作原理

从服务器端请求回来的内容,其实就是HTML代码

渲染引擎,将HTML代码进行处理之后,在浏览器中展示出来可见的图形化的网页!

  1. 解析HTML代码,构建DOM树

  2. 根据DOM树,构建渲染树

  3. 解析CSS样式

  4. 对渲染树进行Layout操作

  5. 绘制整个页面 Paint

多核浏览器,指的是浏览器拥有多个渲染引擎。 多个渲染引擎并不能同时工作提高渲染效率。多核的目的,只是为了处理兼容性问题。

静态网页和动态网页

主要的依据: 服务器端到底有没有代码执行!

动态网页

就是在服务器端,会执行相应的代码,将执行之后的结果,返回给浏览器

静态网页

服务器在接收到浏览器的请求之后,直接将请求的文件返回给浏览器,不执行任何操作!

Node.js安装

版本区别

  1. LTS: 长期支持版本(稳定版)

    1. 适合在生产环境中使用

  2. Current: 最新版(测试版)

    1. 学习和研究环境中使用

如何查看node.js是否已经安装完成

  1. 打开cmd 或者 git bash

  2. 输入 node -v

如果正常输出了版本号 证明Node安装成功了

如果输出的是 不是内部或者外部命令 则Node.js没安装成功

环境变量

作用

将文件所在的目录路径添加到环境变量中之后,在当前系统中任意位置,就都可以访问到这个目录中的文件了!

Node.js的使用

REPL

Read: 读取用户输入的代码Eval: 执行用户输入的代码Print: 打印用户代码的执行结果Loop: 循环

如何打开REPL

  1. 打开CMD

  2. 输入node

如何退出REPL

  1. 输入 .exit 敲回车

  2. Ctrl + C 两次

REPL中可以执行任何JS代码

使用Node执行编写好的js文件

  1. 打开CMD

  2. 输入 node 文件的路径

注意事项

  1. js文件名称不要使用node.js

  2. js文件名称不要出现特殊字符以及空格

  3. js文件名尽量不要使用中文

  4. js文件名尽量全部使用小写

浏览器和服务器的通信过程

浏览器的工作原理

浏览器的组成

  1. 用户交互部分(User Interface)

  2. 网络请求部分(Socket)

  3. 渲染引擎(Render Engine) 内核

  4. JavaScript引擎

  5. 数据存储部分(Storage)

浏览器渲染过程

  1. 将html代码解析生成DOM树

  2. 根据DOM树生成渲染树

  3. 解析CSS样式

  4. 将渲染树和CSS进行整合

  5. 进行绘制

静态网页和动态网页

静态网页: 服务器端不执行任何代码,将页面直接返回的网页就是静态网页动态网页: 服务器端需要执行代码,将代码最终的执行结果返回给浏览器的页面就是动态网页

web开发本质

  1. 请求

  2. 处理

  3. 响应

Node.js

是什么?

Node.js是一个JavaScript运行环境(runtime)

Node.js使用的是V8 javascript引擎

能做什么

  1. 做web开发

  2. cli 命令行工具

  3. PC端应用

安装

两个版本

  1. LTS 生产用

  2. Current 测试学习用

环境变量

可以让应用程序在操作系统的任意位置都可以访问到!

使用node.js编程

  1. REPL

    1. 打开cmd

      1. 输入node

        1. 像使用浏览器控制台一样编写js代码

          1. 如果要退出 .exit ctrl + c * 2

  2. 使用node.js执行js文件

    1. 打开cmd

      1. 输入node 文件路径

global对象

在global中的所有的内容,都可以不需要引入直接使用!

文件的读写

异步

var fs = require('fs')
fs.writeFile(文件路径, 要写入的内容, 编码格式, function(err){
    // err 是错误信息
    // 如果出错,则err是一个对象
    // 如果不出错, 则err为null
})

var fs = require('fs')
fs.readFile(文件路径,字符编码, function(err, data){
    // err 是错误信息
    // 如果出错,则err是一个对象
    // 如果不出错, 则err为null

    // data就是最终读取到的数据
})

同步

fs.writeFileSync(文件路径,写入内容,编码格式)
var 读取到的数据 = fs.readFileSync(文件路径,编码格式)

路径

_dirname _filename

__dirname: 当前正在执行的js文件的文件夹的路径__filename: 当前正在执行的js文件的文件路径

路径拼接

var path = require('path')
path.join(__dirname, "路径1", "路径2"... "路径n")

如果在读写文件的时候使用的相对路径

则./就相当于执行node命令的文件夹

node.js创建简单的http服务器

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

server.on("request", function(request, response){
    // 这个函数会在浏览器请求服务器的时候被调用
    // 在这个函数中必须结束响应,否则浏览器一直处于挂起状态!

    response.end();
})

server.listen(端口号, function(){
    console.log("http://localhost:端口号")
})
response对象的成员

1. response.setHeader 用来设置响应头,一次只能设置一个 必须在write之前调用
2. response.writeHead 用来设置响应头,一次只能设置多个 还能用来设置状态码和状态信息 必须在write之前调用
3. response.write 用来向浏览器响应数据,可以接收字符串或者buffer对象,可以调用多次
4. response.end 用来结束响应,可以接收字符串或者buffer对象,最后一次返回数据!
5. response.statusCode 设置响应状态码
6. response.statusMessage 设置响应状态信息
100 Continue
101 Switching Protocol
200 OK
201 Created
202 Accepted
203 Non-Authoritative Information
204 No Content
205 Reset Content
206 Partial Content
300 Multiple Choices
301 Moved Permanently
302 Found
303 See Other
304 Not Modified
307 Temporary Redirect
308 Permanent Redirect
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
409 Conflict
410 Gone
411 Length Required
412 Precondition Failed(先决条件失败)
413 Payload Too Large
414 URI Too Long
415 Unsupported Media Type
416 Range Not Satisfiable
417 Expectation Failed
418 I'm a teapot
422 Unprocessable Entity
426 Upgrade Required
428 Precondition Required
429 Too Many Requests
431 Request Header Fields Too Large
451 Unavailable For Legal Reasons
500 内部服务器错误
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported
511 Network Authentication Required

Content-Type

响应头中一定要设置Content-Type, 因为浏览器会根据响应头中的Content-Type对服务器返回的内容进行响应的处理。

根据不同的url地址返回不同的内容

request.url 这个属性可以获取到请求的 路径+参数

根据不同的url地址返回不同的内容其实就是路由

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

server.on("request", function(request, response){
    // 定义路由规则
    switch(request.url){
        case "路由地址":
            // 进行相应的响应
            break;
        case "路由地址1":
            // 进行相应的响应
            break;
    }
})

server.listen(端口号, function(){
    console.log("http://localhost:端口号")
})

使用node.js写文件

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


fs.writeFile("./abc/静夜思.txt", "床前明月光, 疑似地上霜, 举头望明月,低头思故乡", "utf8", function (err) { 
    // err这个形参,会在写入文件出错的时候,将错误信息传递进来
    // 如果没有出错, err就是一个null
    if (err) {
        console.log("写入失败", err);
    } else {
        console.log("写入成功");
    }
})

console.log("123");

使用node.js读文件

var fs = require('fs');

// fs.readFile('./静夜思.txt', 'utf8', function (err, data) { 
//     if (err) {
//         console.log("读取文件失败", err)
//     } else {
//         console.log(data);
//     }
// })


// 如果不传字符编码,则读取到的内容为Buffer对象,Buffer对象就是数据的16进制的表示形式!
fs.readFile('./静夜思.txt', function (err, data) { 
    if (err) {
        console.log("读取文件失败", err)
    } else {
        // 读取到的数据为buffer对象的时候,可以使用toString方法将其转换成字符串来使用
        console.log(data.toString());
    }
})

使用node.js读写文件(同步)

// var fs = require('fs');

// fs.writeFileSync("./沁园春雪.txt", "北国风光,千里冰封,万里雪飘")
// console.log("ok");

// var result = fs.readFileSync('./沁园春雪.txt', 'utf8')
// console.log(result);

 global对象的研究

console.log(global)
// 在node.js中打印对象,如果对象的嵌套层级比较少,还能看
// 如果嵌套层级过多,展示效果会很乱!

写文件的时候路径的注意事项

var fs = require('fs');

var csb = "先帝创业未半而中道崩殂, 尽天下三分。。。。。"


// 写文件的时候,如果写的是相对路径,则参照是 当前执行命令的目录,而不是js文件所在的目录

// fs.writeFile('./出师表.txt', csb, function (err) { 
//     if (err) {
//         console.log("写入失败")
//     } else {
//         console.log("写入成功")
//     }
// })

// __dirname: 指的就是当前正在执行的js文件文件夹路径
// console.log(__dirname);
// __filename: 指的就是当前正在执行的js文件的路径
// console.log(__filename);


fs.writeFile(__dirname + '/出师表.txt', csb, function (err) { 
    if (err) {
        console.log("写入失败")
    } else {
        console.log("写入成功")
    }
})


// 1. 如果想要将文件创建在执行命令的文件夹下,则直接写相对路径就行
// 2. 如果想要将文件创建在和执行的js文件同一个文件夹下,则使用__dirname来拼接路径即可

node.js中的路径拼接

var fs = require('fs');

// fs.writeFile(__dirname + "/leveltop" + "/levelmiddle" + "/levelbottom" + "/abc.txt", '这样写路径太烦了', function (err) {
//     if (err) {
//         console.log("no ok");   
//     } else {
//         console.log("ok");   
//     }
// })

// 通过字符串拼接的方式虽然可以拼接路径,但是太过繁琐,得注意斜杠的问题

// node.js中提供了一个模块  path
// path模块中提供了一个join方法,专门用来拼接路径的!

var path = require('path');

fs.writeFile(path.join(__dirname, 'leveltop', 'levelmiddle', 'levelbottom', 'abc.txt'), '这样写路径太烦了', function (err) {
    if (err) {
        console.log("no ok");   
    } else {
        console.log("ok");   
    }
})

异常处理语句

// 异常: 一旦出现异常,则代码执行中断

// 异常处理语句: 将异常捕获,避免代码执行被中断!

// 语法:
// try { 
        // 可能出错的代码,都放在try语句块里
// } catch (e) {
        // catch中放的就是出错之后要执行的代码
// }

// 完整形态
// try {
    
// } catch (e) {
    
// } finally {
    
// }


console.log("hello");

// var a = 10;

try {
    console.log(a);
} catch (e) {
    console.log("出错了!", e)
} finally {
    console.log('finally被执行了')
}

console.log("world");

文件操作回调函数中的异常无法被try-catch捕获

var fs = require('fs');


// 异步操作中的异常,直接用try-catch无法进行捕获
try {
    fs.readFile('./出师表.txt', 'utf8', function (err, data) {
        console.log(a);
    })
} catch (e) {
    console.log("出错啦")
}

// 如果要捕获,则需要将try-catch放在回调函数内部使用!
fs.readFile('./出师表.txt', 'utf8', function (err, data) {
    try {
        console.log(a);

    } catch (e) {
        console.log("出错啦")
    }
})

手动抛出异常


function sayHello(age) {
    if (typeof age != "number") {
        throw new Error("你传的是个啥、???")
    }

    if (age != 18) {
        throw "板砖"
    }
    console.log("你好,我叫潘明, 今年" + age + "岁")
}

sayHello(19);
// sayHello("aklsdfjaksldfjaslkdfj");

使用node.js创建一个简单的http服务器

//web开发的本质:
// 1. 请求  前端
// 2. 处理  后端
// 3. 响应  后端

// node.js做后端开发  处理和响应

// 第一步: 引入http模块
var http = require('http');

// 第二步: 创建一个http服务器实例
var server = http.createServer();

// 第三步: 使用server实例来监听指定的端口
server.listen(8888, function () { 
    console.log("监听端口成功,你可以通过 http://localhost:8888 来访问")
})

// 第四步: 给server对象注册一个事件 request
// request事件的触发时机: 当服务器接收到浏览器的请求后,就会触发这个事件
server.on('request', function (request, response) { 
    // 这个函数就是request事件的处理函数
    // request就是请求相关的所有的信息都在request对象中
    // response 响应相关的所有内容都在该对象中

    // console.log("有请求来了!!");

    // 在接收到浏览器的请求之后,必须对浏览器做出响应,否则浏览器就会一直处于挂起状态

    // 通过response对象,提供的方法,就可以给浏览器响应数据了
    response.write('hello node.js');
    // 在响应数据完毕之后,得通知浏览器,响应结束了!
    response.end();
})

response对象的api介绍

var http = require('http');

var server = http.createServer();

server.listen(8888, function () { 
    console.log("http://localhost:8888")
})

server.on('request', function (request, response) {
    
    // response.end: 结束响应
    //      response.end方法可以接受参数:
                // 1. 字符串
                // 2. buffer对象
    
    // response.setHeader: 可以用来设置响应头 一次只能设置一个!
    response.setHeader("content-type", "text/html;charset=utf-8");
    // response.setHeader("name", "fangwei");
    // response.setHeader("age", "16");

    // response.writeHead: 这个方法也可以用来设置响应头,并且可以一次设置多条,还能设置状态码
    // response.writeHead(404, "OK", {
    //     "content-type": "text/html;charset=utf-8",
    //     "name": "fangwei",
    //     "age": 17
    // })

    
    // 注意事项: 设置响应头的方法一共有两种: setHeader writeHead
    // 设置响应头,一定要在write调用之前设置,否则会出错!!!


    // response.write: 用来给浏览器响应数据的 可以传两种参数: 字符串 或者 buffer对象
    // response.write可以调用多次的!!
    response.write("write方法返回的数据");
    response.write("write方法返回的数据");
    response.write("write方法返回的数据");
    response.write("write方法返回的数据");
    response.write("write方法返回的数据");
    response.write("write方法返回的数据");

    response.end("响应结束了!");
})

response对象的api介绍2

var http = require('http')
var server = http.createServer();
server.listen(8888, function () { 
    console.log("http://localhost:8888")
})
server.on('request', function (request, response) { 

    // setHeader
    // writeHead
    // write
    // end

    // response.statusCode
    // response.statusMessage


    response.statusCode = "502";
    response.statusMessage = "Bad GateWay"

    response.end('ok');
})

通过response对象给浏览器返回html代码

var http = require('http');
var server = http.createServer();

server.on("request", function (request, response) {
    response.setHeader("Content-Type", "text/html;charset=utf-8")

    // 响应头中的Content-Type的作用:
    // 浏览器在接收到服务器响应的数据之后,会根据响应头中的Content-Type来进行对应的处理
    // Content-Type: text/html    浏览器就会解析DOM
    // Content-Type: text/css     浏览器会将内容当做css来处理
    // Content-Type: application/json

    response.write('<h1>Hello Node.js</h1>')
    // response.write("body{background-color: pink;}")

    // response.setHeader("Content-Type", "application/json")
    // response.write('{"name": "fangwei", "age": 18}')
    response.end();
})

server.listen(8888, function () { 
    console.log('http://localhost:8888')
})

根据不同的url地址返回不同的内容

var http = require('http');
var server = http.createServer();

server.on("request", function (request, response) {
    // 根据不同的url地址返回不同的内容
    // 当用户访问 /index  返回  首页
    // 当用户访问 /login  返回  登录页
    // 当用户访问 /list   返回  列表页

    // request.url : 这个属性可以用来获取浏览器端请求的地址的详细信息!
    // 包含两部分内容  路径+参数

    response.setHeader("Content-Type", "text/html;charset=utf-8");

    // console.log(request.url);

    // 路由(Route)
    // 根据不同的url地址返回不同的内容!

    // 路由规则!
    switch (request.url) {
        case "/index":
            response.end("首页")
            break;
        case "/login":
            response.end("登录页")
            break;
        case "/list":
            response.end("列表页")
            break;
        default:
            response.statusCode = 404;
            response.statusMessage = "Not Found";
            response.end("你访问的页面不存在");
    }

})

server.listen(8888, function () {
    console.log('http://localhost:8888')
})

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值