node用express写后端restful接口实战一：npm生成express项目、express-generator生成express项目、用nodemon实时监听代码变化

node后端，常用express 和 koa用来开发

一、用npm生成express项目

1.新建 Express 项目

这一集，咱们来正式跑一个Express项目

$ mkdir myapp
$ cd myapp
$ npm init

同样的新建项目文件夹后，使用 npm init，创建 package.json。这次没有使用 -y 参数，所以命令过程中会问我们几个问题，大多数问题都是直接按回车就可以了。

但有一个地方要注意，项目的入口文件咱们填写 app.js：

entry point: (index.js)  app.js

最后会生成这样的 package.json

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

2.使用 npm 安装 express

$ cnpm i express -S

3.新建app.js文件

在 myapp 目录中，创建一个 app.js 的文件，然后添加以下代码：

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

说明：

  • 前两行就是引用并调用express。

  • 第二段代码是说，当有一个 get 请求在 / 这个路径时，响应一个 Hello World! 出来。

  • 最后一段代码，是说在 3000 端口启动服务，并在 终端 里显示提示信息。

4.跑起来，就现在

node app.js

访问 http://localhost:3000/ 就可以看到Hello World!了

5.自定义命令

除了上面这种方法启动服务外，咱们还可以通过自定义命令来启动服务。package.json 中找到这一行，"test": "echo \"Error: no test specified\" && exit 1"，删掉后，添加：

"scripts": {
  "start": "node app.js"
},

先停止掉服务

ctrl + c

新的运行命令

然后试试自定义的命令，发现依然是可以正常运行的。

npm start

总结这节课的内容比较简单，主要学习了：

  • 一个简单的 Express 项目包含了哪些内容。
  • 怎么运行、访问 Express 项目。
  • 如何在 package.json 中，自定义命令。

二、用express脚手架创建项目

1.先来安装 express-generator

$ cnpm install express-generator -g

Tips: 这里安装 express-generator 使用的是 -g 参数，也就是将它装成全局的了。这样才能让它在任意目录都运行 express 命令。

2.新建项目，安装依赖

$ express --view=ejs blog
$ cd blog
$ cnpm install
  • 这里指定了 view，使用 ejs 模板引擎。ejs 是一套类似 Rails 中 ERB 的模板引擎，学习起来非常简单的，几乎 零成本。进入项目后，安装相关依赖包。
  • blog 是新建blog项目目录名

3.运行项目

$ npm start

然后在浏览器中输入 http://localhost:3000，可以看到 Express 已经正常跑起来了:

Express
Welcome to Express

4.生成的项目有如下目录结构：

  1. public 中是放的各种静态资源，例如 css、图片和一些前端页面所需要的 js 代码。
  2. routes 是程序的路由部分，路由简单的理解就是将不同的 URL，分别对应到不同的程序代码上去。如果你之前学过用过其他语言开发后端，这里的 routes 其实相当于其他 传统MVC框架 的 路由 + 控制器。咱们开发项目，主要要写的逻辑代码就是放在这里。
  3. views，程序的 视图 部分，说白了就是 html 模板 放这里。因为我们使用的是 ejs 模板引擎，所以文件的后缀名变成了 ejs，而不是 html 了。

5.代码解析

路由

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

第一行代码是说：当访问 / 这个路径的时候。function 里面应当怎样处理。这里有三个参数：

  1. req 是 requset 的缩写，就是请求的意思。如果用户传递过来的值，类似于 PHP中的 \(_GET、\)_POST取值，在 Express 中就需要通过 req 来接收。
  2. res 是 response 的缩写，就是响应的意思。当用户有请求过来后，总得响应点什么给用户吧。要么是 渲染一个模板，要么就返回一段 json，这就需要用到这里的 res 了。
  3. next 是前往下一个中间件的意思，后面咱们开发项目碰到时再来说。

第二行代码是说：使用 res 的 render 方法，渲染了一个叫做 index 的模板。并且将 title 传递到了模板中。

2.视图

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

在 views/index.ejs 模板中，看到了有几个 <%= title %>，这里就是接受刚才路由部分，发送过来的 title。因为传递过来的 title 值为 Express。所以，浏览器上就显示了 Welcome to Express

修改文件，必须重启

这时候咱们再来做一个测试，将 title 改为 sky

router.get('/', function(req, res, next) {
  res.render('index', { title: 'sky' });
});

刷新页面后，发现浏览器显示的还是以前的 Welcome to Express，解决方法是需要先停止服务再重启。果然就变成了，Welcome to sky。

三、使用 nodemon 监听代码变动

但每次改完代码后，都需要重启服务，这让我们开发的过程非常不方便。为了解决这个问题，最方便简单的方法是来安装 nodemon。先停止掉服务后，运行

1.安装nodemon

cnpm i nodemon -S

2.修改启动命令

然后在package.json中，启动服务的命令改为

"scripts": {
  "start": "nodemon ./bin/www"
},

修改代码并测试效果

使用 npm start 启动服务，再次修改代码，

router.get('/', function(req, res, next) {
  res.render('index', { title: '长乐未央' });
});

刷新浏览器，果然页面的显示的内容会自动变化了。

posted @ 2020-10-18 16:25  晨光曦微  阅读(394)  评论(0)  编辑  收藏  举报