当前位置:网站首页>---static page---
---static page---
2022-08-02 03:42:00 【cjx177187】
01.Html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./01.css">
</head>
<body>
<img src="./1.png" >
<img src="https://p3.ssl.qhimg.com/dmfd/400_300_/t0140582dc583d923bf.png" >
<a href="./02.html">网页2</a>
<a href="https://www.baidu.com">百度</a>
</body>
</html>
node.js代码
var http=require("http")
var fs=require("fs")
var app=http.createServer((req,res)=>{
if(req.url=="/01.html"){
fs.readFile(__dirname+"/01.html",(err,data)=>{
res.end(data)
})
}else if(req.url=="/1.jpg"){
fs.readFile(__dirname+"/1.jpg",(err,data)=>{
res.end(data)
})
}else if(req.url=="/02.html"){
fs.readFile(__dirname+"/02.html",(err,data)=>{
res.end(data)
})
}
})
app.listen(8081)
When we enter the URL in the browser,Received is the source code of the webpage,How does this code browser work?,It runs line by line from top to bottom;Parse nodes in a document tree,A node-by-node parsing,当解析到 <link rel="stylesheet" href="./01.css">代码时,It will spontaneously make a request to the backend,再次运行http.createServer这个函数,This is the browser will receive a copycss代码,然后再渲染到页面上,再回到HTMLRun the next line of code on the file,一直运行到
<img src="./1.png" > 时 再次 发送请求调用http.createServer,获取1.pngThis image is rendered on the page,Execute line by line like this,Time and time again to send the request to accept data,The last page we see.
但是我们会发现,Our code needs to check again and again to determine the network address we are requesting and whether we are what we want,If we are using
fs.readFilefunction to read data and send it to the front end,In this way, we need to write a web page many timesif和else语句,And many lines of code are actually similar,It only changes our judgment conditions and the data to be read.We will also find a little,That is, the statement we are going to judge is actually the same as the file name we want to read first, but an absolute path is added before the statement we want to read..
So we can try to imagine why we can't put the judgment statement and the read file path as a variable into our code.,This replaces all of ourif判断了
改进:
var http=require("http")
var fs=require("fs")
var app=http.createServer((req,res)=>{
fs.readFile(__dirname+req.url,(err,data)=>{
res.end(data)
})
})
app.listen(8081)
边栏推荐
猜你喜欢
STM32 触发HardFault_Handler如何查找原因
Error in render: “TypeError: Cannot read properties of null (reading ‘0‘)“ 报错解决方案
通过PS 2021 将网页图标抠下来
远程调试、无cuDnn、自定义模块无法导入问题记录
Chemical reagent Phospholipid-polyethylene glycol-hydroxyl, DSPE-PEG-OH, DSPE-PEG-Hydroxyl, MW: 5000
新工程加载YOLOV6的预训练权重问题
微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
微信小程序全局组件的定义
Source Insight 使用教程(2)——常用功能
C语言入门小游戏—三子棋
随机推荐
Usage of JOIN in MySQL
require模块化语法
Phospholipid-polyethylene glycol-hydrazide, DSPE-PEG-Hydrazide, DSPE-PEG-HZ, MW: 5000
npm and package.json
[Learning Records of Boxue Valley] Super summary, share with heart | Software Testing Interface Testing Basics
Phospholipid-polyethylene glycol-azide, DSPE-PEG-Azide, DSPE-PEG-N3, MW: 5000
The @autowired distinguished from @ the Resource
云服务器安装部署Nacos2.0.4版本
L1-039 古风排版(C)
subprocess.CalledProcessError: Command 'pip install 'thop'' returned non-zero exit status 1.
【面试】失败的一次面试
UserWarning: torch.meshgrid: in an upcoming release, it will be required to pass the index ing argu
STM32 map文件解析
basic operator
Knowledge Engineering Assignment 2: Introduction to Knowledge Engineering Related Fields
oracle inner join and outer join
函数提升和变量提升
Phospholipid-polyethylene glycol-targeted neovascularization targeting peptide APRPG, DSPE-PEG-APRPG
微信小程序云开发之券码领取,怎么防止用户领取到相同的数据?
canvas--饼状图