先来说明一下JS的运行环境
- 浏览器中有内核,在内核中:有内容排版引擎 ,即js解释引擎
- chrome 内核是 webkit ,js解释引擎为V8
所以node本质上讲是独立安装的V8引擎
node功能
- 充当实时服务器
- 运行js代码 (在服务器上运行)处理后台程序
语言可以有什么功能,不取决于语言本身,取决于它的运行环境
-
js运行在浏览器中
js组成部分: js基础语法 bom dom bom和dom是因为js此时运行在浏览器中,所以dom和bom才可以操作浏览器
-
js运行在node.js中 此时 bom和dom还有用吗?
此时js中dom和bom已经没用了,node.js给js提供了新的api,这些api对于服务器相关操作
安装node.js
https://nodejs.org/en/
下载点击安装
如何测试安装完成
win+r 输入 cmd 命令行工具
node -v 出现node版本号 则安装成功
npm
node package manager node.js的包管理器
npm下载:
https://www.npmjs.com/package/npm
服务器:将很多的包(资源),上传到node.js的npm的服务器,就可以通过npm来管理
npm安装
一般情况下,npm会伴随node.js自动安装
命令行
npm -v
windows 命令行常用命令
切盘符:
D:
C:
cd 进入一个目录
cd ..返回上一层目录
mkdir 创建一个文件夹
cls 清空 命令行
如何快速定位到当前目录:
在当前目录下 按住 shift加鼠标右键 在此处打开命令窗口(win10 在此处打开powerShell)
前端 自动化工程构建
在开发过程中:搭建一个适合开发的脚手架来 自动帮我们起一个服务器,自动压缩、合并代码,自动转换css预处理器(sass/less/stylus) 转成css并压缩,自动化测试、自动剔除无用的代码
前端自动化工程软件的介入,需要node.js支持开发环境
npm init 初始化一个项目
生成package.json 配置文件 管理整个项目
npm常用命令
npm install/i 包名[@版本号] --save 下载资源到生产环境
npm install/i 包名[@版本号] --save-dev 下载资源到开发环境
简写 --save -S
--save-dev -D
node_modules 目录存放下载的包
npm install 包名 -g 全局安装 安装在C盘 可以在全局任意的地方都可以直接使用
npm info 包名 查看这个包的信息
删除:
npm uninstall 包名
初始化一个项目后会有两个环境
开发环境
开发环境的包在package.json的devDependencies中进行管理
生产环境
生产环境的包在package.json的dependencies中进行管理
前端自动化工程在构建时,会自动去除开发环境的包,保存生产环境的包
配置npm 源
npm服务器是国外的 所以下载资源的速度会很慢
淘宝:淘宝镜像
淘宝自己的一个服务器 10分钟同步npm官网的服务器上的包
1,安装淘宝镜像 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
怎么使用cnpm
同上npm的命令将只是将npm改成cnpm
cnpm install/i 包名[@版本号] --save 下载资源到生产环境
cnpm install/i 包名[@版本号] --save-dev 下载资源到开发环境
简写 --save -S
--save-dev -D
node_modules 目录存放下载的包
cnpm install 包名 -g 全局安装 安装在C盘 可以在全局任意的地方都可以直接使用
cnpm info 包名 查看这个包的信息
ctrl+c 结束当前命令
在实际开发中 经常涉及上传下载代码(svn或者git),由于node_modules文件夹中存储的有很多开发环境和生产环境的包, 忽略node_modules文件夹,当别人下载这个程序,如何运行起来
首先下载包
只要有package.json文件夹在就可以
命令行在当前目录打开
执行 npm install 自动去读取package.json中的devDependencies和dependencies去下载对应的包,此时package-lock.json的功能是下载的时候,锁定之前下载的版本
nrm 切换 包的资源 切换成 淘宝源 官网源
nrm ls 查看可用的源
* npm -------- https://registry.npmjs.org/
yarn ------- https://registry.yarnpkg.com/
cnpm ------- http://r.cnpmjs.org/
taobao ----- https://registry.npm.taobao.org/
nj --------- https://registry.nodejitsu.com/
npmMirror -- https://skimdb.npmjs.com/registry/
edunpm ----- http://registry.enpmjs.org/
切换 nrm use 源名字
yarn 管理nodejs包
安装:
npm i yarn -g
yarn -v
yarn常用命令
初始化项目
yarn init
yarn add 包名[@版本] 默认是安装生产环境
yarn remove 包名
yarn add 包名 --dev 安装到开发环境
js如何在node中运行
在命令行中 node 文件路径 运行文件
node中的模块
-
内置模块 系统模块 (node.js)自己 提供的模块
如何使用内置模块 http模块 实时服务器 接受请求,处理请求 let 变量 = require('模块名');
模块化:
将不同功能的代码封装在不同的文件中 这个文件可以通过模块化的形式,按需引入,不通过script
好处:
- 按需加载,提高代码运行效率
- 将代码分层,结构更为清晰,便于管理
- 每个模块有自己的作用域,可以避免变量命名冲突的问题
-
第三方模块
-
通过npm下载的
这个模块放在node_modules文件夹中
如果是通过npm下载的第三方模块 let 变量 = require('模块名');
-
自己自定义的
let 变量 = require('路径'); 注意:即使路径是当前目录也不能直接写文件名 前面加 ./
-
nodemon 实时监听服务器代码实现热加载
安装
npm i nodemon -g
使用:
nodemon 文件路径
http模块
使用http模块
server.js
const http = require("http");
const server = http.createServer(function(req,res){
// req请求相关信息 req.url得到请求的路径
//res 是响应 res.write("返回给前台内容") 需要加res.end()
});
server.listen(8080);
fs模块 文件系统
fs.mkdir(path[, options], callback) 创建一个文件夹
fs.mkdirSync(path[, options])
fs.readFile(path[, options], callback) 读取文件内容
fs.readFileSync(path[, options], callback)
如何创建一个 后台路由
MVC
views
01.html
02.html
03.html
router
核心 controller
model
存取数据
简单搭建一个路由
localhost:8080/01.html
localhost:8080/02.html
如果没有返回 404