express前端的接口利器

一.什么是express

express是个基于Node.js平台的web开发框架,是个第三方模块

二.如何使用express

1.下载安装express

//在你的项目根目录下，打开小黑窗

//1. 初始化 package.json 文件
npm init -y

//2. 本地安装 express 到项目中
npm install express

2.简单创建一个服务器

//导入 Express
const express = require('express')

//调用 express() 得到一个 app
//类似于 http.createServer()
const app = express()

//设置请求对应的处理函数
//当客户端以 GET 方法请求 / 的时候就会调用第二个参数：请求处理函数
app.get('/', (req, res) => {
  res.send('hello world')
})

//监听端口号，启动 Web 服务
app.listen(3000, () => console.log('app listening on port 3000!'))

3.托管静态资源

// 将需要托管的文件放在public文件夹中
// 加载 Express
const express = require('express')

// 调用 express() 得到一个 app
// 类似于 http.createServer()
const app = express();

// 静态资源托管public中的文件
app.use(express.static('public'))


// 监听端口号，启动服务
app.listen(3000, () => console.log('3000端口就绪'))
// 此时所有public下的内容就可以直接访问了

4.路由与接口

路由（Routing）是一组映射关系。它约定了当一个特定的 HTTP 方法（GET、POST 等）访问某个 URL（或者叫路径标识）时，服务器如何响应。

const express = require('express')
const app = express()//实例化
app.METHOD(PATH, HANDLER)//请求方式('路径',执行函数) 请求方式比如get post 

三.写接口

1.get方式

app.get('/get', function(req, res) {
  // 直接返回对象,res.query可以自动收集查询字符串中的信息
  console.log(req.query);
});
//res.query是express框架额外提供的属性

req.query属性可以收集get方式从url中传递的查询字符串

2.用写一个get方式传参的接口

//导入express
const express = require("express");
const app = express();
//图书信息
data = [
  {
    //返回数据
    id: 1, //图书id
    bookname: "西游记", //书名
    author: "吴承恩", //作者
    publisher: "北京出版社", //出版社
  },
  {
    id: 2, //图书id
    bookname: "红楼梦", //书名
    author: "曹雪芹", //作者
    publisher: "大清出版社", //出版社
  },
];
//创建服务
app.get("/api/getbooks", (req, res) => {
  //利用id是否为undefined判断是否传参
  let { id } = req.query;
  console.log(data.find((item) => item.id === +id));

  if (id) {
    //利用find方法寻找到对应的书本
    let rest = data.find((item) => item.id === +id);
    //加判断
    if (rest) {
      res.json({
        status: 0, //0标识成功，其他失败
        message: "获取图书列表数据成功", //描述信息
        data: rest,
      });
    } else {
      res.json({
        status: 1, //0标识成功，其他失败
        message: "获取图书列表数据失败", //描述信息
      });
    }
  } else {
    res.json({
      status: 0, //0标识成功，其他失败
      message: "获取图书列表数据成功", //描述信息
      data,
    });
  }
});
//监听端口
app.listen(8080, () => {
  console.log("8080端口已就绪...");
});

 这样就可以实现利用查询字符串传递参数

3.post方式传递参数的方法

post接口与get接口是有区别的,get的参数一般在请求行中传递,而post一般通过请求体传递

传递方式一般分为

• 普通键值对
• json格式
• 传递formdata

那么如何获取这些参数呢?

使用中间件来解决这个问题

这里会用到另一个第三方模块 multer

//导入模块
const express = require("express");
const multer = require("multer");
const upload = multer({ dest: "images/" });
let app = express();
//中间体
app.use(express.urlencoded()); //普通键值对参数
app.use(express.json()); //json格式
//托管
app.use(express.static("public"));
//post接收普通键值对
app.post("/post", (req, res) => {
  res.json({ 请求成功: req.body });
});
//post接收json格式
app.post("/postJSON", (req, res) => {
  res.json({ 请求成功: req.body });
});
//post接收fd文件
app.post("/admin/article_publish", upload.single("cover"), (req, res) => {
  res.json([{ 文件请求成功: req.file }, { 文本请求成功: req.body }]);
});
//端口监听
app.listen(3000, () => {
  console.log("3000就绪...");
});

普通键值对使用

app.use(express.urlencoded())//获取普通键值对的中间件

json格式使用

app.use(express.json())//获取json格式文件的中间件

这两种格式,数据均存储在req.body中

formdata对象

首先需要导入第三方模块multer

const multer = express('multer')

配置multer

const upload = multer({dest:'目录/'})//标识上传的文件保存位置,'目录'可以自己设置

使用方法:

app.post('路径',upload.single('规定本次上传键名'),(req,res)=>{
执行函数
})

这种方式上传的数据,文件对象存储在req.file中,其他数据存储在req.body中

四.接口传参

1.请求行

请求行保存请求方式,地址,并且可以以查询字符串的格式传递少量数据

2.请求头

头可以可以附加很多信息,其中content-type规定了请求体中包含的数据类型

常见的三种取值:

常见的content-type

CONTENT-TYPE的值	数据格式	举例
application/x-www-form-urlencode	普通键值对	{a:2,b:3}
application/json	json对象	{"a":"2","b":"3"}
multipart/form-data	formdata上传文件	一般不用写,自动生成

3.请求体

请求体是用来携带参数的

这些参数到了后端如何解析由请求头中的content-type决定

五.RESful风格

const express = require('express')

const app = express();

app.get('/articles',(req,res)=>{
    res.send('获取')
})

app.post('/articles',(req,res)=>{
    res.send('添加')
})

app.delete('/articles',(req,res)=>{
    res.send('删除')
})
app.put('/articles',(req,res)=>{
    res.send('编辑')
})

app.listen(8080,()=>{
    console.log(8080); 
})

这样的代码风格十分工整,一目了然

---

未完待续...