模块 http模块 ---url"/>
nodejs核心模块 http模块 ---url
nodejs核心模块 http模块 —url
5.不同URL返回不同的内容-认识url
5.1全称
Uniform Resource Locator
,统一资源定位符。
5.2作用
定位资源(css,html,js,png, avi,接口…)。
5.3格式
协议://主机地址[:端口]/路径?查询字符串#锚点
- 协议: http 或者是 https
- 主机地址: IP地址 或者 域名
- 端口号
- http请求,默认端口80(可以省略)
- https请求,默认端口443(可以省略)
- MySQL默认端口3306
- 路径
- 服务器文件夹上的资源。(.html/.css/.images/.js/接口)
- 参数(查询字符串)
- ? 后面的部分,是键值对的形式
- 锚点
- 网页内部的锚点链接
例如:.html?cat=737,794,870&ev=3680%5F5893&sort=sort_rank_asc&trans=1&JL=3_%E4%BA%A7%E5%93%81%E7%B1%BB%E5%9E%8B_%E5%A3%81%E6%8C%82%E5%BC%8F#J_crumbsBar
经典用法:访问文件时传递参数。
// index.html
<a href='detail.html?id=1'>新闻1</a>
<a href='detail.html?id=2'>新闻2</a>
上面的两个地址在指向detail.html时,分别传入了不同的参数
// detail.html
<script>
// 1. 获取id
// 2. 根据id值去获取这个新闻的详情
</script>
6.不同URL返回不同的内容-问题分析
在服务器端收到客户端发的请求之后,分析url是什么,然后分别对应处理
7.不同URL返回不同的内容-req.url
7.1req.url属性
首先就需要知道浏览器请求的url是什么。
涉及到和请求相关的信息,都是通过请求响应处理函数的第一个参数完成的。
7.2代码示例
const http = require('http');// 创建服务
const server = http.createServer(function(req, res) {console.log(req.url)res.end(req.url)
});
// 启动服务
server.listen(8081, function() {console.log('success');
});
req.url
用来获取本次请求的资源地址。在请求行中可以看到这一点。
7.3小结
序号 | 浏览器中的url | 服务器中的req.url |
---|---|---|
1 | http://localhost:8080 | / |
2 | http://localhost:8080/a.html | /a.html |
3 | http://localhost:8080/js/jquery.js | /js/jquery.js |
4 | http://localhost:8080/1.jpg | /1.jpg |
5 | http://localhost:8080/api?a=1&b=2 | /api?a=1&b=2 |
req.url
一定是以/开头的。
在现代浏览器中,它们会自动去请求服务器上的favicon.ico
8.不同URL返回不同的内容-读取文件内容并返回
用户在访问服务器上不同的url时,能返回不同的内容
8.1目录结构
|-index.html
|-style.css
|-01.png
|-js/jquery.js
|-server.js
8.2请求与响应的对应的关系
用户的请求地址 | 服务器的动作 |
---|---|
http://localhost:8000 | 读出index.html的内容并返回 |
http://localhost:8000/index.html | 读出index.html的内容并返回 |
http://localhost:8000/style.css | 读出style.css的内容并返回 |
http://localhost:8000/01.png | 读出01.png的内容并返回 |
http://localhost:8000/js/jquery.js | 读出jquery.js的内容并返回 |
http://localhost:8000/xxxx | 或者不是上面的地址 返回404 |
8.3示例代码
const http = require('http')
const fs = require('fs')
const path = require('path')
const server = http.createServer((req, res) => {// 1. 获取urlconst { url } = req // req.url 解构赋值console.log(url)if(url === '/' || url === '/index.html') {// 读出文件内容并返回// 1) 文件的位置const filePath = path.join(__dirname, 'index.html')// 2) 读出它的内容const content = fs.readFileSync(filePath, 'utf8')console.log(content)// 3) 返回res.end(content)} else if(url === '/style.css') {// 读出文件内容并返回// 1) 文件的位置const filePath = path.join(__dirname, 'style.css')// 2) 读出它的内容const content = fs.readFileSync(filePath, 'utf8')console.log(content)// 3) 返回res.end(content)} else {res.end('ok')}})server.listen(8000, ()=>{console.log('服务器已经在8000启动');
})
综合使用fs
, path
, __dirname
8.4注意
- url地址与服务器上的文件地址并不是一一对应的。url的作用是确定用户要访问的资源的位置,在地址栏中输入回车之后,这个请求会到web服务器中来,然后由web服务器来决定此时返回什么数据给用户。
- 但是,我们能够根据url来推测服务器会返回什么信息吗?
url:.html请求一个页面,名是querystring.htmlurl:http://localhost:3000/getList?id=123url:=aLqnlljMxF54DgtW&r=d281ced83329f34caae9786fcb5d4934
显然,不能,你能从服务器上获得什么,完全是由服务器决定的。
- 如果用户请求的是静态资源(静态资源指的是html文件中链接的外部资源,如.html, css、js、image文件等等),服务器的处理方法就是:读出文件内容,返回给用户。
9.不同URL返回不同的内容-设置content-type
9.1意义
- 理解content-type的作用
- 会根据不同的文件类型来设置不同的content-type
9.2content-type的作用
在http协议中,content-type
用来告诉对方本次传输的数据的类型是什么。
- 在请求头中设置content-type来告诉服务器,本次请求携带的数据是什么类型的
- 在响应头中设置content-type来告诉服务器,本次返回的数据是什么类型的
通过使用res对象中的setHeader
方法,我们可以设置content-type
这个响应头。这个响应头的作用是告诉浏览器,本次响应的内容是什么格式的内容,以方便浏览器进行处理。
9.3常见的几种文件类型及content-type
- .html:
res.setHeader('content-type', 'text/html;charset=utf8')
- .css:
res.setHeader('content-type', 'text/css;charset=utf8')
- .js:
res.setHeader('content-type', 'application/javascript')
- .png:
res.setHeader('content-type', 'image/png')
- json数据:
res.setHeader('content-type', 'application/json;charset=utf-8')
其它类型,参考这里:
如果读出来的是.html的文件,但是content-type设置为了css。则浏览器将不会当作是html页面来渲染了。
9.4示例代码
const http = require('http')
const fs = require('fs')
const path = require('path')http.createServer((req, res) => {let { url } = req;console.log(url);if (url === '/' || url === '/index.html') {let filePath = path.join(__dirname, 'index.html');let content = fs.readFileSync(filePath, 'utf8') res.end(content);} else if (url === '/style.css') {let filePath = path.join(__dirname, 'style.css');let content = fs.readFileSync(filePath, 'utf8') res.end(content);} else if (url === '/js/jquery.js') {let filePath = path.join(__dirname, 'js/jquery.js');let content = fs.readFileSync(filePath, 'utf8') res.end(content);} else if (url === '/01.jpg') {let filePath = path.join(__dirname, '01.jpg');let content = fs.readFileSync(filePath) res.end(content);} else {res.end('404')}}).listen(8081, () => {console.log('server start 8081');
})
10.不同URL返回不同的内容-设置statusCode
使用statusCode
res.statusCode = 301;// res.setHeader('location','')res.statusCode = 404res.statusCode = 500res.end()
更多推荐
nodejs核心模块 http模块 ---url
发布评论