本章节举例来演示如何在前端实现orm关联模型的增删改查
创建app01，创建关联模型具体步骤参考第六章，字段名称一模一样，直接进入正题
一、添加
app01新建templates目录以及static目录
- templates存放html文件
- static存放静态文件(此处bootstrap样式文件
如下：
配置路由
编辑全局配置文件urls.py，添加bookinfo，如下：
from django.contrib import admin
from django.urls import path
from app01 import views as app1
urlpatterns = [
path('admin/', admin.site.urls),
path('bookinfo/',app1.bookinfo),
path('addbook/',app1.addbook),
]
配置视图函数
编辑视图函数文件views.py，如下：
from django.shortcuts import render,HttpResponse,redirect
from app01.models import Book,Publish,Author,AuthorDetail
def bookinfo(request):
##获取book信息
book_list = Book.objects.all()
return render(request, "bookinfo.html", {"book_list": book_list})
def addbook(request):
if request.method == "GET":
publish_list = Publish.objects.all()
author_list = Author.objects.all()
return render(request, "addbook.html", {"publish_list": publish_list, "author_list": author_list})
else:
title = request.POST.get("title")
price = request.POST.get("price")
publish = request.POST.get("publish_id")
publishdate = request.POST.get("publishDate")
author = request.POST.get("authors")
book = Book.objects.create(title=title,price=price,publishDate=publishdate,publish_id=publish)
book.authors.add(*author)
return redirect("/bookinfo/")
编辑templates/bookinfo.html文件，内容如下：
{% load static %} ###加载静态目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'bootstrap-3.4.1/bootstrap-3.4.1-dist/css/bootstrap.css' %}"> ####此处引入
</head>
<body>
<div class="col-md-8 col-md-offset-2">
<a href="/addbook/">添加书籍</a> ###增加添加按钮，路由指向addbook
<table class="table table-bordered table-hover">
<tr>
<td>序号</td>
<td>名称</td>
<td>价格</td>
<td>出版社</td>
<td>出版日期</td>
<td>作者</td>
</tr>
{% for book in book_list %}
<tr>
<td>{
{ forloop.counter}}</td>
<td>{
{ book.title }}</td>
<td>{
{ book.price }}</td>
<td>{
{ book.publish.name }}</td>
<td>{
{ book.publishDate|date:"Y/m/d" }}</td> ###日期格式化一下
<td>
{% for author in book.authors.all %}
<span>{
{ author.name }}</span>
{% endfor %}
</td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>
编辑templates/addbook.html文件，内容如下：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'bootstrap-3.4.1/bootstrap-3.4.1-dist/css/bootstrap.css' %}">
</head>
<body>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="/addbook/" method="post">
<div class="form-control">
<label for="title">书籍名称</label>
<input type="text" name="title" id="title" placeholder="书籍名称">
</div>
<div class="form-control">
<label for="price">价格</label>
<input type="text" name="price" id="price" placeholder="书籍价格">
</div>
<div class="form-control">
<label for="date">出版日期</label>
<input type="date" name="publishDate" id="date" placeholder="出版日期">
</div>
<div class="form-control">
<label for="publish">出版社</label>
<select class="form-control" name="publish_id" id="">
{% for item in publish_list %}
<option value="{
{ item.id }}">{
{ item.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-control">
<label for="author">作者</label>
<select class="form-control" name="authors" id="" multiple>
{% for author in author_list %}
<option value="{
{ author.id }}">{
{ author.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-control">
<input type="submit" value="提交" class="btn btn-success pull-right">
</div>
</form>
</div>
</div>
</body>
</html>
运行Django程序，界面访问如下：
添加数据
界面有点丑，别介意
二、删除
添加路由
编辑全局配置文件urls.py，添加delbook，如下
from django.contrib import admin
from django.urls import path
from app01 import views as app1
urlpatterns = [
path('admin/', admin.site.urls),
path('bookinfo/',app1.bookinfo),
path('addbook/',app1.addbook),
path('delbook/',app1.delbook),
]
编辑视图函数
编辑视图函数文件views.py，如下：
def delbook(request):
del_id = request.GET.get("bookid")
Book.objects.filter(id=del_id).delete()
return redirect("/bookinfo/")
编辑templates/bookinfo.html文件，添加内容如下：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'bootstrap-3.4.1/bootstrap-3.4.1-dist/css/bootstrap.css' %}">
</head>
<body>
<div class="col-md-8 col-md-offset-2">
<a href="/addbook/">添加书籍</a>
<table class="table table-bordered table-hover">
<tr>
<td>序号</td>
<td>名称</td>
<td>价格</td>
<td>出版社</td>
<td>出版日期</td>
<td>作者</td>
<td>操作</td> ###添加动作
</tr>
{% for book in book_list %}
<tr>
<td>{
{ forloop.counter}}</td>
<td>{
{ book.title }}</td>
<td>{
{ book.price }}</td>
<td>{
{ book.publish.name }}</td>
<td>{
{ book.publishDate|date:"Y/m/d" }}</td>
<td>
{% for author in book.authors.all %}
<span>{
{ author.name }}</span>
{% endfor %}
</td>
<td>
<a href="/editbook/?editid={
{ book.id }}">编辑</a> ###添加编辑按钮
<a href="/delbook/?bookid={
{ book.id }}">删除</a> ###添加删除按钮
</td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>
运行Django程序，如下：
点击删除按钮即可
三、更新
添加路由
编辑全局配置文件urls.py，添加editbook，如下
from django.contrib import admin
from django.urls import path
from app01 import views as app1
urlpatterns = [
path('admin/', admin.site.urls),
path('bookinfo/',app1.bookinfo),
path('addbook/',app1.addbook),
path('editbook/',app1.editbook), ###添加
path('delbook/',app1.delbook),
]
编辑视图函数
编辑视图函数文件views.py，如下：
def editbook(request):
bid = request.GET.get("editid")
book = Book.objects.get(id=bid)
publish_list = Publish.objects.all()
author_list = Author.objects.all()
if request.method == "GET":
return render(request, "editbook.html",{"book": book, "publish_list": publish_list, "author_list": author_list})
else:
####方法一
title = request.POST.get("title")
price = request.POST.get("price")
publish = request.POST.get("publish_id")
publishdate = request.POST.get("publishDate")
author = request.POST.get("authors")
Book.objects.filter(id=bid).update(title=title, price=price, publishDate=publishdate, publish_id=publish)
#方法二
# data = request.POST.dict()
# data.pop("authors")
# Book.objects.filter(id=edit_id).update(**data)
book.authors.set(author)
return redirect("/index/")
编辑templates/edit.html文件，添加内容如下：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'bootstrap-3.4.1/bootstrap-3.4.1-dist/css/bootstrap.css' %}">
</head>
<body>
<form method="post">
<input type="text" name="title" value="{
{ book.title }}" id="title" placeholder="书籍名称">
<input type="text" name="price" value="{
{ book.price }}" id="price" placeholder="书籍价格">
<input type="date" name="publishDate" value="{
{ book.publishDate|date:"Y/m/d" }}" id="date" placeholder="出版日期">
<select class="form-control" name="publish_id" id="">
{% for publish in publish_list %}
<option value="{
{ publish.id }}">{
{ publish.name }}</option>
{% endfor %}
</select>
<select class="form-control" name="authors" id="" multiple>
{% for author in author_list %}
<option value="{
{ author.id }}">{
{ author.name }}</option>
{% endfor %}
</select>
<input type="submit" value="提交" class="btn btn-success pull-right">
</form>
</body>
</html>
运行Django,如下：
