SSR服务端渲染+CSR客户端渲染+post请求+get请求+总结三种开启服务器的方法总结
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
req 请求 客户端发送给这个服务端的消息对象
res 响应 这个服务端发给客户端的消息对象
res.end() 发送给客户端响应消息
res.writeHead(200,)
200 表示请求成功 404 找不到
响应头 将消息发送给客户端响应的时候，告诉客户端一系列要求
res.write("<div>你好</div>"); 给响应消息体中写入内容，可以使用多个，但是必须写在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("<h1>啦啦啦,你好" + o.user)
res.write("欢迎访问勇敢牛牛的处理get类型服务器</h1>");
res.end();
).listen(4002, "10.9.46.184", function ()
console.log("已启动get类型服务器10.9.46.184:4002");
);
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>
控制台：啦啦啦,你好牛小牛欢迎访问勇敢牛牛的处理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>
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)
)
)
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>Document</title>
</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>
总结
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这样启动服务器。
以上是关于SSR服务端渲染+CSR客户端渲染+post请求+get请求+总结三种开启服务器的方法总结的主要内容，如果未能解决你的问题，请参考以下文章