Django----将后端数据展示在前端页面（展示用户列表及详情页）

需求描述：如下图，将后台数据库中的用户列表数据展示出来，点击某用户后，进入信息详情页面解决方案：涉及知识点：模板语言django除了可以渲染html语言，还支持模板语言：{% for user in user_list %}<li><a href="detail/{{user.id}}"> {{user.username}}</a></li>{% e

maidu_xbd

8630人浏览 · 2020-09-28 22:17:07

maidu_xbd · 2020-09-28 22:17:07 发布

需求描述：

如下图，将后台数据库中的用户列表数据展示出来，点击某用户后，进入信息详情页面

解决方案：

涉及知识点：模板语言

django除了可以渲染html语言，还支持模板语言：

  {% for user in user_list %}
  <li>
     <a href="detail/{{user.id}}"> {{user.username}}</a>
  </li>
  {% endfor %}

1、从模型类中获取数据后，构造json数据用来传递数据，渲染home.html并携带context参数。

2、在home.html点击用户后获取到用户的id，通过id向后台查询具有该id的用户数据后，将数据渲染至detail.html页面。

完整代码：

【home.html】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表页</title>
</head>

<body>
    <div style="color:red">展示用户列表</div>
    {{user_list}}
    <ul>
        {% for user in user_list %}
        <li>
            <a href="detail/{{user.id}}"> {{user.username}}</a>
        </li>
        {% endfor %}
    </ul>
</body>

</html>

【detail.html】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息详情页面</title>
</head>

<body>
    <div>
        <h1>信息详情页面</h1>
        <div> 用户名：{{user.username}}</div>
        <div>电话号码：{{user.phoneNum}}</div>

    </div>

</body>

</html>

【views.py】

from django.shortcuts import render
from django.http import HttpResponse
from myapp.models import UserInfo

# Create your views here.


def home(request):
    user_list = UserInfo.objects.all()
    print(user_list)
    context = {"user_list": user_list}
    return render(request, "home.html", context=context)


def detail(request, id):
    user = UserInfo.objects.get(id=id)
    return render(request, "detail.html", context={"user": user})

【urls.py】

from django.conf.urls import url
from django.contrib import admin
from myapp.views import *

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^home', home),
    url(r'^detail/(\d)+', detail)
]

永洪数据分析社区

永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐