Django的前后端联调

本文总结了使用Django和Vue进行前后端联调的全过程,包括Django项目的创建、数据库配置、模型编写、视图与路由设置,以及Vue项目的创建、跨域配置、axios封装和功能实现,如动物种类与动物信息的展示、操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目流程总结

1.创建项目和子应用

创建项目命令: django-admin startproject 项目名

创建子应用:python manage.py startapp 应用名

2.配置项目

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
  
    'animal',#子应用名
    'rest_framework',
    'corsheaders',#跨域
]


MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    
    'corsheaders.middleware.CorsMiddleware',#跨域处理
]

CORS_ORIGIN_ALLOW_ALL = True#允许所有原访问

DATABASES = {
   
   #数据库
    'default': {
   
   
        'ENGINE': 'django.db.backends.mysql',
        'HOST': 'localhost',
        'PORT': 3306,
        'USER': 'root',
        'PASSWORD': 'root',
        'NAME': 'animal',
    }
}
#时区与语言
LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'Asia/Shanghai'

3.安装数据库

#与项目同名的文件夹下 init.py 内填写

import pymysql
pymysql.install_as_MySQLdb()

4.编写模型类

#子应用下models.py

from django.db import models

# Create your models here.
# 种类Kind模型类,由动物种类kind_name组成
class Kind(models.Model):
    kind_name = models.CharField(max_length=20, verbose_name='种类名')

    class Meta:
        verbose_name = '种类表'
        verbose_name_plural = verbose_name
        db_table = 'kind'#数据库中这个表的表名

    def __str__(self):
        return self.kind_name

# 动物Animal模型类,动物名ani_name、体重weight、高度height、所属种类kind(外键)组成
class Animal(models.Model):
    ani_name = models.CharField(max_length=20, verbose_name='动物名')
    weight = models.IntegerField(verbose_name='体重')
    height = models.IntegerField(verbose_name='高度')
    kind = models.ForeignKey(to=Kind, on_delete=models.CASCADE, verbose_name='种类')

    class Meta:
        verbose_name = '动物表'
        verbose_name_plural = verbose_name
        db_table = 'animal'

    def __str__(self):
        return self.ani_name

5.迁移、创建超级用户、注册表、添加测试数据

迁移:python manage.py makemigrations

执行迁移:python manage.py migrate

创建超级用户:python manage.py createsuperuser

#先注册表在创建超级用户才可以添加数据
注册表:

from django.contrib import admin
from animal.models import Animal, Kind

# Register your models here.
admin.site.register(Animal)
admin.site.register(Kind)

6.路由分发:

在子应用下创建子路由

主路由:
from django.contrib import admin
from django.urls import path, include#导入include方法
from animal import urls #导入子路由

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include(urls)), #连接子路由
]

子路由:
from django.urls import path
from animal import views #导入子应用中的视图
from rest_framework import routers
urlpatterns = [

]

router = routers.SimpleRouter()
router.register('kind', views.KindView, 'kind')
router.register('ani', views.AnimalView, 'ani')
urlpatterns += router.urls

7.创建序列化器

#需要在子应用中创建序列化器文件
#推荐使用 serializers.py(也可以自定义)

from rest_framework import serializers
from animal.models import Kind, Animal

class KindSerializer(serializers.ModelSerializer):
    class Meta:
        model = Kind
        fields = '__all__'

class AnimalSerializer(serializers.ModelSerializer):
    kind_name = serializers.SerializerMethodField(read_only=True)
    def get_kind_name(self, obj):
        return obj.kind.kind_name

    class Meta:
        model = Animal
        fields = '__all__'


8.编写视图:

from django.shortcuts import render
from animal.models import Kind, Animal
from rest_framework.viewsets import ModelViewSet
from animal.serializers import KindSerializer, AnimalSerializer
from rest_framework.filters import SearchFilter, OrderingFilter

# Create your views here.
class KindView(ModelViewSet):
    queryset = Kind.objects
### 部署 DjangoVue 前后端分离项目 #### 1. **前端 Vue 项目的部署** Vue 作为前端框架,通常需要打包为静态资源文件,并通过 Nginx 或类似工具进行托管。首先,在本地开发环境中使用 `npm run build` 对 Vue 项目进行打包,生成的静态文件会存放在 `dist` 目录中。 将 `dist` 文件夹上传至服务器指定目录(例如 `/var/www/html/yourproject`),然后配置 Nginx 将该目录设置为网站根目录。Nginx 配置示例如下: ```nginx server { listen 80; server_name yourdomain.com; location / { root /var/www/html/yourproject; index index.html index.htm; try_files $uri $uri/ =404; } } ``` 重启 Nginx 服务以应用配置更改: ```bash sudo systemctl restart nginx ``` 这样,前端页面即可通过域名访问。 --- #### 2. **后端 Django 项目的部署** Django 项目不能直接通过静态文件服务器运行,需借助 WSGI 服务器如 uWSGI 来处理请求。在部署前,确保已安装必要的依赖,包括 `uwsgi` 和 `nginx`。 创建一个测试 WSGI 文件 `test.py`,用于验证 uWSGI 是否正常工作: ```python def application(env, start_response): start_response('200 OK', [('Content-Type','text/html')]) return [b"Hello World"] ``` 使用以下命令启动 uWSGI 测试服务: ```bash uwsgi --http :8000 --wsgi-file test.py ``` 若能成功访问,则说明环境配置正确。 接着,配置 Django 项目的 WSGI 模块。编辑 `wsgi.py` 文件,确保其内容如下: ```python import os from django.core.wsgi import get_wsgi_application os.environ.setdefault("DJANGO_SETTINGS_MODULE", "yourproject.settings") application = get_wsgi_application() ``` 随后编写 uWSGI 配置文件 `yourproject.ini`: ```ini [uwsgi] chdir=/path/to/yourproject module=yourproject.wsgi:application home=/path/to/virtualenv processes=4 socket=:8001 chmod-socket=660 vacuum=true ``` 启动 uWSGI: ```bash uwsgi --ini yourproject.ini ``` 最后,修改 Nginx 配置文件以代理 Django 请求: ```nginx location /api/ { include uwsgi_params; uwsgi_pass unix:/run/uwsgi/app/yourproject/socket; } ``` 重启 Nginx 并检查日志是否报错: ```bash sudo systemctl restart nginx ``` --- #### 3. **配置 Django 的静态资源和媒体文件** Django 项目通常包含静态资源(CSS、JS)和用户上传的媒体文件。在部署时,需将这些文件集中管理,并由 Nginx 提供服务。 在 `settings.py` 中添加以下配置: ```python STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'static') MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media') ``` 执行收集静态文件命令: ```bash python manage.py collectstatic ``` 然后在 Nginx 配置中添加对静态资源和媒体文件的访问支持: ```nginx location /static/ { alias /path/to/yourproject/static/; } location /media/ { alias /path/to/yourproject/media/; } ``` 此外,在总路由文件 `urls.py` 中加入对媒体文件的 URL 映射: ```python from django.conf.urls.static import static from . import settings urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) ``` 此配置确保了用户上传的文件能够被正确访问 [^1]。 --- #### 4. **前后端联调与跨域问题** 前后端分离部署后,前端请求可能会遇到跨域问题。为解决此问题,Django 需要引入 `django-cors-headers` 插件。 安装插件: ```bash pip install django-cors-headers ``` 在 `settings.py` 中添加中间件并允许所有来源: ```python INSTALLED_APPS += ['corsheaders'] MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware'] + MIDDLEWARE CORS_ORIGIN_ALLOW_ALL = True ``` 这样可确保前端可以无限制地访问后端 API [^2]。 --- ####
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值