基于Django+Bootstrap框架,设计微型小说网站
HTML代码:
JS代码:$(document).ready( function() {
$("#input-b8").fileinput({
rtl: true,
uploadUrl: ‘/file_receive/’,
dropZoneEnabled: false,
showPreview: false,
allowedFileExtensions: [‘txt’],
initialPreviewConfig: []
});
});
代码说明:
fileinput()方法里面传入的是一个json数据,里面有很多个属性,每个数值代表初始化上传控件时的特性,如果没有设置的属性则按照控件的默认属性设置。简单说下里面几个属性的设置:uploadUrl:上传文件地址;dropZoneEnabled:是否显示拖曳区域;showPreview:是否显示预览区域;allowedFileExtensions:允许上传的文件格式。
后台代码
def file_receive(request):
# 接收File-Input空间传送的文件
if request.method == ‘POST’:
file = request.FILES[‘input-b8’]
file_path = “static/books/”+file.name
with open(file_path,“wb”) as f:
for chunk in file.chunks():
f.write(chunk)
return JsonResponse({‘status’:‘success’})
代码说明:
以上是后台接收文件对象并且保存的代码。我这边省略判断上传文件大小的方法,感兴趣的可以在with open()中添加判断。最后接收文件后,会返回给前端一个json数据,前端插件接收到返回的JSON数据才会确定是否上传文件成功,bootstrap Fileinput才会先Done状态。
拓展:
这里有点需要注意的就是,后台接收上传的文件,虽然是通过POST的方式上传,但是不能通过request.POST[“filename”]或者request.POST.get(“filename”,“None”)两种方式来访问。
而是需要用另外一种方式:
request.FILES[“filename”]或者request.FILES.get(“filename”,“None”)
接下来已经得到文件对象,需要把在内存中的文件写入到硬盘中。读取文件的几个方法和属性:
filename.read():从文件读取整个上传的数据,这个方法只适合小文件
filename.chunks():按块返回文件,通过for循环进行迭代,可以将大文件按块写入到服务器中
filename.multiple_chunks():当filename文件大于2.5M时,该方法返回True,否则返回False。可以根据该方法来判断选择用1方法还是2方法。
4.2、异步更新已上传的文件列表
HTML代码:
上传书籍 | 上传时间 | 文件大小 | 操作 |
---|---|---|---|
{{ book.name}} | {{ book.book_time }} | {{ book.book_size }} | 阅读 删除 |
$("#input-b8").on(‘fileuploaded’,function(){
console.log(‘success’);
$.get(’/book_update/’,function(data){
var book_html ="\n" +
“上传书” +
“籍” +
“上传时间” +
“文件大小” +
“操作”+
“”;
console.log(data); for (var i in data){ book_html += "<tr><td>"+ data['name']+"</td>" + "<td>"+data[i]['book_time']+"</td>" + "<td>"+data[i]['book_size']+"</td>" + "<td><a href=\"/book_read/?book_name="+data[i]['name']+"\">阅读</a>"+ "<a href=\"/book_del/?book_name="+data[i]['name']+"\">删除</a></td>"+ "</tr>" } $("#book_list").html(book_html) console.log(book_html) });
});
代码说明:
$("#input-b8").on(‘fileuploaded’,function(){})这个方法时在上传完文件后进行回调事件的函数;就是指上传一个文件成功后就会调用该方法;所以我将异步更新上传文件列表的代码放在这个回调事件中。当每个文件上传后,就会请求后台,查询指定目录下的文件列表,生成json格式的数据返回前台,前台再通过遍历的形式拿到其中的数据,进行展示,具体效果如下:
基于Django+Bootstrap框架,设计微型小说网站
后台代码
def book_list():
# 获取books目录下的书籍
file_list = []
filedir_path = “static/books/”
list_file = os.listdir(filedir_path)
for book in list_file:
book_info = {}
book_path = filedir_path + book
book_info['name'] = book book_info['timestamp'] = os.path.getctime(book_path) book_info['book_time'] = time_format(book_info['timestamp']) book_info['book_size'] = os.path.getsize(book_path) file_list.append(book_info) books = sorted(file_list,key= lambda x:x['timestamp'],reverse=True) return books
def time_format(timestamp):
# 格式化时间戳成指定的时间
time_struct = time.localtime(timestamp)
time_string = time.strftime(’%Y-%m-%d %H:%M’,time_struct)
return time_string
代码说明:
代码其实很简单,主要是对通过os模块获取静态目录static下的books目录下的文件列表,然后在获取每个文件的时间戳,通过列表推导式,按时间戳为key值进行逆向排序。
4.3、文章分页模块
HTML代码:
{{ book_name }}
{% for content in book_content %} {{ content }} {% endfor %} {% if book_content.has_previous %} 上一页{% endif %} </div> <div class="col-md-4 "> <h5> 第{{ book_content.number }}页/共{{ book_content.paginator.num_pages }}页 </h5> </div> {% if book_content.has_next %} <div class="col-md-4 "> <a href="?book_name={{book_name}}&page={{ book_content.next_page_number }}"> 下一页 </a> <i class="fa fa-arrow-right" aria-hidden="true"> </i> </div> {% endif %}JS代码:
def book_read(request):
# 获取上传书籍的内容
if request.method == ‘GET’:
book_name = request.GET[‘book_name’] # 书籍名称
file_path = “static/books/” + book_name # 书籍路径
with open(file_path,encoding='gbk', errors='ignore') as f: book_contents = f.readlines() paginator = Paginator(book_contents, 50) try: page = int(request.GET['page']) # 页码 book_content = paginator.page(page) except Exception as e: book_content = paginator.page(1) return render_to_response('book.html',{'book_content': book_content, 'book_name': book_name})
代码说明:
读取文件的所有行,保存在一个列表中(list),每行作为一个元素。然后实例化一个Paginator对象,并且在实例化中传入一个需要分页的对象列表,以及一页包含多少个数据。再从接收前端传送过来的页码,取特定页码的数据,再传回前端。
基于Django+Bootstrap框架,设计微型小说网站
基于Django+Bootstrap框架,设计微型小说网站
拓展:
1、分页功能有Django内置的Paginator类提供的,该类位于django/core/paginator,需要用的地方导入即可:
from django.core.paginator improt Pagi
3ff7
nator
2、read()、readline()、readlines()方法的区别:
三者都是读取文件内容:
read([size]):从当前位置其读取size字节,如果方法里面没有参数size,读取至文件结束为止。返回的是一个字符串对象。
readline():方法调用一次就读文件一行,该方法返回一个字符串。
readlines():读取整个文件所有行,保存在一个列表中,每行作为一个元素
3、Paginator对象操作:
实例化对象:
book_list = [1,2,3,4,5,6,7,8]
book_content = Paginator(book_list,3)
取特定页的数据
content = book_content.page(2)
查特定页当前页码数:
content.number
查分页后的总页数
content.num_pages
查询某一页是否有上一页或者查询上一页页码:
content.has_previous()
content.previous_page_number()
查询某一页是否有下一页或者查询下一页页码:
content.has_next()
content.next_page_number()
东莞网站建设HTML代码:
$(document).ready( function() {
$("#input-b8").fileinput({
rtl: true,
uploadUrl: ‘/file_receive/’,
dropZoneEnabled: false,
showPreview: false,
allowedFileExtensions: [‘txt’],
initialPreviewConfig: []
});
});
代码说明:
fileinput()方法里面传入的是一个json数据,里面有很多个属性,每个数值代表初始化上传控件时的特性,如果没有设置的属性则按照控件的默认属性设置。简单说下里面几个属性的设置:uploadUrl:上传文件地址;dropZoneEnabled:是否显示拖曳区域;showPreview:是否显示预览区域;allowedFileExtensions:允许上传的文件格式。
后台代码
def file_receive(request):
# 接收File-Input空间传送的文件
if request.method == ‘POST’:
file = request.FILES[‘input-b8’]
file_path = “static/books/”+file.name
with open(file_path,“wb”) as f:
for chunk in file.chunks():
f.write(chunk)
return JsonResponse({‘status’:‘success’})
代码说明:
以上是后台接收文件对象并且保存的代码。我这边省略判断上传文件大小的方法,感兴趣的可以在with open()中添加判断。最后接收文件后,会返回给前端一个json数据,前端插件接收到返回的JSON数据才会确定是否上传文件成功,bootstrap Fileinput才会先Done状态。
拓展:
这里有点需要注意的就是,后台接收上传的文件,虽然是通过POST的方式上传,但是不能通过request.POST[“filename”]或者request.POST.get(“filename”,“None”)两种方式来访问。
而是需要用另外一种方式:
request.FILES[“filename”]或者request.FILES.get(“filename”,“None”)
接下来已经得到文件对象,需要把在内存中的文件写入到硬盘中。读取文件的几个方法和属性:
filename.read():从文件读取整个上传的数据,这个方法只适合小文件
filename.chunks():按块返回文件,通过for循环进行迭代,可以将大文件按块写入到服务器中
filename.multiple_chunks():当filename文件大于2.5M时,该方法返回True,否则返回False。可以根据该方法来判断选择用1方法还是2方法。
4.2、异步更新已上传的文件列表
HTML代码:
上传书籍 | 上传时间 | 文件大小 | 操作 |
---|---|---|---|
{{ book.name}} | {{ book.book_time }} | {{ book.book_size }} | 阅读 删除 |
$("#input-b8").on(‘fileuploaded’,function(){
console.log(‘success’);
$.get(’/book_update/’,function(data){
var book_html ="\n" +
“上传书” +
“籍” +
“上传时间” +
“文件大小” +
“操作”+
“”;
console.log(data); for (var i in data){ book_html += "<tr><td>"+ data['name']+"</td>" + "<td>"+data[i]['book_time']+"</td>" + "<td>"+data[i]['book_size']+"</td>" + "<td><a href=\"/book_read/?book_name="+data[i]['name']+"\">阅读</a>"+ "<a href=\"/book_del/?book_name="+data[i]['name']+"\">删除</a></td>"+ "</tr>" } $("#book_list").html(book_html) console.log(book_html) });
});
代码说明:
$("#input-b8").on(‘fileuploaded’,function(){})这个方法时在上传完文件后进行回调事件的函数;就是指上传一个文件成功后就会调用该方法;所以我将异步更新上传文件列表的代码放在这个回调事件中。当每个文件上传后,就会请求后台,查询指定目录下的文件列表,生成json格式的数据返回前台,前台再通过遍历的形式拿到其中的数据,进行展示,具体效果如下:
基于Django+Bootstrap框架,设计微型小说网站
后台代码
def book_list():
# 获取books目录下的书籍
file_list = []
filedir_path = “static/books/”
list_file = os.listdir(filedir_path)
for book in list_file:
book_info = {}
book_path = filedir_path + book
book_info['name'] = book book_info['timestamp'] = os.path.getctime(book_path) book_info['book_time'] = time_format(book_info['timestamp']) book_info['book_size'] = os.path.getsize(book_path) file_list.append(book_info) books = sorted(file_list,key= lambda x:x['timestamp'],reverse=True) return books
def time_format(timestamp):
# 格式化时间戳成指定的时间
time_struct = time.localtime(timestamp)
time_string = time.strftime(’%Y-%m-%d %H:%M’,time_struct)
return time_string
代码说明:
代码其实很简单,主要是对通过os模块获取静态目录static下的books目录下的文件列表,然后在获取每个文件的时间戳,通过列表推导式,按时间戳为key值进行逆向排序。
4.3、文章分页模块
HTML代码:
{{ book_name }}
{% for content in book_content %} {{ content }} {% endfor %} {% if book_content.has_previous %} 上一页{% endif %} </div> <div class="col-md-4 "> <h5> 第{{ book_content.number }}页/共{{ book_content.paginator.num_pages }}页 </h5> </div> {% if book_content.has_next %} <div class="col-md-4 "> <a href="?book_name={{book_name}}&page={{ book_content.next_page_number }}"> 下一页 </a> <i class="fa fa-arrow-right" aria-hidden="true"> </i> </div> {% endif %}JS代码:
def book_read(request):
# 获取上传书籍的内容
if request.method == ‘GET’:
book_name = request.GET[‘book_name’] # 书籍名称
file_path = “static/books/” + book_name # 书籍路径
with open(file_path,encoding='gbk', errors='ignore') as f: book_contents = f.readlines() paginator = Paginator(book_contents, 50) try: page = int(request.GET['page']) # 页码 book_content = paginator.page(page) except Exception as e: book_content = paginator.page(1) return render_to_response('book.html',{'book_content': book_content, 'book_name': book_name})
代码说明:
读取文件的所有行,保存在一个列表中(list),每行作为一个元素。然后实例化一个Paginator对象,并且在实例化中传入一个需要分页的对象列表,以及一页包含多少个数据。再从接收前端传送过来的页码,取特定页码的数据,再传回前端。
基于Django+Bootstrap框架,设计微型小说网站
基于Django+Bootstrap框架,设计微型小说网站
拓展:
1、分页功能有Django内置的Paginator类提供的,该类位于django/core/paginator,需要用的地方导入即可:
from django.core.paginator improt Paginator
2、read()、readline()、readlines()方法的区别:
三者都是读取文件内容:
read([size]):从当前位置其读取size字节,如果方法里面没有参数size,读取至文件结束为止。返回的是一个字符串对象。
readline():方法调用一次就读文件一行,该方法返回一个字符串。
readlines():读取整个文件所有行,保存在一个列表中,每行作为一个元素
3、Paginator对象操作:
实例化对象:
book_list = [1,2,3,4,5,6,7,8]
book_content = Paginator(book_list,3)
取特定页的数据
content = book_content.page(2)
查特定页当前页码数:
content.number
查分页后的总页数
content.num_pages
查询某一页是否有上一页或者查询上一页页码:
content.has_previous()
content.previous_page_number()
查询某一页是否有下一页或者查询下一页页码:
content.has_next()
content.next_page_number()
东莞网站建设www.zg886.cn
- python设计微型小说网站(基于Django+Bootstrap框架)
- 基于Django框架的小购物网站(一)分析业务,设计数据库
- 基于Django框架的小购物网站(二)创建项目,设计表
- 基于Django框架的小购物网站(三--3)功能模块实现,主写views
- 【day 17】python编程:从入门到实践学习笔记-基于Django框架的Web开发-设计样式和部署(一)
- 在IIS上部署基于django WEB框架的python网站应用
- 在IIS上部署基于django WEB框架的python网站应用
- 自适应单本小说网站源码,基于bootstrap+dedecms。
- 基于Django+Bootstrap框架,可视化展示内存监控信息
- 基于Django框架的web设计指南(2)
- 在IIS上部署基于django WEB框架的python网站应用
- 基于Django框架的web设计指南(1)
- 基于ThinkPHP+Bootstrap框架开发的响应式机械设备集团网站PHP源码+WAP手机端
- 基于Django框架的小购物网站(三--1)功能模块实现,主写views
- 基于Django框架的小购物网站(三--2)功能模块实现,主写views
- Django视频教程 - 基于Python的Web框架(全13集)
- 基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持
- 基于Java、Kafka、ElasticSearch的搜索框架的设计与实现
- DL之Keras:基于Keras框架建立模型实现【预测】功能的简介、设计思路、案例分析、代码实现之详细攻略(经典,建议收藏)——daidingdaidingdaiding
- MySQL数据迁移 - 基于Django框架