Django REST Framework和Vue.js的环境配置

2 年 ago

韵, 科

4 minutes

环境

Chip: Apple M1 Max

运用技术

Vue CLI 5.0.1

整个目录结构

django-vue-env/
 ├app/
 ├frontend/ 
 ├project/
 ├static/     
 ├templates/　
 ├venv/
 ├db.sqlite3
 └manage.py

GitHub链接 (GitHub

方法顺序

准备Python虚拟环境

请准备一个您想要创建项目的目录，并使用以下命令准备虚拟环境。

% python -m venv venv

激活

(venv)% source venv/bin/activate

创建一个Django项目。

更新pip

(venv)% pip install --upgrade pip

安装Django和Django REST Framework

(venv)% pip install Django==4.1.3 djangorestframework==3.14.0

创建一个 Django 项目

(venv)% django-admin startproject project .

确认默认的Django页面是否显示。

(venv)% python manage.py runserver

好的！

创建Django应用程序

接下来，我们将创建应用程序。

使用以下命令创建一个名为app的应用程序。

(venv)% python manage.py startapp app

将rest_framework和app添加到project/settings.py文件中的INSTALLED_APPS中。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'app'
]

将app/views.py文件编辑成以下内容。

from rest_framework import status
from rest_framework.views import APIView
from rest_framework.response import Response

class SampleAPIView(APIView):

    def get(self, request):
        return Response("OK", status=status.HTTP_200_OK)

当收到GET请求时，只需返回”OK”的视图。

编辑project/urls.py文件的urlpatterns。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include('app.urls')) # 追加
]

创建app/urls.py，并写入以下内容。

from django.urls import path
from app.views import SampleAPIView

urlpatterns = [
    path("sample/", SampleAPIView.as_view(), name="sample"),
]

首先，我会检查API是否正常工作。

启动开发服务器，使用浏览器打开http://127.0.0.1:8000/api/v1/sample/。

创建一个Vue.js项目

安装Vue CLI。

※ 官方网站
https://cli.vuejs.org/guide/installation.html

% npm install -g @vue/cli

确认已安装。

% vue --version
@vue/cli 5.0.1

我将创建一个名为frontend的Vue项目。

% vue create frontend

这次我们选择默认的（[Vue 3] babel，eslint）配置。

Vue CLI v5.0.1
┌─────────────────────────────────────────┐
│                                         │
│   New version available 5.0.1 → 5.0.8   │
│                                         │
└─────────────────────────────────────────┘

? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features

如果出现以下的信息，则可以。

Vue CLI v5.0.1
✨  Creating project in /Users/ryosukemaeda/Programming/Issues/django-vue-env/frontend.
⚙️  Installing CLI plugins. This might take a while...

added 848 packages in 12s
?  Invoking generators...
?  Installing additional dependencies...

added 96 packages in 3s
⚓  Running completion hooks...

?  Generating README.md...

?  Successfully created project frontend.
?  Get started with the following commands:

 $ cd frontend
 $ npm run serve

启动Vue.js的开发服务器。

首先，切换到 frontend 目录。

% cd frontend

我們啟動開發伺服器。

% npm run serve

如果显示以下信息，则表示OK。

DONE  Compiled successfully in 16996ms                 11:18:49 AM

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.20.10.9:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

我要检查 Vue.js 的默认界面是否显示。

使用浏览器访问 http://localhost:8080/。

如果屏幕显示以下内容，则表示一切顺利。

实现从前端执行API的处理过程。

安装Axios。

axios是一个可以简便地进行HTTP通信的JavaScript库。

在前端目录中执行以下命令。

% npm install axios

我会实现执行API的处理过程。

将 frontend/src/components/HelloWorld.vue 文件中的