本节我们将在终端，基于Linux命令，初始化我们的项目，从0搭建一个最简单的网站。
创建目录及文件
- 打开终端，默认进入的是用户所在的根目录；
- 创建项目目录：mkdir staticServer；
- 进入项目目录：cd staticServer；
- 初始化node项目：npm init -f 直接按默认配置生成package.json文件；
- 安装依赖：npm install koa ( package.json 文件 多了一个dependencies的配置项，里面包含了koa这个名称和所用的版本)；
- 创建服务器入口文件：touch index.js；
- 编辑文件
vi index.js // 使用终端的vi编辑器，也可以直接使用vscode等界面编辑器。
在英文输入法下按一下 i 键即进入编辑模式，输入如下内容：
const Koa = require('koa'); // 引入koa框架
const app = new Koa();
// ctx 为Koa 提供的 Context 对象，表示一次对话的上下文(包括 HTTP 请求和 HTTP 回复)，通过操作ctx，就可以控制返回给用户的内容。
app.use(ctx => {
// 该属性就是发送给用户的内容。
ctx.response.body = '写代码很快乐！';
});
app.listen(8888);
console.log('恭喜你，服务器启动成功：复制 http://localhost:8888/ 到浏览器即可访问');
输完后，按esc进入指令模式，然后按 shift + : 两个键进入命令行模式，输入 wq 保存退出。
- 添加启动脚本： 在package.json 文件中的scripts 部分加入 "start": "node index", 如下所示：
{
"name": "staticServerByKoa",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"koa": "^2.6.2"
}
}
- 启动项目，在项目根目录下输入：
npm start
把终端中的 http://localhost:8888/ 复制到浏览器即可看到网页显示：写代码很快乐，至此，一个简单的入门例子就实现了。
升级入门例子
在上一节我们需要手动开启浏览器，并且更改文件后还需要手动重启服务器，同时页面太丑伤不起，所以本节进行优化：
自动开启浏览器
- 将 index.js文件改为：
const Koa = require('koa'); // 引入koa框架
const cp = require('child_process'); // 用来创建子进程
const app = new Koa();
// ctx 为Koa 提供的 Context 对象，表示一次对话的上下文(包括 HTTP 请求和 HTTP 回复)，通过操作ctx，就可以控制返回给用户的内容。
app.use(ctx => {
// 该属性就是发送给用户的内容。
ctx.response.body = '写代码很快乐！';
});
app.listen(8888);
cp.exec('open http://localhost:8888/'); // 自动打开浏览器
console.log('恭喜你，服务器启动成功：复制 http://localhost:8888/ 到浏览器即可访问');
文件更新后自动重启
- 安装 nodemon：
// --save-dev 是为了让nodemon 配置到开发环境的依赖项即devDependencies中，因为生产环境不需要用它
npm i --save-dev nodemon // 它会监测项目中的所有文件，一旦发现文件有改动，会自动重启应用
- 修改package.json 文件中scripts的start脚本为：
"start": "nodemon index",
此时，我们把index.js中的“带代码很快乐”改成“不聪明的码农，写代码很苦逼”，就会重新打开浏览器并显示最新内容。
- 优化页面内容，将内容中间件改为：
app.use(ctx => {
// 该属性就是发送给用户的内容。
ctx.response.type = 'html';
ctx.response.body = '<h1 style="color: red;height: 60px; background-color: black;">导航栏</h1>';
});
此时就可以返回 最常见的html内容了，但是写起来很不便，需要再次优化。
- 再次优化，将内容中间件改为：
app.use(ctx => {
// 该属性就是发送给用户的内容。
ctx.response.type = 'html';
ctx.response.body = fs.createReadStream('index.html');
});
不出意外，会报错，因为我们没有引入fs, 在前面加入：
const fs = require('fs');
此时，虽然不报错，但 页面显示 Not Found，因为我们没有 创建index.html，
创建 index.html，并输入以下内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习koa</title>
</head>
<body>
<h1>学习真快乐！</h1>
</body>
</html>
此时，每改动一次html文件，在浏览器刷新即可看到最新内容，并且添加内容和样式就方便很多了。
自此，一个正常网站就可以显示了，开发起来也比较方便，但是，在html中引入外部样式表和展示图片都有有问题，我们将在下一节解决！
网友评论