• 【SSR服务端渲染+CSR客户端渲染+post请求+get请求+总结】三种开启服务器的方法总结

    SSR服务端渲染

    get请求方式

    get.html文件

    <form action="http://10.9.46.253:4002" target="_self">
    <input type="text" name="user">
    <button type="submit">提交button>
form>

    • 1
    • 2
    • 3
    • 4

    req 请求 客户端发送给这个服务端的消息对象
    res 响应 这个服务端发给客户端的消息对象
    res.end() 发送给客户端响应消息

    res.writeHead(200,{})

    • 1

    200 表示请求成功 404 找不到
    {} 响应头 将消息发送给客户端响应的时候，告诉客户端一系列要求
    res.write("

    你好
    "); 给响应消息体中写入内容，可以使用多个，但是必须写在res.end()之前
    res.end()就是把上面的内容发送出去

    get.js，服务器文件

    var http = require("http");
var querystring = require("querystring");
http.createServer(function (req, res) {
    var str = req.url.split("?")[1];
    var o = querystring.parse(str);
    res.writeHead(200, {
        "Content-Type": "text/html;charset=utf-8",
        "Access-Control-Allow-Origin": "*" //CORS 允许谁跨域访问
    })
    // res.write(o.user + ",欢迎来到我的网站");
    res.write("
    啦啦啦,你好" + o.user)
    res.write("欢迎访问勇敢牛牛的处理get类型服务器
    "    );
    res.end();
}).listen(4002, "10.9.46.184", function () {
    console.log("已启动get类型服务器10.9.46.184:4002");
});


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里插入图片描述

    Ajax请求方式

    <script>
    var str = "user=牛小牛"
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", loadHandler);
    xhr.open("GET", "http://10.9.46.184:4002?" + str);
    xhr.send();

    function loadHandler(e) {
        console.log(xhr.response);
    }
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    控制台：啦啦啦,你好牛小牛欢迎访问勇敢牛牛的处理get类型服务器

    CSR客户端渲染

    通过Ajax实现CSR,客户端渲染

    在这里插入图片描述
    csr.html

    <body>
    <form action="http://10.9.46.253:4002" target="_self">
        <input type="text" name="user">
        <button type="submit">提交button>
    form>
    <div>div>
    <script>
        
        var form,input,div;
        init();
        function init(){
            form=document.querySelector("form");
            input=document.querySelector("input");
            div=document.querySelector("div");
            form.addEventListener("submit",submitHandler);
        }

        function submitHandler(e){
            e.preventDefault();
            ajax("user="+input.value)
        }

        function ajax(param){
            var xhr=new XMLHttpRequest();
            xhr.addEventListener("load",loadHandler);
            xhr.open("GET","http://10.9.46.253:4002?"+param);
            xhr.send();
        }

        function loadHandler(e){
            // console.log(this.response)
            div.innerHTML=this.response;
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    post.js文件

    /* 加载服务器对象 */
var http = require("http");
var querystring = require("querystring")
/* 创建服务器 */
http.createServer(async function (req, res) {
    /* 通过这个promise函数实现异步阻塞 */
    var o = await getData(req);
    res.writeHead(200, {
        "Content-Type": "text/html;charset=utf-8",
        "Access-Control-Allow-Origin": "*" //CORS 允许谁跨域访问
    })
    res.write(`欢迎${o.user}访问勇敢牛牛的处理post类型服务器`);
    res.end();
}).listen(8080, "10.9.46.184", function () {
    console.log("已启动post类型服务器10.9.46.184:8080");
})

function getData(req) {
    return new Promise(function (resolve, reject) {
        var str = '';
        req.on("data", function (_chunk) {
            /* 收到的是buff类二进制数据流 */
            str += _chunk
            // console.log(str);
        })
        req.on("end", function () {
            var o = querystring.parse(str);
            // console.log(o);
            resolve(o)
        })
    })
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    post.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>Documenttitle>
head>

<body>
    <h1>safsd h1>
    <script>
        var str = "user=牛小牛";
        // str = str.repeat(10000)
        var xhr = new XMLHttpRequest();
        xhr.addEventListener("load", loadHandler);
        xhr.open("POST", "http://10.9.46.184:8080");
        /* post发送数据 */

        xhr.send(str);

        function loadHandler(e) {
            console.log(xhr.response)
        }
    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    总结

    SSR服务端渲染：直接get请求服务端会写入当前页面
    CSR服务端渲染：通过求服务端会嵌入当前页面，不修改页面
    get请求有两种：直接在url后面跟进对象，通过Ajax请求注意xhr.end()没有参数
    post通过xhr的open方法（“POST”）进入，因为这个数据的“庞大性”需要异步promise处理数据，实现异步阻塞式同步。

    三种开启服务器的方法总结

    1、安装了全局nodemon的话，通过nodemon 文件+后缀名：启动
    2、没有安装全局nodemon，项目通过这个npm i加载所有的开发依赖和项目依赖，之后，通过观察这个package.json脚本命令，执行npm run 名称。
    3、如果开发依赖里面加载了nodemon，但是没有这个全局安装，可以通过这个npx nodemon post.js这样启动服务器。

  • 相关阅读:
    ABB机器人常用指令功能说明
    零基础直接上手java跨平台桌面程序，使用javafx(六)查询sqlite数据显示到TableView中
    查找字符串中的子串-C版
    在ESP32-Arduino开发中添加其它Arduino库
    Kettle运行Spoon.bat出现命令框然后闪退【BUG已解决】
    npm 实现原理
    5. `sklearn`下的线性回归
    设计模式乱记
    Java Stream 的常用API
    MySQL进阶_9.事务基础知识
  • 原文地址：https://blog.csdn.net/m0_46672781/article/details/126164621