http响应练习—在服务器端渲染html（SSR）

想想aw

已于 2024-03-30 16:27:19 修改

阅读量568

点赞数 4

文章标签：网络协议网络前端 node.js 交互 http

于 2024-03-27 18:09:23 首次发布

本文链接：https://blog.csdn.net/2301_76669854/article/details/137084753

版权

一、什么是服务器端渲染（SSR）

简单说，就是在服务器上把网页生成好，整个的HTML页面生成出来，生成出的页面已经包含了所有必要的数据和结构信息，然后直接发给浏览器进行展现。

二、例题

要求搭建http服务，响应一个4行3列的表格，并且表格隔行换色，点击单元格后相应单元格会单独变色显示

（1）普通版写法：直接在html中写入css与js样式

思路：

(1)在建一个html文件，在里面写好htmlcssjs代码。

(2)通过fs去读取这个html文件，并且通过fs写入文件的方式写入到我们要运行的文件中

html代码如图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{
            padding: 30px 30px;
            border-collapse: collapse;
        }
        tr:nth-child(odd){
            background-color: pink;
        }
        tr:nth-child(even){
            background-color: darksalmon;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <script>
        var tds=document.querySelectorAll('td');
        tds.forEach(item =>{
        item.onclick=function(){
            this.style.backgroundColor="yellow";
        }
        });
    </script>
</body>
</html>

运行代码如图所示：

// 1.导入http模块
const http=require('http');
const fs=require('fs');
// 2.创建服务对象
const server=http.createServer((request,response)=>{
    let html=fs.readFileSync(__dirname+'/http响应练习普通版.html') //通过fs去读取这个html文件
    response.end(html);
})
// 3.监听端口，启动服务
server.listen(9000,()=>{
    console.log('服务已启动...');
})

运行结果如图所示：

（2）进阶版写法：创建css、js夹子进行文件分类。利用if分支进行不同文件的读取写入

思路：

(1)分别建一个html、css、js文件，在里面写好html、css、js代码。

(2)通过不同的if分支结构去通过fs去读取不同的文件，并且通过fs写入文件的方式写入到我们要运行的文件中

文件夹创建如图所示：

故：

html对应pathname是 " / "

css对应pathname是/css/http.css

css对应pathname是/js/http.js

运行代码如图所示：

// 1.导入http模块
const http = require('http');
const fs = require('fs');
// 2.创建服务对象
const server = http.createServer((request, response) => {
    // 获取请求url路径
    let { pathname } = new URL(request.url, 'http://127.0.0.1');
    if (pathname === '/') {
        // 读取文件内容
        let html = fs.readFileSync(__dirname+'/http响应练习进阶版.html') //通过fs去读取这个html文件
        response.end(html);
    } else if (pathname === '/css/http.css') {
        // 读取文件内容
        let css = fs.readFileSync(__dirname+'/css/http.css') //通过fs去读取这个html文件
        response.end(css);
    } else if (pathname === '/js/http.js') {
        // 读取文件内容
        let js = fs.readFileSync(__dirname+'/js/http.js') //通过fs去读取这个html文件
        response.end(js);
    } else {
        response.statusCode = 404;
        response.end('<h1>404 NOT FOUND</h1>')
    }
})

// 3.监听端口，启动服务
server.listen(9000, () => {
    console.log('服务已启动...');
})

运行结果如图所示：

想想aw

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
http响应练习—在服务器端渲染html（SSR）

一、什么是服务器端渲染（SSR）简单说，就是在服务器上把网页生成好，整个的HTML页面生成出来，生成出的页面已经包含了所有必要的数据和结构信息，然后直接发给浏览器进行展现。二、例题。
复制链接

扫一扫