• node-day1


    (1)为什么学习node?

      

      

     服务器为中间件

     学习node.js便是为了帮助前端开发人员 打开服务器的黑盒子,了解接口制作、数据处理等,以便更好地配合后端进行协同开发

     案例:node.js中文社区系统(多人社区)

      

    (2)什么是node?

      前端:HTML、CSS、JS

      服务器端:node、java、PHP、Python、Ruby(案例:GitHub)、c#、.Net(dot点,发音为dao net)... ...都可以作为服务器端语言,都可以打开web后台服务器黑盒子。

      node.js主要使用js编码

      

       浏览器JS构成:

        

       node.js中构成(服务端不处理页面,所以没有BOM和DOM)

        

       

    node.js特性:
      event-driven事件驱动、non-blocking I/O model非阻塞I/O模型

       node.js生态库

       

     小结:

    node.js不是新语言、框架、库等,而是js在服务器端的运行环境。是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时环境,浏览器引擎相关参考下面所示

     

    (3)node介绍

      1、node能做什么?

        

         等等,主要为服务器和命令行工具

         对于前端来说,主要使用node命令行工具

        

      2、预备知识

        

       3、学习资源

        

      4、学习知识点

        

    B/S编程模型:Browser与Server

      

    模块化编程

      

    异步编程

      

    ES6

      

    (4)node环境安装

      

      1、 查看当前是否安装node或者已经安装好的版本号

    node --version或者node -v

        

       2、官网查看版本进行下载

    LTS为Long Time Support长期支持版,即稳定版
    Current为当前最新版

      

        

       3、安装

    注意:已经安装过的,再次安装会进行覆盖

      一路next傻瓜式安装即可

      4、验证版本,确认是否安装成功

      5、配置环境变量

      

       

    (5)使用node执行JS脚本文件

      1、新建helloworld.js脚本

        

      2、切换到脚本目录文件

        CMD与Git Bash都可以

        

         

      3、node执行脚本文件

        如上所示

      4、注意

        

    脚本文件命名避免node.js或者中文

        

      5、没有BOM与DOM验证

        

         

         

    没有DOM与BOM操作,主要是服务器级别操作,例如读写文件
    注意:浏览器中JS无法直接读取或者创建写入文件

      6、浏览器js与node的js宏观对比---结合读写文件

        

    1、使用require方法加载fs(file-system文件系统)核心模块
        var fs = require('fs');
    2、读取文件
        fs.readFile('读取文件路径','回调函数(error,data)')

        

      案例如下:

        

         

         

    默认存储为二进制数据,这里看到的之所以乱码,是因为二进制转为16进制了,通过toString转换即可

        

         

      小结:

      

      7、浏览器不认识node代码

        

        

    (6)写文件和简单的错误处理

       1、写文件API

    writeFile()

      

       

      案例如下:

       

      

       

      2、完善--错误情况处理,自定义错误提示

      

       错误时error为错误对象,包含具体错误信息

      

       添加错误判断

      

       

      3、写入文件加错误处理

      

      4、小结

    error参数作用:判断读写文件操作是否成功

    (7)简单的http服务

      

       之前首先利用node执行脚本文件,打印hello world;后来利用fs与API读写文件,接下来使用web服务器实现

    核心模块:fs文件系统模块、http服务器模块

       1、核心模块(宏观了解)

    1、加载http核心模块
        var http = require('http');
    2、创建web服务器
        使用http.createServer()方法创建一个web服务器,返回一个server实例
        var server = http.createServer()
    3、服务器提供“数据”服务,接收请求
      server.on('request',function(){...})
    4、绑定端口号(3000、5000、8000,端口号下面介绍),启动服务器
      

      

      

       验证如下:

      

      

       

       问题:此时浏览器输入url后一直显示等待响应... ....

      

       之所以会这样,主要因为当前只是接受请求request,还没有设置响应,所以接下来设置响应

      

       

    (8)设置并发送响应

      1、参数

        request请求事件回调处理函数,需要接受两个参数:
            Request请求对象(获取客户端一些请求信息,例如请求路径request.url)
            Response响应对象(给客户端发送响应消息)

      

      2、验证如下

    /* 1、加载http核心模块 */
    var http = require('http');
    /*2、创建web服务器
        使用http.createServer()方法创建一个web服务器,返回一个server实例*/
    var server = http.createServer();
    /*3、服务器提供“数据”服务,接收请求*/
    /*
        request请求事件回调处理函数,需要接受两个参数:
            Request请求对象(获取客户端一些请求信息,例如请求路径)
            Response响应对象(给客户端发送响应消息)
    */
    server.on('request',function(request,response){
        console.log('收到客户端请求,请求路径为'+request.url)
        /*
            response对象有一个write方法,可以用来给客户端发送响应数据
            write可以使用多次,但最后要用end结束响应,否则客户端会一直等待
        */
        //往response响应流中写数据
        response.write('hello world')
        //告知客户端,服务器的话已经说完了,可以呈递给用户了
        response.end();
    })
    /* 4、绑定端口号,启动服务器 */
    server.listen(3000,function(){
        console.log('服务器启动成功,可以通过localhost:3000进行访问')/*成功日志信息*/
    })

      

    注意:/favicon.icon为收藏夹图标,浏览器有个默认行为,会去请求收藏夹图标

      3、思考:路由

      

       根据不同请求路径,响应不同内容... ...

      简单复习:

      

    (9)根据不同请求路径返回不同数据

      

         1、启动服务器基本步骤

        

      2、端口不能重复使用

        

    端口号如果已经被占用,则会启动失败
    浏览器默认端口为80端口

      3、默认端口号80验证

        

    如果端口号是80,则输入url时只输入localhost或者127.0.0.1也可以访问

      4、响应编写与结束简写

    发送响应数据同时,结束响应

        

      5、根据不同请求路径,发送不同结果

        判断分析:所有请求路径以/开头

        

    浏览器默认行为:访问网页图标

        

         

      6、商品接口模拟

        

    注意:编写好商品数据后,无法直接编写响应数据返回给客户端,需要注意数据类型

        

         验证后发现只能接收字符串和二进制数据,即响应内容数据类型限制

        

         结果:

        

         验证后发现和之前所接触的接口十分相似,简单了解下... ...,这里中文乱码,后续介绍,当然开发时数据都是存储在数据库

        

    (10)Node.js中的js---核心模块

      

      1、node中JS支持ES,没有BOM与DOM

      2、核心模块

        

    例如:
    fs(file system)文件系统模块
    os(operation system)操作系统信息模块
    http服务构建模块
    path路径操作模块

      os案例:

        

        

         上面四个对象为四核

      3、获取内存totalmem

    /*获取内存大小,memory内存,单位为字节*/
    var totalmem = os.totalmem();
    console.log(totalmem)

        

      4、path模块处理路径,获取扩展名extname

    var path = require('path');
    /*获取扩展名:extension name*/
    var extname = path.extname('c:/user/myblog.txt');
    console.log(extname)

        

      5、多脚本文件并发执行

    普通编写的话:node下同一时间只能读取操作一个脚本文件,如下所示

        

    如果想同时执行多个脚本,需要模块化编程

      6、模块化编程

        

         正如之前验证,两个脚本无法同时执行,所以只能通过代码,在执行a.js同时执行脚本文件b.js

    node里,可以通过require加载的模块有3种
        1、具名核心模块fs、http、path、os
        2、用户自定义的模块(相对路径必须加./)
        3

        

         验证如下:

        

         

         同理,再添加个c.js

        

         验证如下

        

    先进后出,后进先出

      7、模块作用域

    在node里,没有全局作用域,只有模块作用域,外部访问不到内部,内部也访问不到外部

        

         验证如下:

        

       小结:

        

    注意:
    1、后缀名可以省略
    2、相对路径的./不能省略,否则会报错(去掉会将其作为核心模块与识别解析)

        

         

         

       8、模块通信

        

       9、模块的导入加载与导出

         首先测试下直接读取别的模块信息

          

           

           读取失败

        接下来试下模块化信息操作,即模块导入与导出

        

    每个文件模块都提供了一个对象:exports,默认exports是一个空对象

        

    对象是动态的,所以如果想在其他模块使用该模块的数据,需要将其挂载到exports对象上,即动态添加成员

        

         此时结果为{foo:hello}

         

         也可以导出方法

        

         

      思考:

        

         这里的两个add并不一样,一个是模块里的函数,另一个是挂载到exports对象上的方法

    注意:只要是没有挂载到exports对象上的数据或方法,在另一个模块里都获取不到

        

         

         修改如下:

          

       10、模拟核心模块封装

          

    (11)ip地址&&端口号介绍

       1、ip与端口号

    ip用来定位计算机
    端口号用来定位应用程序

      

       

       小结:

        

         

      2、端口号补充

        

    范围:0-65535
    网站上线部署时用80默认端口即可
    开发阶段推荐用3000、5000没有实际含义的端口号即可

    (12)响应内容类型Content-type

      1、中文乱码问题

        首先编写http服务模块基本框架

        

         可以同时开启多个服务,但要确保不同服务占用不同的端口号

        

        加上中文,再次验证如下

        

         

    乱码原因剖析:之所以乱码,是因为服务器发送的数据为utf-8编码即国标编码,但浏览器不知道。
          浏览器在不知道服务器响应内容的编码情况下,会按照当前系统的默认编码去解析(中文操作系统默认gbk编码)

      2、解决方法,声明编码协议类型

        

         案例如下:

        

         乱码与设置响应头格式对比:

          

           

      3、除了普通文本text/plain,还有其他格式,例如百度

        

      4、Content-Type作用

    在http协议里,Content-Type作用为设定信息类型

      代码如下所示

        

      案例根据不同Content-Type返回不同类型,如下所示

      

      

    如果Content-Type为html,浏览器会将其进行解析;如果是普通文本,则会将其解析为普通字符串文

       5、发送文件中的数据及Content-Type内容类型

        打开百度审查,即可得知,请求页面时,本质获取的是字符串,但为html内容字符串。然后浏览器对其进行解析渲染

        

      6、测试

        首先在文件夹下存放不同类型的资源文件

        

         需求:请求路径不同,访问不同的资源文件

        ①首先读取html文件

        

         详细设置

        

         接下来修改HTML文件内容,再次刷新页面,这里注意:不用重启服务器

    这里之所以不用重启服务器,因为js脚本文件并未更新,每次只是重新读取html文件,所以这里直接刷新后会重新读取

        ②读取图片

          这里拓展对照表

          

           

           查找图片对应Content-Type类型

          

        ③统一资源定位符

          

        ④小结

          

    (13)总结

        

         

         接口对象:

        

         核心模块:

        

         http网络服务构建模块:

        

         框架:

        

    目前为止的一些操作,都是原生语法操作,例如http网络服务模块相关操作比较繁琐;所以后期学习express简化操作;所以这里会先使用原生,后用express框架
    类似于JS操作DOM,后续学习jQuery简化DOM操作语法

    .

  • 相关阅读:
    路由器桥接是个什么玩法
    MAC使用小技巧之------用好mac电脑的10个必知的小技巧!
    学习笔记1--响应式网页+Bootstrap起步+全局CSS样式
    mysql运维必会的一些知识点整理
    面试小结1--填空题
    CSS技术实例1-使用CSS计数器实现数值计算小游戏实例页面
    编译8.0
    解决Windows 10 1809 使用管理员权限运行的程序无法浏览网络驱动器的问题
    android sdk
    酷卓教程 明明已经已经有了面具Magisk 确无法正常使用root权限
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/12124680.html
Copyright © 2020-2023  润新知