http爬虫,前端模块化 ,Node.js跨域

http爬虫 + http web服务器渲染数据发送前台 + 中文乱码

  1. http爬虫: http模块
    数据请求:
    get
    request
    post

    流程
    ​ 后端数据请求 —》 数据分析 —》数据清洗 ----》 数据前台发送
    ​ 爬虫: 并不是所有网站都能爬取的
    ​ 反爬虫

    ​ options 就是一个对象,也是一个配置

    2.服务器端渲染数据:

    服务器: 可以运行在服务端一个网站(站点)

    种类

    ​ \1. web服务器( 静态服务器 ) ,可以运行在浏览器中的服务器

    ​ \2. api服务器 ( 后端接口 ) 后端语言暴露一个数据接口,用于前端数据请求( ajax fetch )

    Node.js中原生创建web服务器

    http模块

    ​ createServer( callback ) 创建服务器
    ​ callback中接收三个参数 request response

    ​ listen(port,host,callback) 监听服务器( 反馈服务器状态 )
    ​ port 端口 host 域名

    原生创建web服务器步骤

    ​ a. 引入http模块(对象)

    const http = require( 'http' )

    ​ b.通过http模块身上的 createServer 这个api可以创建一个web服务器

    ​ c.创建服务器端口和域名

    3.Node.js中中文乱码
    ​ \1. 设置请求头

        response.writeHead( 200, {
             ​       		 	'Content-Type': 'text/html;charset=UTF8'  // 小写也可以  utf8
             ​      	})
    

    ​ \2. 发送一个meta标签

    response.write('<meta charset="UTF-8">')

    ​ \3. toString() 在当前应用场景中还不行

    ​ 二进制有效
    ​ 将二进制 — 》 string

    我们刚才发送了一个html给前台,那么这种渲染数据的形式我们称之为: ‘后端渲染’,也称之为:‘服务端渲染’,英文叫法: ‘ssr’

前端模块化

问题: 为什么前端要使用模块化?

​ 模块化: 是具有特定功能的一个对象( 广义理解 )

  • 模块定义的流程:
    ​ 1.定义模块(对象)
    ​ 2.导出模块
    ​ 3.引用模块

  • 好处:

     可以存储多个独立的功能块
     复用性高
    
  1. 种类

    1. AMD( require.js)
    2. CMD ( sea.js )
    3. Common.js
  2. AMD定义一个模块 推崇依赖前置、异步定义(require.js)

    define

    // AMD
    /*
    	目录
    		admDir
    			a.js
    			index.js
    */
    // AMD定义  a.js
        define ({
            a: 1,
            b: 2,
            add: function(){}
        })
    // AMD引用 index.js
    	require([./a.js],function( moduleA ){
            //moduleA指的就是定义来的对象
    	})
    
  3. CMD定义模块 推崇依赖就近

    define

    //CMD
    /*
    	目录结构
    		b.js
    		index.js
    */
    
    // 模块定义  b.js
    	define(function(require, exports, module) {
    
        	// 模块代码
    
        });
    //模块引用 index.js
    	require('./b.js',function( moduleB ){
            //moduleB就是b模块中导出的内容
    	})
    

    难点之一: CMD AMD 黄金

  4. Common.js

    Node.js使用了Common.js的规范( 必会的 王者 )

    易错的理解:

    ​ common.js是属于node的 ×

    ​ node属于common.js ×

    //common.js
    /*
    	目录结构:
    		name.js
    		index.js
    */
    //模块的定义 name.js
    	const nameObj = {
            name: 'Gabriel Yan '
    	}
    //模块的导出  name.js
    	module.exports = nameObj
    //模块的引用
    	const nameObj = require('./name.js')
    

Node.js中Common.js规范的使用有三种类型:

  1. 内置模块(内置模块指的是挂载在Node.js全局对象身上的api )global(全局)

    格式   const/let/var 变量名 = require( 模块名称 )
    
  2. 自定义模块

    • 模块的定义

      //举例
      const student = {
          id: 1,
          name: 'Gabriel Yan'
      }
      const fn = function(){}
      
    • 模块的导出

      // 第一种导出
      module.exports = student // 安全性不高  默认导出一个
      //第二种导出
      module.exports = { //批量导出,按需引用
          student,fn
      }
      
    1. 模块的引用

      // 这种引用对应第一种导出
      const student = require('./xxx.js')
      // 这种引用对应第二种导出
      const { student , fn } = require( './xxx.js ' )
      

    注意:

    在自定义模块引用时,require一定要写好路径

  3. 第三方模块

    1. 别人已经封装好的模块
    2. 这个模块具备一些特定的功能
    3. 这些模块存放在  www.npmjs.com 这个网站中
    这些模块的文档也记录在内
    
    格式: var/let/const 变量名 = require( 模块名称 )
    
      总结: 
          第一步,使用npm/cnpm 安装
          第二部,在文件中引入
          第三部,在www.npmjs.com这个网站中找到这个模块的文档,根据文档来使用
    

思考: 我们是不是能将自己封装的自定义模块变成第三方模块?

分析:

第三方模块具备的特性

1. 有一定的功能
2. 存储在: http://www.npmjs.com 中

解决: 自定义模块的上传http://www.npmjs.com

  1. 创建package.json文件

    $ npm init -y
    
  2. 在http://www.npmjs.com 这个网站注册一个账号

    注意:第一次登陆会发送一个邮件给你的邮箱( 这个发送是手动的 ),然后大家登陆邮箱激活

  3. 检查你的电脑的源是不是npm源

    $ nrm ls
    

    如果是,就不会理会

    如果不是,那么切换到npm源

  4. 命令行登录npmjs仓库

    $ npm adduser
    
  5. 创建模块并导出模块

  6. 查看你的包名称是否已经被使用

  7. 发布包

    $ npm publish
    

易错点:

  1. 邮箱没有激活 ( 最多的 )
  2. npm源没有切换
  3. 整个电脑的npm就不能使用

-D === --save-dev

//举例

cnpm  i  jquery -D  === cnpm i jquery --save-dev  // 开发环境下使用
cnpm i jquery -S ===  cnpm i jquery --save // 生产环境下使用

Node.js跨域

跨域:

1.前端跨域

  • jsonp ​
  • 反向代理( 创建一个虚拟后端服务器,让这个后端服务器帮助我们请求数据)

2.后端跨域( node php java)

  1. 设置请求头

  2. 使用第三方的中间件( cors )

    中间件: 就是具有一定功能的一个函数

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值