目次
(1) アップロードしたテンプレートコードをカスタマイズする
(2) モデルを使用して、アップロードされたファイルを処理します。
今回のテストでは、次の 2 つの問題が解決されました。どちらも Python のバージョンの問題です。
1. ueditor ファイル パッケージをダウンロードして解凍し、アプリケーション ディレクトリとしてプロジェクトに配置します。
2. settings.py を開き、ueditor を INSTALLED_APPS に追加します
3. settings.py に静的な静的ディレクトリが設定されているかどうかを確認します。
4. django プロジェクトの urls.py ファイルを開き、ueditor の URL ルーティング設定を追加します。
5. 上記の設定を完了すると、基本的に使用できるようになります。
1. ファイルのアップロード
画像をアップロードする
- Django がファイルのアップロードを処理しているとき、ファイル データは次の場所に保存されます。
request.FILES - FILES の各キーは、<input type="file" name="" /> の名前です。
- 注: 要求されたメソッドが POST で、送信された <form> が enctype="multipart/form-data" である場合にのみ、FILES にデータが含まれます。
- それ以外の場合、FILES は空の辞書のようなオブジェクトになります。
(1) アップロードしたテンプレートコードをカスタマイズする
<html>
<head>
<title>文件上传</title>
</head>
<body>
<form method="post" action="upload/" enctype="multipart/form-data">
<input type="text" name="title"><br>
<input type="file" name="pic"/><br>
<input type="submit" value="上传">
</form>
</body>
</html>
- カスタムアップロードされたビューコード
from django.shortcuts import render
from django.http import HttpResponse
from PIL import Image
import time,os
def upload(request):
'''执行图片的上传'''
myfile = request.FILES.get("mypic",None)
if not myfile:
return HttpResponse("没有上传文件信息")
filename = str(time.time())+"."+myfile.name.split('.').pop()
destination = open("./static/pics/"+filename,"wb+")
for chunk in myfile.chunks(): # 分块写入文件
destination.write(chunk)
destination.close()
# 执行图片缩放
im = Image.open("./static/pics/"+filename)
# 缩放到75*75(缩放后的宽高比例不变):
im.thumbnail((75, 75))
# 把缩放后的图像用jpeg格式保存:
im.save("./static/pics/s_"+filename,None)
#执行图片删除
#os.remove("./static/pics/"+filename)
return HttpResponse("上传成功！图片："+filename）
(2) モデルを使用して、アップロードされたファイルを処理します。
プロパティをmodels.ImageFieldタイプとして定義します。
pic=models.ImageField(upload_to='cars/')
- 注: 属性タイプが ImageField で、画像処理が使用される場合は、パッケージ Pillow をインストールする必要があります。
pip install Pillow
- 画像の保存パス
- プロジェクトのルート ディレクトリにメディア フォルダーを作成します。
- 写真がアップロードされると、「/static/media/cars/picture file」に保存されます。
- settings.py ファイルを開き、media_root 項目を追加します。
MEDIA_ROOT=os.path.join(BASE_DIR,"static/media")
- Django バックグラウンド管理を使用すると、ImageField タイプ属性に遭遇するとファイル ボックスが表示され、ファイルのアップロードが完了します
2、ページング動作
- Django はデータのページネーションを管理するためのいくつかのクラスを提供します。これらのクラスは django/core/paginator.py にあります。
ページネータ オブジェクト
- Paginator(list, int): ページネーション オブジェクトを返します。パラメータはリスト データ、各辺のデータの数です。
属性
- count: オブジェクトの総数
- num_pages: 総ページ数
- page_range: 1 から始まるページ番号のリスト (例: [1, 2, 3, 4])
方法
- page(num): 添字は 1 から始まります。指定されたページ番号が存在しない場合、InvalidPage 例外がスローされます。
例外
- InvalidPage: 無効なページ番号が page() に渡された場合にスローされます。
- PageNotAnInteger: 整数ではない値が page() に渡された場合にスローされます。
- EmptyPage: 有効な値が page() に提供されたが、そのページにオブジェクトがない場合にスローされます。
ページオブジェクト
オブジェクトを作成する
- Paginator オブジェクトの page() メソッドは、手動で構築せずに Page オブジェクトを返します。
属性
- object_list: 現在のページ上のすべてのオブジェクトのリスト
- 数値: 現在のページの 1 から始まるシリアル番号
- paginator: 現在のページ オブジェクトに関連する Paginator オブジェクト
方法
- has_next(): 次のページがある場合は True を返します。
- has_previous(): 前のページがある場合は True を返します
- has_other_pages(): 前または次のページがある場合は True を返します
- next_page_number(): 次のページのページ番号を返します。次のページが存在しない場合は、InvalidPage 例外がスローされます。
- previous_page_number(): 前のページのページ番号を返します。前のページが存在しない場合は、InvalidPage 例外がスローされます。
- len(): 現在のページ上のオブジェクトの数を返します。
- ページ オブジェクトを反復する: 現在のページ内の各オブジェクトにアクセスします。
コード例
1. プロジェクト mydemo を作成する
ビューの作成 pagTest
from django.core.paginator import Paginator
def pagTest(request, pIndex):
list1 = AreaInfo.objects.filter(aParent__isnull=True)
p = Paginator(list1, 10)
if pIndex == '':
pIndex = '1'
pIndex = int(pIndex)
list2 = p.page(pIndex)
plist = p.page_range
return render(request, 'booktest/pagTest.html', {'list': list2, 'plist': plist, 'pIndex': pIndex})
URLを設定する
path('pag<int:pIndex>/', views.pagTest, name='pagTest'),
テンプレートpagTest.htmlを定義する
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
{%for area in list%}
<li>{
{area.id}}--{
{area.atitle}}</li>
{%endfor%}
</ul>
{%for pindex in plist%}
{%if pIndex == pindex%}
{
{pindex}}
{%else%}
<a href="/pag{
{pindex}}/">{
{pindex}}</a>
{%endif%}
{%endfor%}
</body>
</html>3. リッチテキストエディタ
Django は UEditor (アプリケーションにパッケージ化) Baidu リッチ テキスト エディターを統合します
テスト環境
- ubuntu 16.04
- Python 3.8.2
- ジャンゴ 2.2.14
今回のテストでは、次の 2 つの問題が解決されました。どちらも Python のバージョンの問題です。
- エラー1
# name 'file' is not defined
controller.py 68行
# jsonfile = file(config_path)
jsonfile = open(config_path)
- エラー2
File "/home/yc/py6/myproject-test/ueditor/controller.py", line 45,
in buildFileName
for key, value in texts.iteritems():
AttributeError: 'dict' object has no attribute 'iteritems'
controller.py 45行
# for key, value in texts.iteritems():
for key, value in texts.items():
設定方法
1. ueditor ファイル パッケージをダウンロードして解凍し、アプリケーション ディレクトリとしてプロジェクトに配置します。
myproject:
manage.py myproject static ueditor
myadmin myweb templates
uediter文件夹包括以下:
controller.py __init__.py msyhbd.ttf UE/ urls.py
controller.pyc __init__.pyc __pycache__ ueconfig.json urls.pyc
2. settings.py を開き、ueditor を INSTALLED_APPS に追加します
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myadmin',
'myweb',
'ueditor',
]
3. settings.py に静的な静的ディレクトリが設定されているかどうかを確認します。
STATIC_URL = '/static/'
#静态目录
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
4. django プロジェクトの urls.py ファイルを開き、ueditor の URL ルーティング設定を追加します。
myproject/myproject/urls.py:
from django.urls import include,path
from django.contrib import admin
urlpatterns = [
path('ueditor/', include('ueditor.urls')),
path('admin/',include('myadmin.urls')),
path('',include('myweb.urls')),
]
5. 上記の設定を完了すると、基本的に使用できるようになります。
ueditor配置可能需要根据你的项目具体情况修改。
ueditor前端配置文件，在ueditor/UE/ueditor.config.js
ueditor后端配置文件，在ueditor/ueconfig.json 具体配置可参考ueditor官网
此时可以在需要使用富文本编辑器的位置设置一下代码:
html:
<link rel="stylesheet" type="text/css" href="/ueditor/UE/third-party/SyntaxHighlighter/shCoreDefault.css">
<script type="text/javascript" src="/ueditor/UE/third-party/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript" src="/ueditor/UE/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/UE/ueditor.all.min.js"></script>
<script type="text/javascript" src="/ueditor/UE/lang/zh-cn/zh-cn.js"></script>
<div class="am-form-group">
<label for="user-intro" class="am-u-sm-3 am-form-label">商品简介</label>
<div class="am-u-sm-9">
<!-- <textarea name="descr" class="" rows="10" id="user-intro" placeholder="请输入商品简介"></textarea> -->
<!-- <script id="editor" type="text/plain" style="width:100%;height:500px;"></script> -->
<script id="editor" name="content" type="text/plain" style="height:500px;"></script>
</div>
</div>
<script type="text/javascript">
var ue = UE.getEditor('editor');
SyntaxHighlighter.all();
</script>
6、その他の問題
現在姉妹 UI テンプレート CSS を使用していると、現在のエディタのスタイルに影響します
修改,/static/myadmin/assets/css/app.css 379行
.tpl-content-wrapper {
transition: all 0.4s ease-in-out;
/*position: relative;*/
margin-left: 240px;
z-index: 1101;
min-height: 922px;
border-bottom-left-radius: 3px;
}
7、ウォーターマーク機能
- アップロードした画像に自動的にウォーターマークを追加する機能は、デフォルトでは有効になっていません。
- 写真のアップロードと透かしの追加機能には PIL をインストールする必要があります
pip install pillow - ウォーターマーク関連の設定は ueconfig.json の最後にあります。
"openWaterMark": false, //是否开启 "waterMarkText": "我的水印\nhttp://xxxxx.com", //水印内容，建议一行文本 "waterMarkFont": "msyhbd.ttf", //字体，中文需要字体支持才不会出错 "waterMarkSize": 15, //字体大小 "waterMarkBottom": 45, //下边距 "waterMarkRight": 155 //右边距