1、创建项目‘book_manager’及App‘front’，新建数据库 ‘book_manager’ 及表格 ‘book’ ，在‘setting’中添加数据库信息及App，
2、在App的‘views’文件中填写显示的内容：首页，添加图书，图书详情；及使用数据库所需的代码‘cursor’内容。在项目的‘url’文件中进行url映射；
3、新建base、index、add_book、book_detail的HTML文件，在front App下新建目录：‘static’-->‘front’-->‘base.css文件’，在base.html文件中添加‘link’标签及‘nav’标签’，‘link’标签用来关联地址到"static 'front/base.css’ "，在‘base.css’文件中填写显示网页‘nav’的样式‘；‘nav’标签用来指定导航链接中的内容，可在‘base.css’文件中修改显示的样式。
4、‘table’标签显示表格
一：新建项目
项目名：book_manager App名：front 数据库名：book_manager
在数据库中新建表book
在项目book_manager的settings.py中添加数据库信息以及新建所需文件
视图文件：
1 from django.shortcuts import render,redirect,reverse 2 from django.db import connection 3 4 def get_corsor(): 5 return connection.cursor() 6 7 def index(request): 8 cursor = get_corsor() 9 cursor.execute("select id,name,author from book") 10 books = cursor.fetchall() 11 #[(1,'三国演义','罗贯中'),()...] 12 return render(request,'index.html',context={'books':books}) 13 14 def add_book(request): 15 if request.method == 'GET': 16 return render(request,'add_book.html') 17 else: 18 name = request.POST.get('name') 19 author = request.POST.get('author') 20 cursor = get_corsor() 21 #插入数据到数据库后网页进行反转 22 cursor.execute("insert into book(id,name,author) value(NULL,'%s','%s')" % (name,author)) 23 return redirect(reverse('index')) 24 25 def book_detail(request,book_id): 26 cursor = get_corsor() 27 cursor.execute("select id,name,author from book where id=%s" % book_id) 28 book = cursor.fetchone() 29 return render(request,'book_detail.html',context={'book':book}) 30 31 def delete_book(request): 32 if request.method == 'POST': 33 book_id = request.POST.get('book_id') 34 cursor = get_corsor() 35 cursor.execute("delete from book where id=%s" % book_id) 36 return redirect(reverse('index')) 37 else: 38 raise RecursionError('删除图书的method错误！')
映射文件：
1 from django.urls import path 2 from front import views 3 4 urlpatterns = [ 5 path('',views.index,name='index'), 6 path('add_book/',views.add_book,name='add_book'), 7 path('book_detail/<int:book_id>/',views.book_detail,name='book_detail'), 8 path('delete_book/',views.delete_book,name='delete_book'), 9 ]
base.html：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图书系统管理</title> 6 <link rel="stylesheet" href="{% static 'front/base.css' %}"> 7 </head> 8 <body> 9 <nav> 10 <ul class="nav"> 11 <li><a href="/">首页</a></li> 12 <li><a href="{% url 'add_book' %}">发布图书</a></li> 13 </ul> 14 </nav> 15 {% block content %} 16 {% endblock %} 17 </body> 18 </html>
首页：
1 {% extends 'base.html' %} 2 {% block content %} 3 <table><!--表格--> 4 <thead><!--定义表格表头--> 5 <tr><!--定义表格中的行--> 6 <!--th:表头单元格，通常呈现为居中的粗体文本--> 7 <th>序号</th> 8 <th>书名</th> 9 <th>作者</th> 10 </tr> 11 </thead> 12 <tbody><!--表格正文--> 13 {% for book in books %} 14 <tr> 15 <!--td:标准单元格，通常是左对齐的普通文本--> 16 <td>{{ forloop.counter }}</td> 17 <td><a href="{% url 'book_detail' book_id=book.0 %}">{{ book.1 }}</a></td> 18 <td>{{ book.2 }}</td> 19 </tr> 20 {% endfor %} 21 22 </tbody> 23 </table> 24 {% endblock %}
添加书籍：
1 {% extends 'base.html' %} 2 {% block content %} 3 <!--form:为用户创建用于向服务器传输数据的HTML表单；action：提交表单时向何处发送表单数据；method：作为url 变量‘get’ 4 还是http post ‘post’两种方式发送数据。--> 5 <form action="" method="post"> 6 <table> 7 <tbody> 8 <tr> 9 <td>书名：</td> 10 <td><input type="text" name="name"></td> 11 </tr> 12 <tr> 13 <td>作者：</td> 14 <td><input type="text" name="author"></td> 15 </tr> 16 <tr> 18 <td><input type="submit" value="提交"></td> 19 </tr> 20 </tbody> 21 </table> 22 </form> 23 {% endblock %}
书籍详情及删除：
1 {% extends 'base.html' %} 2 {% block content %} 3 <p>书名：{{ book.1 }}</p> 4 <p>作者：{{ book.2 }}</p> 5 <form action="{% url 'delete_book' %}" method="post"> 6 <!--hidden:使其要发送的内容隐藏，这里只需显示删除按钮--> 7 <input type="hidden" name="book_id" value="{{ book.0 }}"> 8 <input type="submit" value="删除图书"> 9 </form> 10 {% endblock %}
样式文件：
1 *{ 2 margin: 0;/*设置整体边距*/ 3 padding: 0;/*设置填充*/ 4 } 5 6 .nav{ 7 background: #3a3a3a; 8 height: 65px; 9 overflow: hidden; 10 } 11 .nav li{ 12 float: left;/*左边浮动对齐*/ 13 list-style: none;/*去除样式*/ 14 margin: 0 20px;/*字体边距*/ 15 line-height: 65px;/*行高与外框一样使字体居中*/ 16 } 17 .nav li a{ 18 color: #fff; 19 text-decoration: none;/*文字不进行修饰，去除下划线*/ 20 } 21 22 .nav li a:hover{ 23 color: lightgreen; 24 }