nodejs路由控制图文混排

喜欢ヅ旅行 2022-09-09 02:14 193阅读 0赞

nodejs通过路由升级，接口处返回文字和图片，进行图文混排。

思考：

当第一次请求localhost:8006/buny的时候，会加载buny.html的文档部分，当<img src="/shiwImg">的时候，会加载localhost:8006/showImg的方法读取图片。最后一期显示出来，图片和文字一起加载。主要就是通过控制路由。

![20210828144553698.gif][]

routerImg.js

var http=require('http');
    var url=require('url');
    var router=require('../module/tuwen.js');
    http.createServer(function(request,response){
    
        if(request.url !== '/favicon.ico'){//清除第二次访问
            console.log('访问');
            var pathname=url.parse(request.url).pathname;
            pathname=pathname.replace(/\//,'');//替换前面/
            console.log(pathname)
            router[pathname](request,response);
            // response.end("");//不写会没有协议尾部，但是写了会访问俩次
        }
    }).listen(8006);
    console.log('Server running at http://127.0.0.1:8006/')

tuwen.js

var optfile = require('../module/optfile.js');
    var imgFile=require('../module/image.js');
    module.exports={
        buny:function(req,res){
            //闭包，回调这个函数,客户端打印程序
            function recall(data){
                res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
                res.write(data);
                res.end("");
            }
            optfile.readfile('../view/buny.html',recall)
        },
        showImg:function (req,res){
            res.writeHead(200,{'Content-Type':'image/jpeg'});
            imgFile.readImg('../imgs/vue.png',res);
        }
    }

optfile.js

var fs=require('fs');
    module.exports={
        readfileSync:function(path){//同步读取
            var data = fs.readFileSync(path,'utf-8');
            console.log('同步方法执行完毕');
            // return data;
        },
        readfile:function(path,recall){ //异步执行
            fs.readFile(path,function(err,data){
                if(err){
                    console.log(err);
                }else{
                    console.log(data.toString());
                    recall(data);
                }
            })
        },
    }

buny.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    喜欢你
    <img src="/showImg"/>
    </body>
    </html>

[20210828144553698.gif]: /images/20220829/e66545df2baa4c13956209f9e3b05f3e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，193人围观）

还没有评论，来说两句吧...

相关阅读

相关 html图文混排编辑器 java_Android自动解析html带图片，实现图文混排

在android中，如何将html代码转换为text，然后显示在textview中呢，有一个简单直接的方法： textView.setText(Html.fromHtml(c

小灰灰/ 2022年11月06日 04:47/ 0 赞/ 167 阅读

相关 NodeJs——（12）添加路由

①之前我们有这么一段代码： app.use('/', routes); //假如是根目录，那么交给routes.js来处理； app.use('/user

浅浅的花香味﹌/ 2022年09月23日 03:48/ 0 赞/ 240 阅读

相关 nodejs路由控制图文混排

nodejs通过路由升级，接口处返回文字和图片，进行图文混排。思考：当第一次请求localhost:8006/buny的时候，会加载buny.html的文档部分，当<i

喜欢ヅ旅行/ 2022年09月09日 02:14/ 0 赞/ 194 阅读

相关 nodejs路由信息

> var pathname=url.parse(request.url).pathname; //导入http var http=require('http

àì夳堔傛蜴生んèń/ 2022年09月09日 00:24/ 0 赞/ 181 阅读

相关 CoreText使用（2）图文混排

在一个UIVIew的子空间上实现图文混排。支持本地图片和网络图片显示不支持图片点击监听的功能。 CoreText从绘制纯文本到绘制图片使用NSAttributedStri

╰+攻爆jí腚メ/ 2022年08月19日 13:28/ 0 赞/ 202 阅读

相关 ListView—SimpleAdapter图文混排小案例

一、ListView使用步骤： 1）XML中添加ListView的控件 2）创建Item布局， 3）创建并初始化数据源 4）创建并初始化Adapter 5）

我不是女神ヾ/ 2022年08月19日 08:39/ 0 赞/ 230 阅读

相关 javaWeb css图文混排

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert t

以你之姓@/ 2021年12月15日 07:13/ 0 赞/ 325 阅读

相关 Android-textview图文混排（网络图片）

工作太忙，不做过多的解释了，核心是用到了 SpannableStringBuilder Glide 和 Rxjava 直接上代码了，就两个类。 public c

╰+哭是因爲堅強的太久メ/ 2021年11月01日 10:44/ 0 赞/ 385 阅读

相关图文混排的注意点

最近写网页，写到了图文混排的部分，想了想自己也不是很熟悉，快遗忘的差不多了，就想写篇博客，写代码的同时，敲下注意点，供自己日后，也让大家参考。 CSS样式 displ

女爷i/ 2021年10月23日 12:20/ 0 赞/ 328 阅读

相关 iOS NSTextAttachment - 图文混排

苹果在iOS7中推出了一个新的类NSTextAttachment，它是做图文混排的利器，本文就是用这个类，只用50行代码实现文字与表情混排，当然也可以实现段落中的图文混排。

ゞ浴缸里的玫瑰/ 2021年09月11日 04:40/ 0 赞/ 431 阅读