npm包管理与跨域解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/YasWestmere/article/details/128057063

==01-npm包管理工具==

npm命令大全	简写	描述
npm init --yes	npm init -y	初始化包,生成package文件
npm install 包名	npm i 包名	下载包到node_module目录(默认下载最新版本)
npm install 包名 -g	npm i 包名 -g	安装全局包
npm install 包名@版本号	npm i 包名@版本号	下载指定版本的包到node_module目录
npm uninstall 包名		删除本地包
npm uninstall 包名 -g		删除全局包
npm install 包名 --save-dev	npm i 包名 --save-d	安装开发依赖包(默认安装都是生产依赖)
npm config set registry https://registry.npm.taobao.org/		切换镜像源
npm config list		查询镜像源
npm -v		查看npm版本
where node		查看node安装目录
where nodecon		查看npm安装目录
npm root -g		查看npm区全局包安装目录
npm list -g --deptch		查看电脑装了哪些全局包
npm install npm -g		更新你电脑的npm版本

`1.npm init -y`原理

1.作用：快速初始化包,创建package.json文件
2.package.json文件 : 项目中用到了哪些依赖包，以及包名、版本号
- 只要你下载了包,这个文件就会记录你下载哪些包，和下载的版本

2.-npm包三个组成部分详解

1.访问npm服务器
2.从npm服务器搜索包
3.搜索到之后,找包的仓库地址
4.下载包到你目录的node_module文件
5.会把包地址放入package.lock.json文件，用于更新提高速度

默认情况下，所有包都会自动下载最新版本.如果想下载指定版本，就可以使用命令

npm i 包名@版本号

3-moment第三方包使用（工作中会用到）

moment中文网：Moment.js 中文网
moment的官网：文档 | Moment.js 中文网
- moment是一个用于格式化时间的包，在实际工作中如果有需要对日期格式做处理的需求，一般会使用这个包

// 目标: 引入moment模块, 格式化时间
// 1. 下载moment (npm i moment)
// 2. 引入moment对象
const moment = require('moment')

// 3. 使用内置的方法格式化日期对象
const date = new Date()
console.log(moment(date).format('YYYY-MM-DD'));

/* 了解：moment多语言设置 */

//设置语言
moment.locale('zh-cn'); 
console.log(moment(date).format('YYYY MMM Do'));
console.log(moment(date).format('L'));
console.log(moment(date).format('LL'));
console.log(moment(date).format('LLL'));
console.log(moment(date).format('LLLL'));

1.3-全局包与本地包

1.本地包: npm i 包名
- 在哪里执行命令，就在哪个文件夹安装
- 只对这个文件夹生效
2.全局包: npm i 包名 -g
- 无论在哪里执行命令，都会装到你的C盘根目录
- 对整个操作系统生效，任何时候都能使用
  - 例如: npm i nodemon -g
3.小经验
- 本地包一般是用于做项目开发的，主要是导入写代码的
- 全局包一般是工具类（像vscode插件一样），主要是为你开发提供工具遍历的
  - nodejs里面的nodemon
  - vue里面的vue/cli

跨域是什么?

答案
- 跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
什么时候会发生跨域?
答案
- 网页地址栏url和ajax请求的url中域名, 协议, 端口, 有一个对应不上就发生了跨域访问

1.2-跨域解决方案： CORS

注意：CORS技术在实际工作中由后端人员来实现，前端不需要做任何事情

CORS :全称cross origin resource share （资源共享）
工作原理： 服务器 在返回响应报文的时候，在响应头中设置一个允许的header
- res.setHeader('Access-Control-Allow-Origin', '*');
  - 这行代码的工作过程：浏览器请求发送了, 服务器也响应了, 但是浏览器发现了跨域访问, 判断是否有`响应头: Access Control Allow Origin' (后端是否允许跨域访问, 如果允许, 浏览器就把数据留下, 否则抛弃掉然后报错)

//1.导入http模块 
const http = require('http')

//2.创建服务器
const app = http.createServer( (req,res)=>{
    if( req.url === '/getList' ){
        //设置允许跨域响应头
        res.setHeader('Access-Control-Allow-Origin', '*');
        //响应json字符串
        res.end('{"name":"张三"}')
    }
} )

//3.开启服务器
app.listen(3000,()=>{
    console.log('服务器启动成功')
})

1.3-案例：使用nodejs搭建代理服务器

1.什么是代理服务器？
- 代理服务器是一个用于帮你转发请求的服务器
  - 相当于中介代理，帮你去做这件事。
2.代理服务器可以解决什么问题？
- 解决跨域问题
  - 我们给别人的服务器发请求的时候，别人服务器设置了跨域限制。就会导致我们无法正常请求数据。
  - 这个时候我们可以搭建一个自己的nodejs服务器去帮我们给别人服务器发送请求（跨域只对浏览器ajax有限制，对nodejs没有限制）
  - 然后我们的nodejs服务器就自己设计一个接口，并设置允许跨域，把别人服务器的数据响应给浏览器。
  - 这样就解决了我们直接请求别人服务器的跨域问题
3.代理服务器工作流程
- （1）页面给代理服务器发请求
- （2）代理服务器给目标服务器发请求
- （3）目标服务器把数据响应给代理服务器
- （4）代理服务器最后把数据响应给页面

nodejs环境中下载

axios npm i axios

nodejs导入axios

npm i axios

axios库既可以在浏览器使用，也可以在服务器使用。它会自动判断当前代码运行环境。

//1.导入http模块 
const http = require('http')

// 导入axios
const axios = require('axios')

//2.创建服务器
const app = http.createServer( (req,res)=>{
    if( req.url === '/getList' ){
        //设置允许跨域响应头
        res.setHeader('Access-Control-Allow-Origin', '*');
        //响应json字符串
        res.end('{"name":"张三"}')
    }else if( req.url === '/getNews' ){
        //(1)代理服务器给 目标服务器 发请求
        /* 小细节，这个then形参不要叫res，否则会和上面node的响应报文res重名 */
        axios.get('http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html').then( result=>{
            //(2)设置允许跨域响应头
            res.setHeader('Access-Control-Allow-Origin', '*');
            //(3)把数据响应给页面 (服务器需要把 对象 转成 JSON 才可以响应)
            res.end( JSON.stringify(result.data) )
            
        } )
    }
} )


//3.开启服务器
app.listen(3000,()=>{
    console.log('服务器启动成功')
})