1. nodejs基础 ,api,前后端分离-耦合概念,后端爬虫

最新推荐文章于 2022-07-01 16:42:57 发布
最新推荐文章于 2022-07-01 16:42:57 发布
阅读量262 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/newstw/article/details/89362994
版权

1. vs code 里面如何切换自定义终端？

2. 浏览器 vs node

异：

  1. node里面没有 BOM DOM
  2. node多了很多自带的api
    同：
  3. 都是chrome v8
  4. 都支持js
  5. 都支持 ECMA Script

3. 需求： sum这个方法， 我想三个参数 ， 计算三个参数值？

  1. Node.js 命令行有时候用起来不方便
  2. 解决： 我们使用文件 .js

Node.js命令行退出

  1. two times ctrl+c

Node.js文件运行

node 文件名称（后缀可以不要）
键盘上下键可以前进和回退命令

自动监听（自动更新， 自动刷新）Node.js文件的更新和变化（ 工具 nodemon supervisor）

使用淘宝镜像

  1. 工具安装
    cnpm i nodemon -g (i==> install g ==> global) 推荐
    cnpm i supervisor -g
  2. 使用：
    nodemon 文件名称
    supervisor 文件名称
  3. 注意事项：
    问题： supervisor 会出现死循环 ？
    分析： 内容一致在改变
    解决： vs code 开了自动保存

nvm 使用

  1. 安装：
    nvm install vsersion
    举例： nvm install v10.8.0 || nvm install 10.8.0 || nvm install latest(最新版本)
  2. 切换Node.js版本
    nvm use vsersion
    举例： nvm install v10.8.0
  3. 查看当前电脑中 Node.js的所有版本
    nvm list

前端模块化（面试题）

  1. CMD ( sea.js )
  2. AMD ( require.js )
  3. Common.js
  4. es6模块化
    CMD 和 AMD
    define 定义模块
    Node.js中使用了Common.js规范（三类）
    1. 内置的
      Node.js内置了很多的模块
      fs（文件系统）
      path( 磁盘路径 )
      http( 通信 )
      使用;
      1. 导入
        const 变量名称 = require(‘模块名称’)
      2. 使用模块的api
    2. 第三方的
      Node.js中第三方模块如何使用？https://www.npmjs.com/
      1. 安装
        1. 初始化生成 package.json
          1. 安装对应的包
            举例： npm i request -g/-D/-S
            名词说明：
            -g -global 全局
            -D / --save-dev 开发环境
            -S / -save 生产环境
          2. 导入
            request 用来做数据请求的
          3. 使用
            去看文档（www.npmjs.com)
    3. 自定义的
      Node.js自定义模块步骤：
      1. 定义
        对象 函数 字符串 。。。
        const age = {
        name: ‘Yyb’,
        age: 16
        }
      2. 导出
        module.exports || exports
        1.module.exports = {
        age: age.age,
        name: age.name
        }（封装）
        2.exports.age = age
      3. 使用
        const 变量名称 = require(‘模块名称’)
        const age = require(‘age’) X 理由： age不是内置模块或是第三方模块
        const age = require(’./age.js’)
        console.log( age.name );
        console.log( age.age );
      4. 扩展
        需求： 安全性考虑 封装一下下 {}
        自定义发布一个包（带有一定功能，），别人可以随意下载， 使用
        操作流程
        1.创建一个文件夹
        2.创建pageage.json
        Yarn init / npm init /cnpm init
        快速创建 npm init -y / yarn init -y /cnpm init -y
        3.注册npm仓库
        www.npmjs.com注册一个账号
        命令行执行 npm adduser(必须确保你当前的源是npmjs,使用nrm来切换源)
        4.上传包
        npm publish
        注意：
        1.npm源切换 nrm. npm i nrm -g
        2.注意：npm账号需要邮箱认证

前端的环境

  1. 开发环境
  2. 生产环境
  3. 测试环境
  4. 预发布环境
  5. 上线环境

问题： Node.js中请求数据， 需要跨域吗？

不需要跨域的
同源策略

  1. 为什么会出现跨域
    开发中会有不同的域名和端口等出现?我们需要去获取他们的内容
  2. 浏览器如何组织跨域
    浏览器具有安全策略 —》 同源策略实现
  3. 跨域的范围是？
    浏览器

问题： 为什么要有 package.json？

分析： 帮助我们记录第三方的内容
即使没有node_modules也可以下载

自定义模块的发布

package.json —> 当前项目的依赖包 兵哥
package-lock.json —> 当前项目依赖包的具体信息 兵哥的具体信息
Node.js是单线程
​ 主线程
​ 异步队列： Node.js中异步任务， 放在异步队列
​ 注意： 优先执行主线程中任务， 主线程任务结束后， 再去执行异步队列中任务

http

  1. 使用Node.js实现一个web服务器
  2. Node.js中模块的api很多时候可以连缀（链式调用）
  3. http
    1. createServer 创建一个web静态服务器
    2. listen 是用来监听当前服务器
    3. 名词解释
      1. port 端口
      2. hostname: 域名
      3. request 请求， Node.js请求谁
      4. response 回应]
      5. data 数据
      6. encoding； 编码方式 utf8 默认utf8
  4. write(data,encoding) 给前台发送一个内容
  5. end() 发送已经结束了
  6. 坑
    中文乱码问题
    解决方案一：
response.writeHead(200,{
'Content-Type': 'text/html; charset=UTF-8'
})

解决方案2：

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

例：

const http = require('http');
const port = 8090;
const hostname = 'localhost' // 127.0.0.1
// 格式： http.createServer(callback).listen(prot,hostname,callback)
http.createServer(function(request,response){
// response.writeHead(statusCode,options)
response.writeHead(200,{
'Content-Type': 'text/html'
})
response.write('<head> <meta charset="UTF-8"> </head>')
response.write('<h1> yanyabing : 最帅的</h1>');
response.end()
}).listen(port,hostname,function(){
//在后端控制台输出
console.log('====================================');
console.log(`服务器运行在： https: //${hostname}:${port}`);
console.log('====================================');
})

url

url:
用来做 浏览器 地址 解析的
api:
parse : String --> Object
format: Object —> String
resolve: url拼接
完整的url构成：
https: // www.web-yyb.top: 8080 / vue / index.html ? a=1&b=2#a=10
协议： https
域名： www.web-yyb.top
端口： 8080
路径： www.web-yyb.top: 8080 / vue / index.html
查找字符串： a=1&b=2
哈希： #a=10

例：

const url = require('url')
const urlStr = 
'https://www.web-yyb.top:8080/vue/index.html?a=1&b=2#a=10'
const urlObj = url.parse(urlStr)
const obj = {
  protocol: 'https:',
  slashes: true,
  auth: null,
  host: 'www.web-yyb.top:8080',
  port: '8080',
  hostname: 'www.web-yyb.top',
  hash: '#a=10',
  search: '?a=1&b=2',
  query: 'a=1&b=2',
  pathname: '/vue/index.html',
  path: '/vue/index.html?a=1&b=2',
  href: 'https://www.web-yyb.top:8080/vue/index.html?a=1&b=2#a=10' }
/* 
  Url {
  protocol: 'https:',
  slashes: null,
  auth: null,
  host: null,
  port: null,
  hostname: null,
  hash: '#a=10',
  search: '?%20a=1&b=2',
  query: '%20a=1&b=2',
  pathname:
   '%20//%20www.web-yyb.top:%208080%20/%20vue%20/%20index.html%20',
  path:
   
'%20//%20www.web-yyb.top:%208080%20/%20vue%20/%20index.html%20?%20a=1&b=2',
  href:
   
'https:%20//%20www.web-yyb.top:%208080%20/%20vue%20/%20index.html%20?%20a=1&b=2#a=10' }
*/
// format
const str = url.format(obj)
console.log( urlObj )
console.log('====================================');
console.log(str);
console.log('====================================');
// resolve
/* https://www.web-yyb.top/a/index.html 
https://www.web-yyb.top/a/demo.html  
https://www.web-yyb.top/b/demo.html  
*/
const astr = 'https://www.web-yyb.top/a/index.html ' 
const bstr = url.resolve(astr,'b/demo.html') 
//https://www.web-yyb.top/a/b/demo.html 
const cstr = url.resolve(astr,'../b/demo.html') 
//https://www.web-yyb.top/a/b/demo.html 
console.log('====================================');
console.log(bstr);
console.log(cstr);
console.log('====================================');

querystring

qs:
1.干什么：
进行string 和 object 的格式
2.功能：
类似JSON.parse || JSON.stringify
3.api:
parse
stringify Object —> String
escape
unescape
名词
encoding 编码
unencoding 解码
escape 中文编码
unescape 中文解码

例：

const qs = require('querystring')
const qsObj = {
  protocol: 'https:',
  slashes: true,
  auth: null,
  host: 'www.web-yyb.top:8080',
  port: '8080',
  hostname: 'www.web-yyb.top',
  hash: '#a=10',
  search: '?a=1&b=2',
  query: 'a=1&b=2',
  pathname: '/vue/index.html',
  path: '/vue/index.html?a=1&b=2',
  href: 'https://www.web-yyb.top:8080/vue/index.html?a=1&b=2#a=10' 
}
//1. stringify
const qsStr = qs.stringify(qsObj)
// console.log( qsStr )\
// 2. parse
const obj = qs.parse(qsStr)
// console.log( obj )
// 3. escape
const cityUrl = 'https://www.web-yyb.top?city=北京'
const escapeStr = qs.escape(cityUrl)
console.log( escapeStr )
//4. unescape
const cityEsUrl = 
'https%3A%2F%2Fwww.web-yyb.top%3Fcity%3D%E5%8C%97%E4%BA%AC'
console.log( qs.unescape(cityEsUrl) )

http-get

get方法
http
格式：
http.get(url,callback)
on
原生js如何触发事件
DOM.onclick = function(){}
名词解释：
DOM: 节点
on: 添加事件的形式
click: 事件类型
function(){}: 事件处理程序
chunk: 分片
try {} catch{} 高级编程 错误信息捕获
例：

const http = require('http')
http.get('http://api.douban.com/v2/movie/in_theaters',function( res ){
  //错误信息的报出
  const { statusCode } = res;
  const contentType = res.headers['content-type'];
  let error;
  if (statusCode !== 200) {
    error = new Error('Request Failed.\n' +
                      `Status Code: ${statusCode}`);
  } else if (!/^application\/json/.test(contentType)) {
    error = new Error('Invalid content-type.\n' +
                      `Expected application/json but received 
${contentType}`);
  }
  if (error) {
    console.error(error.message);
    // Consume response data to free up memory
    res.resume();
    return;
  }
  //数据处理
  res.setEncoding('utf8'); // 数据的编码格式
  let data = '' //保存数据
  // res.on() // 事件执行
  res.on('data',(chunk)=>{
    data+=chunk;  //将数据流累加起来
  })
  res.on('end',()=>{
    try{
      console.log( data )
    }catch(e){
      console.error( e.message )
    }
  })
}).on('error',(e)=>{
  console.error(`Got error: ${e.message}`);
})

##http-spider
后端爬虫：
数据抓取 —》 数据清洗 —》 数据格式整理—》 发送前台(web服务器)
例：

const http = require('http');
const cheerio = require('cheerio')
const port = 8090
const options = {
hostname: 'jx.1000phone.net',
port: 80,
path: '/teacher.php/Class/classDetail/param/rqiWlsefmajGmqJhXXWhl3ZiYmho',
method: 'GET',
headers: {
'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3',
'Accept-Encoding': 'gzip, deflate',
'Accept-Language': 'zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
'Cookie': 'PHPSESSID=ST-108933-uAIuYe-dtgk1qgGt984ihvl53Lk-izm5ejd5j1npj2pjc7i3v4z',
'Host': 'jx.1000phone.net',
'Pragma': 'no-cache',
'Referer': 'http://jx.1000phone.net/teacher.php/Class/index',
'Upgrade-Insecure-Requests': 1,
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36',
'Content-Type': 'text/html; charset=utf-8',
'Content-Length': ''
}
}
http.createServer((request,response)=>{
response.writeHead(200,{
'Content-Type': 'text/html;charset=UTF-8'
})
const req = http.get(options,( res )=>{
//错误信息的报出
const { statusCode } = res;
const contentType = res.headers['content-type'];
let error;
if (statusCode !== 200) {
error = new Error('Request Failed.\n' +
`Status Code: ${statusCode}`);
}
if (error) {
// console.error(error.message);
// Consume response data to free up memory
res.resume();
return;
}
//数据处理
res.setEncoding('utf8'); // 数据的编码格式
let data = '' //保存数据
// res.on() // 事件执行
res.on('data',(chunk)=>{
data+=chunk; //将数据流累加起来
})
res.on('end',()=>{
try{
console.log( data )//拿到了整个网页 --》 数据清洗 --> 工具 --》 cheerio
const $ = cheerio.load(data)
$('td.student a').each(function(i,v){
response.write(`<h3> ${ $(this).text() } </h3>`)
})
response.end()
}catch(e){
// console.error( e.message )
}
})
}).on('error',(err)=>{
// console.log( 'err',err )
})
}).listen(port,()=>{
console.log('服务器运行在： http://localhost:8090')
})
syhh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于NodeJS的前后端分离的思考与实践（一）全栈式开发
10-25
个话题最近被讨论得比较多，阿里有些BU也在进行一些尝试。讨论了很久之后，我们团队决定探索一套基于NodeJS的前后端分离方案，过程中有一些不断变化的认识以及思考，记录在这里，也希望看到的同学参与讨论，帮我们完善。
node.js.1
weixin_44889992的博客
04-08 314
vs code 里面如何切换自定义终端？ 命令面板（ctrl+shift+p）中，输入select选择第一条 之后选择目标shell 浏览器 vs node 异： node里面没有 BOM DOM node多了很多自带的api 同： 都是chrome v8 都支持js 都支持 ECMA Script 需求： sum这个方法， 我想三个参数 ， 计算三个参数值？ No...
基于NodeJS进行前后端分离
weixin_34249678的博客
07-21 161
1.什么是前后端分离 传统的SPA模式：所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的，前端只管展现。 从某种意义上来说，SPA确实做到了前后端分离，但这种方式存在两个问题： WEB服务中，SPA类占的比例很少。很多场景下还有同步/同步+异步混合的模式，SPA不能作为一种通用的解决方案。 现阶段的SPA开发模式，接口通常是按照展现逻辑来提供的，而且为了...
Nodeway--基于node.js的轻量级前后端分离框架
热门推荐
xingkong0128的专栏
12-16 1万+
一、 背景 什么是前后端分离？ 目前，大家一致认同的前后端分离的例子就是SPA(Single-pageapplication)，所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的，前端只管展现。   前端：负责View和Controller层。 后端：只负责Model层，业务处理/数据等。
基于NODEJS的前后端项目分离实践
jxiao2008的博客
06-16 1755
前后端分离项目实践   一、前言      对nodejs有了些准备，希望多了解些后端知识，恰逢公司项目调整，分析了前后端分离的优劣，也做了一个完整的demo演示，同事都觉得靠谱，用了两个版本的时间，将公司主站项目用nodejs实现了前后端分离，在此和大家分享下，以求共同进步。案例参见 www.upopen.cn   二、为何做分离      1、开发体系：架构体系决定了后端重于前...
基于vue2+Mysql+nodejs+express+element-ui的前后端分离图书管理系统源码.zip
07-05
基于vue2+Mysql+nodejs+express+element-ui的前后端分离图书管理系统 使用步骤: 本地运行方法  1.新建一个名为books_manage_system的数据库  2.将node目录下books_manage_system.sql文件导入到该数据库...
nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)
01-20
标题中的“nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)”指的是使用Node.js的Express框架与Vue.js的CLI工具来创建一个支持跨域的前后端分离应用。这种模式在现代Web开发中非常常见，能够使前端...
基于 Node.js 实现前后端分离
10-22
【基于 Node.js 实现前后端分离】是一种现代Web开发模式，旨在解决传统Web开发中前/后端紧密耦合导致的问题。随着技术的发展，前后端分离已成为提高开发效率和优化用户体验的重要策略。在这个过程中，Node.js，一种...
基于NodeJs+Express+Mysql前后端分离宠物用品购物网站设计
最新发布
11-01
采用基于nodejs的环境和express框架开发一个前后端分离的宠物购物网站，一共包括2个身份包括管理员和用户。前台用户可以注册账号和登录，可以分类查询所有的宠物信息，对于自己满意的宠物可以加入购物车，提交订单...
基于NodeJS的前后端分离的思考与实践（三）轻量级的接口配置建模框架
01-02
前言 使用Node做前后端分离的开发模式带来了一些性能及开发流程上的优势, 但同时也面临不少挑战。在淘宝复杂的业务及技术架构下，后端必须依赖Java搭建基础架构，同时提供相关业务接口供前端使用。Node在整个环境中最重要的工作之一就是代理这些业务接口，以方便前端(Node端和浏览器端)整合数据做页面渲染。如何做好代理工作，使得前后端开发分离之后，仍然可以在流程上无缝衔接，是我们需要考虑的问题。本文将就该问题做相关探讨，并提出解决方案。 由于后端提供的接口方式可能多种多样，同时开发人员在编写Node端代码访问这些接口的方式也有可能多种多样。如果我们在接口访问方式及使用上不做统一架构处理，则会带
详解从NodeJS搭建中间层再谈前后端分离
10-17
主要介绍了详解从NodeJS搭建中间层再谈前后端分离，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
B2C模式的电子商城源代码 ,后端基于springboot 前端基于nodejs 实现的前后端分离架构项目
06-27
B2C模式的电子商城 ，后端基于springboot 前端基于nodejs 实现的前后端分离架构的项目。国内少有的类似源代码资源
NodeJS 知识点整理
CSDN前端知识共享
11-08 697
NodeJS 知识点整理 项目源码地址： https://github.com/yang657850144/nodejs-demo/edit/master/README.md 目录 1.模块缓存 2.循环依赖 3.文件系统 4.引用第三方库 5.process相关 6.debug相关 7.path相关 8.promisify | async/await 9.buffer相关 10.events相...
图解基于node.js实现前后端分离
weixin_33935777的博客
11-23 268
基本介绍首先从一个重要的概念“模板”说起。广义上来说，web中的模板就是填充数据后可以生成文件的页面。严格意义上来说，应该是模板引擎利用特定格式的文件和所提供的数据编译生成页面。模板大致分为前端模板（如ejs）和后端模板（如freemarker）分别在浏览器端和服务器端编译。由于当场有一部分同学对node.js并不是很了解，这里补充一下node.js的相关知识。官网上的给他的...
Node.js 前后端分离（解决同源的第三种方法）
weixin_65257540的博客
04-12 1841
后端负责数据传输和业务逻辑处理，前端负责页面交互，页面效果实现。 代理服务器 解决跨域的第三种方式，给前端一个服务器，通过服务器去访问服务器，就不去出现同源问题，同源问题是浏览器才会触发。 通过脚手架创建两个服务器，前端（frontend）和后端(server)。 具体流程: 1、通过电脑windowspowershell命令行运行（以管理员身份）Set-ExecutionPolicy RemoteSigned，选择全是，然后安装全局npm install express-generator -g
Node.js实现前后端分离
在水一方的博客
04-13 3547
1.在前后端分离的解决方案中，本文介绍的一种方式，， NodeJs作为前端服务器，其实只是远程服务器的代理，Node收到请求后，访问远程接口，将返回的数据返回给前端 安装NodeJs的部分这里不再累述，分离操作如下： 2.前端服务器文件testProxy.js var http=require("http"); var url=require("url"); var fs=re...
Node.js 前后端分离开发新思路
Goals1989的博客
07-01 433
从事 Web 开发的程序员，对于前后端分离模式多半不陌生，这也是目前主流的 Web 开发模式，具体关于前后端分离的模式可以参看文章《你不得不了解的前后端分离原理! 》，在这里写者不进行说明。好了，让我们进入主题 —— Node.js 前后端分离开发新思路\ 在进入新思路之前，我们现需要了解“老思路”是什么？（注意：后面的案例都是以全栈工程师为例，即前后端代码在一起）以一种具体情景为例：小牛是一名全栈工程师，喜欢前端后端全干，前端使用目前主流的 Webpack + React 全家桶（或 Vue 全家桶），后
nodejs开发前后端分离项目
06-06
首先，前后端分离的项目是基于 RESTful API 架构的，前端负责展示数据和用户交互，后端负责处理业务逻辑和数据存储。Node.js 是一种非常适合用于开发 RESTful API 的技术，因为它具有高效的事件驱动和非阻塞式 I/O ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值