一.功能描述
1.项目首页展示图书列表，列表依次包含书籍D、书名、出版社、作者。
2.列表中的每条记录对应分别一个链接“编辑”和“删除”。单击对应记录编辑，跳转修改页面进行数据修改，单击对应记录的删除链接，该记录将被删除。
3.项目首页展示图书列表上方设置一个添加按键，点击添加按键，页面跳转到添加页面进行数据添加。
4.在添加、删除、编辑结束后，URL都需要重定向到首页图书列表( index)。
5.对表单样式进行优化。
6.设计登录界面Welcome to My Book Management System,并使用css对界面样式进行优化。
二.操作流程
项目分布图
第一步: 模型(model)定义模型
根基功能要求设置表单字段、字段类型和参数。
首先在settings.py文件中配置model,应用app,以及templates文件目录
from django.db import models
# Create your models here.
class Book(models.Model):
book_name = models.CharField(max_length=30)
book_publisher = models.CharField(max_length=20)
book_author = models.CharField(max_length=20)
class Meta:
db_table='book_tb'然后对数据库进行数据迁移
第二步:编辑index页面模板
在templates文件夹下创建index.html来显示图书列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<style>
div{
width: 60%;
margin-left: 200px;
}
.one{
width: 100%;
}
.two{
border: red 1px solid;
}
</style>
</head>
<body>
<div>
<button><a href="/add/">添加</a></button>
<table class="one">
<tr>
<th class="two">ID</th>
<th class="two">书名</th>
<th class="two">出版社</th>
<th class="two">作者</th>
<th class="two">编辑</th>
<th class="two">删除</th>
</tr>
{%for book in books %}
<tr>
<td class="two">{
{ book.id}}</td>
<td class="two">{
{ book.book_name }}</td>
<td class="two">{
{ book.book_publisher }}</td>
<td class="two">{
{ book.book_author }}</td>
<td class="two"><button><a href="/edit/?id={
{book.id}}">编辑</a></button></td>{#需要传入要编辑的书籍的id#}
<td class="two"><button><a href="/delete/?id={
{ book.id }}">删除</a></button></td>{#需要传入要删除的书籍的id#}
</tr>
{%endfor%}
</table>
</div>
</body>
</html>第三步:编辑添加(add)页面模板
在templates文件夹下创建add.html来显示图书添加页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加页面</title>
<style>
.one{
width: 60%;
margin-left: 200px;
}
</style>
</head>
<div class="one">
<form action="" method="POST">
{%csrf_token%}
<div>
{
{ b_obj.as_p}}
</div>
<input type="submit" value="提交">
</form>
</div>
<body>
</body>
</html>第四步:编辑修改(edit页面模板
在templates文件夹下创建edit.html来显示图书修改页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>编辑页面</title>
</head>
<body>
<div class="one">
<form action="" method="post">
{%csrf_token%}
<div>
{
{b_obj.as_p}}
</div>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>第五步.编辑视图函数
使用ModelForm方式创建BookForm表单，并定义视图函数来实现表单中的书籍信息的增删改查和展示界面等功能。
from django.shortcuts import render,HttpResponse,redirect
from django import forms
from .models import Book
#定义一个form的类，使用Book模型
class BookForm(forms.ModelForm):
class Meta:
model = Book
fields = ['book_name','book_publisher','book_author']
#首页展示所有书籍(常规操作)
def index(request):
books = Book.objects.all()
return render (request,'index.html',{'books':books})
#添加书籍(使用MOdelForm的功能)
def add(request):
if request.method == 'GET':
b_obj = BookForm()
return render(request,'add.html',{'b_obj':b_obj}) #返回一个添加页面，展示一个空的form表单
else:
b_obj = BookForm(request.POST) #当用户提交数据后实例化一个拥有提交了的数据对象
if b_obj.is_valid(): #如果数据通过校验
b_obj.save() #保存到数据库中，添加一条记录
return redirect('/index/') #提交后跳转到首页
#编辑书籍(使用MOdelForm的功能)
def edit(request):
id = request.GET.get('id') #获取要编辑的书籍的id
book = Book.objects.get(id=id) #取出id值对应的书籍对象
if request.method =='GET':
b_obj = BookForm(instance=book) #这一步实例化的时候，需要传入书籍对象，生成表单的时候就会默认填充的这些数据
return render(request,'edit.html',{'b_obj':b_obj})
else:
b_obj=BookForm(instance=book,data=request.POST) #此处需要传入编辑书籍的对象，和提交相关的数据
if b_obj.is_valid():
b_obj.save()
return redirect('/index/')
#删除书籍
def delete(request):
id = request.GET.get('id') #获取要的书籍的id
book =Book.objects.get(id=id) #取出id值对应的书籍对象
book.delete() #从数据库中删除这个书籍对象
return redirect('/index/') #删除后跳转至首页
#登录界面
def login(request):
return render (request,'login.html')
第六步：为视图配置URL
from django.contrib import admin
from django.urls import path
from app import views
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.login),
path('index/',views.index), #首页的路由
path('add/',views.add), #添加数据
path('edit/',views.edit), #编辑数据
path('delete/',views.delete) #删除数据
]第七步:对登录界面进行样式进化
在应用中创建static文件夹，将css样式单文件login.css放入static文件夹内。
h1{
color: red;
text-align: center;
margin: 0 auto;
padding-top: 160px;
}
div{
text-align: center;
padding-top: 60px;
}
body{
background: url(./pic.jpg) no-repeat center center fixed;
background-size: cover;
padding-top: 20px;
}Django中使用css文件进行样式优化，需要在要被优化的模板文件中，head标签之前，添加下面一行代码导入{% load satic%}，并在</titel>之后、 </head>之前， 添加<link rel="stylesheet" href="{% static 'login.css' %}" rel ='stylesheet'>
在templates文件夹下创建login,html文件。在templates\login.html中添加登录界面
<!DOCTYPE html>
<html lang="en">
{%load static%}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="{% static 'login.css' %}" rel ='stylesheet'>
</head>
<body>
<h1>Welcome to My Book Management System</h1>
<div>
<a href="http://127.0.0.1:8000/index">欢迎来到我的书籍管理系统</a>
</div>
</body>
</html>第八步:浏览器访问http://127.0.0.1:8000
列表展示页index界面
数据信息添加页面
信息修改界面
删除界面：点击直接删除
