Django + Vue 最小構成开发笔记

2 年 ago
雅, 悟
4 minutes

基本结构 de

    • Django (バックエンド)

 

    Vue (フロントエンド)

Django + Vue需要特定的架构才能有效地进行协作，仅简单地分开开发是不够的（大致上）。

image.png

请留意以下事项

在这篇文章中，我们安装了Django REST framework，但本文并没有特别讨论它。我们在使用Django + Vue进行开发时可能会需要它，所以我们将其作为最小配置进行安装。

堵塞的地方

    • それぞれのパッケージのバージョンの互換性

 

    フォルダ構成

构建环境

本文所提及的开发环境操作系统是Windows 10。

最开始直接安装在Windows上的东西

    • （必須）Python 3.8.3

pipを使う

（必須）node.js 12.18.0

npmを使う

（必須）PyCharm Community

Python用のIDEなので本来は必須ではないが、仮想環境も立ち上げてくれるし便利。いつもありがとう
このチュートリアルではターミナルを含め、積極的に使っています

（任意）git

いれたほうがベター

从各个软件包管理器中安装的内容
※安装时机将在后续步骤中指示

    • Python(pip)

Django 3.0.8
djangorestframework 3.11.0
django-webpack-loader 0.7.0

node.js(npm)

@vue/cli @4.4.6
webpack-bundle-tracker @0.4.3

手順从这里开始。

在PyCharm上创建虚拟环境。

在PyCharm上通过[文件→新建项目]来创建一个新项目。

image.png

打开终端，并确认进入了虚拟环境(venv)。

image.png

创建一个新文件夹并在该层级中使用终端进行导航。

    • 今回はdjango_vueフォルダを作った

cd django_vueで移動する
これはvenvフォルダをgitに含ませたくないから(.gitignoreで直接指定でもOKのはず)

image.png

将其保存为Git存储库。

git initで空のGitリポジトリを作る
この先は適宜好きなタイミングでcommitしてね

image.png

在Python的虚拟环境中安装所需的东西。

当您在以后使用pip进行安装时，如果提示pip版本过旧，您也可以尝试使用以下命令。

python -m pip install –upgrade pip –force-reinstall

PyCharmの仮想環境（venv）にデフォルトで入っているpipのバージョンが古いのでこのメッセージが出る

image.png

首先，Django

pip install django

image.png

下一步是使用Django Rest Framework

    pip install djangorestframework
image.png

最后，使用django-webpack-loader

    pip install django-webpack-loader
image.png

我們來看看已經使用pip freeze命令安裝的Python套件。

    インストールした３つ以外にも関連するパッケージがインストールされているのが見えるはず
image.png

順便提一下，现在的文件夹排列是这样的

image.png

创建一个Django项目，然后进行一些简单的设置。

开始Django项目

    • django-admin startproject django_project

 

    プロジェクト名がdjango_projectのプロジェクトが立ち上がる
image.png

进入django_project文件夹

    cd django_project
image.png

在Django上启动应用程序

    • python manage.py startapp myapp

 

    アプリ名がmyappのアプリが作成される
image.png

目前的文件夹结构就像这样。

image.png

请打开位于django_project文件夹下一层的settings.py文件，并进行编辑。

    • INSTALLED_APPS

どのアプリが使われるかを指定してあげる

rest_framework
myapp.apps.MyappConfig
webpack_loader

...

INSTALLED_APPS = [
    'rest_framework',
    'myapp.apps.MyappConfig',
    'webpack_loader',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

...
    • WEBPACK_LOADER

こんな感じのものをsettings.pyの最後に追加してあげる
これから後に作るfrontendフォルダ内のwebpack-stats.jsonというファイルを使ってwebpackをロードするよ、という話

...

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'

# ↑ここまではDjangoプロジェクト作成時にもともと記述されているところ
# ↓追加

# Webpack loader
WEBPACK_LOADER = {
    'DEFAULT': {
        'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),
    }
}

settings.py保存してね

在这里尝试启动Django的Web服务器
首先，由于尚未将Django项目的初始设置应用到数据库中，所以需要进行迁移。

    python manage.py migrate
image.png

当迁移完成后，启动开发用的Web服务器。

    python manage.py runserver
image.png

当你在浏览器中访问 http://127.0.0.1:8000/ 时，应该会出现这样的界面。

image.png

Django项目开始了！太棒了！

为了继续下一步操作，请停止Web服务器。

    Webサーバーを止める時はターミナルでCtrl + Cを押す

4. 使用npm安装基本的组件/library。

在与manage.py相同的层级下创建名为”frontend”的文件夹。

文件夹的结构看起来是这样的。

image.png

在终端上切换到前端。

    cd frontend
image.png

安装@vue/cli插件

    • npm i -g @vue/cli

iはインストールの意味

-gはグローバルでインストールするという意味で、cliが関わるものは-gでインストールしよう

image.png

创建一个Vue项目。

    • vue create .

.が大事で、現在のディレクトリにプロジェクトを作成できる

image.png
    現在のディレクトリにインストールするか聞かれるので、Yと答える
image.png
    • プリセットを選べと言われるのでdefault (babel, eslint)を選ぶ

ここでは矢印キーで移動する

image.png
    インストールが終わるのを待つ
image.png
    • インストールが終わったらVueの開発用Webサーバーを立ち上げてみる

npm run serve

image.png
    ブラウザで表示されているURL（今回は http://localhost:8081 、つまり http://127.0.0.1:8081 と同義）にアクセスすると、こんな画面になる
image.png
    • これでVue.jsアプリが立ち上がりました！やったね！

終了させる時はターミナルでCtrl + C

バッチ ジョブを終了しますか (Y/N)?と聞かれた場合はYと入力してEnterでOK

5. 使用npm安装我们这次需要的东西

需要安装的东西

    • webpack-bundle-tracker

さっきDjangoのsettings.pyで設定したwebpack-stats.jsonを吐いてくれるやつ
webpack自体は@vue/cli内部で使われている

使用 npm i -D webpack-bundle-tracker@0.4.3 命令安装指定版本的 webpack-bundle-tracker。
– webpack-bundle-tracker@0.4.3 表示安装 webpack-bundle-tracker 的版本为 0.4.3。
– -D 表示将其作为开发依赖项进行注册。
– -D 也可以使用 –save-dev。
– 如果不指定版本，将会安装最新版本1.0.0alpha.1，但使用该版本会导致 Django 报错，出现 TypeError: string indices must be integers。

image.png

在这个阶段，应该会有这样的文件结构。

frontendフォルダ内にたくさんのファイルができました

image.png

创建Vue项目的设置文件

在frontend文件夹的顶层（与package.json文件相同的层级）创建一个名为vue.config.js的文件。

image.png

在vue.config.js中以以下方式写入。

const BundleTracker = require('webpack-bundle-tracker')

// Change this to match the path to your files in production (could be S3, CloudFront, etc.)
const DEPLOYMENT_PATH = '/static/dist/'

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? DEPLOYMENT_PATH : 'http://localhost:8080/',
    outputDir: '../myapp/static/dist',

    devServer: {
        public: 'localhost:8080',
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },

    configureWebpack: {
        plugins: [
            new BundleTracker({ path: __dirname, filename: 'webpack-stats.json' }),
        ],
    },
}

outputDirのところが重要で、ここで一階層上のmyappフォルダ内、その中のstaticフォルダ内、さらにはその中のdistフォルダの中にVueアプリで作成したjsなどを吐くことを指定する

configureWebpackのところは、webpackの情報を保存しておくファイルのファイル名とディレクトリを指定している（先にDjangoのsettings.pyで指定したwebpack-stats.jsonというファイル）

7. 构建Vue项目

构建时会生成包含webpack信息的webpack-stats.json文件，以及打包了Vue项目文件等的文件。

    そのままfrontendフォルダ内でnpm run buildコマンドを実行する
image.png
    • ファイル構成はこんな感じになる

frontendフォルダ内にwebpack-stats.jsonが生成される

myappフォルダ内にstatic、その中のdist内にバンドルされたファイルが生成される

image.png

回到Django，并创建一个用于显示的HTML文件。

创建用于在Django中显示的HTML文件。

    • 1. myappフォルダ内にtemplatesフォルダを作る

 

    • 2. templatesフォルダ内に再度myappフォルダを作る

 

    • 3. このmyappフォルダ内にindex.htmlを作る

Djangoはtemplates/<Djangoアプリ名>という名前のフォルダからHTMLを探します

阶层会变成这样

image.png

请将index.html编辑为以下内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Vue.js + Django</title>
    </head>
    <body>
        {% load render_bundle from webpack_loader %}
        <div id="app">
            <app></app>
        </div>
        {% render_bundle "chunk-vendors" %}
        {% render_bundle "app" %}
    </body>
</html>
    • webpack_loaderの中のrender_bundleをロードし、”chunk-vendors”と”app”を呼び出させるHTML

{% load render_bundle from webpack_loader %}のロードがうまくいかないとDjangoからOSErrorで怒られる

その場合はwebpack-stats.jsonの正しいパスが指定できていなかったりする

用Django指定要在指定的URL上显示的项目。

请编辑位于django_project文件夹深处的urls.py文件。

    以下のスクリーンショットでハイライトされているurls.pyを開く
image.png

原本已经有一些代码，但我们需要添加如下代码。

"""django_project URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='myapp/index.html'), name='myapp_index'),
]

path(”, …というのはURLのrootを叩いた時の表示の設定をしてますよ、という意味

開発環境の場合 http://127.0.0.1:8000 がrootになる

template_name=’myapp/index.html’と指定してあげることで「myapp/templates/myapp/index.htmlを開く」とDjangoが理解してくれる

本来はこのようなURLの設定方法は行わない

本来は各アプリに対してurls.pyを作成し、そこで表示させるURLなどを指定する
今回は簡便に済ませるために指定したディレクトリにあるindex.htmlを直接開くようにしている

10. 启动Django的开发用Web服务器

回到终端，并且现在应该在frontend目录中，所以向上一级（即包含manage.py的目录）进入。

    cd ../
image.png

启动Web服务器

    python manage.py runserver
image.png

在浏览器中访问 http://127.0.0.1:8000/

image.png

使用Vue.js的HTML在Django中成功显示出来了！太棒了！

最后

希望这篇文章能对某人在自己建立环境时遇到困难的情况有所帮助！

✖
广告
将在 10 秒后关闭
bannerAds