面试题：Angular HTTP请求方法与参数传递在复杂场景下的应用

实现思路

商品搜索功能：
- 在前端接收用户输入的关键词、价格范围以及商品类别等参数。
- 使用GET请求将这些参数拼接到URL中发送到后端。
- 后端接收请求，解析URL中的参数，进行数据库查询，返回符合条件的商品列表。
提交订单功能：
- 在前端收集订单详细信息，包括商品列表、用户信息、收货地址等复杂数据结构。
- 将这些数据进行序列化处理，使其符合HTTP请求可传输的格式（如JSON）。
- 使用POST请求将序列化后的数据发送到后端。
- 后端接收请求，对数据进行反序列化处理，解析出订单详细信息，进行订单处理（如保存到数据库等操作）。

关键代码片段

前端（以JavaScript为例）：
- 商品搜索：

function searchProducts() {
    const keyword = document.getElementById('keyword').value;
    const minPrice = document.getElementById('minPrice').value;
    const maxPrice = document.getElementById('maxPrice').value;
    const category = document.getElementById('category').value;
    const url = `/api/products?keyword=${encodeURIComponent(keyword)}&minPrice=${minPrice}&maxPrice=${maxPrice}&category=${category}`;
    fetch(url)
      .then(response => response.json())
      .then(data => {
            // 处理返回的商品列表数据，如展示在页面上
            console.log(data);
        });
}

提交订单：

function submitOrder() {
    const order = {
        products: [], // 填充商品列表数据
        userInfo: {}, // 填充用户信息数据
        shippingAddress: {} // 填充收货地址数据
    };
    const serializedOrder = JSON.stringify(order);
    fetch('/api/orders', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: serializedOrder
    })
      .then(response => response.json())
      .then(data => {
            // 处理订单提交后的响应，如提示用户订单提交成功等
            console.log(data);
        });
}

后端（以Python Flask为例）：
- 商品搜索：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/products', methods=['GET'])
def search_products():
    keyword = request.args.get('keyword', '')
    minPrice = request.args.get('minPrice', type=float)
    maxPrice = request.args.get('maxPrice', type=float)
    category = request.args.get('category', '')
    # 这里根据解析出的参数进行数据库查询，示例中假设使用SQLAlchemy进行查询
    # products = Product.query.filter(Product.name.contains(keyword), Product.price >= minPrice, Product.price <= maxPrice, Product.category == category).all()
    # 假设有一个函数将查询结果转换为JSON可序列化的格式
    # result = [product_to_dict(product) for product in products]
    result = []  # 模拟查询结果
    return jsonify(result)

提交订单：

@app.route('/api/orders', methods=['POST'])
def submit_order():
    data = request.get_json()
    if data is None:
        return jsonify({'error': 'Invalid JSON data'}), 400
    products = data.get('products', [])
    userInfo = data.get('userInfo', {})
    shippingAddress = data.get('shippingAddress', {})
    # 进行订单处理，如保存到数据库
    # order = Order(products=products, userInfo=userInfo, shippingAddress=shippingAddress)
    # db.session.add(order)
    # db.session.commit()
    return jsonify({'message': 'Order submitted successfully'})

在上述代码中，前端通过JSON.stringify将订单数据序列化，通过fetch发送GET和POST请求。后端在Flask中，通过request.args解析GET请求参数，通过request.get_json解析POST请求中的JSON数据，实现参数的序列化和反序列化。

面试题：Angular HTTP请求方法与参数传递在复杂场景下的应用

知识考点

面试题答案

实现思路

关键代码片段