【Express.js】Hello World

Hello World

本节我们将创建并运行我们的第一个express.js项目,并使用最简单的请求响应

准备工作

  • 本书系统环境为 windows10 64Bit
  • 请事先在你的开发环境中安装 Node.js,本书使用的是 node v16.17.1
  • 推荐使用 VsCode 作为开发工具,有良好的代码提示功能
  • 事先安装一个api调试工具,如 postman, apipost

创建项目

  1. 创建一个文件夹作为项目根目录
  2. 下载express依赖
    在根目录下执行npm install express
  3. 下载js-text-chart依赖
    在根目录下执行npm install js-text-chart,这是一个用于输出字符画的js库,本书在每一个示例中都使用了该库充当starter
  4. 在根目录下新建一个入口文件,如index.js
  5. 在入口文件中引入依赖
const express = require('express');
const evchart = require('js-text-chart').evchart;

创建服务器

  1. 先创建一个express实例
const app = express();
  1. 创建服务器

让我们刚刚创建的app实例挂载到指定的端口,如8080

const server = app.listen(8080);
  1. 添加服务器运行后的回调函数

是指在服务器成功运行后的一系列操作,常用于输出信息和初始化等,我在这里打印该项目的基本信息
我使用的是内联箭头函数 “()=>{//…}”,也可以替换为普通的"function {//…}"

const server = app.listen(8080, () => {
    let host = server.address().address;
    let port = server.address().port;

    let str = "EXPRESS-DEMO";
    let mode = [ "close", "far", undefined ];
    let chart = evchart.convert(str, mode[0]);
    console.log(chart);

    console.log("Server is ready on http://%s:%s", host, port);
})
  1. 跨域策略

默认情况下可能不允许不同域名下进行交互,我们对请求进行一些基本的设置,允许跨域和所有的请求方式请求头格式化,并设置请求头内容为json格式

app.all("*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type");
    res.header("Access-Control-Allow-Methods", "*");
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

第一个接口

概念

前后端交互是在后端暴露的接口进行的,而不同的接口对于后端端口上不同的url路径。前端使用不同的方式(GET,POST…)请求指定的路径,当后端有定义监听某种方式下的某种路径接口时,获取请求携带的数据,对请求进行处理,并返回结果给前端

实践

接下来,我们将添加一个以服务器的根路径(GET)作为返回欢迎信息的接口

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

以上代码,app实例监听 localhost:8080/ 路径的GET请求,传入2个参数,第一个是请求,第二个是响应
当接收到以GET方式访问该接口的请求时,通过在回调函数中执行res.send返回 Hello World!

测试接口

使用接口测试工具,以GET的形式访问localhost:8080/试试吧!你将会得到一句 Hello World!

第二个接口

第一个接口,我们只是单纯的访问了接口,没有传输任何数据,接下来我们将创建一个以传统的路径请求参数(如: url?id=1)携带数据的接口

实践

定义一个GET形式,路径为 /get 的接口,传入2个参数请求和响应,我们在回调函数中通过req.query来获取路径上的所有请求参数,并将这些参数作为接口的返回值

app.get('/get', function (req, res) {
    let requestParams = req.query;
    res.send(requestParams);
});

测试接口

使用接口测试工具,以GET的形式访问 localhost:8080/get?id=1&name=evanp 试试吧!你将会得到这两个参数!

下一节-请求类型

你可能感兴趣的:(Express,express,javascript,开发语言,后端,教程)