Appearance
Nginx
Ubuntu 安装
Ubuntu 安装 Nginx 。
apt update
apt install nginx使用命令查看配置文件夹位置， /etc/nginx ，其中 nginx.conf 是入口。
whereis nginx配置文件显示站点文件夹位置， /var/www/html 。
启动 nginx 服务。
nginxWindows 安装
Windows 下载 Nginx 稳定版压缩包，解压压缩包，重命名文件夹。
配置文件夹为 conf/ conf.d/ ，前者是入口，后者是拆分，以方便维护。
站点文件夹为 html/ 。
双击 nginx.exe 启动服务。默认使用 80 端口，访问 http://localhost/ 。
操作1
新建文件 hello.txt 。
Hello World新建文件 hello.html 。
<html>
<head>
<meta charset="utf-8" />
<title>Hello</title>
</head>
<body>
<div id="app"></div>
<script>
async function main() {
const response = await fetch('/hello.txt');
const text = await response.text();
return text;
}
main().then(text => {
document.getElementById('app').textContent = text;
});
</script>
</body>
</html>访问 http://localhost/hello.html 。
操作2
新建文件 books.json ，格式和 ORM 返回保持一致。
[
{
"id": 1,
"name": "西游记"
},
{
"id": 2,
"name": "水浒传"
},
{
"id": 3,
"name": "三国演义"
},
{
"id": 4,
"name": "红楼梦"
}
]新建文件 books.html 。
<html>
<head>
<meta charset="utf-8" />
<title>图书</title>
</head>
<body>
<script>
async function main() {
let records = [];
try {
const response = await fetch('/books.json');
records = await response.json();
} catch (error) {
console.error(error);
}
return records;
}
main().then(data => {
const ul = document.createElement('ul');
data.forEach(book => {
const li = document.createElement('li');
li.textContent = book.name;
ul.appendChild(li);
});
document.body.appendChild(ul);
});
</script>
</body>
</html>访问 http://localhost/books.html 。
操作3
新建文件 text.html 。
<html>
<head>
<meta charset="utf-8" />
<title>输入输出</title>
</head>
<body>
<label>
输入：
<input id="input" />
</label>
<br />
<label>
输出：
<input id="output" />
</label>
<script>
document.getElementById('input').addEventListener('input', function (event) {
document.getElementById('output').value = event.target.value;
});
</script>
</body>
</html>访问 http://localhost/text.html 。