python django框架+vue.js前后端分离_python前后端分离开发vue+django跨域

本文用于学习django+vue.js实现web前后端分离协作开发。以一个添加和删除数据库书籍应用为实例。

django框架官方地址：www.djangoproject.com/

vue.js 框架官方地址：cn.vuejs.org/

一、构建django项目

1. 创建工程文件和APP

创建django_vue

django-admin startproject django_vue
1

进入django_vue，创建虚拟环境django_vue_env

pip install virtualenv  #安装
virtualenv django_vue_env
1
2

激活虚拟环境,并安装django

source ./django_vue_env/bin/activate
1

安装 django、后面用到的django-cors-headers（跨域）、requests

创建django app

python manage.py startapp app
1

我们的目录应该是这样的，appfront为vue项目会在后面创建。

数据库我们使用默认sqlite3 即可，如需要变更可在setting.py中databases配置。

添加app到INSTALLED_APPS

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app'
]
1
2
3
4
5
6
7
8
9

添加数据库模型,包含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)

    def __str__(self):
        return self.book_name
1
2
3
4
5
6
7
8
9

做数据库迁移

python manage.py makemigrations app
python manage.py migrate
1
2

编写views.py添加 show_books 和add_book两个api接口，通过JsonResponse将请求数据返回