Django路由添加站点未按设定order排序显示问题排查

问题描述 #

开发Django应用实现向Route中添加Port作为站点的功能，目前新增站点可成功关联到路由，但存在两个问题：

1. 站点未按RoutePort模型设定的order字段排序，而是按添加顺序展示
2. 模板中的{{ stops.order }}无输出效果

相关代码 #

Models #

class Port(models.Model):
    name = models.CharField(max_length=128)
    description = models.TextField(default='')
    lattitude = models.DecimalField(max_digits=9, decimal_places=6)
    longitude = models.DecimalField(max_digits=9, decimal_places=6)
    amenities = models.ManyToManyField(Amenity, blank=True)

    def __str__(self):
        return f'{self.name}'

class Route(models.Model):
    name = models.CharField(max_length=128, default='')
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    stop_list = models.ManyToManyField(Port, through='RoutePort')

    def __str__(self):
        return f'{self.name}'

class RoutePort(models.Model):
    port = models.ForeignKey(Port, on_delete=models.CASCADE)
    route = models.ForeignKey(Route, on_delete=models.CASCADE)
    order = models.PositiveIntegerField()

    class Meta:
        ordering = ['order']

Form #

class AddRoutePort(forms.ModelForm):

    class Meta:
        model = RoutePort
        fields = ['port', 'order']

View #

class RouteCorrectView(View):

    def get(self, request, pk):
        route = Route.objects.get(pk=pk)
        form = AddRoutePort()
        return render(request, 'route_correct.html', {'route':route, 'form':form})

    def post(self, request, pk):
        route = Route.objects.get(pk=pk)
        form = AddRoutePort(request.POST)
        if form.is_valid():
            to_port = form.save(commit=False)
            to_port.route = route
            order = to_port.order
            ordering = RoutePort.objects.filter(order__gte=order, route=route)
            for port in ordering:
                port.order += 1
                port.save()
            to_port.save()
            return redirect('route_correct', pk)
        return render(request, 'route_correct.html', {'route':route, 'form':form})

HTML模板 #

{% extends 'base.html' %}
{% block content %}
    <div class="card">
    <ul>Nazwa</ul>
        <p>{{ route.name }}</p>
    <ul>Twórca</ul>
        <p> {{ route.user }}</p>
    <ul>Szlak</ul>
        <td> {% for stops in route.stop_list.all %}
        {{ stops }} {{ stops.order }}
            <td>
            <form action="{% url 'delete_stop' stops.id %}" method="get"> {% csrf_token %}
                <input type="submit">usuń</form>
            <form action="{% url 'port_detail' stops.id %}" method="get"> {% csrf_token %}
                <input type="submit">o porcie</form><br>
        </td>
            {% empty %}
            Szlak jest jeszcze pusty
        {% endfor %}</td>
    </div>

    <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit">
</form>

    </div>

{% endblock %}

错误原因分析 #

1. {{ stops.order }}无输出：route.stop_list.all()返回的是Port对象集合，而order字段属于中间模型RoutePort，Port本身没有这个属性，所以模板无法渲染该字段。
2. 排序不生效：即使RoutePort的Meta类设置了ordering = ['order']，通过多对多关联stop_list获取Port时，Django不会自动应用中间模型的排序规则，只会按Port自身的默认排序（通常是id）返回。

解决方案 #

1. 修改Route模型，添加获取排序站点的方法 #

在Route类中新增方法，直接从中间模型RoutePort获取排序后的关联记录：

class Route(models.Model):
    # 原有字段...
    def get_ordered_stops(self):
        # 利用RoutePort的Meta排序，直接返回已排序的关联记录
        return self.routeport_set.all()

2. 调整模板遍历逻辑 #

将模板中遍历route.stop_list.all()改为遍历route.get_ordered_stops()，并通过stop.port访问Port对象，stop.order获取排序值：

{% extends 'base.html' %}
{% block content %}
    <div class="card">
    <ul>Nazwa</ul>
        <p>{{ route.name }}</p>
    <ul>Twórca</ul>
        <p> {{ route.user }}</p>
    <ul>Szlak</ul>
        {% for stop in route.get_ordered_stops %}
            {{ stop.port }} {{ stop.order }}
            <div>
                <form action="{% url 'delete_stop' stop.id %}" method="post"> {% csrf_token %}
                    <input type="submit" value="usuń">
                </form>
                <form action="{% url 'port_detail' stop.port.id %}" method="get">
                    <input type="submit" value="o porcie">
                </form><br>
            </div>
        {% empty %}
            Szlak jest jeszcze pusty
        {% endfor %}
    </div>

    <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Dodaj port">
</form>

{% endblock %}

注意：删除操作的URL参数改为stop.id（RoutePort的id），避免误删Port本身；同时修正了HTML标签结构，移除无意义的td标签，改用div保证结构合理。

3. 验证视图逻辑 #

视图中插入RoutePort时的order调整逻辑是正确的，无需修改。确保新增的RoutePort记录order值正确存入数据库即可。

内容的提问来源于stack exchange，提问作者Piotr