5.设计我前端的样式

前端技术加强-html模板应⽤

❖ 页⾯的继承(⽗模板与⼦模板),扩展及导⼊

❖ {% include 'navbar.html' %}

❖ {% extends 'main.html' %}

❖ {% block content %}

❖ <h1>主页home模板</h1>

❖ {% endblock %}

❖

步骤

1、建⽴navbar.html⽂件

2、建⽴home.html⽂件

3、建⽴room.html⽂件

4、建⽴main..html

5、def home(request):

return render(request, "home.html", context)

def room(request):

return render(request, "room.html")通过url中参数传递进⼊不同页⾯1

❖ 总结：从后端通过响应往前端页⾯传递数据使⽤【返回值】 render(,,context)

❖ 从前端通过url参数/<str:pk> —->对应的⽅法的【⼊参】 room(request,pk)

❖ 1、urls.py

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

❖ 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 %}通过url中参数传递进⼊不同细节

❖ 4、获取所有的数据包括id,并改为Article类（显⽰⽂章）

❖ rooms = models.Article.objects.values()

❖ 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

❖ <h1>{{room.title}}</h1>