nodejs核心模块 http模块 ---url

模块 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()