合肥做网站排名,工作是套模板做网站,如何做网站英文简历模板,百度描述 网站01.模块化简介
目标
了解模块化概念和好处#xff0c;以及 CommonJS 标准语法导出和导入
讲解 在 Node.js 中每个文件都被当做是一个独立的模块#xff0c;模块内定义的变量和函数都是独立作用域的#xff0c;因为 Node.js 在执行模块代码时#xff0c;将使用如下所示的…01.模块化简介
目标
了解模块化概念和好处以及 CommonJS 标准语法导出和导入
讲解 在 Node.js 中每个文件都被当做是一个独立的模块模块内定义的变量和函数都是独立作用域的因为 Node.js 在执行模块代码时将使用如下所示的函数封装器对其进行封装
而且项目是由多个模块组成的每个模块之间都是独立的而且提高模块代码复用性按需加载独立作用域 但是因为模块内的属性和函数都是私有的如果对外使用需要使用标准语法导出和导入才可以而这个标准叫 CommonJS 标准接下来我们在一个需求中体验下模块化导出和导入语法的使用 需求定义 utils.js 模块封装基地址和求数组总和的函数导入到 index.js 使用查看效果 导出语法 module.exports {对外属性名: 模块内私有变量
}导入语法 const 变量名 require(模块名或路径)
// Node.js 环境内置模块直接写模块名例如fspathhttp
// 自定义模块写模块文件路径例如./utils.js)变量名的值接收的就是目标模块导出的对象 代码实现 utils.js导出 /*** 目标基于 CommonJS 标准语法封装属性和方法并导出*/
const baseURL http://hmajax.itheima.net
const getArraySum arr arr.reduce((sum, item) sum item, 0)// 导出
module.exports {url: baseURL,arraySum: getArraySum
}index.js导入使用 /*** 目标基于 CommonJS 标准语法导入工具属性和方法使用*/
// 导入
const obj require(./utils.js)
console.log(obj)
const result obj.arraySum([5, 1, 2, 3])
console.log(result)小结 Node.js 中什么是模块化? 答案 每个文件都是独立的模块 模块之间如何联系呢? 答案 使用特定语法导出和导入使用 CommonJS 标准规定如何导出和导入模块? 答案 导出module.exports {},导入require(模块名或路径) 模块名/路径如何选择? 答案 内置模块写名字。例如fspathhttp等。自定义模块写模块文件路径例如./utils.js
02.ECMAScript标准-默认导出和导入
目标
掌握 ECMAScript 标准语法中默认导出和导入的使用
讲解 CommonJS 规范是 Node.js 环境中默认的后来官方推出 ECMAScript 标准语法我们接下来在一个需求中体验下这个标准中默认导出和导入的语法要如何使用 需求封装并导出基地址和求数组元素和的函数导入到 index.js 使用查看效果 导出语法 export default {对外属性名: 模块内私有变量
}导入语法 import 变量名 from 模块名或路径变量名的值接收的就是目标模块导出的对象 注意Node.js 默认只支持 CommonJS 标准语法如果想要在当前项目环境下使用 ECMAScript 标准语法请新建 package.json 文件设置 type: ‘module’ 来进行设置 { “type”: module }代码实现 utils.js导出 /*** 目标基于 ECMAScript 标准语法封装属性和方法并默认导出*/
const baseURL http://hmajax.itheima.net
const getArraySum arr arr.reduce((sum, item) sum item, 0)// 默认导出
export default {url: baseURL,arraySum: getArraySum
}index.js导入 /*** 目标基于 ECMAScript 标准语法默认导入工具属性和方法使用*/
// 默认导入
import obj from ./utils.js
console.log(obj)
const result obj.arraySum([10, 20, 30])
console.log(result)小结 ECMAScript 标准规定如何默认导出和导入模块? 答案 导出export default {} 导入import 变量名 from 模块名或路径 如何让 Node.js 切换模块标准为 ECMAScript 答案 运行模块所在文件夹新建 package.json 并设置 {“type”“module”}
03.ECMAScript标准-命名导出和导入
目标
掌握 ECMAScript 标准语法中命名导出和导入的使用
讲解 ECMAScript 标准的语法有很多常用的就是默认和命名导出和导入这节课我们来学习下命名导出和导入的使用 需求封装并导出基地址和数组求和函数导入到 index.js 使用查看效果 命名导出语法 export 修饰定义语句命名导入语法 import { 同名变量 } from 模块名或路径注意同名变量指的是模块内导出的变量名 代码示例 utils.js 导出 /*** 目标基于 ECMAScript 标准语法封装属性和方法并命名导出*/
export const baseURL http://hmajax.itheima.net
export const getArraySum arr arr.reduce((sum, item) sum item, 0) index.js 导入 /*** 目标基于 ECMAScript 标准语法命名导入工具属性和方法使用*/
// 命名导入
import {baseURL, getArraySum} from ./utils.js
console.log(obj)
console.log(baseURL)
console.log(getArraySum)
const result getArraySum([10, 21, 33])
console.log(result)与默认导出如何选择 按需加载使用命名导出和导入全部加载使用默认导出和导入
小结 Node.js 支持哪 2 种模块化标准? 答案 CommonJS 标准语法默认ECMAScript 标准语法 ECMAScript 标准命名导出和导入的语法? 答案 导出export 修饰定义的语句import { 同名变量 } from 模块名或路径 ECMAScript 标准默认导出和导入的语法 答案 导出export default {} 导入import 变量名 from 模块名或路径
04.包的概念
目标
了解 Node.js 环境中包的概念
讲解 包将模块代码其他资料整合成一个文件夹这个文件夹就叫包 包分类 项目包主要用于编写项目和业务逻辑软件包封装工具和方法进行使用 包要求根目录中必须有 package.json 文件记录包的清单信息 包使用在引入一个包文件夹到代码中默认引入的是包文件节下的 index.js 模块文件里导出的对象如果没有 index.js 文件则会引入 package.json 里 main 属性指定的文件模块导出的对象 需求封装数组求和函数的模块封装判断用户名和密码长度函数的模块形成一个软件包并导入到 index.js 中使用查看效果 代码示例 utils/lib 相关代码在素材里准备好了只需要自己在 utils/index.js 统一出口进行导出 /*** 本文件是utils 工具包的唯一出口* 作用把所有工具模块方法集中起来统一向外暴露*/
const { getArraySum } require(./lib/arr.js)
const { checkUser, checkPwd } require(./lib/str.js)// 统一导出所有函数
module.exports {getArraySum,checkUser,checkPwd
} index.js 导入软件包文件夹使用注意这次导入的是包文件夹不是模块文件 /*** 目标导入 utils 软件包使用里面封装的工具函数*/
const obj require(./utils)
console.log(obj)
const result obj.getArraySum([10, 20, 30])
console.log(result)小结 什么是包? 答案 将模块代码其他资料聚合成的文件夹 包分为哪 2 类呢? 答案 项目包编写项目代码的文件夹软件包封装工具和方法供开发者使用 package.json 文件的作用? 答案 记录软件包的名字作者入口文件等信息 导入一个包文件夹的时候导入的是哪个文件? 答案 默认 index.js 文件或者 main 属性指定的文件
05.npm软件包管理器
目标
掌握使用 npm 管理软件包
讲解 npm 简介链接 软件包管理器用于下载和管理 Node.js 环境中的软件包 npm 使用步骤 初始化清单文件 npm init -y 得到 package.json 文件有则跳过此命令 注意 -y 就是所有选项用默认值所在文件夹不要有中文/特殊符号建议英文和数字组成因为 npm 包名限制建议用英文和数字或者下划线中划线 下载软件包npm i 软件包名称 使用软件包 需求使用 npm 下载 dayjs 软件包到本地项目文件夹中引入到 index.js 中格式化日期打印运行观察效果 具体使用流程图
小结 npm 软件包管理器作用 答案 下载软件包以及管理版本 初始化项目清单文件 package.json 命令? 答案 npm init -y 下载软件包的命令 答案 npm i 软件包名字 下载的包会存放在哪里? 答案 当前项目下的 node_modules 中并记录在 package.json 中
06.npm安装所有依赖
目标
掌握 npm 安装所有依赖功能
讲解 我们拿到了一个别人编写的项目但是没有 node_modules项目能否正确运行 不能因为缺少了项目需要的依赖软件包比如要使用 dayjs 和 lodash 但是你项目里没有这个对应的源码项目会报错的 为何没有给我 node_modules 因为每个人在自己的本机使用 npm 下载要比磁盘间传递要快npm 有缓存在本机 如何得到需要的所有依赖软件包呢 直接在项目目录下运行终端命令npm i 即可安装 package.json 里记录的所有包和对应版本到本项目中的 node_modules 需求请在准备好的素材项目中安装项目所有需要的依赖软件包并运行 index.js 代码看是否正常
小结 当前项目中只有 package.json 没有 node_modules 怎么办? 答案 当前项目目录下打开终端执行 npm i 安装所有依赖软件包 为什么 node_modules 不进行传递? 答案 因为用 npm 下载有缓存在本机比磁盘之间传递要快
07.npm全局软件包-nodemon
目标
掌握本地软件包和全局软件包区别体验 nodemon 的使用
讲解 软件包区别 本地软件包当前项目内使用封装属性和方法存在于 node_modules全局软件包本机所有项目使用封装命令和工具存在于系统设置的位置 nodemon 作用替代 node 命令检测代码更改自动重启程序 使用 安装npm i nodemon -g -g 代表安装到全局环境中运行nodemon 待执行的目标 js 文件 需求使用 nodemon 命令来启动素材里准备好的项目然后修改代码保存后观察终端重启应用程序
小结 本地软件包和全局软件包区别? 答案 本地软件包作用在当前项目封装属性和方法全局软件包本地所有项目使用封装命令和工具 nodemon 作用? 答案 替代 node 命令检测代码更改自动重启程序 nodemon 怎么用? 答案 先确保安装 npm i nodemon -g使用 nodemon 执行目标 js 文件
08.Node.js概念和常用命令总结
目标
把上面学的模块化语法包的概念常用命令进行总结
讲解 Node.js 模块化把每个文件当做一个模块独立作用域按需加载使用特定标准语法导出和导入使用 CommonJS 标准一般应用在 Node.js 项目环境中 ECMAScript 标准一般应用在前端工程化项目中 Node.js 包把模块文件代码文件其他资料聚合成一个文件夹就是包 项目包编写项目需求和业务逻辑的文件夹 软件包封装工具和方法进行使用的文件夹一般使用 npm 管理 本地软件包作用在当前项目封装的属性/方法供项目调用编写业务需求全局软件包作用在所有项目一般封装的命令/工具支撑项目运行 Node.js 常用命令 这是一个使用npm时的基本的问题 简单来说 使用命令 --save 或者说不写命令 --save ,都会把信息记录到 dependencies 中 dependencies 中记录的都是项目在运行时需要的文件使用命令 --save-dev 则会把信息记录到 devDependencies 中 devDependencies 中记录的是项目在开发过程中需要使用的一些文件在项目最终运行时是不需要的 也就是说我们开发完成后最终的项目中是不需要这些文件的 小结 安装本地软件包的命令是什么 答案 npm i 软件包名
09.Express快速搭建 Web 服务
目标
基于 express 本地软件包快速搭建 Web 服务
讲解 Express定义链接: 基于 Node.js 平台快速开放极简的 Web 开发框架 概念使用 express 本地软件包快速搭建 Web 服务基于 http 模块 功能开发 Web 服务提供数据接口提供网页资源供浏览器使用 需求基于 express 编写 Web 服务对 get 请求方法和 / 路径监听有人请求返回一段提示字符串 使用 下载 express 本地软件包到项目中 导入 express 创建 Web 服务对象 监听请求方法和请求路径返回一段提示字符串 对其他请求方法和请求路径默认返回 404 提示 监听端口号启动 Web 服务在浏览器请求测试 代码如下 /*** 目标基于 express 本地软件包开发 Web 服务返回资源给请求方*/
// 1. 下载 express 软件包
// 2. 导入并创建 Web 服务对象
const express require(express)
const server express()// 3. 监听请求的方法和请求的资源路径
server.get(/, (req, res) {res.send(你好欢迎使用 Express)
})// 4. 监听任意请求的方法和请求的资源路径
server.all(*, (req, res) {res.status(404)res.send(你要访问的资源路径不存在)
})// 5. 监听端口号启动 Web 服务
server.listen(3000, () {console.log(Web 服务已启动)
})小结 express 软件包作用? 答案 基于 Node.js 快速搭建 Web 服务提供数据接口和网页资源访问
10.案例-获取省份列表接口
目标
基于 express 的 Web 服务编写提供省份列表数据的接口
讲解 需求基于 express开发提供省份列表数据的接口 步骤监听 get 请求方法的 /api/province 路径并读取 province.json 里省份数据返回给请求方 核心代码 // 监听 get 请求方法监听资源路径 /api/province就读取 province.json 省份数据返回
server.get(/api/province, (req, res) {fs.readFile(path.join(__dirname, data/province.json), (err, data) {res.send(data.toString())})
})小结 express 创建的 Web 服务对象如何监听前端的请求方法? 答案 调用与请求方式同名的方法即可参数一传入要监听的请求资源路径命中后才执行后续的回调函数
11.浏览器的同源策略
目标
掌握同源策略的概念和作用以及同源策略对 AJAX 的限制
讲解 同源策略它限制一个源的文档或者加载的 JS 脚本与另外一个源的资源进行交互帮助我们阻隔恶意文档减少被攻击的媒介 例如被钓鱼网站收集信息用 AJAX 发起恶意请求传递转账信息到银行服务器跨站伪造请求攻击 源指的是协议域名端口号的组成 同源网页加载时所在源和 AJAX 请求时的源协议域名端口号全部相同即为同源所以刚刚的例子并不是同源访问他们的域名是不同的 作用浏览器的同源策略保护浏览器中网站的安全限制 AJAX 只能向同源 URL 发起请求
小结 什么是同源策略 答案 限制一个源对另外一个源资源交互 同源策略限制的是? 答案 限制 AJAX 只能访问同源 URL 什么情况下是同源 答案 网页加载时所在的源和 AJAX 请求时的源协议域名端口号全部相同即为同源
12.跨域问题
目标
掌握跨域的概念以及出现跨域的问题
讲解 跨域从一个源的文档/脚本加载另一个源的资源产生了跨域 例如网页文档打开时所在源和 AJAX 访问的源协议域名端口有一个不同就发生了跨域访问 网页出现跨域访问时会在浏览器控制里报错如下 Access to XMLHttpRequest 意思为XHR 链接出了问题从一个源http://localhost:5500 跨域访问 http://localhost:3000 需求在 LiveServer 的 Web 服务启动网页用 AJAX 访问本机 Web 服务提供的省份列表接口体验下跨域问题index.html 代码如下 // 目标请求本机 Web 服务提供的省份列表数据
axios({url: http://localhost:3000/api/province,// method: get
}).then(res {console.log(res)
}).catch(err {console.log(err)
})小结 什么是跨域访问? 答案 网页所在源和 AJAX 请求的源协议域名端口号不完全相同就发生跨域访问
13.跨域问题-解决方案1-CORS
目标
掌握开发环境下跨域问题解决方案 CORS
讲解 目标前后端分离的项目前端和后端不在一个源还要保证数据通信 解决采用 CORS 跨域资源共享一种基于 HTTP 头的机制该机制通过允许服务器标示除了它自己以外的其他源域、协议或端口来访问加载服务器上的资源 思路 服务器端设置 Access-Control-Allow-Origin 响应头字段允许除了它自己以外的源来访问自己的资源前端正常发起 AJAX 请求无需额外操作 步骤 下载 cors 本地软件包导入 cors 函数使用 server.use() 给 Web 服务添加插件功能把 cors 函数调用传入给 Web 服务启动测试 设置响应头代码 // 2. 导入 cors 函数
const cors require(cors)
// 3. 使用 server.use() 给 Web 服务添加插件功能
server.use(cors())小结 为什么要解决跨域问题? 答案 因为前后端分离的项目不在同一个源去开发项目需要保证数据之间通信 跨域问题如何解决? 答案 让后端开启 CORS 跨域资源共享在响应头设置 Access-Control-Allow-Origin: *
14.跨域问题-解决方案2-同源访问
目标
掌握生产环境下跨域问题解决方案同源访问
讲解 目标开发环境用 cors上线部署关闭 cors并采用同源访问方式 做法让后端 Web 服务即可以提供数据接口也可以返回网页资源 好处安全后端的接口不允许非同源来访问 代码express 设置暴露 public 文件夹作为静态资源目录供浏览器直接访问可以访问里面的 html 网页 // 暴露指定的文件夹让前端可以直接拼接路径和资源名字来访问
server.use(express.static(path.join(__dirname, public)))小结 CORS 只适用于什么阶段的项目? 答案 本地开发阶段项目 项目上线如何解决跨域问题? 答案 把前端项目和后端项目部署到同一个源下访问
