Vue.jsとDjangoを使ったフロントエンド・バックエンド分離プロジェクトの構築例を詳しく解説

この記事では主にDjango+Vue.jsでフロントエンドとバックエンドを分離したプロジェクトを構築する例を紹介していますので、興味のある方はぜひ学んでみてください

Markdown の使用についても学びました。

著者はすべて独学で学んだので、体系的な学習はありません。ここでの主な目的は、プロジェクトのフロントエンドとバックエンドを分離することです。

必要な django と vue.js がコンピューターに既にあることを前提としています。そうでない場合は、下にスクロールして vue.js のインストール プロセスを確認してください。 Django については以前に書いたので、詳しくは説明しません。

1. 通常、フロントエンドとバックエンドの分離プロジェクトプロセスを構築します

1. django プロジェクトを作成します

コマンド:

django-admin startproject ulb_manager

構造:

├── manage.py
└── ulb_manager
  ├── __init__.py
  ├── settings.py
  ├── urls.py
  └── wsgi.py

2. プロジェクトのルートを入力します。ディレクトリに移動し、プロジェクトとしてアプリを作成します。 最後の

コマンド:

cd ulb_manager
python manage.py startapp backend

構造は上記よりも基本的なもので、バックエンドが 1 つ増えています

3. vue-cli を使用して、プロジェクト フロントとして vue.js プロジェクトを作成します

コマンド:

vue-init webpack frontend

インターフェース:

プロジェクト名: (デフォルトの Enter キー)

プロジェクトの説明: (デフォルトの Enter キー)

作成者: (お気軽に名前を入力してください)

。 ..: (デフォルトの [はい] と Enter キー。現時点では理解できません。ちょうど触り始めたばかりで、インターネット上でこれを見つけることができなかったので、デフォルトまたは [はい] を選択しました)

構造には追加のフロントエンドがあります

構造の概要:

プロジェクトのルート ディレクトリに 2 つの新しいフォルダーがあり、1 つはバックエンド、もう 1 つはフロントエンドとそれぞれ呼ばれます: バックエンドは Django のアプリ、フロントエンドは Vue.jsプロジェクト

4. webpack を使用して Vue.js プロジェクトをパッケージ化します

コマンド:

cd frontend
npm install
npm run build

5. Django の一般的なビュー TemplateView

は、プロジェクトのルート ディレクトリを作成し、ユニバーサル ビューを使用して最も単純なテンプレート コントローラーを作成します。

コード:

urlpatterns = [
  url(r'^admin/', admin.site.urls),
  url(r'^$',TemplateView.as_view(template_name="index.html")),
  #url(r'^api/',include('backend.urls', namespace='api'))
  #最后一行代码我注释掉，因为运行报错：Error:No module named 'backend.urls',暂时解决不掉，但是我运行的时候，注释掉这行代码，是能正常运行的。
]

6. Django プロジェクトのテンプレート検索パスを設定します

settings.py (つまり、ulb_manager/settings.py) を開いて TEMPLATES 設定項目を見つけ、次のように変更します。 PS: 以前に django を学びました。アプリは settings.py の INSTALLED_APPS 構成項目に追加する必要があるため、自分で「backend」を追加しました。

7. 静的ファイルの検索パスを設定します

settings.py (ulb_manager/settings.py) を開き、STATICFILES_DIRS 設定項目を見つけます。

TEMPLATES = [
  {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    #'DIRS': [],
    'DIRS':['frontend/dist'],
    'APP_DIRS': True,
    'OPTIONS': {
      'context_processors': [
        'django.template.context_processors.debug',
        'django.template.context_processors.request',
        'django.contrib.auth.context_processors.auth',
        'django.contrib.messages.context_processors.messages',
      ],
    },
  },
]

そうでない場合は、自分で追加します。

この時点で、django プロジェクトを正常に実行できます。通常の実行インターフェイスは次のとおりです。

実行インターフェイス

次に、vue.js をインストールします コンピューターに vue.js がない場合は、次の手順で vue をインストールします。 js:

1 .node.js

vue.jsの推奨インストール環境はnode.jsなので、まずはnode.jsをインストールしました。

node.js 公式 Web サイトにログインし、最新バージョンの v6.11.1 をダウンロードします。

2.npm

はNode.jsに統合されているため、インストールする必要はありません。

3.cnpm

コマンドラインに次のコマンドを入力します:

# Add for vue.js
STATICFILES_DIRS = [
  os.path.join(BASE_DIR, "frontend/dist/static"),
]

インストールが完了するまで待ちます。

4. vue-cli スキャフォールディング構築ツールをインストールします

コマンド ラインに次のコマンドを入力します:

npm install -g cnpm --registry=http://registry.npm.taobao.org

インストールが完了するまで待ちます。

この時点で、vue-cli がインストールされました。

追記: Markdown でファイルのディレクトリ ツリー構造を記述する方法がまだわかりません。

オリジナル版から完全にコピーすると全く動作しないため、修正しました。基本的なフレームワークを書きました。首のないハエのように... (クラウド ホストを買う余裕はありません... 初心者は購入する必要はありません)

Markdown は非常に自由に使用でき、いくつかの HTML コマンドを呼び出すこともできます。興味深いですが、まだどれだけのコマンドを呼び出すことができるのか調べていません...

以上がVue.jsとDjangoを使ったフロントエンド・バックエンド分離プロジェクトの構築例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。