将数据库中数据在前台显⽰
将后端数据传递回前端界⾯
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)
前端界⾯循环显⽰出来
在html页⾯中添加 :变量调⽤: {{变量名}} 代码使⽤{% %}
<ul>⾃动化内容</ul>
{% for i in ads %}
<li>{{i}}</li>
{% endfor %}
或
{% for room in rooms %}
<h5> {{room.name}}</h5>
{% endfor %}
将数据库的数据取回到后端中
获取这个ORM模型的QuerySet对象。即获取所有的数据。
模型中类名.objects.all(),这个不 包括id
models.模型中类名.Objects.values(),这个包括 id
from .models import Category
context = {'rooms': Category.objects.values()}
可使⽤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">
Template:include extends
Navbar
Main —-home—-显⽰,功能链接
Main —-room—-进⼊详情页
使⽤包含继承,设计我前端的样式,从前端向后传递数据
第⼀步:前端技术加强-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>
搜索
<a href="/">
<h1>LOGO</h1>
</a>
<form method="get" action="{% url 'home'%}">
<input type="search" name="q" placeholder="搜索..."/>
</form>
<hr>