### 使用 Vue 和 Python 实现商品 ID 和 PID 输入表单 以下是结合 Vue 和 Python 创建一个用于输入商品 ID 和 PID 的完整示例。此代码将展示如何通过前端的 Vue 框架收集用户输入，并通过后端的 Python Flask 框架接收和处理这些数据。 --- #### 前端部分：Vue 表单 ```html <template> <div id="app"> <h3>请输入商品信息</h3> <label for="productId">商品ID:</label> <input type="text" id="productId" v-model="productId" placeholder="请输入商品ID" /> <br /><br /> <label for="pid">PID:</label> <input type="text" id="pid" v-model="pid" placeholder="请输入PID" /> <br /><br /> <button @click="submitData">提交</button> <p v-if="message">{{ message }}</p> </div> </template> <script> export default { data() { return { productId: '', // 商品ID pid: '', // PID message: '' // 提交后的消息 }; }, methods: { async submitData() { try { const response = await fetch('http://localhost:5000/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ productId: this.productId, pid: this.pid }) }); const result = await response.json(); this.message = result.message; } catch (error) { this.message = '提交失败，请稍后再试。'; } } } }; </script> <style scoped> #app { max-width: 400px; margin: auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } input { width: 100%; padding: 8px; margin: 5px 0; box-sizing: border-box; } button { padding: 10px 15px; background-color: #42b983; color: white; border: none; cursor: pointer; border-radius: 3px; } button:hover { background-color: #38a169; } </style> ``` --- #### 后端部分：Python Flask 接收数据 ```python from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/submit', methods=['POST']) def submit(): data = request.get_json() product_id = data.get('productId') pid = data.get('pid') if not product_id or not pid: return jsonify({'message': '商品ID和PID不能为空！'}), 400 # 在这里可以添加更多的业务逻辑，例如保存到数据库等 return jsonify({'message': f'已成功提交数据：商品ID - {product_id}, PID - {pid}'}) if __name__ == '__main__': app.run(debug=True) ``` --- #### 项目结构 根据标准的项目目录结构[^2]，可以将上述代码组织如下： ``` awesome-python3-webapp/ |-- backup/ |-- conf/ |-- dist/ |-- www/ | |-- static/ <-- 存放静态文件（如 Vue 打包后的文件） | |-- templates/ <-- 存放模板文件 |-- ios/ |-- LICENSE |-- app.py <-- 后端代码 |-- vue_project/ <-- Vue 项目的源码 ``` --- #### 部署步骤 1. **安装依赖**：确保安装了 Vue 和 Flask 的开发环境。 ```bash npm install # 安装 Vue 项目依赖 pip install flask # 安装 Flask ``` 2. **运行后端服务**： ```bash python app.py ``` 3. **构建并运行前端**： ```bash npm run build # 构建 Vue 项目 npm run serve # 开发模式下运行 Vue 项目 ``` 4. **测试功能**：在浏览器中访问前端页面，输入商品ID和PID并提交，后端将返回处理结果。 --- #### 数据交互流程 - 用户在前端输入商品ID和PID，并点击“提交”按钮。 - Vue 使用 `fetch` 方法向后端发送 POST 请求，携带 JSON 格式的数据。 - 后端使用 Flask 接收请求，解析 JSON 数据并返回响应。 - 响应内容被 Vue 捕获并显示给用户。 ---