Отправка данных между интерфейсом и сервером с помощью «encodeURIComponent»

При работе между клиентской и серверной частью приложения возможность отправлять информацию от одного к другому невероятно важна. Кроме того, передача также должна быть безопасной, поскольку пользователям часто потребуется вводить конфиденциальную информацию. От внутреннего интерфейса к внешнему интерфейсу относительно просто, так как клиентская сторона может просто fetch()от конечной точки сервера. «encodeURIComponent» — это встроенная функция JavaScript для отправки из интерфейса в серверную часть.

Чтобы использовать encodeURIComponent, вы просто пишете его как функцию, одним параметром которой является любая строка ввода:

const userInput = “Hello, world!”;
const encodedInput = encodeURIComponent(userInput);
console.log(encodedInput); // Output: “Hello%2C%20world%21”

Как видно здесь, encodeURIComponent изменил некоторые символы в «Hello, world!» таким образом, чтобы его можно было передать как часть URL-адреса. Затем пользователи могут кодировать строки, которые могут вызвать конфликт в формате URL, и отправлять их для отправки информации на серверную часть для обработки:

const username = "John Doe";
const email = "[email protected]";
const encodedUsername = encodeURIComponent(username);
const encodedEmail = encodeURIComponent(email);

const url = `/api/user?username=${encodedUsername}&email=${encodedEmail}`;
fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ username, email }),
})
  .then((r) => r.json())
  .then((data) => console.log(data));
from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/user', methods=['POST'])
def handle_user_data():
    if request.method == 'POST':
        # Get the data from the JSON body of the request
        data = request.get_json()
        
        # Access the username and email parameters sent from the frontend
        username = data.get('username')
        email = data.get('email')
        
        # Perform any necessary backend processing with the received data
        response_data = {
            'message': 'Data received successfully!',
            'username': username,
            'email': email,
        }
        
        # Return the response as JSON
        return jsonify(response_data)

используя Flask API в качестве примера бэкэнда, здесь имя пользователя и адрес электронной почты могут быть отправлены из внешнего интерфейса в бэкэнд, а затем отправлены в базу данных пользователей.

Обычно этот закодированный URL-адрес можно увидеть в поисковых URL-адресах, таких как

“https://www.example.com/search/?q=search+query&lang=default”

где интерфейс приложения может быть написан как таковой:

`/search?q=${encodeURIComponent(searchTerm)}`

и что searchTerm может быть дополнительно передан серверной части как часть выборки для получения уже отфильтрованной части базы данных.

В заключение, используя encodeURIComponent во внешнем интерфейсе и правильно обрабатывая данные во внутреннем интерфейсе, вы обеспечиваете безопасную и точную передачу данных между внешним интерфейсом и внутренним интерфейсом Flask Python.