7、使用包含继承,设计我前端的样式,从前端向后传递数据

2022-05-08  本文已影响0人  测试星云

一、技术准备:

模板(template)包含、继承与 {% block %} 的用法

二、具体步骤如下:

第一步:前端技术加强-html模板应用

1、建立navbar.html文件,是导航条

image.png

2、建立main..html,主页,包括导航和不同的块,等子模板覆盖。

image.png

3、建立home.html,继承主页,把预留的块填写上自己的内容

image.png

4、建立room.html文件,同上。

5、响应views.py添加

def home(request):
    return render(request, "home.html", context)
def room(request):
    return render(request, "room.html")

第二步:通过url中参数传递进入不同页面

总结:从后端通过响应往前端页面传递数据使用【返回值】 render(,,context)
从前端通过url参数/<str:pk> —->对应的方法的【入参】 room(request,pk)

1、urls.py

path('room/<str:pk>/', views.room,name=‘room')

2、views.py

def room(request,pk):

3、home.html

{% for room in rooms  %}
    <h3>{{room.id}} -- <a href="/room/{{room.id}}">{{room.title}}</a></h3>
{% endfor %}

4、获取所有的数据包括id,并改为Article类(显示文章)views.py中

rooms = models.Article.objects./all()

5、在返回的 判断符合 的id后将这个 id的内容显示在页面中。

def room(request, pk):
    room=models.Article.objects.get(id=pk)
    context={'room':room}
    return render(request, "room.html", context)

6、room.html

{%  extends 'main.html' %}

{% block  content %}
@{{room.user}}
<h1>{{room.title}}</h1>
<div>
    <h4>{{room.intro}}</h4>
</div>
<h5>{{room.created_time}}</h5>
{% endblock content %}

上一篇 下一篇

猜你喜欢

热点阅读