一、后端建立

一、基本django的project、app创建

1.1 基础创建

1.pycharm打开一个文件夹
2.django-admin startproject backend
3.cd backend
4.django-admin startapp blog

1.2 setting设置app及静态文件base_dir、数据库配置

1.3 django rest framework安装

pip install djangorestframework

1.3 pymysql替换MySQLdb

在工程目录下的init中：
import pymysql
pymysql.install_as_MySQLdb()

如果执行python manage.py runserver报错：django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.解决方式

工程可以正常运行了。

二、使用restframework来添加serializer、viewset、urls

2.0 model里创建数据表类(备注：这里与django不同，需要添加嵌套Meta类)

from django.db import models
# Create your models here.
class Blog(models.Model):
    title = models.CharField(max_length=50)
    content = models.CharField(max_length=500)

    class Meta:
        db_table = 't_blog'#数据库表的名字就是这个了

2.1 在项目app文件下，创建Serializers.py文件

2.1.1 在settings中，INSTALLED_APPS添加‘rest_framework‘

2.1.2 在对应的app中创建serializers.py,指定序列化表model、字段fields

2.1.3 在app的view.py中创建viewset

2.2 在项目url中，添加router,即：router注册到总路由

三、设置跨域 cors headers

3.1 安装django-cors-headers

pip install django-cors-headers

3.2 setting中INSTALLED_APPS，添加corsheaders

INSTALLED_APPS = (
	...
	'corsheaders',
	...
)

3.3 setting中MIDDLEWARE，添加中间件：

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
	...
	'corsheaders.middleware.CorsMiddleware',
	'django.middleware.common.CommonMiddleware',
	...
]

3.4 setting下面添加下面的配置

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
	'*'
)
CORS_ALLOW_METHODS = (
	'DELETE',
	'GET',
	'OPTIONS',
	'PATCH',
	'POST',
	'PUT',
	'VIEW',
)

CORS_ALLOW_HEADERS = (
	'XMLHttpRequest',
	'X_FILENAME',
	'accept-encoding',
	'authorization',
	'content-type',
	'dnt',
	'origin',
	'user-agent',
	'x-csrftoken',
	'x-requested-with',
	'Pragma',
)

二、前端建立

一、安装vue环境：

https://blog.csdn.net/ak739105231/article/details/109693161

二、在后端项目同级目录创建前端项目

vue create frontend