随笔录--前端的RESTful API和后端的RESTful API

最新推荐文章于 2024-05-02 13:47:49 发布

派大滨

最新推荐文章于 2024-05-02 13:47:49 发布

阅读量338

点赞数 5

分类专栏：随笔录文章标签：前端 restful 后端

本文链接：https://blog.csdn.net/Bigbin666/article/details/136285076

版权

随笔录专栏收录该内容

141 篇文章 0 订阅

订阅专栏

本文探讨了前端和后端RESTfulAPI的不同之处，强调了后端关注数据和服务提供，前端负责调用和使用API。通过Node.js/Express、JavaScript/FetchAPI和Python/Flask的示例，展示了如何在实际项目中实现和调用RESTfulAPI。

摘要由CSDN通过智能技术生成

前端的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');
});

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));

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

3.Python实现RESTful API 调用示例

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

pip install Flask

接下来创建一个简单的示例代码，示例中包括了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/<int:book_id>', 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)

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

运行这个示例代码之后，你就可以使用类似下面的curl命令来测试API了：author": "王五"}' http://127.0.0.1:5000/books

# 获取所有书籍
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