• 前端的RESTful API和后端的RESTful API


    总述

    前端的RESTful API和后端的RESTful API并不是完全相同的东西,它们在应用场景和角色上有所不同。

    后端的RESTful API指的是在服务器端实现的符合RESTful架构风格的API,它用于提供数据和服务,并且通常被前端或其他服务端所调用。后端的RESTful API包括了资源的定义、URI的设计、HTTP方法的使用以及数据格式等内容。

    而前端的RESTful API通常是指在客户端(比如浏览器端、移动端应用)中调用后端RESTful API的方式和规范。前端的RESTful API通常是通过Ajax、Fetch API或者一些库(比如axios)来发起HTTP请求,按照RESTful规范与后端的API进行交互,包括发送GET、POST、PUT、DELETE等请求,处理返回的数据等。

    总的来说,后端的RESTful API主要关注于数据和服务的提供,前端的RESTful API则关注于调用和使用后端提供的API。在实际开发中,前后端的工程师会根据约定好的API规范来进行协作,前端工程师会根据后端提供的API文档来调用后端的API,并将获取到的数据展示在用户界面上。
    RESTful API 通常指的是后端服务器提供给客户端(包括前端应用)的接口规范。它使用HTTP请求来进行通信,客户端可以通过发送不同的HTTP请求(如GET、POST、PUT、DELETE等)来实现对后端数据和服务的操作。

    以下是一个简单的示例,包括前端和后端的 RESTful API:

    1. 后端的 RESTful API 示例(使用Node.js和Express框架):

    // 定义后端的 RESTful API 接口
    const express = require('express');
    const app = express();
    
    // 处理 GET 请求,获取用户列表
    app.get('/api/users', (req, res) => {
      // 从数据库中获取用户列表数据
      const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
      res.json(users);
    });
    
    // 处理 POST 请求,创建新用户
    app.post('/api/users', (req, res) => {
      // 从请求中获取新用户数据,并保存到数据库
      const newUser = req.body;
      // 进行保存操作...
      res.status(201).send('User created successfully');
    });
    
    // 处理 PUT 请求,更新用户信息
    app.put('/api/users/:id', (req, res) => {
      const userId = req.params.id;
      // 从请求中获取更新的用户数据,并更新数据库中对应的用户信息
      // 进行更新操作...
      res.send('User updated successfully');
    });
    
    // 处理 DELETE 请求,删除用户
    app.delete('/api/users/:id', (req, res) => {
      const userId = req.params.id;
      // 根据用户ID从数据库中删除对应的用户信息
      // 进行删除操作...
      res.send('User deleted successfully');
    });
    
    app.listen(3000, () => {
      console.log('Server is running on port 3000');
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    2. 前端的 RESTful API 调用示例(使用JavaScript的Fetch API):

    // 发起 GET 请求,获取用户列表
    fetch('http://localhost:3000/api/users')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('Error:', error));
    
    // 发起 POST 请求,创建新用户
    fetch('http://localhost:3000/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: 'Charlie' }),
    })
      .then(response => console.log('User created successfully'))
      .catch(error => console.error('Error:', error));
    
    // 发起 PUT 请求,更新用户信息
    fetch('http://localhost:3000/api/users/1', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: 'David' }),
    })
      .then(response => console.log('User updated successfully'))
      .catch(error => console.error('Error:', error));
    
    // 发起 DELETE 请求,删除用户
    fetch('http://localhost:3000/api/users/2', {
      method: 'DELETE',
    })
      .then(response => console.log('User deleted successfully'))
      .catch(error => console.error('Error:', error));
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    在这个示例中,后端使用 Express 框架定义了一组 RESTful API,用于处理用户数据的增删改查操作。而前端则使用 Fetch API 发起了相应的 HTTP 请求,调用了后端提供的 RESTful API,实现了对用户数据的操作。

    3.Python实现RESTful API 调用示例

    使用Python的Flask框架来实现一个简单的RESTful API示例。首先确保你已经安装了Flask库,如果没有安装可以通过以下命令进行安装:

    pip install Flask
    
    • 1

    接下来创建一个简单的示例代码,示例中包括了GET和POST两种HTTP请求方法的处理:

    from flask import Flask, jsonify, request
    
    app = Flask(__name__)
    
    # 模拟数据库存储一些数据
    books = [
        {'id': 1, 'title': 'Python编程入门', 'author': '张三'},
        {'id': 2, 'title': 'Java编程入门', 'author': '李四'}
    ]
    
    # 获取所有书籍
    @app.route('/books', methods=['GET'])
    def get_books():
        return jsonify(books)
    
    # 获取特定ID的书籍
    @app.route('/books/', methods=['GET'])
    def get_book(book_id):
        book = next((book for book in books if book['id'] == book_id), None)
        if book:
            return jsonify(book)
        else:
            return 'Book not found', 404
    
    # 添加新书籍
    @app.route('/books', methods=['POST'])
    def add_book():
        new_book = {'id': len(books) + 1, 'title': request.json['title'], 'author': request.json['author']}
        books.append(new_book)
        return jsonify(new_book), 201
    
    if __name__ == '__main__':
        app.run(debug=True)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    在这个示例中,我们创建了一个简单的书籍API,包括获取所有书籍、根据ID获取书籍以及添加新书籍三个功能。你可以使用curl或者其他工具来测试这个API。

    运行这个示例代码之后,你就可以使用类似下面的curl命令来测试API了:

    # 获取所有书籍
    curl -X GET http://127.0.0.1:5000/books
    
    # 获取特定ID的书籍
    curl -X GET http://127.0.0.1:5000/books/1
    
    # 添加新书籍
    curl -X POST -H "Content-Type: application/json" -d '{"title": "Docker入门", "author": "王五"}' http://127.0.0.1:5000/books
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
  • 相关阅读:
    Java I/O(一)I/O概述
    java面试题记录
    【大数据】基于 Flink CDC 高效构建入湖通道
    JavaScript与jQuery(上篇)
    SDUT PTA 栈和队列
    持久与速度 鱼和熊掌 MySQL怎么去兼得
    Docker资源控制管理
    Error:java: Annotation processing is not supported for module cycles.
    Web3 时代 市场营销的变迁
    python报错 AttributeError: ‘mpz‘ object has no attribute ‘to_bytes‘
  • 原文地址:https://blog.csdn.net/m0_57021623/article/details/134405976