node js 学习笔记之http模块（二）请求页面

最新推荐文章于 2023-04-26 08:39:44 发布

0 error（s）0 warning（s）

最新推荐文章于 2023-04-26 08:39:44 发布

阅读量267

点赞数

文章标签： node.js

本文链接：https://blog.csdn.net/weixin_44845533/article/details/104495123

版权

请求页面以及地址约束

页面请求

有时候我们需要完成对一个页面的请求，例如在完成某些操作时显示一个html页面。
首先创建demo.html，里面随便写一点内容

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./day03/demo.css">
</head>
<body>
    <h2>测试标题</h2>
    我是要响应的网页
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <img src="./day03/2.jpg" alt="">
    <script src="./day03/1.js"></script>
</body>
</html>

创建demo.css

background-color :pink;

完成操作读取文件，就需要引入http模块以及fs模块，并创建服务以及开启端口,在demo.js中写入

const http = require('http');
const fs = require('fs')
let server = http.createServer(function (req,res) {
  
});

server.listen(3001,function () {
    console.log('3001port start');
})

读取文件的操作为

 fs.readFile('./demo.html',function (err,data) {
        if (err) return;
    })

因为data为读取到的数据，所以我们将二者结合使用

let server = http.createServer(function (req,res) {
    fs.readFile('./demo.html',function (err,data) {
        if (err) return;
        res.end(data)
    })
});

利用res.end()将读取到的数据写入到页面。我们运行demo.js，可以看到页面成为了我们在demo.html中写的页面。
虽然读取到的data是buffer格式的数据，但res.end()是支持对字符串和buffer格式的返回，也只支持字符串和buffer格式的数据，如果返回其他类型数据就会报错。

地址约束

虽然已经能成功显示页面，但也有新的问题。我们能否通过localhost:3001/demo.html来直接访问页面呢，可以做个测试。在这里插入图片描述
首先直接访问localhost:3001/demo.html是没有问题的，但是万一我们手误了多输了几个字呢

发现依旧能打开，这并不是我们想要的结果。我们想要的是只有当用户输入localhost:3001/demo.html时才跳转到该页面。这就需要我们对地址栏进行一下约束。

地址栏的组成

首先我们需要认识一下地址栏。地址栏由几部分组成

https: //www.baidu.com :　8080 　/p/a/t/h ? 　　　query=string 　　 #hash
协议　　　域名　　　　端口　　pathname 　　　search 　　　　hash值

根据地址栏组成我们发现需要限制的就是pathname。

获取地址栏

nodejs为我们提供了一个核心模块 url ，它是专门为了处理地址栏而存在的
首先引入url模块

//这个模块专门用来处理地址栏的信息
const url = require('url')

地址栏需要被获取到以后才能被url模块进行处理，那么如何获取地址栏呢
我们可以使用请求体req上的一个属性url来获取地址栏信息

let server = http.createServer(function (req,res) {
	console.log(req.url)
    fs.readFile('./demo.html',function (err,data) {
        if (err) return;
        res.end(data)
    })
});

输出的结果是

/demo.html
/day03/demo.css
/day03/2.jpg
/day03/1.js
/favicon.ico

输出的结果中第一行为地址栏中的信息，后面的几行都是在html文件中引入的其他文件。
同时我们可以对路径名进行一下补全,输入

http://localhost:3001/demo.html?username=qiwei#all

既然已经拿到了地址栏信息，那么该如何用url模块对地址栏进行处理呢
url有一个parse方法，可以将地址栏信息转换为一个对象

let server = http.createServer(function (req,res) {
    console.log(url.parse(req.url));
    fs.readFile('./demo.html',function (err,data) {
        if (err) return;
        res.end(data)
    })
});

运行文件并输入地址后会输出

Url {
  protocol: null,
  slashes: null,
  auth: null,
  host: null,
  port: null,
  hostname: null,
  hash: null,
  search: '?username=qiwei',
  query: 'username=qiwei',
  pathname: '/demo.html',
  path: '/demo.html?username=qiwei',
  href: '/demo.html?username=qiwei'
}

这样的一个对象，可以看到将路径信息进行了分析，而pathname就是我们需要的值。
接下来我们只要判断地址栏的pathname是否为demo.html，是就跳转页面不是就不跳转。

let server = http.createServer(function (req,res) {
    const {pathname} = url.parse(req.url)
    console.log(pathname);
    if (pathname === '/demo.html')
    {
        fs.readFile('./demo.html',function (err,data) {
            if (err) return;
            res.end(data)
        })
    }
    else
        res.end('input wrong url')
});

重启服务再对网页进行测试，只有demo.html才会跳转页面，功能完成。
但是我们在html页面中也引入了css文件和js文件，css文件中对背景颜色的改变很明显没有生效。
这是因为服务器将demo.css也作为了一个pathname的请求，而我们写的代码中只对demo.html进行了处理，所以css文件不会生效。因此对代码进行再处理。html文件中引入的js文件，图片等同理。

if(pathname==='/demo.html'){
        fs.readFile('./demo.html',function(err,data){
            if(err)return
            res.end(data)
        })
    }else if(pathname==='/demo.css'){
        res.setHeader('content-type','text/css')
        fs.readFile('./demo.css',function(err,data){
            if(err)return
            res.end(data)
        })
    }else if(pathname==='/2.jpg'){
        fs.readFile('./2.jpg',function(err,data){
            if(err)return
            res.end(data)
        })
    }else if(pathname==='/1.js'){
        fs.readFile('./1.js',function(err,data){
            if(err)return
            res.end(data)
        })
    }else{
        res.setHeader('content-type','text/html;charset=utf-8')
        res.end('404页面')
    }

0 error（s）0 warning（s）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
node js 学习笔记之http模块（二）请求页面

请求页面以及地址约束页面请求地址约束地址栏的组成获取地址栏页面请求有时候我们需要完成对一个页面的请求，例如在完成某些操作时显示一个html页面。首先创建demo.html，里面随便写一点内容 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt...
复制链接

扫一扫