教学目标:
能够了解node.js是什么 ————– js运行环境,就是一个工具
能够在REPL环境中执行JS代码————– 仿谷歌控制器
能够使用node运行JS代码 —————– node文件js
理解node中模块的定义 ——————— 1-创建xx.js文件 2-exposts
理解commonJS规范 ——————- 1-文件就是模块,2-exports,3-require
理解commonjs规范中exports与module exports 的区别
————–简写
使用url模块将erl转换为对象————-url parse(地址, true)
使用fs模块读取文件内容—————-fs.readFile
使用fs模块将文本内容写入文件 ——————fs.writeFile
使用node的核心模块开启一个HTTP服务器
理解网络请求及响应的过程
使用Http模块响应数据回浏览器 —— res.write() + res.end()
在http中接受get和post请求
第一章 (day_1)
1-1 Node JS简介
NodeJS是JavaScript运行环境
- 安装成功后可以直接通过浏览器访问JavaScript代码
作用 : 让JavaScript成为与PHP、Python等平起平坐的语言
概括 :前端脱离后端,直接通过JS写项目
去哪里下
官网 : nodejs.org
中文网址 : nodejs.cn
学习社区:cnodejs.org
nvm工具 : 实现nodejs任意版本切换
npm工具 : 下载nodejs所需模块(工具库)
nrm工具 : 切换npm下载源
1-2 Node.js初体验(REPL)
简介 :
- R :read – 读取(读取用户输入的JS代码)
- E : exec – 执行(执行用户输入的JS代码)
- P : print – 打印(打印用户输入的JS代码)
- L : loop – 循环(后续所有JS代码执行都会循环以上命令)
- 退出(ctrl + c)
JS三大组成部分 :ECMA/DOM/BOM
- ECMAScript :(变量,判断,循环),声明JS变量、判断、循环等语法;DOM(document)、BOM(window、location)
- 内置/核心模块 : http服务、fs文件操作、url路径、path路径操作、os操作系统等
- 模块(服务器) : 接收HTTP请求 ,响应数据
- 第三方模块 :
- 自定义模块 :自己创建的js文件
CommonJS模块规范:
一个文件就是一个模块
通过exports和
modul.exports
来导出模块中的成员(声明模块中哪些功能可以使用)步骤一 : 导出成员(声明模块/文件中哪些方法可以被外部使用)
1
2
3
4//写法一:
exports.属性/方法名 = 功能
//写法二:
module.export.属性/方法名 = 变量名例:b.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21// 步骤一
function add() {
console.log('this is add');
}
function del() {
console.log('this is del');
}
function edit() {
console.log('this is edit');
}
function select() {
console.log('this is select');
}
//步骤2 : 导出(语法 : exports/module.exports.成员名 = 值)
exports.add = add;
exports.edit = edit;
步骤二 :外部引入使用
1
2var 对象 = require(‘路径及文件名’);
对象、属性或方法名例如 : a.js
1
2
3
4
5
6// 引入自定义模块
var b = require('./b'); //注: .js不用写
console.log(b);
b.add();
b.edit();
通过require来加载模块
1-2 内置os模块
1
2
3
4
5
6
7
8
9 //1. 创建os对象(引入nodejs内置模块)
var os = require("os");
//2. 调用os对象方法获取系统数据
console.log('hello.' + os.EOL + 'itcast');
console.log('主机名:' + os.hostname());
console.log('操作系统名' + os.type());
console.log('操作系统平台:' + os.platform());
console.log('内存总量' + os.totalmem() + "字节.");
console.log('空闲内存' + os.freemem() + "字节.");
字节 : 计算机计量单位,表示数据量的多少。类似生活中的克、千克等
JS代替阿帕奇写服务端网页
在mvc部分
- dirname :后去一层
- basename : 取最后一层
1-3 内置path模块
path.js
1
2
3
4
5
6
7
8
9//1. 引入内置模块
var path = require('path');
//2. 练习
var testData = 'c:/app/view/gods/add.html';
console.log(path.basename(testData)); //add.html
testData = path.dirname(testData);
console.log(testData);
console.log(path.basename(testData));
1- 4 url模块
url
模块提供用于网址处理和解析的实用工具。 可以使用以下方式访问它:1
const url = require('url');
1
import url from 'url';
练习 :
url.parse()
返回的对象的属性```js
// 引入url内置模块
var url = require(‘url’)//2. 使用
var data = ‘http://itcast.cn?name = 张三&age = 18’;
console.log(data);
console.log(url.parse(data));
console.log(url.parse(data, true)); //query变化了对象,比较好获取var urlQueryObj = url.parse(data, true);
console.log(urlQueryObj.query.name); //现在不能用了
// console.log();1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
##### 1-5 内置fs模块
1. ##### `filehandle.writeFile(data, options)`
2. write.js
```js
//1. 引入fs内置模块 files
var fs = require('fs');
//2. 练习,通过write.js文件创建a.txt写入你好,传智
fs.writeFile('./a.txt', '你好,传智', function(err) {
//err 为null 成功
if (err) {
console.log(err);
return;
}
console.log('success');
});
read.js
1
2
3
4
5
6
7
8
9
10
11
12
13//1. 引入fs模块
var fs = require('fs');
//2. 练习; 读取a.txt内容
fs.readFile('a.txt', 'utf8', function(err, data) {
if (err) {
console.log(err);
return;
}
console.log(data); //脚下留心 : 默认不是我们可以识别的内容
// Buffer对象
//通过Buffer对象,toString() 转化成字符显示
console.log(data.toString());
})
1-6 内置http模块:
web服务器 : 监听80端口,接收请求,响应请求
http.js
1
2
3
4
5
6
7
8
9
10
11
12//1.引入模块
var http = require('http');
//2. 创建web服务器
var server = http.createServer();
//3. 监听请求
server.on('request', function(req, res) { //req = request 请求 res - response 响应
console.log('收到客户端请求');
})
//4. 启动请求
server.listen(8080, function() {
console.log('服务启动成功,访问: http://localhost:8080');
})http2.js乱码解决
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18//1.引入模块
var http = require('http');
//2. 创建web服务器
var server = http.createServer();
//3. 监听请求
server.on('request', function(req, res) { //req = request 请求 res - response 响应
console.log('收到用户请求,请求地址:' + req.url);
// 留心,有请求就必须有响应,没有响应网页无法打开,
// 会出现乱码
res.setHeader('Content-Type', 'text/html;charset=utf-8');
res.write("哥哥来抓我呀,<a href='http://nn.com'>点击进入我的世界</a>");
res.end();
})
//4. 启动请求
server.listen(8080, function() {
console.log('服务启动成功,访问: http://localhost:8080');
})响应不同的界面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25//1.引入模块
var http = require('http');
//2. 创建web服务器
var server = http.createServer();
//3. 监听请求
server.on('request', function(req, res) { //req = request 请求 res - response 响应
// 判断请求的地址
if (req.url == '/') {
$msg = 'this is index'
} else if (req.url == '/login') {
$msg = 'this is login'
} else {
$msg = '404'
}
console.log('收到用户请求,请求地址:' + req.url);
// 留心,有请求就必须有响应,没有响应网页无法打开,
// 会出现乱码
res.setHeader('Content-Type', 'text/html;charset=utf-8');
res.write($msg + "<a href='http://nn.com'>点击进入我的世界</a>");
// res.end();
})
//4. 启动请求
server.listen(8080, function() {
console.log('服务启动成功,访问: http://localhost:8080');
})请求对象(request)
- req.headers —— 获取请求头信息(对象)
- req.rawHeaders —— 获取请求头信息(数组)
- req.httpVarsion ———– 获取HTTP版本
- req.method ————- 获取请求方法
- req.url ————— 获取请求路径(注:不含网址)
响应对象(response)
res.statusCode = 404;
res.statusMessage = ‘Not Found’;
res.setHeader(‘Content-Type’,’text/html; charset=utf-8’)
1
2
3
4
5
6
7// 简化版
res.writeHeader(404, 'Not Found', {
"content-Type" : 'text/html; charset=utf8'
})
res.write(数据)
res.end()
- 自定义网站图标
- 说明: 用户通过浏览器访问html 文件会发送n次http请求
- 原因 : 除了html需求请求外,还有css/js/网站图标等需要发送http请求
- 自定义网站图标
- 通过NodeJS仿 Apache请求
1-7 留言板案例实现
通过Nodejs一步步创建web服务器
- 对应的页面要响应
- 静态资源也要响应(阿帕奇)
- 初始化目录
- public : 防止静态资源
- view : 视图
- 文件app.js : 创建http服务器
第二章 NodeJS(NPM使用,模块引擎、Express框架)
2-1 NPM简介
- npm
- 命令行工具
- 是英文node package manager
- npm 语法
- 命令
- 查看 : npm list
- 安装: npm install (模块 或 @版本号)[安装可选参数]
- 卸载 : npm uninstall 模块
- 安装参数
--save
: 记录生产环境所需模块(默认)--save--dec
:记录开发环境所需模块-g
: 该模块可在命令行中运行(global),其他都在当前目录下;-g在全局目录中(通过npm config list 可以看全局目录所在位置)
- 怎么知道npm在哪个目录,用
npm config list
查看npm下载在哪个目录,查看prefix
- 命令
- NPM使用
- MIME是一个规则(类似text/html 、 image/png 文件等)
- 需求 : 安装mine 模块(该模块用户判断文件mone类型)
- 明确 : npm是nodejs项目模块管理工具
- 使用 : 1-初始化项目 2- 安装/卸载模块
- 步骤一: 初始化项目(ps. 自动创建package.json 文件,作用: 描述项目依赖)
- 将NPM看作一个软件商店,提供了各种软件
2-2 NPM模块版本控制
科普软件版本含义 :
- aplha版 : - 内测版(功能不全,BUG多)
- beta版 : - 公测版(功能不全,发骚有准备,依旧存在Bug)
- rc版 : - 预测版(功能不再增加)
- stable版 : - 用户可用
主版本、次版本、修改版本号
- 主版本 : 功能模块有大的变动,比如增加多个模块或者整体架构发生变化
- 次版本 : 次版本号的升级对应只是局部的变动
- 修改版: BUG修改或者功能的扩充等
- ~ 用户使用该版本之后,最多升级到【修改版】最新
- ^用户使用该版本之后,最多升级到【次版本】最新
- *用户使用该版本之后,可以升级到最新版本
举例子 :
- 目前软件的版本 :
- 1.1.8
- 1.3.6
- 2.3.0
- 用户所用版本 : ~1.0.0
- 最高升级到 :1.1.8
- 目前软件的版本 :
2-3 NPM源管理
缺点 :
- 通过npm命令下载会到国外服务器获取
- 下载速度慢,可以切换国内服务器
- nrm是资源管理工具,可以切换国内服务器下载
命令 :
- 安装 :
npm install nrm -g
- 查看 :
nrm ls(注: 查看list缩写,查看可用服务器)
- 切换 :
nrm use 服务器名
- 测速:
nrm test npm
- 安装 :
2-4 NPM 自定义脚本命令
2-5 NPM包自定义发布
- 模块: 在node中就是一个文件
- 包: N个模块、目录、package.json等组成,让别人require
- 需求: 发布itcast-php-teacher包:
- 步骤一:创建day22开发目录 -> 初始化– > 修改package.json文件
- 打开npmjs.com注册账号
- 步骤三: 本地登录提交(切记提交自己的包必须切换到国外服务器)
- 测试(创建day23开发目录,执行命令
npm install itcast-php-teacher
)
2-6 总结:
- NPM : 就是一个工具,用于管理项目所需依赖
- 语法 :
npm install/unistall
模块/包(ps: -g命令行执行/全局目录 –save-dev 开发环境) - 服务器加速,通过npm工具
- 自定义脚本工具: 修改
package.json
的scripts键即可 - 自定义发布:
node login
&node publish
第三章
3-1 模块(nodemon自动重启服务,第三方模块)
- 简介
- 发现: 每次修改js代码都得重新启动服务
- 增加 : 工作量解决,通过nodemon检测文件修改自动重启
- 使用
- 步骤一: 初始化项目(ps.自动创建package.json文件,作用: 描述项目依赖)
- 安装(npm install nodemon –save–dev -g)
3-2 Express模块
Express简介:
- 基于nodejs开发的一个框架
- 加快项目开发,便于团队协作
使用(初体验)
- 步骤一 : 创建day24_express 开发目录
- 步骤2: 安装express框架
- npm init -y
- npm install express
```js
//1.引入模块
var express = require(‘express’)// 2. 创建web服务器
var app = express()//3. 监听请求
app.get(‘/‘, function(req, res) {//end() 响应字符串(乱码) //send() 相应字符串(自动识别) // render() 响应字符串(自动识别,只能打开指定文件字符串并响应) res.end("哥哥来抓我呀,<a href = 'http://nn.com'>点击进入我的世界</a>")
})
//4. 启动服务
app.listen(8080, function() {console.log("启动成功,访问 http://loacalhost:8080");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
##### 3-3 Express框架(配置模板引擎)
1. 说明: 默认通过公end或send渲染,无法加载视图,所以得自己配置默认板块引擎官方以前推荐用jade现在升级为pug也有的用ejs个人推荐art模板引擎
2. 文档: http://aui.github.io/art-template/zh-cn/express/
3. - 步骤一: 安装art-template模板引擎
- npm install art-template
- npm install express-art-template
##### 3-4 Express框架-- 路由
1. 简介:
- 路由是什么: 网址
- 路由参数: 网址参数
- 在PHP中作用, 声明交给哪个控制器的哪个方法处理
- 在NodeJS中作用: 交给指定匿名函数处理
2. Http请求类型或者方式: get/post/delete/put等
- app.HTTP请求类型(请求路径,回调函数)
- 特性: get只能接收get请求,post只能接受post请求,多学一招:all
- app.use(请求路径, 回调函数)
- 特性: 匹配所有类型请求
- 特性:**use非完全匹配**(ps. 只需要url前面匹配请求路径即可匹配)
- /public/css/test.css
- app.use('/public',fn)可以
- app.use('/public2',fn) 不行
3. app.HTTP请求类型(请求路径/:参数名/.../:参数名,回调函数)
##### 3-5 Express框架 -- 托管静态文件
1.
## 第四章 ES6语法
##### 4-1 Symbol新数据类型
1. [手册](http://es6.ruanyifeng.com/#README)
2. 数据类型
- 基本类型: 字符串、布尔、数值型(整数、小数)
- 复合类型: 数组、对象
- 特殊类型: null、undefined
3. 新Symbol数据类型
- 作用: 生成独一无二的值
- ```js
//无值
var str1 = Symbol()
var str2 = Symbol()
log(str1 === str2) //false
//有值
var str1 = Symbol("itcast")
var str2 = Symbol("itcast")
log(str1 === str2) //false
4-2 Set数据结构以及Map数据结构
Set
概念: 类似数组,成员唯一
语法: s.add/delete/has(成员) & s.clear()
场景: 数组去重,代码[..new Set(arr)]
练习 :初始化set类型值为1/2/3 -> 统计 ->添加值 -> 统计 -> 清楚 -> 统计
1
2
3
4
5
6
7
8
9
10
11var set = new Set([1,2,3])
log(set.size) //3
set.add(4)
log(set.size) //4
set.clear()
log(set.size) //0
log('------------------------')
//练习: 通过set类型数值1、2、3、4、5、3、4、5值去重,返回set对象
// 赋值:[...Set对象] 会将里面的值挨个赋给数组成员
var arr = [...new Set([1,2,3,4,,5,3,4,5])]
log(arr)
Map数据结构
类似于对象,但键不限于字符串
设置a键:111 -> 获取,设置[‘b’]键:222 -> 获取 ->通过扩展运算符获取键值
1
2
3
4
5
6
7
8
9
10
11
12
13var map = new Map()
log(map)
map.set('a',111)
log(map.get('a'))
//有问题,对象不能直接写,需要先复制给变量才可以获取其值
map.set(['b'],222)
log(map.get(['b']))
//没问题:
var tmp = ['b']
map.set(tmp, 222)
log(map.get(tmp))
4-3 循环
- ```js
// for while do..
var arr = [‘a’,’b’,’c’];
for(var i = 0;i < arr.length; i++){
}// 数值 forEach 只能遍历数组log("键",i,"值:",arr[i])
var arr = [‘a’,’b’,’c’];
arr.firEach(function(item, index){
})//for…in 推荐遍历对象log('键', indexitem, '值',)
1
2
3
4
5
6
7
2. ```js
// 在ES6中遍历数组: for...of(更强,可以遍历数组、字符串、映射、结合等数据结构)
var arr = ['a','b','c'];
for(var val of arr){
log('值:' + val)
}
4-4 函数的扩展
1
2
3
4
5
6
7
8
9
10
11
12
13<script>
function fn(name) {
var name = name ? name: ""
}
//ES6语法后
function fn(name="悟空",sex = "公"){
log(name,sex)
}
fn()
fn('其他')
fn('八戒','母')
</script>箭头函数 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<script>
//需求,通过ES6语法仿写数组 3个参数 ,1个参数,没有参数
//function fn(name , age , sex) {
//console.log("函数没毛病")
//}
//旧语法: function fn(形参1,...形参n){}
//新语法: (形参1,...形参n) => {}
//注意 : 只有一个形参 小括号可以不写,函数体只有一行代码 大括号可以不写
var fn0 = () => log('函数没毛病')
var fn1 = name => log('函数没毛病')
var fn2 = (name,age) => log('函数没毛病')
fn0()
fn1('测试1')
fn2('测试2',18)
</script>rest参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26//function fn(){
// log(arguments) //获取所有实参,不确定实参个数
//for(var i = 0;i<arguments.length;i++){
// log(arguments[i])
//}
//}
// ES 6 语法之后
//不加...则将第一个实参复制给vals
// 加...则将所有值赋给vals 整个数组
function fn(...vals){
log(vals) //输出数组{2,3,4,5}
}
fn(2,3,4,5)
log('--------------')
// 问: rest参数和arguments区别
// 答: rest参数更加灵活
function fn2(val, ...vals){
log(val)
log(vals)
}
fn2(2,3,4,56)
4-5 字符串的扩展
repeat函数: 平铺指定次数,如:
'x'.repeat(3) //xxx
模板字符串 : 传统字符串: 传统在JS中显示大段HTML通过加号拼接,现在
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<script>
var str = 'itcast_'
log(str.repeat(3))
var name = '你好'
// 旧方法
var html = ''
html += '<ul>'
html += '<li>第'+name+'个</li>'
html += '</ul>'
log(html)
// 新的方法
var html = '<ul>
<li>第${name}个</li>
<li>第二个</li>
</ul>'
log(html)
</script>
4-6 模块module以及class类
4-7 异步回调
语法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18var p1 = new Promise(function(resolve, reject){
//发送请求
if(成功) resolve(数据)
else reject(错误信息)
})
var p2 = new Promise(function(resolve,reject){
//发送请求
if(成功) resolve(数据)
else reject(错误信息)
})
p1.then(function(data){
成功执行
return p2
}).function(err){
失败执行
}