根据用户不同请求返回不同html文件(带图片)|学习笔记

简介: 快速学习根据用户不同请求返回不同html文件(带图片)

开发者课程【Node.js 入门与实战根据用户不同请求返回不同html文件(带图片)】学习笔记,与课程紧密联系,让用户快速学习知识

课程地址https://developer.aliyun.com/learning/course/588/detail/8262


根据用户不同请求返回不同html文件(带图片)

 

目录

一、通过node.js 编写http服务程序

二、解决服务器无法正常返回图片的方法

 

一、通过node.js 编写http服务程序–通过读取静态-HTML·文件来响应用户请求(带图片和外部CSS样式)的操作示例

代码示例:

//根据用户不同请求,做出不同响应(响应现有的HTML文件)

//加载- http模块

var-http-= -require( 'http');

//加载fs模块

var fs = require( 'fs ');

//加载path模块

var path = require( " path');

//创建http服务,并启动该服务

http.createServer(function (req, res) {

//通过req.url 获取用户请求的路径,根据不同的请求路径服务器做出不同的响应

if (req.url === '/'|| req.url === " /index ' ) {

//读取 index.html文件

fs.readFile(path.join(__dirname,'htmls ', 'index.html'), function (err,data){

if (err)

{

throw err;

} 

//把读取到的 index.html中的内容直接发送给浏览器

res.end(data);

});

}else if (req.url == '/login') {

//读取index.html文件

fs.readFile(path.join(__dirname,'htmls ', 'login.html'), function (err,data){

if (err) {

throw err;

}

//把读取到的 index.html中的内容直接发送给浏览器

res.end(data);

});

}else if (req.url *** ' /list') {

//读取index.html文件

fs.readFile(path.join(__dirname,’htmls ‘,‘list.html'),function (err,data) {

if (err) {

throw err;

}

//把读取到的index.html中的内容直接发送给浏览器res.end(data);

});

}else if (req.url *** ’/register’){

//读取index,html文件

fs.readFile(path.join(__dirname,'htmls ' , 'register.html '), function (err,data){

if (err) {

throw err;

}

//把读取到的 index . html中的内容直接发送给浏览器

res.end(data);

});

}else{

//读取index. html文件

fs.readFile(path.join(__dirname,"htmls ',‘404.html' ),function (err,data){

if (err) {

throw err;

} 

//把读取到的index.html 中的内容直接发送给浏览器

res.end(data);

});

}

}).listen(9090,function () {

console.log( ‘http:// localhost: 9090');

}); 

注意事项

1.上面显示的是读取多个不同 html 文件的操作,若要读取成功,那首要的因素是,先创建好相应的 html 文件,其次是写好文件拼接,运用好 path 模块。

2. 异步操作时,只能用 err 捕获错误,不能用 try catch 来捕获错误,否则无法捕获错误。 

执行结果:

已经启动9090端口号,服务没有停止,如果再次启动,则会报错,无法进行重复启动。

image.png

测试9090端口号:

进入网址http:// localhost: 9090,反应出如下画面:

image.png

根目录可以看到index。

进入网址locallhost:9090/login,显示界面如下:与上面是一样的)

测试成功。

实验:

1. 首先选择一张图片,将图片拷贝到当前测试的目录下,当用户请求index读取并返回

image.png

2. 创建一个新的项目index.html

代码:

<! DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Hello Index</title>

</ head>

<body>

<h1 style="color: red; ">Hello Index</h1><h1>你好首页!!!看乱码吗?</h1>

..<img .src="../images/index.png" -alt="index·图片">

</ body>

</ html>

3. 重新启动服务 

4. 再次启动回车执行代码,进入网址后无法显示出存放的图片:

image.png

原因:

1. 打开开发工具,发现网页内容已经返回用户,并且包含图片框。

2. 对于图片的请求返回的是text/html并不是图片,请求的最终路径是/images/index.png

image.png

3. 将路径/images/index.png复制到浏览器并进入,出现如下错误:

image.png

虽然请求的是一张图片,但是服务器发现并没有请求图片的应用语句的判断,最终执行:

}else {

//读取index.html文件

fs.readFile(path.join(__dirname,  'htmls ' , '404.html '), function-(err , data)

if (err){

throw- err;

//读取到的index.html-中的内容直接发送给浏览器

res.end(data);

}); 

并返回404错误页面。 

 

二、解决服务器无法正常返回图片的方法

1.输入代码:

}else if (req.url === '/images/index.png')

//表示用户要请求images下的index.png图片

fs.readFile(path.join(__dirname,'images ', 'index.png'),function (err,data){

if (err) {

throw err;

}

res.setHeader( ' Content-Type', 'image/png');

//把读取到的index.html中的内容直接发送给浏览器res.end(data);

});

进入网页开源中国,点击常用对照表下的HTTP Mime-type,就会看到不同后缀对应不同的类型的地址。.png所对应的是image/png 

2.由于修改了代码,需要重新启动服务器

3.再进入网址,图片显示成功  image.png

注意:使用node.js编写服务器的时候,每一个请求都需要去判断,如果不判断,用户就不会得到响应

 

相关文章
|
1月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
37 1
利用html2canvas插件自定义生成名片信息并保存图片
|
1月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
48 2
|
21天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
34 0
|
2月前
|
Web App开发 前端开发 搜索推荐
创建HTML文件
【10月更文挑战第14天】创建HTML文件
53 4
|
2月前
HTML图片
【10月更文挑战第4天】HTML图片。
28 2
|
2月前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
104 2
|
3月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
51 6
|
2月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
177 0
|
15天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
31 7