### 实现订单号提交后显示和编辑功能 为了实现在 Flask 应用中提交订单号后能够显示并允许编辑该订单数据，可以按照以下方法构建应用程序逻辑。 #### 创建表单类用于接收订单号 首先，在 `forms.py` 文件中创建一个表单类来获取用户输入的订单号： ```python from flask_wtf import FlaskForm from wtforms import StringField, SubmitField from wtforms.validators import DataRequired class OrderIDForm(FlaskForm): order_id = StringField('Order ID', validators=[DataRequired()]) submit = SubmitField('Submit') ``` 此部分代码定义了一个简单的 WTForms 表单，它包含一个必填字段 `order_id` 和一个提交按钮[^1]。 #### 构建路由函数处理请求 接着，在主程序文件（通常是 `app.py` 或者其他名称）里编写两个视图函数分别用来展示订单详情以及提供修改界面。假设数据库模型已经存在，则有如下操作： ```python @app.route('/view_order/<int:order_id>', methods=['GET']) def view_order(order_id): # 查询指定id的订单记录 order = db.session.query(Order).get_or_404(order_id) form = OrderEditForm(obj=order) # 使用现有对象填充表单 return render_template('view_order.html', title='View Order', form=form) @app.route('/edit_order/<int:order_id>', methods=['POST']) def edit_order(order_id): order = db.session.query(Order).get_or_404(order_id) form = OrderEditForm() if form.validate_on_submit(): # 更新订单信息至数据库 form.populate_obj(order) db.session.commit() flash('Your changes have been saved.') return redirect(url_for('view_order', order_id=order.id)) ``` 这里实现了 GET 请求查看特定编号的订单，并预加载其内容到可编辑表单；当 POST 提交时则更新对应的订单条目。 #### 设计HTML模板支持交互 最后一步是在前端设计 HTML 页面以便于用户体验良好地完成上述流程。对于 `templates/view_order.html`, 可能看起来像这样: ```html <h2>Order Details</h2> <form action="{{ url_for('edit_order', order_id=form.order_id.data) }}" method="post"> {{ form.hidden_tag() }} <table> <!-- 显示各属性 --> {% for field in form %} <tr><td>{{ field.label }}</td><td>{{ field }}</td></tr> {% endfor %} </table> <input type="submit" value="Save Changes"/> </form> <a href="{{ url_for('index') }}">Back to Home Page</a> ``` 这段代码片段展示了如何利用 Jinja2 模板引擎渲染动态内容，同时也演示了模板继承的概念——即通过 `{% extends %}` 和 `{% block %}` 来共享布局结构。 此外，还可以定义宏以简化重复使用的组件或样式设置过程。例如，创建名为 `_macros.html` 的新文件并将常用控件封装成宏调用形式供其它页面引用。 ```jinja2 {% macro input_field(field) %} <div class="field-wrapper"> {{ field.label }}<br/> {{ field(class_='form-control')}} {% if field.errors %} <ul class="errors"> {% for error in field.errors %} <li>{{ error }}</li> {% endfor %} </ul> {% endif %} </div> {% endmacro %} ``` 之后便可在任何地方轻松引入这些宏并通过传递参数来自动生成所需UI元素。