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

需求描述：

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

解决方案：

涉及知识点：模板语言

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)
]

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

使用ajax获取后台数据怎么打印,我用ajax获取后台数据并展示在前端页面的方法【源码】...
<我用ajax获取后台数据并展示在前端页面的方法[源码]>由会员分享,可在线阅读,更多相关<我用ajax获取后台数据并展示在前端页面的方法[源码](2页珍藏版)>请在人人文库网 ...
html展示markdown文件,在前端页面展示Markdown文件
常我们都会在GitHub上浏览很多的readme文件,这些都是Markdown语法写成的Markdown文件,HTML中并没有用于展示Markdown文件的元素,那么为什么可以在前端展示呢? 有别于G ...
vue click事件_Vue.js---实现前后端分离架构中前端页面搭建（二）
[Vue.js实现前后端分离架构中前端页面搭建] 九.Vue的事件处理 Vue的事件都是使用 v-on:事件类型进行绑定.也可以使用@事件类型进行操作.其中事件类型和之前学习jQuery中事件名称是 ...
vue 新建的页面如何访问_Vue.js—实现前后端分离架构中前端页面搭建（四）（完）...
[Vue.js实现前后端分离架构中前端页面搭建] 二十.实现服务端登录业务前提:已经有单机版Eureka,端口8761.启动开Eureka 1. 新建父项目新建backend_parent. 为了 ...
使用Blob对象接收后台返回的图片流并展示到前端页面
使用Blob对象接收后台返回的图片流并展示到前端页面一.效果图二.主要代码一.效果图二.主要代码 export function 接口(params) {return request({url ...
尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...
前端源码架构在拍卖详情页上的探索
关注并将「趣谈前端」设为星标每早08:30按时推送技术干货/优秀开源/技术思维前言一个系统能有一个非常好的架构设计是非常重要的.但是仅仅对于前端项目页面,其实很难把「架构」一词搬出来聊个天花乱坠 ...
根据后台的数据设置前端页面展示效果
2019独角兽企业重金招聘Python工程师标准>>> eg1:后台数据:0:女,1:男: 前端展示效果为:男或女,而不是显示0或1 eg2:后台数据:1:模组1, 2:模组2 ...
使用@JsonFormat注解后端往前端页面展示日期为英文问题（例如：Thu Dec 09 00:00:00 CST 2021）
后端相关代码: /** 时间 */ @JsonFormat(pattern = "yyyy-MM" ,timezone="GMT+8" ) //导入相关的包 @ ...

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

需求描述：

解决方案：

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

最新文章

热门文章