node_http服务: express 1

最新推荐文章于 2022-12-11 12:15:25 发布

皮卡卡卡

最新推荐文章于 2022-12-11 12:15:25 发布

阅读量107

点赞数 1

分类专栏： node 文章标签： nodejs

本文链接：https://blog.csdn.net/qq_44808878/article/details/114677129

版权

node 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

node_http服务: express 1

express 包：

/命令行中配置环境及安装 包：
*   npm init -y
*   npm i express -S
*
/引入包*/
const express = require("express");
const path = require("path");

/创建一个服务*/
let app = express();
*************************************************************************************
/  监听端口*/
*   本地IP 127.0.0.1  localhost
*   端口，https默认端口443  http默认端口80
*   本地测试的时候，可以使用别的端口 2000 - 65536

app.listen(2333);
*************************************************************************************
/处理各种请求*/
* 路由：
*   根路由 	/
*	 子路由 	/路由
*两个参数：
* 	请求 request
* 	响应 response
*
/监听根路由的get请求 */
app.get("/",(req,res)=>{
    // 第一个参数 req 存储着前端请求过来的相关信息，比如cookie、参数、浏览器信息等等    
    // 第二个参数：res 要使用res去给前端返回
    // console.log(req);
    // console.log(res);
    
    // res.send("字符串")         返回文字页面
    // res.sendFile("网页文件的路径")    返回静态页面（必须为绝对路径）
    
    res.sendFile(path.join(__dirname,"./html/index.html")); //必须为绝对路径
});

/*监听login.goudan路由的get请求*/
app.get("/login.goudan",(req,res)=>{
    res.send("这是另外一个路由");
});
app.get("/article",(req,res)=>{ //监听article端口
    res.send("这是article路由");
});
app.get("/user",(req,res)=>{    //监听user端口
    res.send("这是user路由");
});
//ajax请求返回给前端一个数组
app.post("/data",(req,res)=>{   //监听data端口 的post请求
    res.send({name:"afei",age:18});
});

接上案例：前端的html页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<!--/服务器路径，自动在前面补上协议 IP 端口-->
<a href="/">首页</a>
<a href="/login.goudan">登录</a>
<a href="/article">文章</a>
<a href="/user">用户</a>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    //点击后发送一个ajax请求
    $(document).click(function(){
        $.ajax({
            type : "POST",
            url : "http://127.0.0.1:2333/data", //路径需要和后端监听的端口一样data
            success(msg,xx,yy,zz){
                console.log(msg);   //第一个参数就为后端返回的数据	ajax的参数
                console.log(xx);
                console.log(yy);
            }
        });
    });

</script>
</body>
</html>

案列2：关于网页的应用

const express = require("express");

let app = express();
app.listen(2333);

app.get("/",(req,res)=>{
    /*不要返回数字，会当成status状态码*/

    // res.send("阿飞老师");
    res.send(
           `<!DOCTYPE HTML>
            <html>
            <head>
            <title>网页</title>
            <style>
            #main{
                width: 100px;
                height: 100px;
                background-color: pink;
            }
            </style>
            </head>
            <body>
                <div id="main"></div>
            </body>
            </html>
           `
            );//浏览器能将这段字符串转换成一个网页
});

案例3：前端点击按钮发送ajax请求爬取图片，后端返回图片地址数组。

前端代码：
<!DOCTYPE HTML>
<html>
    <style>img{width: 350px;}</style>
<body>
	<input type="button" id="btn" value="按钮">
<div id="show"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $("#btn").click(function(){
        $.ajax({
            type : "POST",
            url : "/img",
            success(data){  //data为后端返回的数组
                // console.log(data);
                data.forEach(item=>{
                    show.innerHTML += `<img src="${item}" />`
                });
            }
        });
    });
</script>
</body>
</html>

后端代码：
const express = require("express");
const request = require("request");
const cheerio = require("cheerio");
let app = express();
app.listen(4567);

/*根路由监听*/
app.get("/",(req,res)=>{
    res.sendFile( require("path").join(__dirname,"./test.html") );
});

/* /img 接口的监听 */
app.post("/img",(req,res)=>{
    request.get(
        "https://www.meitulu.com/item/7667.html",
        (err,r,body)=>{
            let $ = cheerio.load(body);
            let imgArr = [];
            $("center img").each(function(){
                imgArr.push($(this).prop("src"));
            });
            res.send(imgArr);//返回给前端一个url地址的数组
            console.log(imgArr);            
        }
    );
});

皮卡卡卡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node_http服务: express 1

node_http服务: express 1express 包：/命令行中配置环境及安装包：* npm init -y* npm i express -S*/引入包*/const express = require("express");const path = require("path");/创建一个服务*/let app = express();************************************************************
复制链接

扫一扫