Django Python 作服务端
Vue.js JavaScript 作前端
MySQL 数据库

环境配置

• Django 相关：

  • Python 3.6+
  • Django 2.2 LTS
  • MySQL 5.7

• Vue 相关

  • Node.js 10.16.3 LTS

搭建Django项目

django-admin startproject projectname

进入项目根目录，创建app

python manage.py startapp appname

目录结构如下所示

• myapp

  • migrations (project)

    • _init_ .py
    • admin .py
    • apps .py
    • models .py
    • tests .py
    • views .py

• project (app)

  • _init_ .py
  • _init_ .pyc
  • settings .py
  • settings .pyc
  • urls .py
  • wsgi .py
• manage .py

在settings.py中用MySQL替换默认的SQLite3

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': '',# 名称
        'USER': 'root',
        'PASSWORD': '',# 密码
        'HOST': '127.0.0.1',
    }
}

将app加入installed—apps列表

INSTALLED_APPS = [
    ......

    'appname',
]

在models.py中写model，此处仅为简单示例：

from django.db import models

class SimpleModel(models.Model):
    key_name = models.CharField(max_length=64)

    def __unicode__(self):
    return self.key_name #返回值

对应的，在view.py中新增接口，使用JsonResponse返回Json格式的数据

from django.shortcuts import render
from django.views.decorators.http import require_http_methods
from django.core import serializers
from django.http import JsonResponse
import json
from .models import TheData # 引入数据

@require_http_methods(["GET"])
def show_key_name(request):
    response = {}
    try:
        key_name = TheData.objects.filter()
        response['data'] = json.loads(serializers.serialize("json",key_name))
        response['message'] = 'success'
        response['error_code'] = 0
    except Exception as e:
        response['message'] = str(e)
        response['error_code'] = 1

return JsonResponse(response)

新建文件app/urls.py，将接口添加到路由里

from django.conf.urls import url,
from . import views

urlpatterns = [url(r'show_key_name$',views.show_key_name,),]

将app中urls添加到project/urls.py，完成路由

from django.conf.urls import url, include
from django.contrib import admin
from django.views.generic import TemplateView
import app.urls

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include(app.urls)),
    url(r'^$', TemplateView.as_view(template_name="index.html")),
]

在根目录中，键入

python manage.py makemigrations myapp
python manage.py migrate

启动服务

python manage.py runserver

访问127.0.0.1:8000/api/show_key_name测试接口可用性

搭建Vue.js项目

详见 Vue-cli 快速上手

前后端项目整合

目标：使Django的TemplateView指向Vue打包后的dist文件

配置模版，使Django获取入口页面index.html

在project/settings.py中

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['appfront/dist'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

配置静态文件的搜索路径

在project/settings.py中

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "appfront/dist/static"),
]

Django服务端口：8000
node服务端口：8080

跨域问题

在Django中注入header，使用django-cors-headers解决跨域问题

pip install django-cors-headers

修改settings.py

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',
]
 
CORS_ORIGIN_ALLOW_ALL = True