推进网站集约化建设的作用,做网站手机验证收费吗,北京大型网站建设,株洲高端网站建设本篇目标
能够搭建 Node 运行环境掌握 NodeJS 程序的运行方法理解模块化开发理解系统模块和第三方模块理解package.json文件作用
1.Node 开发概述
1.1为什么要学习服务器端开发技术
前端人员为什么要学习服务器端开发技术#xff1f;
能够和后端程序员更加紧密的配合网站…
本篇目标
能够搭建 Node 运行环境掌握 NodeJS 程序的运行方法理解模块化开发理解系统模块和第三方模块理解package.json文件作用
1.Node 开发概述
1.1为什么要学习服务器端开发技术
前端人员为什么要学习服务器端开发技术
能够和后端程序员更加紧密的配合网站业务逻辑前置学习前端技术需要后端技术支撑Ajax扩宽知识视野能够站在更高的角度审视整个项目
1.2服务器端开发做什么
实现网站业务员逻辑数据的增删改查
1.3为什么选择Node作为服务器技术
使用熟悉的js语法开发后端技术很多一线城市公司的需求生态系统活跃有大量开源库可以使用前端开发工具大多基于Node开发
1.4Node是什么
Node官网
Node中文网
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时运行环境如浏览器也是js的运行环境Node 也是JS的运行环境但是将JS代码的应用场景扩展到了服务器端
2.Node运行环境搭建
2.1安装
打开 Node官网 如果不是你想要的版本点击页面上的“DOWNLOADS” 链接打开下载页面 下载完成之后双击安装程序 下面以截图的方式展现安装过程基本一路默认即可需要注意的是安装目录不能是中文 安装过程 注意安装完成后桌面上并没有什么快捷方式因为Node仅仅是一个JS的执行环境
使用Node需要用到命令行工具
如何测试Node是否安装成功呢
打开命令行工具这里可以使用传统的 cmd 工具也可以使用win10中的 powershell
我们这里使用后者
按下键盘上的 windowsS 键输入 powershell 会搜索到powershell 工具 或者在任意位置比如桌面按下 shift 键同时按下鼠标右键 也会显示 powershell 工具 打开命令行后输入如下命令
node -v如果能够显示版本号就表明node安装成功 2.2环境安装失败解决办法
2.2.1 错误代号 2502/2503
表示当前登录系统的用户权限不足。
解决方法
以管理员身份运行 powershell 工具属于运行安装包命令msiexec /package node安装包位置如我安装包在如下位置 则输入如下命令进行安装 2.2.2 环境变量问题
在 powershell 中输入 node -v 时会提示 node 不是可识别的命令类似的错误信息原因在于没有将node可执行程序路径添加到环境变量中
环境变量添加方法这里不再演示
3. Node 入门
3.1 Node.js 组成
JavaScript 由三部分组成ECMAScriptDOMBOMNode.js是由ECMAScript及Node 环境提供的一些附加API组成的包括文件、网络、路径等等一些更加强大的 API 3.2 基础语法和运行
首先所有前面学习过的 ECMAScript 语法在Node中都可以使用包括ES6的语法
3.2.1 运行node程序
那么在Node环境下该如何执行我们的JS代码呢
按照如下步骤我们开始第一个node程序的编写和执行 打开任意你熟悉的开发工具如sublime、vs code或者记事本 新建文件 hello.js注意这里的文件后缀名是 .js 而不是 .html 编写如下测试代码 let ary [12, 3, 4, 5]
ary.forEach(item console.log(item))找到 hello.js 文件的位置然后按下 shift 键的同事点击鼠标右键选择“在此处打开powershell 窗口” 在命令行中输入如下命令
node hello.js 敲击回车键后就可以执行 hello.js 中的代码了
3.2.2 总结
通过上面代码的编写和执行我们总结如下几点
node 文件的后缀名都是.js以前的学习中都是将js文件引入到html中以运行html文件的方式执行js代码但node是服务器技术在node技术中不存在 dom 和 bom所以运行方式与以前是不一样的运行node程序的方式是使用 node 命令加上文件名称的方式除了在命令行中运行node程序的方式外很多开发工具如vs code内部也可以运行node程序
3.3 global
以前学习过console 是 window 的全局对象但是在 node 中global 才是全局对象
Node中全局对象下有以下方法可以在任何地方使用global可以省略
console.log() 在控制台中输出setTimeout() 设置超时定时器clearTimeout() 清除超时时定时器setInterval() 设置间歇定时器clearInterval() 清除间歇定时器
新建一个 global.js 文件编写下面代
global.setTimeout(() {console.log(timeout)
}, 2000);运行 global.js 文件进行测试
证明上面的这些API确实是全局对象 global 中的
4.模块化开发
4.1 现有的弊端
在我们不算长的js代码编写经历中可能体会到或者体会不到js开发有如下弊端
文件依赖文件依赖不清楚需要人为的去分析命名冲突两个js文件中可能存在同名的变量或者文件会出现后面文件覆盖掉前面文件的问题 举例说明
4.2 软件中的模块化开发
一个功能就是一个模块多个模块可以组成完整应用抽离一个模块不会影响其他功能的运行 4.3 Node 中的模块化开发规范
那么到底如何做到模块化开发呢
Node.js规定一个JavaScript文件就是一个模块模块内部定义的变量和函数默认情况下在外部无法得到模块内部可以使用exports对象进行成员导出 使用require方法导入其他模块。 注意这里仅仅是Node中的模块化开发规范ES6也规定了自己的模块化开发规范
代码演示
新建 m.js编写如下代码
let name李白
var sum(a,b)ab
exports.namename
exports.sumsum新建 n.js编写如下代码
const mrequire(./m.js)
console.log(m.dd)
console.log(m.ss(4,5))运行 n.js 可以看到结果
小编解惑
需要注意如下几点
在n.js 中引入 m.js 时可以省略后面的.js引入 m.js 时需要使用如下领“./m.js”m.js中exports 后面的属性名称可以使用任何名称
4.4 Node 中两种模块成员导出方法对比
exports.namename
module.exports.namename上面案例用到了 exports.属性属性值 的方式进行模块成员导出
还可以使用 module.exports.属性属性值 的方式进行模块成员导出
总结
exports是module.exports的别名(地址引用关系)导出对象最终以module.exports为准
下面证明这个结论
比如在m.js 中编写如下代码
let name李白
let age20
exports.namename
module.exports.ageage在 n.js 中编写下面代码
const mrequire(./m.js)
console.log(m)输出结果
{ name: 李白, age: 20 }课件exports 与 module.exports 确实是一个地址也就说最后修改的都是 module.exports
再次修改 m.js
let name李白
let age20
module.exports.nameage
exports.namename
再次运行 n.js
{ name: 李白 }在 exports 和 module.exports 中都设置了name属性但一个将值设置成了 age 成员一个设置成了 name 成员最后发现还是以 module.exports 为准
这就证明了上面的结论
5.系统模块
5.1 什么是系统模块
Node运行环境提供的API. 因为这些API都是以模块化的方式进行开发的, 所以我们又称Node运行环境提供的API为系统模块
小编解惑
在前面我们学了很多JS的API如 querySelector、getElementById、offsetLeft 等这些都是浏览器提供的跟Dom或者Bom相关的功能只不过这些API都是没有任何关系的分散的。
Node 中也提供了很多的API但是将这些API根据烈性存放在不同的模块中如文件模块中就包含了很多能够操作磁盘文件的API
所以我们可以总结如下
所谓模块化就是将相关API根据类型划分存放到不同的文件中系统模块就是 Node 预先已经定义好的一些API的集合除了系统模块开发者还可以开发第三方模块其他开发者都可以使用如我们前面自己定义的m.js也是一个第三方模块 下面通过几个系统模块的讲解掌握 node 中代码编写的基本规则以及模块引入和使用的方法
5.2 文件操作
Node.js中文手册
5.2.1 读取文件
语法
fs.readFile(path[, options], callback)先看案例
const fsrequire(fs)
fs.readFile(m.js,utf8,(err,data){console.log(err)console.log(data)
})小编解惑
系统模块的引入方式也是使用 require模块名称要使用引号包含起来readFile是一个异步方法所以需要回调函数接收读取结果回调函数中err 获取读取中的错误信息如果读取过程中没有出现错误则结果为nulldata 为读取的文件内容
所以一般在处理读取的文件之前先判断err 的值
const fs require(fs)
fs.readFile(m1.js, utf8, (err, data) {if (err) throw err;console.log(data)
})5.2.2 写入文件
语法
fs.writeFile(file, data[, options], callback)案例
const fs require(fs)
fs.writeFile(./demo.txt, 说点什么呢, err {if (err) throw err;console.log(文件写入成功)
})小编解惑
回调函数只有一个参数 err
5.3 路径操作
5.3.1 路径拼接
语法
path.join([...paths])使用平台特定的分隔符作为定界符将所有给定的 path 片段连接在一起然后规范化生成的路径。
小编解惑
因为不同平台的路径分隔符不统一为了防止将路径分隔符写死影响了程序的跨平台特性所以需要使用路径拼接
案例
const pathrequire(path)
let respath.join(public,static,images,time.jpg)
console.log(res)windows 平台运行结果
public\static\images\time.jpglinux 平台运行结果
public/static/images/time.jpg5.3.2 使用相对路径还是绝对路径
大多数情况下使用绝对路径因为相对路径有时候相对的是命令行工具的当前工作目录在读取文件或者设置文件路径时都会选择绝对路径使用__dirname获取当前文件所在的绝对路径
代码演示
新建文件编写下代码
const fsrequire(fs)
fs.readFile(m.js,utf8,(err,data){if(err) throw errconsole.log(data)
}) 在此文件所在目录中打开命令行工具并运行此文件发现没有问题
若在命令行工具中使用如下命令向上返回一级目录
cd ..再次执行命令 所以我们需要在代码中根据当前编写的文件路径获取绝对路径然后将文件路径拼接成绝对路径就没问题了 小编解惑
命令行工具目录就是你打开命令行工具时的目录
如你在桌面上打开了命令行工具那么目录就是 如果在D盘根目录下打开了命令函工具那么目录就是 但是在代码编写时我们其实希望以当前正在编写的文件为基础作为相对路径
6. 第三方模块
别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中所以又名包。
第三方模块有两种存在形式
以js文件的形式存在提供实现项目具体功能的API接口此种模块多为本地安装以命令行工具形式存在辅助项目开发此种模块多为全局安装
6.1 如何获取第三方模块
https://www.npmjs.com/
开发者将开发好的第三方模块上传到上面网站其它开发者可以从上面下载
下载方式为命令行方式下载
下面是下载和卸载第三方模块的基本语法
下载npm install 模块名称卸载npm unintall package 模块名称
根据模块的作用分为全局安装和本地安装
本地安装模块被下载到命令行工具所在目录下只能当前项目使用全局安装模块被下载全局目录下所有项目都可以使用
6.2 安装演示
6.2.1 本地安装
npm install jquery安装完成后会在当前目录下创建 node_modules 目录
卸载 npm uninstall jquery6.2.2 全局安装
以 nodemon 模块为例
nodemon是一个命令行工具用以辅助项目开发。 在Node.js中每次修改文件都要在命令行工具中重新执行该文件非常繁琐。
安装
npm install nodemon -g卸载
npm uninstall nodemon -g6.2.3 安装慢怎么办
因为 npmjs.com 的服务器在国外所有有时候下载速度很慢或者总是断开
解决方案就是更换下载源最好是国内的下载源
解决方案有两个
安装 nrm通过nrm更换下载源更换之后仍然使用 npm 命令安装模块安装 cnpm以后通过cnpm 安装安装后使用 cnpm 安装模块
6.2.3.1 nrm
通过安装 nrm 的方式可以选择和切换下载源
使用步骤
使用npm install nrm –g 下载它查询可用下载地址列表 nrm ls切换npm下载地址 nrm use 下载地址名称下载模块 npm install 模块名称
小编解惑
在镜像源中cnpm 和 taobao 其实是一样的所以选择 taobao 还是 cnpm 都可以 6.3.2.2 cnpm
除了将下载地址切换为 cnpm 外还可以直接安装 cnpm
使用 npm 安装 cnpm同事将下载源更换为taobao
npm install -g cnpm --registryhttps://registry.npm.taobao.org安装成功后使用 cnpm 命令安装第三方模块如 cnpm install jquery说明cnpm 只是基于npm 的一个小公举
6.3 yarn
上面学习的 npm 是基于node.js 的一个包管理工具除此之外还有yarn现在也非常流行
yarn 是现在非常流行的一个基于node.js的包管理工具与 npm 可以说是双雄争霸
注意yarn 与 cnpm 是不同的
6.3.1 yarn 安装
yarn安装
除了下载安装包外还可以从npm 中安装yarn
下面使用 npm 包安装 yarn虽然yarn 是与npm 竞争关系但是npm 还是和开放的允许安装 yarn npm install yarn -g执行下面命令查询yarn命令列表
yarh -h查询 yarn 版本
yarn -v6.3.2 yarn 安装和模块
新建一个项目然后打开命令行工具执行如下命令
yarn add jquery删除模块
yarn remove jquery小编解惑
一个项目中不要同事使用npm 和 yarn 进行包管理npm 和 yarn 的能力我们仅仅使用了万分之一更多功能后面再讲
7. package.json 文件
7.1 node_modules 的问题
我们发现当使用 npm 安装模块时会创建 node_modules 目录此目录中存储下载的模块及其依赖的模块
这个目录中的文件存在两个问题
文件夹以及文件过多过碎当将项目整体拷贝给别人时传输速度很慢事实上node项目的体积主要就是node_modules复杂的模块依赖关系需要被记录确保模块的版本和当前保持一致否则会导致当前项目运行报错
7.2 package.json 解决问题
在个项目拷贝给他人时删除 node_modules他人再使用 nmp 命令进行恢复安装
这就需要一个文件能够记录当前项目都使用了哪些模块这个文件就是 package.json
创建package.json
默认情况下是没有此文件的可以使用命令生成此文件
新建项目然后在此项目下打开命令行工具运行如下命令
npm init -ypackage.json 文件内容如下
{name: package_demo,version: 1.0.0,description: ,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1},keywords: [],author: ,license: ISC
}
安装模块 npm install debug needle观察 package.json 文件变化 删除node_modules
将项目拷贝给别人时直接删除 node_modules 目录即可
恢复安装
运行如下命令即可根据package.json 中的记录恢复安装
npm install7.3 项目依赖和开发依赖
项目依赖 在项目的开发阶段和线上运营阶段都需要依赖的第三方包称为项目依赖使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中 开发依赖 在项目的开发阶段需要依赖线上运营阶段不需要依赖的第三方包称为开发依赖使用npm install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中
案例演示
使用如下命令安装开发依赖包gulp
npm install gulp --save-dev查看package.json 删除 node_modules 目录
使用如下命令恢复项目依赖安装 npm install --production查看 node_modules 中的文件变化
再次删除 node_modules然后使用如下命令恢复开发依赖安装
npm install发现node_modules 中多了很多文件
8. package.lock.json
此文件在第一次使用npm下载模块时就会被创建
作用如下
锁定包的版本确保再次下载时不会因为包版本不同而产生问题加快下载速度因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址重新安装时只需下载即可不需要做额外的工作
9. 模块加载规则
9.1 模块拥有路径时
分成下面两种情况
require(./yhb.js) // 拥有路径和后缀
require(./yhb) // 拥有路径但没有后缀require方法根据模块路径查找模块如果是完整路径直接引入模块如果模块后缀省略先找同名JS文件再找同名JS文件夹如果找到了同名文件夹找文件夹中的index.js如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找main选项中的入口文件如果找指定的入口文件不存在或者没有指定入口文件就会报错模块没有被找到
9.2 没有路径
require(yhb)Node.js会假设它是系统模块Node.js会去node_modules文件夹中首先看是否有该名字的JS文件再看是否有该名字的文件夹如果是文件夹看里面是否有index.js如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件否则找不到报错
小编解惑
如果模块没有路径node会认为这是一个系统模块
如果模块拥有路径node会认为这是开发者自己定义的模块文件
