Django+vue前后端分离项目构建

原创

已于 2022-05-30 20:34:23 修改 · 4.1k 阅读

于 2022-05-30 20:08:13 首次发布

本文详细介绍了如何使用Django 4.0.4和Vue 2.0构建前后端分离的web项目，包括Django项目的设置、数据库配置、路由、模型、视图以及前端Vue的安装、配置、路由、组件创建和axios的使用。最后，文章讲解了如何将Vue打包后的静态资源与Django整合，实现前后端通信。

本项目用的Django是4.0.4版本，vue是2.0版本

一、背景

主要介绍如何使用后端Django + 前端Vue 的技术栈快速地搭建起一套web项目的框架

1.Django项目和应用的创建

pip install Django #安装Django
django-admin startproject test1 #创新项目
cd test1 #进入项目
python manage.py startapp myApp #创建myApp应用

2.既然是前后端分离项目，那么就要在settings.py文件配置，跨域，白名单，请求头，中间件

pip install django-cors-headers

# 支持跨域配置开始
CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_CREDENTIALS = True # 允许携带cookie
CORS_ORIGIN_WHITELIST = ( # 设置白名单
    '127.0.0.1:8000',
    '127.0.0.1:8080',
    '127.0.0.1:8081'
)
CORS_ALLOW_METHODS = ( # 设置请求方法
    'DELETE',
    'GET',
    'POST',
    'OPTIONS',
    'PATCH',
    'PUT',
    'VIEW',
)
CORS_ALLOW_HEADERS = ( # 设置请求头的内容
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-request-with',
    'Pragma',
    'token'
)
# 支持跨域配置结束

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',
]

3. 同时这个项目是用到mysql 数据库，所以还要再配置数据库，这里首先创建数据库

mysql -uroot -p123456789 #进入数据库
create database ats_test； #创建数据库ats_test

4。在settings里配置数据库


DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'ats_test',
        'USER': 'root',
        'PASSWORD': '123456789',
        'HOST': '127.0.0.1',
    }
}

在settings里导入，pymysql模块

import pymysql
 
pymysql.install_as_MySQLdb()

5.这时候Django前期的准备工作，已经差不多了。接下来就可以编写代码，首先是在应用文件夹myApp里的model.py文件里，用ORM模型编写操作数据库的代码，编写一个简单的图书类，添加两个字段，图书名称 book_name，和添加时间 add_time

from django.db import models
 
# Create your models here.
 
class Book(models.Model):
    book_name = models.CharField(max_length=64)
    add_time = models.DateTimeField(auto_now_add=True)

6.在myApp文件夹下的views里我们新增两个接口，一个是show_books返回所有的书籍列表（通过JsonResponse返回能被前端识别的json格式数据），另一个是add_book接受一个get请求，往数据库里添加一条book数据：