Django+Vue+Mysql服务器搭建

Django+Vue+Mysql服务器搭建教程。

Django 项目初始化

初始化 Django 项目

首先创建虚拟环境，然后在虚拟环境中安装 django：

python -m venv venv
source venv/bin/activate
pip install django

可以使用 deactivate 退出虚拟环境。
创建 django 项目：

django-admin startprject your_project_name

执行上述命令后，你将会看到一个自动创建的目录 your_project_name，自动创建的目录结构如下：

your_project_name/
    manage.py
    your_project_name/
        __init__.py
        settings.py
        urls.py
        asgi.py
        wsgi.py

创建项目中的一个应用：

python manage.py startapp your_app

执行上述命令后你会获得一个新的 your_app 目录，具体目录结构如下：

your_app/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py

至此，项目初始化完成，接下来需要编写视图：

1. 在 views.py 中添加处理函数
2. 在 views.py 同级目录下新建 urls.py 添加对应的路径，关联 views.py 中定义的函数
3. 在跟目录的 urls.py 中指定 your_app.urls 模块
   上述步骤具体代码如下：

# your_app/views.py
from django.http import HttpResponse


def index(request):
    return HttpResponse("Hello, world. You're at the polls index.")

# your_app/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

# your_project/urls.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('polls/', include('polls.urls')),
    path('admin/', admin.site.urls),
]

连接数据库

默认的 Django 使用 Sqlite3 作为后端数据库，默认配置如下：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

如果使用 MySQL 数据库，则需要以下配置：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'your_database_name_in_mysql',
        'USER': 'your_username',
        'PASSWORD': 'your_password',
        'HOST': 'your_mysql_server_ip',
        'PORT': 3306,
    }
}

定义你的数据

在 your_app/models.py 中创建属于你的数据结构，例如：

from django.db import models 

class YourClass(models.Model):
    '''django 会自动创建主键，此处只需要创建你需要的字段即可'''
    text = models.TextField()

现在 your_project/settings.py 中的 INSTALLED_APPS 字段中注册激活你的应用：

INSTALLED_APPS = [
    'your_app.apps.YourAppConfig',
    ...
]

使用 python manage.py makemigration your_app 确认是否需要进行数据修改。
使用 python manage.py migrate your_app 执行前面列出的修改内容。

导入你的数据

单个数据的导入，首先用 pyton manage.py shell 进入django 的交互式命令行：

>>> from your_app.models import YourClass           # 导入数据结构
>>> instance_yc = YourClass(text='this is a text')  # 实例化数据结构
>>> instance_yc.save()                              # 保存到数据库

批量导入数据

>>> from your_app.models import YourClass
>>> objs_to_save = []
>>> for each in data:
...     instance = YourClass(text=each)
...     objs_to_save.append(instance)
...
>>> objs = YourClass.objects.bulk_create(objs_to_save)  # 批量上传

创建管理员帐号和注册你的数据模型

使用 python manage.py createsuperuser 创建一个管理员用户。
在 your_app/admin.py 中添加 admin.site.register(YourClass) 即可添加你的数据结构到后台管理界面，可以使用后台管理界面方便地管理。

修改响应方式为 JsonResponse

形如：

from django.http import JsonResponse
from django.views.decorators.http import require_http_methods

@require_http_methods(["GET"])
def index(request):
    response = {}
    response['msg'] = "This is an index page."
    return JsonResponse(response)

至此，django 项目初始化完成，接下来看如何建立 vue 项目并且与 django 后端交互。

Vue 项目初始化

使用模板 vue-admin-template 进行前端开发，现在需要注意的问题有两个：

• vue 与后端 Django 通信
• 跨域问题

配置 vue 与后端 Django 通信

需要修改两个位置：

.env.dev 
src/utils/request.Vue  baseUrl

将此处两个地址改为后端地址即可访问后端获取数据，实现前后端通信。

跨域问题

使用 django-cors-headers 实现跨域问题，首先需要安装该包：

pip install django-cors-headers

然后需要对 Django 中的 settings 文件进行设置：

INSTALLED_APPS = [
    ...
    'corsheaders'，
    ...
 ]

# 添加中间件
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',# 默认
    'django.contrib.sessions.middleware.SessionMiddleware', # 默认

    'corsheaders.middleware.CorsMiddleware',# 默认
    # 注意顺序，即在上一个的下面
    'django.middleware.common.CommonMiddleware', # 新增 ✔

    'django.middleware.csrf.CsrfViewMiddleware',# 默认
    'django.contrib.auth.middleware.AuthenticationMiddleware',# 默认
    'django.contrib.messages.middleware.MessageMiddleware', # 默认
    'django.middleware.clickjacking.XFrameOptionsMiddleware',# 默认
    'django.middleware.common.CommonMiddleware',# 默认
]

# 跨域增加忽略
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',
)