01-nodejs搭建静态资源服务器
-
==本小节核心重点==
-
1.html中所有外部资源路径都会变成网络请求
-
服务器需要根据请求路径响应返回对应的文件
-
-
2.静态资源(图片、文件、音视频)一般使用路径拼接的方式来处理
-
服务端可以直接拼接url来响应对应资源，简化代码
-
-
1.1-nodejs搭建静态资源服务器01
/*WEB开发特点1：html中所有外部资源路径都会变成网络请求*/
//1.导入模块
//http模块
const http = require('http')
//fs文件模块
const fs = require('fs')
//path路径模块
const path = require('path')
//2.创建服务器
let server = http.createServer((req, res) => {
console.log(req.url)
if (req.url == '/') {
//读取文件响应给客户端
fs.readFile(path.join(__dirname, 'www', 'index.html'), (err, data) => {
if (err) {
throw err//如果读取失败，抛出异常
} else {
res.end(data)//如果读成功，响应给客户端
}
})
} else if (req.url == '/resource/css/index.css') {
//读取文件响应给客户端
fs.readFile(path.join(__dirname, 'www','resource', 'css', 'index.css'), (err, data) => {
if (err) {
throw err//如果读取失败，抛出异常
} else {
res.end(data)//如果读成功，响应给客户端
}
})
} else if (req.url == '/resource/images/01.gif') {
//读取文件响应给客户端
fs.readFile(path.join(__dirname, 'www','resource', 'images', '01.gif'), (err, data) => {
if (err) {
throw err//如果读取失败，抛出异常
} else {
res.end(data)//如果读成功，响应给客户端
}
})
} else if (req.url == '/resource/images/01.jpg') {
//读取文件响应给客户端
fs.readFile(path.join(__dirname, 'www','resource', 'images', '01.jpg'), (err, data) => {
if (err) {
throw err//如果读取失败，抛出异常
} else {
res.end(data)//如果读成功，响应给客户端
}
})
} else if (req.url == '/resource/video.mp4') {
//读取文件响应给客户端
fs.readFile(path.join(__dirname, 'www','resource', 'video.mp4'), (err, data) => {
if (err) {
throw err//如果读取失败，抛出异常
} else {
res.end(data)//如果读成功，响应给客户端
}
})
} else if (req.url == '/resource/favicon.ico') {
//读取文件响应给客户端
fs.readFile(path.join(__dirname, 'www','resource', 'favicon.ico'), (err, data) => {
if (err) {
throw err//如果读取失败，抛出异常
} else {
res.end(data)//如果读成功，响应给客户端
}
})
} else {
res.end('404 not found')
}
})
//3.开启服务器
server.listen(3000, () => {
console.log('服务器启动成功')
})
1.2-nodejs搭建静态资源服务器02
/*WEB开发特点1：html中所有外部资源路径都会变成网络请求
WEB开发特点2：静态资源(图片、文件、音视频)一般使用路径拼接的方式来处理
*/
//1.导入模块
//http模块
const http = require('http')
//fs文件模块
const fs = require('fs')
//path路径模块
const path = require('path')
//2.创建服务器
let server = http.createServer((req,res)=>{
console.log(req.url)
if(req.url == '/'){
//读取文件响应给客户端
fs.readFile(path.join(__dirname,'www','index.html'),(err,data)=>{
if(err){
throw err;//如果读取失败，抛出异常
}else{
res.end(data);//如果读成功，响应给客户端
}
})
}else if(req.url.indexOf('/resource') == 0){//只要路径以/resource开头，直接拼接返回
//读取文件响应给客户端
fs.readFile(path.join(__dirname,'www',req.url),(err,data)=>{
if(err){
throw err//如果读取失败，抛出异常
}else{
res.end(data)//如果读成功，响应给客户端
}
})
}else{
res.end('404 not found')
};
});
//3.开启服务器
server.listen(3000,()=>{
console.log('服务器启动成功')
})
02-Express使用
1.1-Express框架介绍
-
1.Express是NodeJS开发中一个非常重量级的第三方框架，它对于NodeJS服务端就相当于Jquery对于HTML客户端。
-
如果连Express都不会用，基本上都不好意思跟别人说你会NodeJS
-
-
2.Express官网：
-
Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网
-
Express - Node.js web application framework
-
一般我们学习一个新的技术，都是去官网文档查看它的API，然后多多尝试，熟能生巧
-
-
-
3.Express的github地址:GitHub - expressjs/express: Fast, unopinionated, minimalist web framework for node.
-
Express的原作者TJ在node社区非常的有名，他写过200多个框架，目前他已经将Express交给了朋友维护，宣布不再维护NodeJS框架，转向Go语言tj (TJ Holowaychuk) · GitHub
-
-
4.Express官网是这样介绍自己的:基于 Node.js 平台，快速、开放、极简的 web 开发框架。
-
Express一个非常重要的亮点就是它没有改变nodejs已有的特性，而是在它的基础上进行了拓展
-
也就是说，使用Express你既可以使用nodejs原生的任何API，也能使用Express的API
-
-
-
5.Express三大核心功能-
1.托管静态资源
-
第二天讲的nodejs实现静态服务器功能在express中只需要一行代码
-
-
2.路由
-
express自带路由功能,让Node服务端开发变得极其简单
-
express支持链式语法，可以让代码看起来更加简洁
-
-
==3.中间件==
-
Express最为核心的技术和思想，万物皆中间件
-
中间件虽然理解起来有点困难，但是使用起来非常方便，类似于
bootstrap插件.
-
-
-
-
下载express命令:
npm i express-
如果你的网速很慢,可以在你的任意终端执行命令来提速:
npm config set registry https://registry.npm.taobao.org/
-
1.2-Express基本使用
//1.导入模块
const express = require('express')
//2.创建服务器
/* express() 相当于http模块的http.createServer() */
const app = express()
//3.接收客户端请求
/*（1）express最大的特点就是自带路由功能，我们无需在一个方法中处理所有请求
* 路由：一个请求路径对应一个方法(函数)
(2)在express中，每一个请求都是一个单独的方法
*/
app.get('/',(req,res)=>{
//响应客户端数据
//express响应数据 send方法:自动帮我们设置好了响应头,无需担心中文乱码问题
res.send('欢迎来到黑马程序员')
})
app.get('/heroInfo',(req,res)=>{
res.send(
name:'张三',
age:20
})
})
//4.开启服务器
app.listen(3000,()=>{
console.log('服务器启动成功')
})
1.3-Express响应客户端数据
//1.导入模块
const express = require('express')
//2.创建服务器
/* express() 相当于http模块的http.createServer() */
const app = express()
//3.接收客户端请求
//文本类型数据
app.get('/',(req,res)=>{
//响应客户端数据
res.send('欢迎来到黑马程序员')
})
//json格式数据
app.get('/info',(req,res)=>{
//express自动帮我们将js对象转成json响应给客户端
res.send({
name:'张三',
age:20
})
})
//文件类型数据
app.get('/login',(req,res)=>{
res.sendFile(__dirname + '/login.html')
})
//4.开启服务器
app.listen(3000,()=>{
console.log('服务器启动成功')
})
1.4-Express托管静态资源
//1.导入模块
const express = require('express');
//2.创建服务器
const app = express()
//托管静态资源（相当于我们之前写的静态资源服务器）
/*
1.当请求路径为/时，express会自动读取www文件夹中的index.html文件响应返回
2.当路径请求为www文件夹中的静态资源，express会自动拼接文件路径并响应返回
*/
app.use(express.static('www'))
//4.开启服务器
app.listen(3000,()=>{
console.log('success')
})
==1.5-第三方中间件使用==
-
1.在Express官网，有非常多得第三方中间件，它们可以让我们的Nodejs开发变得极其简单
-
中间件前端的插件，使用后就会给express中的req或者res添加成员
-
-
2.所有的第三方框架学习套路都是一样的
-
1.进官网，查文档
-
2.CTRL+C 与 CTRL+V
-
-
3.第三方中间件使用步骤一般都是固定两步
-
一： 安装
npm i xxxx（官网复制粘贴）-
第三方中间件都需要使用npm安装，可以理解为是一种特殊的第三方模块
-
-
二: 使用
app.use(xxx)（官网复制粘贴）
-
-
body-parse第三方中间件：解析post请求参数
-
安装body-parser :
npm install body-parser
-
//导入模块
const express = require('express')
//创建服务器
const app = express()
//使用第三方中间件
/*所有的第三方模块思路都是一样
1.进官网，查文档
2.找examples（使用示例），复制粘贴
a.安装第三方模块：`npm i body-parser`
b.使用中间件: arr.use(具体用法请复制粘贴)
使用body-parser中间件之后，你的req会增加一个body属性，就是你的post请求参数
*/
//（1）导入模块
const bodyParser = require('body-parser')
// parse application/x-www-form-urlencoded
//（2）使用中间件
app.use(bodyParser.urlencoded({ extended: false }))
//解析json参数
app.use(bodyParser.json())
app.post('/abc',(req,res)=>{
console.log(req.body)
//告诉客户端我收到的参数
res.send(req.body)
})
app.post('/efg',(req,res)=>{
console.log(req.body)
//告诉客户端我收到的参数
res.send(req.body)
})
//开启服务器
app.listen(3000, () => {
console.log('success');
})
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
