网站服务器的极简制作与搭建（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，一些无需加密且不依赖于服务器端数据的动态响应，可以在客户端实现即时响应。所以若仅需要静态网页，或者简易的动态效果，并不需要实现服务器的部分；通过拷贝文件，浏览器访问本地网页就可以进行简单的展示。（笔者因为展示的是搜索引擎，需要与本地的数据库、文本文件等做交互，仍然需要服务器端的搭建。）

关于HTML和CSS的语法，网上有许多入门教程。笔者大概刷了一下W3C在edx上开的入门课的第一章简介（1个半小时左右），感觉已经足以应付之后的工作。课程链接如下：
https://courses.edx.org/courses/course-v1:W3Cx+HTML5.0x+3T2017/course/
笔者觉得比较重要知识的checklist如下：
1. HTML中tag的使用方式，常用tag如<h1><p><ul><ol><li><input><a><div><span>$<h1><p><ul><ol><li><input><a><div><span>$等。
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个小时左右），感觉足以应付简单的网页制作。课程链接如下：

https://courses.edx.org/courses/course-v1:W3Cx+JS.0x+3T2017/course/
笔者觉得比较重要知识的checklist如下：

1. 在HTML文件中添加JavaScript代码
2. HTML模块调用JavaScript函数的方法，如onChange, onClick等attribute
3. JavaScript修改HTML文件以及CSS文件的方法，即DOM API。例如通过id索引到某个模块

例如笔者展示的是搜索引擎，需要根据输入文本框的内容修改”搜索”button的超链接，样本代码如下：

<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="changeURL()" onchange="clickButton()"> <a class="search-btn" id="search-btn" href="">Search</a>

即当文本框内容修改的时候修改Search文本的超链接内容，当确定文本框内容修改时（即Enter键）调用Search文本对应的超链接。

制作好网页内容和格式之后，如仍需要与服务器端进行交互，则需要搭建一个服务器用于监听、解析请求、做出响应。网站服务器更多是用于连接客户端请求与服务器本地数据处理，简易示意图如下：

NodeJS同样使用javascript语言，入门样例代码有很多，笔者刷了微软开在edx上的入门课的第一章（1个半小时左右），里面的样例代码已经满足了笔者的所有需求，课程链接如下：

https://courses.edx.org/courses/course-v1:Microsoft+DEV283x+1T2018/course/

笔者觉得比较重要知识的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代码如下所示：

const http = require('http') const fs = require('fs') http.createServer((req, res) => {     //console.log(req.headers)     //console.log(req.method)     //console.log(req.statusCode)     //console.log(req.url)     if (req.url == '/') {         fs.readFile('main_page.html', { encoding: 'utf-8' }, function(error, data) {             if (error) return console.log(error)             res.writeHead(200, { 'Content-Type': 'text/html', 'Content-Length': data.length })             res.end(data)         })     } else {         res.writeHead(404)         res.end('Wrong Query\n')     } }).listen(port)

其中req和res分别是HTTP链接中的request和response，服务器首先读入request，解析URL，生成HTML文件后写到response中。

NodeJS的社区活跃，有大量的库可以调用，常见的功能均可以通过google+npm+require解决，确实十分适合快速开发；脚本式的语言也十分容易调试上手。如果只是简单使用，可以直接搜索样例代码之后进行修改，笔者测试发现性能很不错，基本没有遇到语言本身的坑（例如python中字符串编解码的坑）,非常友好。

文章来源: 网站服务器的极简制作与搭建（HTML5+CSS+javascript+NodeJS）