React+Django搭建个人网站01：Django开发环境搭建

https://www.violety.cn/articles/3

1.建立Django工程

我在ubuntu20.04下进行开发，之后的开发记录也是在ubuntu中，windows同样可以参考，二者大同小异

用pycharm新建django工程

或用django-admin工具新建工程，命令行输入

django-admin startproject my_website

得到的工程结构如下（venv是python虚拟环境）：

pycharm运行工程或输入

python manage.py runserver

开启django自带的开发服务器
浏览器输入127.0.0.1:8000,看到下面的网页，第一步完成，下面开始配置数据库

2.配置MySQL数据库

这里使用MySQL8作为数据库，如果想使用其他数据库可以参考django官方文档-数据库

首先安装MySQL，Ubuntu20.04默认存储库中MySQL版本是8.0，可以直接输入下面内容安装

sudo apt update
sudo apt install mysql-server

安装好后自动运行，其他操作系统安装方式可以自行百度 之后设置root密码，这个地方是很久之前做的，记不太清，如果不行可以百度其他文章

mysql -u root -p    # 登录mysql，初始密码为空

use mysql;
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '你的密码';
flush privileges;

然后用新的密码登录MySQL，创建一个数据库，命名为mywebsite

create database mywebsite;

看到数据库创建完成，接下来安装python MySQL驱动
为了查看和修改数据库方便，建议使用pycharm专业版的database工具或DBeaver软件

pip install mysqlclient

修改 settings：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'mywebsite',
        'USER': 'root',
        'PASSWORD': '# 你的密码',
        'HOST': '127.0.0.1',
        'PORT': '3306',
    }
}

运行 python manage.py migrate 初始化表，此时的数据库：

3.安装和配置Django-rest-framework

pip install djangorestframework

打开settings.py，找到INSTALLED_APPS，在最前面添加rest_framework

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

4.配置跨域访问cors-headers

什么是跨域？
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。 比如网站域名为 https://www.violety.cn，而为其提供服务的后端api接口地址为http://123.123.123.123:8000，此时访问后端接口就会出现跨域问题。前后端分离开发时，地址通常不同，因此需要配置跨域访问。

cors是是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing），允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。Django第三方库django-cors-headers提供了这一实现

安装和配置django-cors-headers

pip install django-cors-headers

修改settings.py配置：

INSTALLED_APPS = [
    'rest_framework',
    'corsheaders',
    ...
]
...
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
   ...
]

# 添加以下配置
CORS_ALLOW_CREDENTIALS = True  # 后端是否支持对cookie的操作。
CORS_ORIGIN_ALLOW_ALL = True  # 允许请求来源
CORS_REPLACE_HTTPS_REFERER = True  # 配置请求通过django csrf验证
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',
]

5.配置static和media路径

在工程根目录新建static文件夹和media文件夹，static用来存放静态文件（html, css, js, imgs），由于我们用react写前端页面，因此这里主要存放admin管理页面和restframework的调试页面静态文件。media用来存放用户头像、图片、视频、音频等文件。

在settings.py写入以下内容

STATIC_URL = '/static/'
STATICFILES_DIRS = [

]
STATIC_ROOT = BASE_DIR / 'static'

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

修改urls.py内容如下

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls import url
from django.views import static

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^static/(?P<path>.*)$', static.serve, {'document_root': settings.STATIC_ROOT}, name='static'),
    url(r'^media/(?P<path>.*)$', static.serve, {'document_root': settings.MEDIA_ROOT}, name='media'),
]

这样Django的开发环境就建好了，之后再进行React开发环境的搭建

我的个人网站地址：https://www.violety.cn/

我的Github主页：https://github.com/YanZY97/