简明 Node.js & Express.js 基础教程

    
        标签：
        
            教程
        
            Node.js
        
            JavaScript
        
    发布于：2020-07-06 21:44:53
    编辑于：2022-11-15 13:01:56
    浏览量：2112

概述

本教程的目标是指导读者从零开始到完成一个完整的 CRUD 应用。

首先，这个博客就是用 Node.js & Express.js 开发的，代码在此处：https://github.com/songquanpeng/express-react-blog ，你可以拿来做参考，~~强烈建议 star~~。

环境搭建

下载安装 WebStorm 或者 Visual Studio Code 作为开发工具，推荐前者，可以用教育邮箱免费申请使用。
下载安装 Node.js，选择长期支持版（LTS）：https://nodejs.org/dist/v12.18.2/node-v12.18.2-x64.msi ，安装好后打开终端，输入 node，应该可以成功打开 Node.js 。
（可选，强烈推荐）配置 npm 淘宝镜像源：终端输入 npm config set registry https://registry.npm.taobao.org，之后输入 npm config get registry 验证是否配置成功。

创建一个 Express.js 项目

Node.js 是一个 JavaScript 运行时，而 Express.js 是一个构建在 Node.js 基础之上 Web 开发框架。

首先打开 WebStorm，依次点击：File -> New -> Project，在弹出的窗口中选择 Node.js Express App，然后 View Engine 选择 EJS 模板引擎。

为啥不选其他的？因为我最常用的就是这个，贴近原生 HTML，当然如果你要开发前后端分离的应用的话，选 None 就好。

之后 WebStorm 会自动帮我们下载依赖。

现在我们打开 package.json：

{
  "name": "hi",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  }
}

其中的 dependencies 所列出的自然就是依赖，可以看到我们刚刚提到的 ejs 和 express，我们在项目目录下执行 npm install 就可以让 npm 帮我们安装这些依赖。

其中的 scripts 中所列的是一些命令，当我们执行 npm run command 时，Node.js 就会在 scripts 下找这个命名并执行。对于 npm run start 因为比较常用，所以为了方便，npm 允许我们直接执行 npm start ，就相当于执行 npm run start，少打了一个单词和一个空格，是不是方便了许多？

现在我们在终端输入 npm start 或者点击右上角的绿色三角执行按钮，启动我们的 express 应用。之后访问 http://localhost:3000/ ，应该能看到 Welcome to Express 字样。

开始构建 API

打开 app.js，我们发现有这么几行：

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

app.use('/', indexRouter);
app.use('/users', usersRouter);

这个几行代码的作用就是在注册路由，告诉 Express，如果有人访问以 / 开头的 API，请到 ./routes/index 这个文件中找更具体的处理函数，如果有人访问以 /users 开头的 API，请到 ./routes/users 这个文件中找更具体的处理函数。

可能你要问，明明 /users 也是以 / 开头的呀，岂不是访问 /users/1 会被匹配到 /？确实会被匹配，但 Express 会优先选择匹配更完整的路由。

现在我们打开文件 /routes/index，看看里面究竟有什么。

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

短短几行代码，是不是很简洁易懂呀？我们看到里面调用了 router.get() 这个函数，这个函数的用途是注册路径 / 上的 HTTP GET 请求。传入了两个参数，第一个参数是我们要注册的路径，第二个参数则是一个回调函数。回调函数是啥？干嘛用的？

回调函数就是一个普通的函数，此处的用途是，当 Express 收到了对路径 / 的 GET 请求时调用该函数进行处理。

处理？怎么处理？我们注意到这个回调函数有三个参数，Express 调用该回调函数时会提供这三个参数。

这三个参数的作用分别是：

req：request，请求信息，这个是一个 JavaScript 对象，你可以打印出来看一下的，之后我们处理表单时，或者获取 url 参数的时候，数据就是从这个 req 对象里取的。
res：response，这个就是返回对象，我们可以调用它的一些方法，例如这里调用的是 res.render('index', { title: 'Express' });，告诉 Express 渲染 /views/ 文件夹下的模板 index.ejs，并把渲染的结果返回给用户。
next：这是一个函数，当我们不想在当前函数中处理请求的话可以调用 next() 让后面的匹配的函数进行处理，不理解没关系，我们这里用不到。

现在我们打开文件 /routes/users，发现这里代码和之前的类似：

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

区别在于，这里注册的函数处理的是路径 /users/，并返回的是一段文本：res.send('respond with a resource');。

Express API 设计的还是挺清楚的，参考官方文档：https://expressjs.com/en/api.html#res 。

res 对象比较常用的函数有这些：

res.send('string')：返回一段文本。
res.json(JSON)：返回一个 JSON，里面可以直接填 JavaScript 对象。
res.redirect(path)：重定向到给定路径。
res.render(view, config)：渲染模板，config 是一个对象，里面有模板中所需要变量。

剩下的自己看文档吧。

~~在下一篇教程，我会讲如何与数据库进行交互。~~

Links: nodejs-beginner-tutorial