画像をMySQLデータベースに保存し、フロントエンドページに表示するための実装コード

1. まず、pycharmを使用してDjangoプロジェクトを作成し、関連する環境を設定します。

ここでエディターはデフォルトのプロジェクトを作成します

settings.pyで変更する 2 つの設定

データベース = {
    'デフォルト'： {
        # 'ENGINE': 'django.db.backends.sqlite3',
        # 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),

        'エンジン': 'django.db.backends.mysql',
        「名前」: 「写真」,
        'ホスト': '127.0.0.1',
        'ポート': '3306',
        'ユーザー': 'root',
        'パスワード': '201314',

    }
}


STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR、'静的')
]

2. テーブルを作成する

① キーボードのwin+sキーを押してからcmdと入力し、Enterキーを2回押して中国語入力方式に、Enterキーを1回押して英語入力方式に切り替えてDOSウィンドウに入ります。

② mysql -uroot -p password と入力し、Enter キーを押して mysql データベースに入り、create database table name と入力し、小さい Enter キーを押してデータベースを作成します🆗

ここに画像の説明を挿入

③appのmodels.pyにテーブル構造を作成する

モデル.py

django.dbからモデルをインポートする

# ここでモデルを作成します。


クラス Images(models.Model):
    img = models.ImageField(upload_to='static/pictures/') # upload_to='static/pictures/' は画像保存用のフォルダ名を指定します。ファイルのアップロード後に自動的に作成されます。 img_name = models.CharField(max_length=32)
    create_time = models.DateTimeField(auto_now_add=True)

④データベースの移行

pycharmのターミナルで次の2つの文を順番に実行します。

python manage.py 移行の作成

python manage.py 移行

ここに画像の説明を挿入

3. 写真アップロード機能

urls.py

django.conf.urlsからurlをインポートする
django.contribからadminをインポート
app01からビューをインポート

urlパターン = [
    url(r'^admin/$', admin.site.urls),

    url(r'^upload/$', views.upload, name='upload'),

]

ビュー.py

django.shortcuts から render をインポートし、リダイレクトします
app01からモデルをインポート


# ここでビューを作成します。


defアップロード(リクエスト):
    エラー = ''
    request.method == 'POST'の場合:
        img = request.FILES.get('img')
        pic_name = 画像名
        pic_name.split('.')[-1] == 'mp4'の場合:
            error = 'この形式の画像のアップロードはまだサポートされていません! ！ ！ '
        それ以外：
            models.Images.objects.create(img_name=pic_name, img=img)
            リダイレクトを返す('表示')
    レンダリングを返します(リクエスト、'upload.html'、locals())

フロントエンドアップロードページ upload.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>写真をアップロード</title>
</head>
<本文>
<div style="height: 160px">
    <フォームアクション="" メソッド="post" enctype="multipart/form-data">
        {% csrf_token %}
        <h1>画像アップロードページ</h1>
        <テーブルセルパディング="5px">
            <tr>
                <td>写真をアップロード</td>
                <td><input type="file" name="img"></td>
            </tr>
            <tr>
                <td>
                    <button>アップロード</button>
                </td>
                <td><strong style="color: red">{{ エラー }}</strong></td>
            </tr>
        </テーブル>
    </フォーム>
</div>
<div スタイル="text-align: center;color: #2b542c;font-size: 20px;">
    <a href="{% url 'show' %}" rel="external nofollow" >戻る</a>
</div>
</本文>
</html>

ここに画像の説明を挿入

4. 画像表示機能

urls.py

「」
django.conf.urlsからurlをインポートする
django.contribからadminをインポート
app01からビューをインポート

urlパターン = [
    url(r'^admin/$', admin.site.urls),

    url(r'^upload/$', views.upload, name='upload'),
    url(r'^show/$', views.show, name='show'),

]

ビュー.py

django.shortcuts から render をインポートし、リダイレクトします
app01からモデルをインポート


# ここでビューを作成します。


defアップロード(リクエスト):
    エラー = ''
    request.method == 'POST'の場合:
        img = request.FILES.get('img')
        pic_name = 画像名
        pic_name.split('.')[-1] == 'mp4'の場合:
            error = 'この形式の画像のアップロードはまだサポートされていません! ！ ！ '
        それ以外：
            models.Images.objects.create(img_name=pic_name, img=img)
            リダイレクトを返す('表示')
    レンダリングを返します(リクエスト、'upload.html'、locals())


def show(リクエスト):
    all_images = モデル.Images.objects.all()
    # all_images 内の i について:
    # 印刷(i.img)
    レンダリングを返します(リクエスト、'show.html'、locals())

フロントエンドディスプレイ show.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>写真を表示</title>
</head>
<本文>
{% は all_images 内の画像 %}
    <img src="/{{ image.img }}" スタイル="幅: 240px;高さ: 240px;">
{% endfor %}
<br/>
<p style="text-align: center;color: #2b542c;font-size: 20px;">
    <a href="{% url 'upload' %}" rel="external nofollow" rel="external nofollow" >戻る</a>
</p>
</本文>
</html>

ここに画像の説明を挿入

5. 写真削除機能

urls.py

django.conf.urlsからurlをインポートする
django.contribからadminをインポート
app01からビューをインポート

urlパターン = [
    url(r'^admin/$', admin.site.urls),

    url(r'^upload/$', views.upload, name='upload'),
    url(r'^show/$', views.show, name='show'),
    url(r'^delete/$', views.delete, name='delete'),

]

ビュー.py

django.shortcuts から render をインポートし、リダイレクトします
app01からモデルをインポート


# ここでビューを作成します。


defアップロード(リクエスト):
    エラー = ''
    request.method == 'POST'の場合:
        img = request.FILES.get('img')
        pic_name = 画像名
        pic_name.split('.')[-1] == 'mp4'の場合:
            error = 'この形式の画像のアップロードはまだサポートされていません! ！ ！ '
        それ以外：
            models.Images.objects.create(img_name=pic_name, img=img)
            リダイレクトを返す('表示')
    レンダリングを返します(リクエスト、'upload.html'、locals())


def show(リクエスト):
    all_images = モデル.Images.objects.all()
    # all_images 内の i について:
    # 印刷(i.img)
    レンダリングを返します(リクエスト、'show.html'、locals())


def delete(リクエスト):
    pk = リクエスト.GET.get('pk')
    モデル.Images.objects.filter(id=pk).delete()
    リダイレクトを返す('表示')

表示.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>写真を表示</title>
</head>
<本文>
{% は all_images 内の画像 %}
    <img src="/{{ image.img }}" スタイル="幅: 240px;高さ: 240px;">
    <a href="/delete/?pk={{ image.id }}" rel="external nofollow" >削除</a>
{% endfor %}
<br/>
<p style="text-align: center;color: #2b542c;font-size: 20px;">
    <a href="{% url 'upload' %}" rel="external nofollow" rel="external nofollow" >戻る</a>
</p>
</本文>
</html>

ここに画像の説明を挿入

6. 全体をデモンストレーションする

ここに画像の説明を挿入

時間が限られているため、美しいページやスタイルを追加せずに、可能な限り最小限の方法で実装されています。美しさが好きな友人は、Bootstrap の公式サイトまたは jq22 にアクセスして自分で追加できます。！！

これで、MySQL データベースに画像を保存してフロントエンドページに表示する方法についての説明は終わりです。MySQL データベースに保存してフロントエンドページのコンテンツに表示する関連画像の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: