Node入门

---

一、命令行工具

1. 启动命令行工具

运行窗口打开命令行：
在windows系统，按 win+R 可以打开运行窗口，然后输入 cmd ，再按回车，就可以打开windows系统的命令窗口了。

2. 常用命令

2.1 一些常用的命令

• dir : 查看当前目录下的所有文件夹；
  

• cd + 文件夹名：进入到指定目录下；
  

• cd . . :切换到上一级目录；
  

• cd + 首字母/文件夹前两个字母 + tab键：实现补全功能，进入到指定目录下的快捷键；
  例如：输入 cd + De + tab键
  

• 盘符E：直接切换到E盘；
  例如： E：
  

• shutdown: 关机

2.2 让命令行直接进入到指定目录

打开指定文件夹，右键+shift，点击在此处打开Powerdshell窗口

3. 第三方程序命令

上面我们用的是系统自带命令，但是在大部分开发工作中，我们使用的命令都是第三方程序的命令。

例如：当我们安装Git之后，我们就可以在命令行中执行git的相关命令：

git add

当我们安装node之后，还可以执行node的相关命令：

node -v
npm -v

二、Node概述

1. 什么是Node?

Node是Javascript这门语言的运行环境，通过Node，我们可以让Javascript具备后台开发的能力。

安装Node: Node下载网址
下载完成之后，找到.msi的安装包，然后一直[下一步]就可以了。

测试Node：安装完成之后，打开命令行工具，输入 node -v ，查看node版本号

如果可以显示版本号，说明Node已经安装成功了。

2. npm

npm是node的包管理器，我们可以通过npm下载第三方模块，也可以通过npm管理一整个Node项目或者前端开发项目的所有依赖。

在安装Node的时候，npm也已经被成功安装了，这里直接打开命令行即可，输入 npm -v，如果可以看到NPM的版本号，说明NPM安装成功。

使用npm下载第三方模块：

npm install jquery

下载好的文件就在node_modules文件夹下：

3. cnpm

在后续的开发中，我们会非常频繁地使用npm下载第三方模块，但是npm服务器位置处于国外，下载包的速度会比较缓慢。幸好淘宝为国内用户提供的 cnpm，它是npm的镜像，下载第三方时，我们完全可以使用cnpm来代替npm。

cnpm安装
安装npm之后，执行下面的命令，可以下载cnpm

npm install -g cnpm -registry = https://registry.npm.taobao.org

下载完成之后，输入下面的命令，检查是否安装成功

cnpm -v

如果正确安装成功，命令行会提示cnpm的版本信息。

4. 在node中执行Javascript程序

• 直接执行

打开命令行工具，输入命令：

node

按回车键即可进入node的终端：

然后可以在这个终端输入Javascript程序：

注意：在开发过程中，我们通常不使用这种方式。

• 运行js文件

我们可以使用node命令执行js文件。

例如 在一个test中新建一个hello.js文件：

在hello.js输入代码：

运行hello.js，得到运算结果：

三、npm常用命令

1. npm安装第三方模块

npm有两种方式安装第三方模块：本地安装 和 全局安装，使用哪种安装方式，取决于我们用npm模块来做什么。

• 如果模块作为项目的依赖，需要被引入到指定项目当中，需要本地安装；
• 如果需要模块提供某些命令工具，则需要全局安装；

1.1 本地安装

我们先打开windows命令行工具，进入到需要安装第三方模块的目录，例如 F:\npmtest，然后执行下面命令：

npm install jquery

安装完成之后，npm会在F:\npmtest 目录下创建一个node_modules的目录，然后将npm模块下载到这个目录之下，上面的例子我们安装的是jquery，所以打开node_modules会看到一个jquery的目录。

1.2 全局安装

某些第三方模块为我们提供了一些功能需要全局安装才可以使用，例如 http-server，它可以为我们一个创建 静态文件服务器 的功能。

现在我们就来下载这个模块，全局安装需要在命令中添加 -g：

npm install http-server -g

注意： -g 放在 http-server 前面后面都可以。

下载完成之后，http-server模块不会像本地安装那样下载到当前目录下，而是会下载到系统目录中，win10系统下载目录如下所示：

C:\Users\Administrator\AppData\Roaming\npm\node_modules

我们不必打开这个目录去浏览下载文件，只要知道全局安装之后，我们就可以使用这个模块提供的命令即可。http-server模块提供了http-server命令，可以用此命令创建一个静态服务器，步骤如下：

1. 选择开启服务器的目录，这里选择 F:/test/server目录；
2. 在这个目录中执行http-server命令，默认端口为8080；

http-server

3. 在server目录中创建一个index.html文件；

4. 打开浏览器，访问http://127.0.0.1:8080/index.html，可以看到index.html文件的内容；
5. 如果服务器与其他设备处于同一网络（例如同一WIFI下的手机和电脑），可以使用ip地址访问此网页。

2. npm项目初始化

使用如下命令，可以在当前目录下创建一个node项目（ 实质上就是添加了一个package.json文件 ）：

npm init

执行指令之后会有一些列提示，一直回车选择默认即可：

创建完成之后会生成一个package.json文件，文件内容如下所示：

{"name": "npmtest","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"
}

这个文件是用来记录项目的详细信息，包括项目名称、依赖模块等。

安装第三方依赖
通过下列命令，可以将安装的第三方依赖记录在package.json文件中。

npm install jquery --save
npm install bootstrap --save

下载完成之后，可以看到在dependencies字段下面记录了我们下载模块的名称和版本。这样，只要有了这个文件，我们就知道整个node项目需要依赖哪些第三方模块了。

注意：

• 后缀 –save 的作用是将第三方依赖包记录在package.json文件中
• 下载多个模块可以简写成如下：（模块名之间用空格分开）

npm install --save jquery bootstrap

3. 通过配置文件安装依赖

在实际开发的过程中，项目代码可能会分享给他人或传输到互联网上，我们没有必要将依赖模块的代码（即node_modules）一并传输，只需要一个 package.json文件 即可。
有了这个配置文件，其他人接收到项目代码之后，只需要执行下面的命令：

npm install

npm便会根据package.json文件中的记录下载所有依赖模块：

四、Node基础

1.模块化开发

上面我们做过使用node运行一个js文件的练习：

但是在实际项目开发中，不可能将全部代码都写在一个文件中，node为我们提供了模块化的语法。每一个js文件都可以当做一个模块：

• require() ：引入一个外部模块
• module.exports ：暴露模块接口

现在我们实现一个加法计算器的功能，在一个add.js文件中填写一个加法函数，然后用module.exports暴露这个方法，然后再创建一个入口文件main.js引入这个加法函数，并通过加法函数计算结果。

代码如下所示：

add.js：

// add.js定义一个模块，处理加法
function add(a, b) {return a + b
}module.exports = add

main.js：

// main.js引入外部模块，使用add函数，后缀.js可以省略
const add = require('./add')
let result = add(10, 20);
console.log(result);

可以看到在命令行中输出的运算结果30：

注意：在ES5中的模块化语法与node的模块化语法略有差异，如下所示：

• import ：引入外部模块
• export：暴露模块接口

通常在vue的项目中，我们会使用到ES5中的模块化语法。

2. 外部模块

引入的外部模块分为三种情况：

• 核心模块 ：核心模块是node自带的模块，可以在require引入后直接使用，不需要加路径，比如require(‘fs’)；
• 自定义模块 ：自定义模块是我们自己编写的，上面模块化的例子中，add.js文件就是一个自定义模块，引入自定义模块需要填写完整路径；
• 第三方模块：使用npm下载的模块是第三方模块，比如jquery、bootstrap等，下载完成后可以使用require直接引入，也不需要加路径；

3. 核心模块

3.1 fs

fs 模块是node的 文件系统模块 ，通过此模块的readFile方法可以读取文件。

我们新建一个readFile.js文件，然后在其目录创建一个txt文件，内容为 “hello node” ，然后通过readFile.js文件输出txt文件的内容。

txt文件：

readFile.js：

const fs = require('fs');
/*
* fs的readFile方法有两个参数：
* 第一个参数是读取文件的地址
* 第二个参数是一个回调函数
* 如果读取文件失败，回调函数的第一个参数err会显示错误信息，如果读取文件成功，则err为null
* data是一个buffer类型，需要使用toString()将其转换成字符串类型
* */
fs.readFile('hello.txt', (err, data) => {if (err) {console.log(err);}console.log(data.toString());
})

在此目录下执行node命令，会输出hello.txt文档中的内容：

3.2 path

path 模块是node中用于处理 文件/目录路径 的一个内置模块，可以看作是一个工具箱，提供诸多处理路径的方法供我们使用。

我们首先定义三个变量，使用 path 的 join 方法传入这三个变量，输出的结果是三个变量链接在一起的路径。

path.js：

const path = require('path')let domain = 'http://www.helulu.com'
let url = 'docs'
let id = '22'let address = path.join(domain, url, id);
console.log(address);

运行path.js，得到输出结果：

3.3 http

http 模块可以用来 创建web服务器 ，这个模块十分重要，我们会在下面的内容进一步讲解，这一节我们只讲核心模块的使用方法。

五、web服务器

1.客户端与服务器

当我们访问一个网站的时候，是谁在给我们提供内容丰富的网页内容？答案是服务器。
浏览器可以通过互联网向服务器发送请求，例如我们在浏览器的地址栏输入http://www.baodu.com，按下回车键，浏览器就会向百度服务器发送一个请求，服务器接到请求之后，会把百度的首页内容以文本的方式发送给浏览器（其中包括html、css和js），然后我们便看到了网页。

• 请求：浏览器向服务器要数据；
• 响应：服务器给浏览器发送数据；
• 地址：我们可以通过域名或ip访问到一个网站，域名或者ip就是这个网站的地址；
• 端口：一个ip或者一个域名可以找到一台服务器，但是这台服务器可以对外服务多个网站，他们的端口是不同的，因此访问一个站点除了输入ip或域名，还要输入端口，平时我们很少输入端口是因为几乎所有的网站都会使用默认的80端口，因此不必输入。

2. 创建服务器

我们可以通过http模块的createServer方法在本地创建一个服务器，然后通过服务器的listen方法定义服务器的端口。

server.js：

const http = require('http');// 创建服务器
// req:代表request请求 res:代表response响应
const server = http.createServer((req, res) => {res.end('Hello World')
})
// 设置端口
server.listen(3000, () => {// 服务器启动后的提示console.log('Server is running');
})

在命令行工具中，使用node命令来执行这个文件，可以看到命令行工具中出现一行提示：

这时服务器已经正常启动，接下来可以打开浏览器，在地址栏输入http://127.0.1:3000访问此页面，可以看到页面上出现服务器返回的内容Hello World：

这样，我们就完成了一个node服务器的搭建。

3. nodeman

此时，如果想修改服务器返回的内容为Hello Node：

server.js：

const http = require('http');
const server = http.createServer((req, res) => {res.end('Hello Node')
})server.listen(3000, () => {console.log('Server is running');
})

需要按住 Ctrl+c键 关闭服务器，然后重新启动：

刷新即可看到更新的内容：

但是长此以往这样，操作很麻烦，我们可以全局安装 nodemon ，然后使用 nodemon
启动服务器，在修改文件之后，服务器可以自动重启。

全局安装nodemon：

npm install -g nodemon

安装完成后，通过nodemon启动服务器：

此时我们修改服务器响应的内容：
server.js：

const http = require('http');
const server = http.createServer((req, res) => {res.end('Hello Nodemon')
})server.listen(3000, () => {console.log('Server is running');
})

无需重启服务器，直接刷新浏览器，即可看到新修改的内容：

4. 总结

虽然可以通过Node创建本地的服务器，但是实际在开发工作中，不会直接使用原生的Node来编写服务器程序，通常会配合一些框架来提高服务器的开发效率。

六、Koa框架基础

1. Koa框架概述

Koa是一个基于Node的web服务器开发框架，通过Koa我们可以更便捷的开发web服务器，不像上一节介绍的方法那样需要从零开始写。

2. 安装Koa

在安装Koa之前，先初始化一个项目：
新建一个空目录，在该目录中打开命令行工具，执行 npm init ：

初始化完成之后，执行下列命令安装Koa：

npm install koa --save

3. 创建服务器

下面我们通过使用Koa来创建一个web服务器。

server.js：

// 通过require引入Koa
const Koa = require('koa');
// 引入的Koa是一个构造函数，通过new关键字可以创建一个koa应用app
// 这就是我们的Koa服务器
const app = new Koa();
// 通过app的listen方法设置监听端口
app.listen(3500, () => {console.log('server is running');
})

通过nodemon运行这个程序：

访问本机的3500端口可以看到 not found：

这说明服务器已经正常启动了，但是因为我们还没有指定服务器响应的内容，所以才没有内容。
接下来，我们用 app 的 use 方法设置响应的内容：

server.js：

const Koa = require('koa');
const app = new Koa();// 使用use方法引入一个中间件，中间件即是一个函数
// use方法内的函数会在请求与响应之间执行
app.use(async (ctx, next) => {/** ctx：上下文变量，可以获取请求和响应的相关信息* next：处理下一个异步函数* */// 响应内容ctx.body = 'Hello Koa'await next()
})app.listen(3500, () => {console.log('server is running');
})

这时，刷新浏览器我们可以看到新的返回内容：

4. 路由

浏览器可以使用不同的方法发送请求，常用的方法如下所示：

• get请求：用来获取页面或数据；
• post请求：用来提交数据，一般登录的时候，像后台发送用户名和密码可以使用。

我们现在主要使用 get请求 来获取页面，实现一个有多个页面应用程序。

首先，我们要安装 koa-router 中间件：

npm install koa-router --save

server.js：

const Koa = require('koa');
const app = new Koa();
// 引入并执行koa-router，koa-router是一个函数
const router = require('koa-router')();//设置路由
router.get('/', async (ctx) => {ctx.body = '<h1>首页</h1><div>我是首页的内容</div>'
})router.get('/video', async (ctx) => {ctx.body = '<h1>视频</h1><div>我是视频内容</div>'
})// 使app和router关联，在koa项目中引入router
app.use(router.routes())app.listen(3500, () => {console.log('server is running');
})

这样我们就可以根据路由来切换页面了：

首页：

video页面：

5. 静态文件

刚才我们在响应的内容中添加了标题和文字，那如果想添加一张图片呢？
在网页中插入图片，需要在img标签中填写图片的地址，对于web应用的服务器，只有静态文件目录的文件才可以被html页面直接访问。
也就是说，我们需要先创建一个静态文件目录，然后在里面放置图片（js或css），才能被html页面访问。
我们可以通过中间件 koa-static 来 设置静态文件目录并引入图片。

首先，我们先要安装 koa-static ：

npm install koa-static --save

然后，我们在当前项目 F:\koatest 下新建一个 public 文件夹，并放入任意一张图片，作为我们静态文件的图片资源：

server.js：

const Koa = require('koa');
const app = new Koa();
// 引入koa-static，可以得到一个static函数
const static = require('koa-static');// 调用static函数，设置静态目录
/* 
*  __dirname：node的全局变量，可以直接获取当前项目的绝对路径F:\koatest
*  public：我们自己定义的静态文件目录的路径
* */
app.use(static(__dirname + '/public'))app.listen(3500, () => {console.log('server is running');
})

然后我们就可以在 http://127.0.0.1:3500/jay.png 上访问我们的图片了：

现在我们是将图片直接放在静态目录下面了，但是一般情况下，是需要在public文件夹下新建一个 img 文件夹，专门用来存放图片。与此同时，还有存放 css 和 js 的文件夹：

此时，我们再次访问图片，路径就需要变更为 http://127.0.0.1:3500/img/ jay.png 了：

我们根据图片路径和返回内容调整下代码：

server.js：

const Koa = require('koa');
const app = new Koa();
const static = require('koa-static');app.use(static(__dirname + '/public'))app.use(async (ctx) => {ctx.body = `<h1>标题</h1><img src="img/jay.png"<br><div>内容</div>`
})app.listen(3500, () => {console.log('server is running');
})

这样我们就可以在网页中看到图片了：

七、Nunjucks模板入门

1. 模板引擎概述

我们通过Koa创建了一个web服务器，并可以根据用户请求路径的不同响应不同的页面，但是每一个页面的内容都是通过 字符串 的方式发送给浏览器的，这样的开发方式并不友好，我们更希望直接发送 html页面 。

2. 安装nunjucks

在koa框架下安装nunjucks需要两个第三方模块：

• koa-views ：负责配置koa的模板引擎；
• nunjucks ：下载模板引擎；

执行命令安装这两个模块：

npm install --save koa-views nunjucks

3. 配置模板引擎

我们先创建一个views文件夹，再在下面生成一个index.html，作为我们等下加载的模板：

server.js：

const Koa = require('koa');
// 引入koa-views
const views = require('koa-views')
// 引入Nunjucks
const nunjucks = require('nunjucks')const app = new Koa();// 中间件
/*
* views方法 接受两个参数，一个是根路径，一个是配置项
* 根路径：模板引擎存放在哪个目录，我们将它指向views文件夹
* 配置项：使用哪个模板引擎的格式，我们这里使用nunjucks
* */
app.use(views(__dirname + '/views', {map: {html: 'nunjucks'}
}))app.use(async ctx => {// 直接使用render方法渲染模板// render()为异步函数，所以前面需要加awaitawait ctx.render('index')
})app.listen(4000, () => {console.log('server is running');
})

运行server.js：

即可看到页面：

那如果我们想渲染传递过来的内容，而不是固定的内容该怎么办呢？

可以通过 render() 中的第二个参数传递：

const Koa = require('koa');
const views = require('koa-views')
const nunjucks = require('nunjucks')const app = new Koa();app.use(views(__dirname + '/views', {map: {html: 'nunjucks'}
}))app.use(async ctx => {/**  render方法 接受两个参数，一个是模板文件名，一个是模板文件传递的变量*  模板文件名：后缀名可以省略，我们这里直接写成index就可以*  模板文件传递的变量：对象格式* */await ctx.render('index', {title: '首页',text: '我是首页文案'})
})app.listen(4000, () => {console.log('server is running');
})

我们再把index.html调整一下：

刷新浏览器，即可看到新的页面内容：

最后，我们再用路由的方法改写下上面的例子：

const Koa = require('koa');
const router = require('koa-router')();
const views = require('koa-views')
const nunjucks = require('nunjucks')const app = new Koa();app.use(views(__dirname + '/views', {map: {html: 'nunjucks'}
}))router.get('/', async ctx => {await ctx.render('index', {title: '首页', text: '首页内容'})
})router.get('/docs', async ctx => {await ctx.render('doc', {title: '文档', text: '文档页面内容'})
})app.use(router.routes())app.listen(4000, () => {console.log('server is running');
})

刷新浏览器，看到首页：

切换到/doc页面：

4. 处理表单数据

4.1 表单概述

在讲解如何通过 表单 向后台发送数据之前，首先看两个 form标签 的属性：

• action属性 ：指定表单提交的路径；
• method属性 ：指定表单提交数据的请求方法，请求方法包括get、post；

form 标签设置完成之后，要对表单空间进行设置

• input name属性 ：指定数据传输的字段；
• input type=“submit” ：指定提交按钮，点击后提交表单数据；

4.2 通过表单向后台发送数据

首先，我们在首页渲染的模板 index.html 中添加表单元素：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body><!-- action属性：定义表单提交的路径   --><form action="/login"><!--   name属性：定义表单提交的数据字段    --><input type="text" name="username"><input type="password" name="password"><!--    点击后向/login提交表单数据    --><input type="submit" value="登录"></form>
</body>
</html>

刷新页面，我们可以看到刚才写的这个表单：

填写数据，点击登录按钮提交：

因为我们后台没有定义 /login，所以页面显示 “not found”，但是我们可以看到地址栏中，已经将我们提交的数据带了出来。

表单通常有两种方式向后台提交数据：

• get ：用于获取数据；
• post ：用于向后台发送数据；

很明显，我们的表单应该采用 post方法 来请求数据，我们给它添加 method属性：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body><!-- action属性：定义表单提交的路径   method: 请求方式 --><form action="/login" method="post"><!--   name属性：定义表单提交的数据字段    --><input type="text" name="username"><input type="password" name="password"><!--    点击后向/login提交表单数据    --><input type="submit" value="登录"></form>
</body>
</html>

刷新浏览器，我们再次提交，发现地址栏中 /login 后面没有数据了，因为 post 提交是不会显示在 url 里的：

我们先来完成表单的 get 请求，所以先去掉 method=“post”，默认为 get 请求：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body><form action="/login"><input type="text" name="username"><input type="password" name="password"><input type="submit" value="登录"></form>
</body>
</html>

现在请求已经有了，我们来到server.js中，来接收这个请求：

const Koa = require('koa');
const router = require('koa-router')();
const views = require('koa-views')
const nunjucks = require('nunjucks')const app = new Koa();app.use(views(__dirname + '/views', {map: {html: 'nunjucks'}
}))//首页
router.get('/', async ctx => {await ctx.render('index')
})// form表单
router.get('/login', async ctx => {// ctx.query 获取get请求的参数let username = ctx.query.username;let password = ctx.query.password;// 把从form表单请求到的数据渲染到home模板中await ctx.render('home',{username,password})
})app.use(router.routes())app.listen(4000, () => {console.log('server is running');
})

渲染表单数据的模板 home.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单模板</title>
</head>
<body><p>用户名：{{username}}</p><p>密码：{{password}}</p>
</body>
</html>

刷新页面，输入用户名和密码：

点击登录，我们就可以看到传递过来的数据了：

get 请求的数据已经成功传递了，下面再来说下 post 请求。

我们先把 method=“post” 加回来，改为 post 请求：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body><!-- method: 请求方式 --><form action="/login" method="post"><input type="text" name="username"><input type="password" name="password"><input type="submit" value="登录"></form>
</body>
</html>

我们回顾下 get 请求接受参数的代码（主要是通过ctx.query）：

router.get('/login', async ctx => {let username = ctx.query.username;let password = ctx.query.password;await ctx.render('home',{username,password})
})

因为 query 只能接收 get 请求的参数，所以我们需要安装第三方模块 koa-parser 来解析 post 请求的参数：

npm install koa-parser --save

我们回到server.js中，引入 koa-parser，用 post 方法来接受请求：

const Koa = require('koa');
const router = require('koa-router')();
const views = require('koa-views');
const nunjucks = require('nunjucks');
// 引入koa-parser
const parser = require('koa-parser');const app = new Koa();//中间件
app.use(parser())app.use(views(__dirname + '/views', {map: {html: 'nunjucks'}
}))router.get('/', async ctx => {await ctx.render('index')
})// post请求：
router.post('/login',async ctx => {let username = ctx.request.body.username;let password = ctx.request.body.password;await ctx.render('home',{username,password})
})app.use(router.routes())app.listen(4000, () => {console.log('server is running');
})

刷新页面，输入用户名和密码：

点击登录按钮，就可以看到我们通过 post 请求传递过来的数据了：

---

总结

先学习到这里，后续再进行补充。