3.2 使用命令初始化项目

2019-01-02 本文已影响30人空无一码

本节我们将在终端，基于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中引入外部样式表和展示图片都有有问题，我们将在下一节解决！

3.2 使用命令初始化项目

创建目录及文件

升级入门例子

自动开启浏览器

文件更新后自动重启

猜你喜欢

热点阅读