作者WalkingIce ( 杀手哥吉拉 13)
看板Web_Design
标题Re: [请益] 网页技术是如何实现动态生成大量的html
时间Sat Jun 17 16:17:16 2023
※ 引述《xxzrainy (rainy)》之铭言：
: 各位前辈好，小弟目前自学网页半年，若用语有任何不当还请海涵并指正。
: 最近在练习如何做出一个评论/QA常见问题的区块。
: 如果是少量的评论，直接替换HTML标签里的文字就好。
: 主要是想请教，是什麽样的技术可以一直动态生成数以百计的评论呢？
: 以我半年的学习角度会让我联想到word里面的合并寄件功能，不知道两者有无联系。
: 恳请各位前辈指点迷津了，谢谢。
我尝试用比较简略的方式解释一些基本的概念，因此有些细节并不是真正
运作的情况，等到你更进阶的时候，再去理解细节吧
先简略地解释开网页的时候，Client 跟 Server 的关系
此时 Client 就是你的浏览器 Browser，Server 可能是 gmail 或是内容农场
所谓「开网页」最简略的讲法就是「用浏览器下载一个档案，再显示该档案」
有点像是你从别颗硬碟(server)透过 USB 线(网路)拷贝(下载)图片(html档)
然後用看图程式(Browser)打开该档案
Browser --- REQUEST --> Server
Browser <-- Response(html) --- Server
(中间还有一些 HTTP header 之类的细节就暂时不管它)
Browser 收到 html 之後会发现「喔！我看得懂这一堆乱七八糟的英文字耶！」
同样的 html 档案，用文字编辑器打开来，会看到 <body background="red">
等等之类的英文字；用 Browser 的话，它会用比较特别的方式去解读这串文字
譬如说把画面上的背景填上红色，或着在最上方用黑色超大粗体填上 PTT 几个字
这个「把 html 档案画成人眼看到的样子」就叫 render
(render 的意义很广，譬如说 server side rendering 就不同於此，先不管它)
User ---操作---> Browser ---Request---> Server
User <--render-- Browser <--Response--- Server
回到你一开始的问题
> 什麽样的技术可以一直动态生成数以百计的评论呢？
有几个地方可以达成这件事情
1. Generate server response
既然 server 是回传一个 html 档给 client，我们可以在回传的内容上面做手脚
譬如原本要回传
<div>
<div> 5/1 的天气很好</div>
</div>
可以用程式去生出 10 个类似的文字与日期，让 server 回传
<div>
<div> 5/1 的天气很好 </div>
<div> 5/21 的天气不好 </div>
....
<div> 5/41 的天气很好 </div> // bug!
</div>
至於怎麽产生，取决於你怎麽实作 server。就是推文内乡亲说的 asp php..etc
除了在 server 端捞资料库，配合自己写演算法产生内容之外，还可以做一些事
譬如跑去接 ChatGPT，产生更多像人类的回应，使得内容农场(误)看起来更有人气
2. Client generate rendering result
以前的 Browser 比较单纯，真的只是单纯地显示 html 的内容。但是 JS 相关技术
进步之後，开启了这几年的大前端时代。现在 Server 回传的 html 档常会夹带一些
JS code，让 Browser render page 的同时也执行该 js script
这些 JS script 可以送 request 给其他 server，也能替换 render 的内容，譬如
按下 F12，在 cosole 里面恶搞自己的页面
document.getElementsByTagName('body')[0].innerText = "XD"
既然有了这招，那也能替换页面里面的内容，配合你写的逻辑去更改评论
当然也可以去接 ChatGPT 动态修改显示的内容。所以推文另有乡亲提到 AJAX, JS
通常会把 1 说成在 server side 做这件事，会把 2 说成在 client side 做
再拿前面的硬碟拷贝来比喻。1 就是你有颗神奇硬碟，根据你的兴趣传回不同的图片
2 则是这颗神奇硬碟总是传回相同的图片，但是会另外传个 plug-in，让你的看图
程式执行这个 plug-in 去修改图片
因为你的提问，字面上看起来是在最末端的 User 看到的内容，所以两种方向皆可
但是实务上来说，在 Server side 做会比较合理。直接在 server side 生出一堆
假评论，存进资料库里面。每次有人打开该文章就直接进资料库捞。这样每个开该
页面的人都会看到同样的东西，Server 负担也比较小 (用资料库的硬碟空间换 CPU
执行时间)
该页面可能一开始只显示 20 则评论，等到 User 点下「请长官再多训勉几句」之时
才透过 JS 去跟 server 多捞一点资料，动态更新页面上的部分内容
这就是另一位乡亲提到的 AJAX 详细用法
随着你更深入地探索，未来的问题可能会更复杂，解法可能会更....多采多姿？
或许提示你的开发环境(ie: 用哪些前端、後端 framework)，乡亲们可以更容易
推测你遇到的困难点在哪里，帮忙减少一些冤枉路
--
有一天小明跟朋友打牌，有张牌不小心掉进水里。此时女神出现了
女神：「你掉的是这张红中，还是这张白板？」
小明：「都不是，我掉的是青发。快还我吧大婶，我缺那张就听牌了」
女神：「.................(不爽)」
「你真是诚实的好孩子，红中跟白板都送你吧」
於是小明就相公了。
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 110.233.253.80 (日本)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1686989845.A.68B.html
1F：推 nottt: 难得的长文推一下，虽然原po不知道还会不会回来看 06/17 22:37
2F：推 kyoe: 认真 06/19 11:41
3F：推 xxzrainy: 我是原po 没想到竟然能够被这麽认真的回文 目前正在积 07/17 19:21
4F：→ xxzrainy: 极学习中 网页的技术让我感觉到学海无涯 07/17 19:21
5F：推 xxzrainy: 目前使用的开发环境也不过是用vsCode写写自己有兴趣的程 07/17 19:23
6F：→ xxzrainy: 式码 实在是还有很长一段路要走XD 07/17 19:23
7F：→ WalkingIce: 加油！ 07/24 07:11