目标网络样式
1：创建项目
#1.1终端配好相关虚拟环境 workon [虚拟环境] #1.2配置相关库文件 pip install [库]
#1.3打开pycharm软件，新建Django项目，选择相关虚拟环境
2：新建App，进行相关数据接口管理
#进入终端，进入到这个项目的主目录，里面有manage.py这个文件 workon django-env #激活虚拟环境 python manage.py startapp front#(app名称)
#记得在settings.py 加入front
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'front'
]
3：布置数据库环境
#启动Navicat Premium 1.打开数据库连接 2.新建数据库 3.新建数据库表格 4.编辑定义字段，common+s，保存编辑 #配置settings.py文件 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'book_manager', 'USER': 'root', 'PASSWORD': '12345678', 'HOST': '127.0.0.1', 'PORT': '3306', } } #在 __init__.py 处理MySQLdb 在 python3 失效的问题 import pymysql pymysql.install_as_MySQLdb()
4：建立HTML
由于公共部分永远有个导航栏在上边，所以这里选用 继承 创建一个 html 模板
#CSS 公共样式 (在front App内建立static/front文件夹(与app名字一样)，方便后期维护查找)，定制样式要根据相对的html的标签来写的 *{ margin: 0; padding: 0; }#除去内置的全部间隔样式 .nav{ background: #3a3a3a; height: 65px; overflow: hidden; } .nav li{ float: left; list-style: none; margin: 0 20px; line-height: 65px; } .nav li a{ color: #fff; text-decoration: none; }#定制标签样式 .nav li a:hover{ color: lightblue; }#鼠标移到字体上时，做出的反应 #base.html {% load static %}#加载路径 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书管理系统</title> <link rel="stylesheet" href="{% static 'front/base.css' %}"> #加载css样式 </head> <body> <nav>#导航栏标签 <ul class="nav"> <li><a href="/">首页</a></li> <li><a href="{% url 'add_book' %}">发布图书</a></li> </ul> </nav> {% block content %}{% endblock %}# block 标签所做的的所有事情就是告诉模板引擎: 一个子模板可能会重写父模板的这个部分。（开个小口子） </body> </html>
5：编写前端
5.1 主页
新建index.html
{% extends 'base.html' %} #继承
{% block content %}
{# <table> 标签定义 HTML 表格。#}
{#简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。#}
{#tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。#}
{#更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。#}
<table>
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
</tr>
</thead>
<tbody>
{% for book in books %}
<tr>
<td>{{ forloop.counter }}</td>
<td><a href="{% url 'book_detail' book_id=book.0 %}">{{ book.1 }}</a></td> #a标签，点击书名的时候需要跳转的书籍详情页面,并且传递book_id参数
<td>{{ book.2 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
front App的view.py
from django.shortcuts import render,redirect,reverse from django.db import connection #获取数据库交互对象 def get_cursor(): return connection.cursor() def index(request): cursor = get_cursor() cursor.execute("select id,name,author from book") books = cursor.fetchall()#获取所有的数据库books对象 return render(request, 'index.html', context={"books": books})#context：传递获取的数据库数据
在url.py 加入url连接
from django.urls import path from front import views urlpatterns = [ path('', views.index, name='index'), ]
5.2 添加书籍
add_book.html
{% extends 'base.html' %} #继承
{% block content %}
{#<form> 标签用于为用户输入创建 HTML 表单。#}
{#表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。#}
{#表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。#}
{#表单用于向服务器传输数据。#}
<form action="" method="post"> # action 规定当提交表单时向何处发送表单数据。
<table>
<tbody>
<tr>
<td>书名：</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>作者：</td>
<td><input type="text" name="author"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"></td>
</tr>
</tbody>
</table>
</form>
{% endblock %}
view.py
from django.shortcuts import render,redirect,reverse from django.db import connection def get_cursor(): return connection.cursor() #因为这里其实有俩个页面，一个是刚进来的加载页面，另一个是上传数据的页面，并且需要反转跳转到别的页面 def add_book(request): if request.method == 'GET': return render(request, 'add_book.html') else: name = request.POST.get("name") author = request.POST.get("author") cursor = get_cursor() cursor.execute("insert into book(id,name,author) values(null,'%s','%s')" % (name, author)) return redirect(reverse('index')) #反转跳转到别的页面,urls.py中需要有定义的name=‘index’
urls.py
from django.urls import path from front import views urlpatterns = [ path('', views.index, name='index'), path('add_book/', views.add_book, name='add_book'), ]
5.3 书籍详情
book_detail.html
{% extends 'base.html' %}
{% block content %}
<p>书名: {{ book.1 }}</p>
<p>作者: {{ book.2 }}</p>
<form action="{% url 'delete_book' %}" method="post"> #点击跳转
<input type="hidden" name="book_id" value="{{ book.0 }}">
<input type="submit" value="删除按钮">
</form>
{% endblock %}
views.py
from django.shortcuts import render,redirect,reverse from django.db import connection def get_cursor(): return connection.cursor() def book_detail(request, book_id): cursor = get_cursor() cursor.execute("select id,name,author from book where id=%s" % book_id) book = cursor.fetchone() return render(request, 'book_detail.html', context={"book": book})
urls.py
from django.urls import path from front import views urlpatterns = [ #需要将其他页面（index.html）的book_id参数传递给views.book_detail页面 path('book_detail/<int:book_id>/', views.book_detail, name='book_detail'), ]
5.4 删除书籍
因为删除书籍不需要展示页面，直接删除后跳转到主页面，所以不需要html，只需要在views.py执行方法
from django.urls import path from front import views urlpatterns = [ path('delete_book/', views.delete_book, name='delete_book'), ]
views.py
from django.shortcuts import render,redirect,reverse from django.db import connection def get_cursor(): return connection.cursor() def delete_book(request): if request.method == 'POST': book_id = request.POST.get('book_id') cursor = get_cursor() cursor.execute("delete from book where id = %s" % book_id) return redirect(reverse('index')) else: raise RuntimeError("删除图书的method错误") #若没有数据，则返回错误
最后注意，因为相关网站没有进行CSRF认证，所以需要暂时在settings.py中，将下面的CSRF认证屏蔽掉
MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', # 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ]