2022-06-05
4 ---7
四、将数据库中数据在前台
显⽰（不是在管理员界⾯）
1、将后端数据传递回前端界⾯（常⽤格式列表字典）
❖ views.py中Render中参数传递动态数据
❖ def sonpage(request):
❖ context = {"ads": ["selenium", "appium", "requests"] }
❖ return render(request, 'sonpage.html', context)
❖ 或
❖ rooms=[ {'name':'python web 技术'},{'name':'测试技术'}, {'name':'⼈⼯智能'}]
❖ def hello(request):
❖ context={'rooms':rooms}
❖ return render(request,'hello.html',context)
2、前端界⾯循环显⽰出来
❖ 在html页⾯中添加 ：变量调⽤： {{变量名}} 代码使⽤{% %}
❖ <ul>⾃动化内容</ul>
❖ {% for i in ads %}
❖ <li>{{i}}</li>
❖ {% endfor %}
❖ 或
❖ {% for room in rooms %}
❖ <h5> {{room.name}}</h5>
❖ {% endfor %}
3、将数据库的数据取回到后端中
from .models import Category
context = {'rooms': Category.objects.values()}
4、可使⽤bootstrap写好的css样式变好看
https://getbootstrap.com/
❖ https://v4.bootcss.com/docs/components/navs/
❖ https://getbootstrap.com/docs/5.1/examples/
❖ head中加上css（也可使⽤下载到本地的）
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
❖ 将源代码复制到html中。可直接使⽤。
五、使⽤包含继承，设计我前端的样式，从前端向后传递数据
第⼀步：前端技术加强-html模板应⽤
❖ 页⾯的继承(⽗模板与⼦模板),扩展及导
⼊
❖ {% include 'navbar.html' %}
❖ {% extends 'main.html' %}
❖ {% block content %}
❖ <h1>主页home模板</h1>
❖ {% endblock %}
步骤
1、建⽴navbar.html⽂件，是导航条
2、建⽴main..html，主页，包括导航和
不同的块，等⼦模板覆盖。
3、建⽴home.html，继承主页，把预留的
块填写上⾃⼰的内容
4、建⽴room.html⽂件，同上。
5、def home(request):
return render(request, "home.html", context)
def room(request):
return render(request, "room.html")
模板(template)包含、继承与 {% block %} 的⽤法
❖ {% include %} 标签
❖ 在项⽬的开发过程中，有很多页⾯的某些内容都是⼀样的，⽐如页⾯的导航条，页脚的部分，在每个页⾯都是⼀样的，我们 将相同的代码，抽出来，使⽤时⽤{%include %}标签。
❖ {% extends "main.html" %} 的意思是继承 main.html页⾯的代码，使⽤继承⽅法的话，这个代码⼀定要放页⾯的第⼀⾏。
❖ 代码{% block xxx %}{% endblock %} ⾥的xxx可以⾃由命名，这个代码意思是告诉模板引擎：这个位置我要预留给别⼈放东西的。这个部分⼦模板可以重载，每个{%block%}标签所要做的是告诉模板引擎，该模板下的这⼀块内容将有可能被⼦模板覆盖
第⼆步：通过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 %}
通过url中参数传递进⼊不同细节
❖ 4、获取所有的数据包括id,并改为Article类（显⽰⽂章）views.py中
❖ rooms = models.Article.objects.values()/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
❖ <h1>{{room.title}}</h1>
六、使⽤表单form模板并 建⽴页⾯的增删改查功能
一.创建添加⽂章功能1-创建前端home/添加⽂章页⾯
1、建⽴添加⽂章进⼊链接：在home.html 的for循环上 ⾯加
<a href="{% url 'create-room' %}">创建⽂章</a>
2、建⽴添加⽂章room_form.html
{% extends 'main.html' %}s
{% block content %}
<div>
<form method="post" action="">
{% csrf_token %}
{{form.as_p}}
<input type="Submit" value="提交" />
</form>
</div>
{% endblock content%}
二.创建添加⽂章功能2-创建表单模板及路由
3、使⽤表单模板从数据库中取出数据⽣成页⾯要添加的字段。【新建forms.py】
from django.forms import ModelForm
from .models import Article
class RoomForm(ModelForm):
class Meta:
model = Article
fields = '__all__'
4、添加路由url.py ,并把home添加名字，其他改成英⽂
urlpatterns = [
path('', views.home,name='home'),
path('room/<str:pk>/', views.room, name='room'),
path('create-room/', views.create_room, name=‘create-room'),]
三.创建添加⽂章功能3-创建【判断并保存及返回响应】的 ⽅法
5、建⽴提交添加数据接收和返回的 ⽅法。views.py
def create_room(request):
form = RoomForm()
if request.method == 'POST':
form = RoomForm(request.POST)
print(request.POST)
if form.is_valid():
form.save()
return redirect(‘home’)
context = {'form': form}
return render(request, 'room_form.html', context)更新功能2-创建路由及 前端
在urls.py
path('update-room/<str:pk>', views.update_room, name='update-room'),
在home.html
循环中
<a href="{% url 'update-room' room.id %}">修改⽂章</a>更新功能1-保存数据到数据库 创建返回
1、在 views.py 创建 update_home()⽅法
def update_room(request, pk):
# 从数据库中获得id为前端传过来的值，查询某个值的结果返回
info = Article.objects.get(id=pk)
# 返回结果装在前端表单模板中，通过return返回给前端html⽹页
form = RoomForm(instance=info)
if request.method=='POST':
form=RoomForm(request.POST,instance=info)
if form.is_valid():
form.save()
return redirect('home')
context = {'form': form}
return render(request, 'room_form.html', context)删除功能1-创建删除模板html
1、创建delete.html
{% extends 'main.html'%}
{% block content %}
<form method="post" action="">
{% csrf_token %}
<p>
确定要删除{{obj}}吗？
</p>
<a href="{{request.META.HTTP.REFERER}}"> 回到从前</a>
<input type="submit" value="提交" />
</form>
{% endblock content %}删除功能2-删除数据库数据，创建返回数据、路由、链接
在views.py中添加
def delete_room(request, pk):
info = Article.objects.get(id=pk)
if request.method == 'POST':
info.delete()
return redirect('home')
return render(request, 'delete.html', {'obj': info})
在urls.py
path('delete-room/<str:pk>', views.delete_room, name='delete-room'),
在home.html循环中
<a href="{% url 'delete-room' room.id %}">删除⽂章</a>
3.搜索
<a href="/">
<h1>LOGO</h1>
</a>
<form method="get" action="{% url 'home'%}">
<input type="search" name="q" placeholder="搜索..."/>
</form>
<hr>
七.管理员界面
一：前端技术加强-html模板应用
1、建立navbar.html文件，是导航条image.png
2、建立main..html，主页，包括导航和不同的块，等子模板覆盖。
3、建立home.html，继承主页，把预留的块填写上自己的内容
4、建立room.html文件，同上。
5、响应views.py添加
defhome(request):returnrender(request,"home.html",context)defroom(request):returnrender(request,"room.html")
二：通过url中参数传递进入不同页面
总结：从后端通过响应往前端页面传递数据使用【返回值】render(,,context)
从前端通过url参数/ —->对应的方法的【入参】 room(request,pk)
1、urls.py
path('room/<str:pk>/',views.room,name=‘room')
2、views.py
defroom(request,pk):
3、home.html
{% for room in rooms %}<h3>{{room.id}} --<ahref="/room/{{room.id}}">{{room.title}}</a></h3>{% endfor %}
4、获取所有的数据包括id,并改为Article类（显示文章）views.py中
rooms = models.Article.objects./all()
5、在返回的 判断符合 的id后将这个 id的内容显示在页面中。
defroom(request,pk):room=models.Article.objects.get(id=pk)context={'room':room}returnrender(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 %}
