美文网首页
使用 Express 写接口

使用 Express 写接口

作者: 過尽千帆_YL | 来源:发表于2021-05-27 10:56 被阅读0次

    1.创建基本的服务器

    // 导入 express
    const express = require('express')
    // 创建服务器实例
    const app = express()
    
    // 配置解析表单数据的中间件
    app.use(express.urlencoded({ extended: false }))
    
    // 必须在配置 cors 中间件之前,配置 JSONP 的接口
    app.get('/api/jsonp', (req, res) => {
      // TODO: 定义 JSONP 接口具体的实现过程
      // 1. 得到函数的名称
      const funcName = req.query.callback
      // 2. 定义要发送到客户端的数据对象
      const data = { name: 'zs', age: 22 }
      // 3. 拼接出一个函数的调用
      const scriptStr = `${funcName}(${JSON.stringify(data)})`
      // 4. 把拼接的字符串,响应给客户端
      res.send(scriptStr)
    })
    
    // 一定要在路由之前,配置 cors 这个中间件,从而解决接口跨域的问题
    const cors = require('cors')
    app.use(cors())
    
    // 启动服务器
    app.listen(80, () => {
      console.log('express server running at http://127.0.0.1')
    })
    
    

    注意:

    • 必须在配置 cors 中间件之前,配置 JSONP 的接口
    • 在路由之前,配置 cors 这个中间件,从而解决接口跨域的问题

    2.创建 API 路由模块

    // apiRouter.js [模块路由]
    const express = require('express')
    const router = express.Router()
    
    // 导入路由模块
    const router = require('./16.apiRouter')
    // 把路由模块,注册到 app 上
    app.use('/api', router)
    
    

    3 编写 GET 接口

    router.get('/get', (req, res) => {
      // 通过 req.query 获取客户端通过查询字符串,发送到服务器的数据
      const query = req.query
      // 调用 res.send() 方法,向客户端响应处理的结果
      res.send({
        status: 0, // 0 表示处理成功,1 表示处理失败
        msg: 'GET 请求成功!', // 状态的描述
        data: query, // 需要响应给客户端的数据
      })
    })
    
    

    4.编写 POST 接口

    // 定义 POST 接口
    router.post('/post', (req, res) => {
      // 通过 req.body 获取请求体中包含的 url-encoded 格式的数据
      const body = req.body
      // 调用 res.send() 方法,向客户端响应结果
      res.send({
        status: 0,
        msg: 'POST 请求成功!',
        data: body,
      })
    })
    

    注意:如果要获取URL-encoded 格式的请求体数据,必须配置中间件 app.use(express.urlencoded({ extended: false }))

    扩展:

    JSONP 接口

    1. 回顾 JSONP 的概念与特点

    概念:浏览器端通过 <script> 标签的 src 属性,请求服务器上的数据,同时,服务器返回一个函数的调用。这种请求数据 的方式叫做 JSONP。
    特点:JSONP 仅支持 GET 请求,不支持POST、PUT、DELETE 等请求。

    2. 创建 JSONP 接口的注意事项

    如果项目中已经配置了 CORS 跨域资源共享,为了防止冲突,必须在配置CORS 中间件之前声明JSONP的接口。否则 JSONP 接口会被处理成开启了CORS 的接口。示例代码如下:

    // 优先创建 JSONP 接口 (这个接口不会被处理 成 CORS 接口)
    app.get('/api/jsonp', (req, res) => {
    
    })
    
    // 再配置 CORS 中间件 (后续的所有接口,都会被处理成 CORS 接口)
    app.use(cors())
    
    // 开启 CORS 接口
    app.get('/api/get', (req, res) => { })
    
    

    3. 在网页中使用 jQuery 发起 JSONP 请求

    $('#btnJSONP').on('click',function () {
        $.ajax({
            type: "get",
            url: "http://127.0.0.1/api/jsonp",
            dataType: "jsonp", // 表示发起请求的类型
            success: function (res) {
                console.log(res);
            }
        });
    })
    

    4. 实现 JSONP 接口的步骤

    ① 获取客户端发送过来的回调函数的名字
    ② 得到要通过 JSONP 形式发送给客户端的数据
    ③ 根据前两步得到的数据,拼接出一个函数调用的字符串
    ④ 把上一步拼接得到的字符串,响应给客户端的<script> 标签进行解析执行

    5. 实现 JSONP 接口的具体代码

    app.get('/api/get', (req, res) => {
        // 1.获取客户端发送过来的回调函数的名字
        const funName = req.query.callback
        // 2.得到要通过 JSONP形式发送给客户端的数据
        const data = {
            name: 'city',
            age: 22
        }
        // 3.根据前两步得到数据,拼接一个函数调用的字符串
        const scriptStr = `${funName}(${JSON.stringify(data)})`
        // 4.把上一步拼接得到的字符串,响应给客户端的<script> 标签进行解析分析
        res.send(scriptStr)
    })
    

    相关文章

      网友评论

          本文标题:使用 Express 写接口

          本文链接:https://www.haomeiwen.com/subject/wfrtsltx.html