前端程序员如何去写接口

2,004 阅读7分钟

Express基本介绍

        Express 是一个基于 Node.js 平台,快速、开放、极简的 web 开发框架。

  • 框架: 是一个半成品,用来快速解决一类问题;哭就是工具集,(使用费仓灵活) (框架:是一个半成品,用来快速解决一类问题;库就是工具集,使用非常灵活) (框架有:bootstrap, lay-ui, express, vue, react ; 库:zepto.js , jQuery,  day.js, underscore, lodash, art-template, axios, echart.....)

  • web 开发: 对不同的请求能够显示页面;提供接口服务;

理解:

  • 我们前面用http模块来支持 web服务,现在要用 express 来写 web服务
  • 对于node.js来说,Express 是一个第三方模块,有丰富的 API 支持,强大而灵活的中间件特性
  • Express 不对 Node.js 已有的特性进行二次抽象,只是在它之上扩展了 Web 应用所需的基本功能

中间件

  • 给用户提供更好的服务
  • 可方便的拆卸

image.png

下载express包

        express包下载方式与其它第三方包一致,本地安装npm i express 注意:

  • 项目目录名字不能去中文,也不要取为express
  • 如果安装不成功:
    • 换个网络环境
    • 运行npm cache clean -f,再重新运行下载命令试试

快速创建web服务器

在项目根目录下新建一个js文件,例如app.js,其中输入代码如下:

  1   // 0. 加载 Express
  2   const express = require('express')
  3  
  4   // 1. 调用 express() 得到一个 app
  5   //    类似于 http.createServer()
  6   const app = express()
  7  
  8   // 2. 设置请求对应的处理函数
  9   //    当客户端以 GET 方法请求 / 的时候就会调用第二个参数:请求处理函数
  10  app.get('/', (req, res) => {
  11    res.send('hello world')
  12  })
  13  
  14  // 3. 监听端口号,启动 Web 服务
  15  app.listen(3000, () => console.log('app listening on port 3000!'))

说明:

  • app.get('/') 相当于添加事件监听:当用户以get方式求 "/" 时,它后面的回调函数会执行,其回调函数中的req,res与前面所学http模块保持一致。
  • res.send()exprss框架给res对象补充提供的方法(http 模块中的 res 是没有这个方法的),用于结束本次请求。类似的还有res.json(), res.sendFile()
  • express 框架会增强req,res的功能

路由和接口

        路由(Routing)是由一个URL(或者叫路径标识)和一个特定的HTTP方法(GET、POST等)组成的,涉及到应用处理响应客户端请求。每一个路由都可以有一个处理器函数.当匹配到路由时,这些个函数将被执行。

格式

  1   const app = express();
  2  
  3   //定义路由
  4   app.METHOD(PATH,HANDLER)

其中:

  • appexpress 实例。(const app = express())
  • MRTHOD 是一个 HTTP 请求方法。 全小写格式。如:post,get,delete
  • PATH 是请求路径(相当于在http模块中用到过得 url.parse(req.url).pathname)
浏览器url服务端路径
http://localhost:8080/
http://localhost:8080/public/a/index.html/public/a/index.html
http://localhost:8080/index.html?a=1&b=2/index.html
  • HANDLER 是当路由匹配到时需要执行的处理函数。(req,res)=>{ }

写接口-整体说明

接口传参

        我们使用ajax请求向服务器接口传参,按http协议的约定,每个请求都有三个部分:

  • 请求行: 保存了请求方式、地址,可以查询字符串的格式附加一部分数据。
  • 请求头: 它可以附加很多信息,其中content-type用来约定请求体中保存的数据格式。         content-type常见有三种取值:
content-type的值表示请求体的数据格式示例
application/x-www-form-urlencode普通键值对象a=2&c=1
application/jsonjson对象{a:1,b:{c:1}}
multipart/form-data上传文件file
  • 请求体: 本次请求携带的参数。至于这些参数到了后端应该如何解析出来,由请求头中的content-type来决定。

image.png

  • 方法一: 请求行。常见方式如下:

    • 使用ajax技术,通过get方式传参。
    • 在浏览器地址栏中输入接口地址并补充上查询字符串。
  • 方法二: 请求体

    • ajax中的post、put、delete可以从请求体中进行传参。

另外,请求头中的content-type用来告知服务器应该以何种方式去解析请求体中的数据。

image.png

express写get接口

get无参数

接口1: get请求不带参数

 1   const express = require('express');
 2   const app = express();
 3   app.get('/get', function(req, res) {
 4     // 直接返回对象
 5     res.json({ name: 'ceshi' });
 6   });
 7   app.listen('8088', () => {
 8     console.log('8088');
 9   });

注意:

  • res.json()express 提供的方法。

get接口有参数

         express框架会自动收集get类型的接口从url地址中传递的查询字符串参数,并自动保存在req对象的query属性中。我们直接来获取即可。

接口2: get接口有参数

 1    const express = require('express');
 2    const app = express();
 3    app.get('/get', function(req, res) {
 4       // 直接返回对象
 5       console.log(req.query);
 6       res.send({ name: 'abc' });
 7    });
 8    app.listen('8088', () => {
 9      console.log('8088');
 10    });

注意:

  • req.query属性是express框架额外提供的属性。

get接口示例

 1    const express = require('express')
 2   //引入express包
 3    
 4    const app = express()
 5    
 6    app.listen(3006,()=>{
 7    console.log('服务器启动了.....');
 8    })

小黑窗运行正常404报错

image.png

  const express = require('express')
  
  const app = express()
  
  //app.方式(url,回调)
  app.get('/api/getbooks',(req,res) => {
    //当前的参数是
    console.log('当前的参数是',req.query);
    const data = {
      "status" : 200,
      "msg" : "获取图书列表成功",
      "data" : [
        {
          "id" : 1,
          "bookname" : "卷王强者恐怖如斯",
          "author" : "鹏桑",
          "publisher" : "上海图书出版社"
        }, {
          "id" : 2,
          "bookname" : "我和故乡的樱花",
          "author" : "谭桑",
          "publisher" : "富士山出版社"
        }, {
          "id" : 3,
          "bookname" : "我和卷王的宫斗",
          "author" : "刘桑",
          "publisher" : "418出版社"
        }
      ]
    }
    res.send(data)
  })
  app.listen(3006,()=>{
    console.log('服务器启动了.....');
  })

image.png

image.png

post接口

        post接口与get请求不同在于: 它的参数一般是通过请求体来传递的。根据传递的参数的格式不同,分为成三种情况来说:

  • 传递普通键值对
  • 传递form表单(涉及文件上传)
  • 传递json

普通键值对参数

        具体来说当请求头的 content-typex-www-form-urlencoded 时,表示上传的普通简单键值对 。

post接口-普通键值对接口

    const express = require("express");
    // 引入express包
    
    // 中间件(获取参数)
    app.use(express.urlencoded());
    
    //post接口-普通键值对接口
    //post: 本机ip:3009/testpost
    app.post("/testpost", (req, res) => {
      //普通键值对格式的参数
      //上面使用了app.use(express.urlencoded())这个中间件
      //req.body会自动收集  通过x-www-form-urlencoded这种方式传过来的参数
      //user'name = xxx & password = xxxxx
      console.log("post请求", req.body);
      //真的假接口
      //机接口是真的,但是没有实现具体功能
      // res.send({a: 1,msg:"xxx"})
      res.send({ a: 1 });
    });
    
    app.listen(3009, () => {
      console.log("服务器启动了....");
    });
    
    

注意:

  • app.use(....)之后,在res.body中就会多出一个属性res.body
  • extended: false:表示使用系统模块querystring来处理传入的参数,也是官方推荐的
  • extended: true:表示使用第三方模块qs来处理传入的参数.

post接口-json格式的参数

        在post传递参数时,如果要传入的参数比较复杂(多级嵌套),则可以使用json格式上传。

  const express = require("express");
  // 引入express包
  
  //会自动加入req.body属性,这个属性中就包含了post请求所传入的参数
  app.use(express.json());
  
  //  post + 复杂的JSON格式的数据
  app.post('/testpost-json', (req, res) => {
    // 普通键值对格式的参数
    // 上面使用了app.use(express.urlencoded())这个中间件,
    // req.body会自动收集 通过 x-www-form-urlencoded 这种方式传过来的参数
    // username=xxx&password=xxxxx
    console.log('post请求', req.body)
    // 真的假接口
    // 接口是真的
    // 没有实现具体功能  =====》 在开发的时候使用
    res.send({a: 1,msg:"xxx"})
  })
  
  app.listen(3009, () => {
    console.log("服务器启动了....");
  });

post接口-form-data文件上传

要先下载multernpm intall multer

   //引入包
   const multer = require("multer");
   //配置
   //上传文件保存在这个目录下
   const upload = multer({ dest: "uploads/" });
   //uploads表示一个目录名,随便设置成什么都可以

   app.post("/upload-img", upload.single("image"), (req, res) => {
     /*
      如何接收参数
       1. 文件(image)
         自动保存到upload指定的位置,会保存的信息放在req.file
         req.file 记录了文件上传的信息
         req.body 记录了其他普通参数(非文件)的信息
       2. 普通属性name
     */
   
     console.log(req.file);
     console.log(req.body);
   
     res.send({ status: 200, file: req.file, data: req.body });
   });
   
   app.listen(3009, () => {
      console.log("服务器启动了....");
    });
    

说明:

  • 如果当前目录下没有uploads,它会自动创建uploads这个文件夹
  • upload.single只是处理了文件的上传。你仍可以通过req.body来获取其它参数

后端框架代码

传参方式前端 content-type后端框架 express
请求行get方式req.query
请求体application/x-www-form-urlencodeapp.use(express.urlencoded()); req.body
请求体application/jsonapp.use(express.json() ); req.body
请求体multipart/form-data1. 引入包  const multer = require('multer');
2. 配置app.post('/apiname', upload.single() , req.body)