django实例(环境、static、templates、路由、网页书籍类型选择、网页中间显示小说信息、ajax实现翻页)
学习目标：
python-django编写hj项目
学习内容：
1、设置环境和相关配置
2、在static中放入相关的文件
3、在templates中存放html文件
4、路由的配置
5、网页书籍类型选择
6、中间显示小说信息
7、在网页中利用ajax实现翻页刷新页面内容
1、设置环境和相关配置
1在django存放项目的目录下创建hj项目，在数据库中建好数据库，完成相关连接以及static和templates
- 数据库
-
hj项目
-
告知应用、连接数据库、引入static和templates时，在hj/hj/setting中的配置
2、在static中放入相关的文件
- static文件夹除了在setting中配置，在html文件引用它的时候也需要声明
在head标签下
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
{% load static %}- 在具体需要引用到static文件的时候引用格式如下：
...
<link rel="stylesheet" href="{% static 'hj/main.css'%}">
<script src="{% static 'hj/hm.js.下载'%}"></script><script type="text/javascript" src="{% static 'hj/jquery.min.js.下载'%}"></script>
<script type="text/javascript" src="{% static 'hj/common.js.下载'%}" charset="gbk"></script>
<script type="text/javascript" src="{% static 'hj/baidu.js.下载'%}" charset="gbk"></script>
...3、在templates中存放html文件
4、路由的配置
- 在项目urls下分发主路由
- 在应用下创建子路由文件urls
from django.conf.urls import url
from django.urls import path, re_path
from .views import *
urlpatterns = [
path('', hj_p1),
url('class/(d+)/(d+)', books, name='books'),
url('search', search, name='search'),
url('chapter_info/(d+)', chapter_info, name='chapter_info'),
url('show/(d+)/(d+)', show, name='show'),
]5、网页书籍类型选择
1、实现书籍选择，点击黑色显示，如图：
2、在hj/views视图中添加hj_p1方法用来读取数据库中网页显示的书籍类型
def hj_p1(request):
pagedata = Books.objects.all()
type_list = Book_type.objects.all()
tid=1
return render(request, 'hj_p1.html', locals())3、在网页hj_p1.html中接收views传来的数据，编写遍历数据并给出显示点击的方法
<nav class="nav" id="nav">
<div class="wrap clearfix">
<ul>
<li id="0"><a href="#">首页</a></li>
{% for type in type_list%}
{% if type.id == tid %}
<li id="1" class="active"><a href="/class/{{type.id}}/1">{{type.tname}}</a></li>
{% else %}
<li><a href="/class/{{type.id}}/1">{{type.tname}}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
</nav>6、中间显示网页中间显示小说信息
1、网页中间存在的内容
2、标题栏
<table class="novel-table">
<thead>
<tr>
<th>类别</th>
<th>小说书名/最新章节</th>
<th>总字数</th>
<th>章节数</th>
<th>作者</th>
<th>更新时间</th>
<th>状态</th>
</tr>
</thead>3、在标题栏下方展示内容
<tbody>
{% for book in pagedata %}
<tr>
<td><p class="p-class">{{ book.book_type.tname }}</p></td>
<td class="align-left"><p class="p-name"><a href="/chapter_info/{{ book.id }}" target="_blank" class="a-bk_name">{{ book.bname }}</a><a href="#" target="_blank"> {{ book.new_chapter }}</a> </p></td>
<td><p class="p-word">{{ book.wnum }}万字</p></td>
<td><p class="p-chapter">{{ book.chapter_num }}章</p></td>
<td><p class="p-author">{{ book.author }}</p></td>
<td><p class="p-time">{{ book.update_date|date:'Y年m月d日' }}</p></td><td><p class="p-status go-on">{{ book.status }}</p></td>
</tr>
{% endfor %}
</tbody>7、在网页中利用ajax实现翻页刷新页面内容
1、当选择某一书籍类型页面展示出五个条目，然后可以实现翻页查看接下来的条目
2、在views视图中，编写翻页的方法
def books(request, tid, pid):
tid = int(tid)
pid = int(pid)
book_type = Book_type.objects.get(id=tid)
book_list = book_type.books_set.all()
type_list = Book_type.objects.all()
everyline = 5
paginator = Paginator(book_list, everyline)
pagecount = paginator.num_pages
pagerange = paginator.page_range
uppage = pid - 1
if uppage < 1:
uppage = 1
pid = 1
nextpage = pid + 1
if nextpage > pagecount:
nextpage = pagecount
pid = pagecount
pagedata = paginator.page(pid)
if request.POST:
book_lists = serializers.serialize('python', book_list, ensure_ascii=False)
type_lists = serializers.serialize('python', type_list, ensure_ascii=False)
pagedata = serializers.serialize('python', pagedata, ensure_ascii=False)
dicts = {
'pagedata': pagedata,
'book_list': book_lists,
'type_list': type_lists,
'pagecount': pagecount,
'uppage': uppage,
'nextpage': nextpage,
'pid': pid,
'tid': tid,
'book_type': book_type.tname
}
return JsonResponse(dicts)
return render(request, 'hj_p1.html', locals())3、在网页hj_p1.html中编写翻页模块，并且利用ajax方法实现页面的内容刷新
翻页模块：
{% if search_status != 1 %}
<div class="page">
<input type="hidden" id="hup" value="{{ uppage }}">
<input type="hidden" id="hdown" value="{{ nextpage }}">
<a href="#"><span id="first">首页</span></a>
<a href="#"><span id="up">上一页</span></a>
<a href="#"><span id="down">下一页</span></a>
<a href="#" ><span id="last">尾页</span></a>
共<span id="tiao">({{ pid }}/<span id="pagecount">{{ pagecount }}</span>)</span>页 转到
# {{pagecount}}在含有id是pagecount的span标签中，是为了与后面ajax尾页翻页做联系
<input name="toPage" id="toPage" value="2" type="text">页
{% csrf_token %}
<a><span id="tiaozhuan">跳转</span></a>
</div>
{% endif %}4、ajax根据id判断执行翻页操作
<script src="{% static 'jquery.min.js.下载' %}"></script>
<script>
$("span").click(function(){
#点击时间的绑定
var page = $('#toPage').val().toString();
if ($(this).attr('id') == 'first'){
var page = 1
}
if ($(this).attr('id') == 'last'){
var page = $('#pagecount').text()
}
if ($(this).attr('id') == 'up'){
var page = $('#hup').val()
}
if ($(this).attr('id') == 'down'){
var page = $('#hdown').val()
}
if(page.length != 0){
$.ajax({
type: 'post',
url: page.toString(),
data: {'ajax': '123'},
headers: {"X-CSRFToken": '{{ csrf_token }}'},
success: function (data) {
var strs = '<thead> <tr id="head1"> <th>类别</th><th>小说书名/最新章节</th> <th>总字数</th> <th>章节数</th> <th>作者</th> <th>更新时间</th> <th>状态</th> </tr> </thead>';
for (var book in data.pagedata) {
strs += '<tr><td><p class="p-class">' + data["book_type"] + '</p></td><td class="align-left"><p class="p-name"><a href="/chapter_info/' + data.pagedata[book]["fields"].id + '" target="_blank" class="a-bk_name">' + data.pagedata[book]["fields"].bname + '</a><a href="/show/' + data.pagedata[book].pk + '/' + data.pagedata[book]["fields"].chapter_num + '" target="_blank"> ' + data.pagedata[book]["fields"].new_chapter + '</a> </p></td> <td><p class="p-word">' + data.pagedata[book]["fields"].wnum + '万字</p></td> <td><p class="p-chapter">' + data.pagedata[book]["fields"].chapter_num + '章</p></td> <td><p class="p-author">' + data.pagedata[book]["fields"].author + '</p></td> <td><p class="p-time">' + data.pagedata[book]["fields"].update_date +