python 디자인 마이크로 소설 사이트(Django+Bootstrap 프레임 워 크 기반)
django 에 관 한 파일 업로드 와 페이지 기능 을 되 돌아 보기 위해 미니 소설 사 이 트 를 만들어 연습 할 계획 이다.오후 내 내 작은 프로젝트 를 썼 는데 그 중 에 많은 문제 가 있 었 지만 대부분 debug 를 통 해 해결 되 었 습 니 다.다른 부분 은 Pagination 플러그 인과 Bootstrap-FileInput 플러그 인의 공식 문 서 를 읽 었 습 니 다.
2.상세 한 디자인:
소설 사이트 의 사용자 모듈 기능 을 줄 이 고 소설 사이트 의 주요 기능 은 바로 파일 을 올 리 고 온라인 으로 소설 을 읽 는 것 이다.이 두 가지 기능 에 대하 여
주로 dajngo 에 내 장 된 Pagination 모듈 과 업로드 파일 플러그 인 을 선택 하면 됩 니 다.Bootsrap 전단 프레임 워 크 를 사용 하기 때문에 Bootsrap 에서 많은 사람 이 사용 하 는 FileInput 플러그 인 을 선 택 했 습 니 다.
대략적인 흐름:
4.567917.첫 페이지 에서 로 컬 txt 파일 을 서버 에 업로드 한 다음 첫 페이지 에서 업로드 한 txt 텍스트 파일 목록 을 비동기 로 업데이트 할 수 있 습 니 다.
4.567917.그리고 위 에서 읽 거나 삭제 하 는 동작 을 선택 할 수 있 습 니 다.읽 으 면 다른 페이지 로 이동 합 니 다.배경 에서 이 텍스트 파일 을 읽 고 페이지 를 나 누 어 작업 을 하여 전단 으로 돌아 갑 니 다.주요 절 차 는 이렇다.다음은 Pagination 과 FileInput 플러그 인과 핵심 코드 를 말씀 드 리 겠 습 니 다3.적당 한 도구:
Django 에 내 장 된 Pagination 은 페이지 기능 을 실현 합 니 다.이것 은 말 할 것 도 없 이 Django 로 웹 개발 페이지 기능 을 모두 사용 합 니 다.
Bootstrap 자체 가 upload file 파일 을 가지 고 플러그 인 을 업로드 하 는 것 은 너무 못 생 겼 고 기능 도 완선 되 지 않 았 습 니 다.그래서 Bootstrap FileInput 플러그 인 을 선 택 했 습 니 다.
버 전 선택:
먼저 코드 는 주로 두 조각 으로 나 뉘 는데 하 나 는 파일 업로드 후 파일 대상 을 받 아 지정 한 디 렉 터 리 에 저장 합 니 다.두 번 째 블록 은 txt 텍스트 파일 의 내용 을 읽 기 위해 페이지 를 나 누 어 전단 페이지 에 보 여 줍 니 다.
먼저 파일 업로드 코드 를 말씀 드 리 겠 습 니 다.주로 전단 의 boottstrap-fileinputt 플러그 인 과 관련 됩 니 다.이 플러그 인 은 간단 한 HTML 파일 입력 을 고급 파일 선택 기 컨트롤 로 변환 합 니 다.JQuery 나 Javascript 을 지원 하지 않 는 브 라 우 저 는 정상 적 인 HTML 파일 입력 으로 되 돌아 가 는 데 도움 이 됩 니 다.
이상 의 부분 은 공식 적 인 자기소개 입 니 다.제 개인 적 인 느낌 을 말씀 해 주세요.우선 이 플러그 인 은 대량 업로드,비동기 업로드 등 기능 을 지원 하 며 대부분의 JS 논리 적 코드 를 간소화 합 니 다.구체 적 으로 는 공식 API 문 서 를 따라 보고 파 라 메 터 를 수정 하면 됩 니 다.그 다음 에 업로드 할 때 진도 가 표시 되 고 업로드 의 완성 도 를 나타 내 는 데 사용 되 며 완성 도 를 직관 적 으로 나타 낸다.
boottstrap-fileinput 의 github 주소:
https://github.com/kartik-v/bootstrap-fileinput
boottstrap-fileinput 의 공식 문서 주소:
http://plugins.krajee.com/file-input
boottstrap-fileinput 의 공식 데모:
http://plugins.krajee.com/file-basic-usage-demo
4.1 파일 업로드
HTML 코드:
<div dir=rtl class="file-loading">
<input id="input-b8" name="input-b8" multiple type="file">
</div>
$(document).ready( function() {
$("#input-b8").fileinput({
rtl: true,
uploadUrl: '/file_receive/',
dropZoneEnabled: false,
showPreview: false,
allowedFileExtensions: ['txt'],
initialPreviewConfig: []
});
});fileinput()방법 에 들 어 오 는 것 은 json 데이터 입 니 다.그 안에 여러 가지 속성 이 있 습 니 다.모든 수 치 는 컨트롤 을 업로드 할 때의 특성 을 초기 화 하 는 것 을 의미 합 니 다.설정 되 어 있 지 않 으 면 컨트롤 의 기본 속성 에 따라 설정 합 니 다.간단하게 몇 가지 속성의 설정 을 말 해 보 겠 습 니 다.uploadUrl:파일 주소 업로드;dropZone 활성화:드래그 영역 을 표시 할 지 여부;show Preview:미리 보기 영역 을 표시 할 지 여부;allowed FileExtensions:업로드 할 수 있 는 파일 형식 입 니 다.
백그라운드 코드
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 이 먼저 완료 되 는 상태 입 니 다.
확장:
여기 서 주의해 야 할 것 은 백 엔 드 에서 업 로드 된 파일 을 받 는 것 입 니 다.POST 를 통 해 업로드 되 지만 request.POST[filename]나 request.POST.get(filename,None)두 가지 방식 으로 접근 할 수 없습니다.
다른 방식 으로
request.FILES["filename"]또는 request.FILES.get("filename","None")
다음은 파일 대상 을 얻 었 습 니 다.메모리 에 있 는 파일 을 하 드 디스크 에 기록 해 야 합 니 다.파일 을 읽 는 몇 가지 방법 과 속성:
HTML 코드:
<div style="padding-top: 20px">
<table id="book_list" class="table table-striped table-bordered table-hover">
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
{% for book in objects %}
<tr>
<td>{{ book.name}}</td>
<td>{{ book.book_time }}</td>
<td>{{ book.book_size }}</td>
<td><a href="/book_read/?book_name={{ book.name }}" rel="external nofollow" > </a>
<a href="/book_del/?book_name={{ book.name }}" rel="external nofollow" > </a></td>
</tr>
{% endfor %}
</table>
</div>
$("#input-b8").on('fileuploaded',function(){
console.log('success');
$.get('/book_update/',function(data){
var book_html ="<tr>
" +
"<th> " +
" </th>" +
"<th> </th>" +
"<th> </th>" +
"<th> </th>"+
"</tr>";
console.log(data);
for (var i in data){
book_html += "<tr><td>"+ data[i]['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 형식의 데 이 터 를 만들어 프론트 데스크 로 돌아 갑 니 다.프론트 데스크 는 옮 겨 다 니 는 형식 으로 데 이 터 를 가 져 와 보 여 줍 니 다.구체 적 인 효 과 는 다음 과 같 습 니 다.
백그라운드 코드
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 코드:
<div class="header text-center ">
<a href="/index/" rel="external nofollow" style="float: left;">
<i class="fa fa-home fa-2x" aria-hidden="true">Home</i>
</a>
<h3>{{ book_name }}</h3>
</div>
<div class="col-md-12 col-sm-offset-1 main">
{% for content in book_content %}
<span>{{ content }}</span>
{% endfor %}
</div>
<div class="pagination">
<div class="col-md-4 ">
{% if book_content.has_previous %}
<i class="fa fa-arrow-left" aria-hidden="true">
<a href="?book_name={{ book_name }}&page={{ book_content.previous_page_number }}" rel="external nofollow" >
</a>
</i>
{% 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 }}" rel="external nofollow" >
</a>
<i class="fa fa-arrow-right" aria-hidden="true">
</i>
</div>
{% endif %}
</div>
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).줄 마다 요소 로 저 장 됩 니 다.그리고 페이지 를 나 눌 대상 목록 과 한 페이지 에 몇 개의 데 이 터 를 포함 하 는 지 실례 화 합 니 다.수신 전단 에서 전 송 된 페이지 에서 특정 페이지 의 데 이 터 를 가 져 와 전단 으로 전송 한다.
확장:
1.페이지 기능 은 Django 에 내 장 된 Paginator 클래스 가 제공 합 니 다.이 종 류 는 django/core/paginator 에 있 습 니 다.필요 한 곳 에서 가 져 오 면 됩 니 다.
from django.core.paginator improt Paginator
2.read(),readline(),readlines()방법의 차이:
세 가 지 는 모두 파일 내용 을 읽 습 니 다.
실례 화 대상:
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()https://github.com/libuliduobuqiuqiu/noval_test
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
로마 숫자를 정수로 또는 그 반대로 변환그 중 하나는 로마 숫자를 정수로 변환하는 함수를 만드는 것이었고 두 번째는 그 반대를 수행하는 함수를 만드는 것이었습니다. 문자만 포함합니다'I', 'V', 'X', 'L', 'C', 'D', 'M' ; 문자열이 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
