⽹站服务器的极简制作与搭建（HTML5+CSS+javascript+NodeJS） 吉林体育学院学报
中档轿车本⽂致⼒于使得较有经验的程序员能够在⼀天之内了解⽹站搭建制作的基本知识，尽快制作出可以展⽰⽤的demo。丙酮酸乙酯
具体地，笔者为了完成⼤作业，需要搭建⼀个搜索引擎的⽹站，仅仅作为展⽰的demo，并不对原创性和运⾏性能有过多要求，所以⽬标是尽快制作出差不多的⽹站⽤于展⽰。笔者对⽹站相关知识的学习，也只有不到⼀周的时间，⽂中描述如有疏漏，欢迎各路⼤神指教。
框架概览
⽹站搭建通常分为两个部分：服务器搭建（服务器端）+⽹页制作（客户端）。⽹页制作部分主要包括⽹页内容、样式设计；服务器部分负责监听端⼝，根据请求与本地内容⽣成相应的响应。⽹站框架⽰意图如下图所⽰： ⼀种简单的情景是：客户端通过访问特定IP以及端⼝发送HTML请求，监听该IP端⼝的服务器（这⾥使⽤NodeJS搭建）会接收并解析出HTML请求，然后根据请求的指定路径⽣成相应的HTML⽂件，通过HTTP协议返回到客户端，客户端的服务器再根据收到的HTML⽂件显⽰或者再次发送请求（依据HTML, CSS, javascript语法）。使⽤HTML5+CSS+javascript+NodeJS的客户端服务器端通信流程的简易⽰例图如下：
笔者选⽤了NodeJS搭建服务器端是因为其同样基于javascript语⾔，脚本式的语⾔极易上⼿，同时异步并发的特性天然⽀持⽹站服务器搭建，借助于众多成熟的包可以轻松愉快的搭建出性能不弱的⽹站
服务器。其运⾏在服务器端，通过监听反馈对⽤户的需求做出响应。
前端⽹页制作依赖于HTML, CSS, javascript三⼤模块，其特性被绝⼤多数浏览器⽀持，也是⽹页制作的标准⼯具。根据W3C的建 议，HTML5负责⽹页内容（例如包括什么模块、模块的相对位置、⽂章内容等等），CSS负责样式设计（例如字体⼤⼩、模块之间的间距、按钮⼤⼩颜⾊等等），JavaScript负责⽹页的动态相应部分（即根据⽤户的操作实时做出响应，例如修改⽹页内容和样式等等）。⽹页部分运⾏在客户端，通过浏览器分析展⽰给⽤户。
注意到通过JavaScript，⼀些⽆需加密且不依赖于服务器端数据的动态响应，可以在客户端实现即时响应。所以若仅需要静态⽹页，或者简易的动态效果，并不需要实现服务器的部分；通过拷贝⽂件，浏览器访问本地⽹页就可以进⾏简单的展⽰。（笔者因为展⽰的是搜索引擎，需要与本地的数据库、⽂本⽂件等做交互，仍然需要服务器端的搭建。）
⽹页制作
1. </script>等。
2. HTML的基础语法，如HTML5声明，utf-8编码指定，⽹页标题设定，⽹页主要语⾔设定等。
3. tag中常⽤attribute的使⽤⽅式，如href, class, id, onChange等。
4. CSS在HTML⽂件中的链接⽅式，以及书写⽅式（style attribute等）。
5. CSS索引HTML⽂件中模块的⽅式，例如通过class，通过tag，通过id，以及多标签间交并继承等语
法。
6. inline（如span）和block（如div） display的区别。
7. CSS的box model，理解margin和padding的区别。
了解HTML和CSS的基础语法之后，就可以制作出简单的⽹页了。如需⾃⾏设计的话，⽹上有⼀些使⽤
dreamweaver，bootstrap等⼯具进⾏制作的教程。另⼀种⽅便简单的⽅法是在⽹上搜索类似的⽹站，下载好HTML以及CSS ⽂件之后，对其内容格式做相应的修改，适⽤于⽆收益学习⽤的简单展⽰⽹页制作。
⽹站修改的时候强烈建议两个极其⽅便的⼯具：Visual Studio Code和Google Chrome。前者是微软出的跨平台编辑器，安装好HTML以及CSS的相关语法⼯具包后，即可实现语法补全、关键词加亮等功能；令笔者⼗分满⾜的⼀个功能是其⽀持代码格式的⾃动调整，部分下载好的HTML⽂件中所有代码都顺序排列在⼀⾏内，不易于代码阅读定位与调整，VS code可以⼀键将代码调整为易于阅读的格式，⾮常⽅便。Google Chrome作为前端⼯程师的神器，其使⽤⽅法⼊门教程⽹上有很多，这⾥简单介绍常⽤的⽅法：F12进⼊调试模式；其左上⾓的箭头可以点选⽹页内容之后定位其相关代码的具体
位置；在elements 页⾯中显⽰有HTML和CSS源⽂件，⿏标移动到HTML⽂件的相应模块时会在⽹页上对相关内容进⾏加亮，⽽且通过不同颜⾊区分margin/border/padding等，具体数值还会在elements中标识；点选模块之后会在elements页⾯中显⽰其相关的CSS代码，清晰的表⽰了各个属性的继承覆盖，并且可以直接修改查看即时效果；Console页⾯在JavaScript调试时常⽤；Network 页⾯记录了客户端与服务器端的⽹络通信，在服务器代码调试时常⽤。
基于HTML5以及CSS，已经可以制作好看的静态⽹页了。JavaScript主要⽤于在客户端增加即时的动态响应，制作简单的动态⽹页。JavaScript语⾔的⼊门教程⽹上同样有很多，详细的如廖雪峰⽹站等，笔者刷了W3C在edx上开的⼊门课的前两章（2个⼩时左右），感觉⾜以应付简单的⽹页制作。课程链接如下：
笔者觉得⽐较重要知识的checklist如下：
1. 在HTML⽂件中添加JavaScript代码
2. HTML模块调⽤JavaScript函数的⽅法，如onChange, onClick等attribute
3. JavaScript修改HTML⽂件以及CSS⽂件的⽅法，即DOM API。例如通过id索引到某个模块
例如笔者展⽰的是搜索引擎，需要根据输⼊⽂本框的内容修改”搜索”button的超链接，样本代码如下：
<script>
function changeURL() {
即当⽂本框内容修改的时候修改Search ⽂本的超链接内容，当确定⽂本框内容修改时（即Enter 键）调⽤Search ⽂本对应的超链接。
服务器搭建
制作好⽹页内容和格式之后，如仍需要与服务器端进⾏交互，则需要搭建⼀个服务器⽤于监听、解析请求、做出响应。⽹站
服务器更多是⽤于连接客户端请求与服务器本地数据处理，简易⽰意图如下：
大庆油田公司主页
NodeJS 同样使⽤javascript 语⾔，⼊门样例代码有很多，笔者刷了微软开在edx 上的⼊门课的第⼀章（1个半⼩时左右），⾥⾯的样例代码已经满⾜了笔者的所有需求，课程链接如下：
美乳人体笔者觉得⽐较重要知识的checklist 如下：
1. 通过require 调⽤包的⽅法
2. console.log ⽤于代码调试
3. 使⽤http 模块搭建HTTP 服务器
4. 使⽤fs 模块读写本地⽂件
5. 使⽤child_process 模块执⾏本地程序（异步和同步两种模式）（⾼版本NodeJS 貌似存在更先进的调⽤本地程序的⽅式，笔者使⽤的是NodeJS
6.x ）
徐州东方集团6. 使⽤json ⽂件进⾏数据传输
7. String 变量的拼接切分⽐较等
例如当访问指定IP 端⼝时返回主页⾯的HTML ⽂件的NodeJS 代码如下所⽰：
<script>function changeURL () { var input = document.querySelector("#s-box") console.log(input.value)
var but = document.querySelector("#search-btn") but.setAttribute("href", input.value)}function clickButton () { var but = document.querySelector("#search-btn") but.click()}</script><input type="text" id="s-box" value="" autocomplete="off" oninput="ch <a class="search-btn" id="search-btn" href="">Search</a>
const http = require('http')const fs = require('fs')ateServer((req, res) => { //console.log(req.headers) //console.hod) //console.log(req.statusCode) //console.log(req.url) if (req.url == '/') { fs.readFile('main_page.html', { encoding: 'utf-8' }, function (error, d
其中req 和res 分别是HTTP 链接中的request 和response ，服务器⾸先读⼊request ，解析URL ，⽣成HTML ⽂件后写到response 中。
NodeJS 的社区活跃，有⼤量的库可以调⽤，常见的功能均可以通过google+npm+require 解决，确实
⼗分适合快速开发；脚本式的语⾔也⼗分容易调试上⼿。如果只是简单使⽤，可以直接搜索样例代码之后进⾏修改，笔者测试发现性能很不错，基本没有遇到语⾔本⾝的坑（例如python 中字符串编解码的坑）,⾮常友好。 if (req.url == '/') { fs.readFile('main_page.html', { encoding: 'utf-8' }, function (error, d if (error) return console.log(error) res.writeHead(200, { 'Content-Type': 'text/html', 'Content-Lengt d(data) }) } else { res.writeHead(404) d('Wrong Query\n') }}).listen(port)
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议