Python Web前后端分离框架Django+Vue搭建

Python Web前后端分离框架Django+Vue搭建

对前面所学知识的归纳整理，感兴趣的可以看看，欢迎指正。

一、前后端分离框架介绍

本项目基于 Python 的 Web 框架开发，采用前后端分离的开发模式，前后端之间通过可开放的 Restful API 实现数据交互。

后端采用 Python 的 Django Web 框架开发，可配合 redis 使用 Celery 作为异步任务调度模块实时查询数据。

前端采用Vue.js框架开发，基于 Vue-element-admin 开源项目二次开发，以 B/S 模式提供可视化的数据查询结果。

数据库基于MySQL和Redis，MySQL用于存储和管理系统资源数据，Redis用于存储和更新Celery队列执行的结果。

最后在自建的Linux服务器上基于 Nginx+uWSGI 完成部署。
​
该前后端框架使用 Vue.js 作为前端渲染，替换了 Django 的后端模板引擎渲染，通过 Restful API 进行数据交互，实现前后端解耦，综合起来就是： M(Django) + C(Django) + MVVM (Vue.js)。

二、搭建开发环境

1、创建并激活虚拟环境

在windows环境中，可使用 python venv 或 conda 创建虚拟环境，这里以 conda 为例（使用 conda 命令前需先安装 Anaconda ）。运行以下命令创建虚拟环境，jk2 为项目名称。

> conda create -n jk2 python
> activate jk2

python -V

接下来安装 Django 3.2 版本。

> pip install django==3.2
> python

>>> import django   // 导入django 
>>> django.VERSION    // 查看django版本

pip install mysqlclient

2、数据库配置

后端支持多种数据库，这里以 MySQL 为例。创建本项目的本地数据库（需要先安装 MySQL），运行以下命令创建数据库。

> mysql -uroot -p
# 输入密码
mysql> create database jk2 default charset=utf8mb4;
mysql> flush privileges;

3、搭建前端 vue.js 环境

node -v

npm install --global vue-clivue

三、搭建 Django+Vue.js 项目

1、创建 django 后端

> django-admin startproject jk2

进入项目根目录，创建一个 app 作为项目后端。

> cd jk2
> mkdir backend
> python manage.py startapp account

backend/account/apps.py

class AccountConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'backend.account'

backend/accounturls.py

from django.urls import path, re_path
from backend.account import views


urlpatterns = [
]

jk2/settings.pyINSTALLED_APPS

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

jk2/settings.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'jk2',  # 数据库名称
        'USER': '********',  # 用户名
        'PASSWORD': '********',  # 密码
        'HOST': 'localhost',  
        'PORT': '3306',
    }
}

同步数据库，在 jk2 虚拟环境运行以下命令：

> python manage.py makemigrations  # 创建同步文件
> python manage.py migrate  # 同步到数据库

python manage.py makemigrations account

jk2/settings.py

# DEBUG = False  # 部署到服务器要改为False
DEBUG = True

ALLOWED_HOSTS = ['localhost', '127.0.0.1']
# ALLOWED_HOSTS = ['192.168.**.**'] # 部署到服务器要改为跟服务器IP一致。

# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False

# session设置
SESSION_COOKIE_AGE = 60 * 60 * 12  # 12小时后session自动失效
SESSION_SAVE_EVERY_REQUEST = True
SESSION_EXPIRE_AT_BROWSER_CLOSE = True  # 关闭浏览器，则COOKIE失效

2、创建 vue.js 前端

使用 vue-cli 创建一个 vue.js 项目作为前端。

# vue-init webpack frontend

即：项目名叫 frontend。总体结构如下：

.
├── backend
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── frontend
│   ├── README.md
│   ├── build
│   │   └── ....
│   ├── config
│   │   ├── dev.env.js
│   │   ├── index.js
│   │   ├── prod.env.js
│   │   └── test.env.js
│   ├── index.html
│   ├── package.json
│   ├── src
│   │   ├── App.vue
│   │   ├── assets
│   │   │   └── logo.png
│   │   ├── components
│   │   │   └── Hello.vue
│   │   └── main.js
│   ├── static
│   └── test
│       └── ...
├── manage.py
└── jk2
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

可以看到项目根目录有两个新文件夹，一个叫 backend ，一个叫 frontend，分别是：

• backend 存放 django 的 app
• frontend vue.js 项目

使用 webpack 打包 vue.js 项。

# cd frontend
# npm install

# npm i element-ui -S //引入element-ui

# npm run build

构建完成会生成一个文件夹名字叫 dist，里面有一个 index.html 和一个文件夹 static 。

3、配置 django 后端 支持 vue.js 前端

配置 django 的 url 路由配置。

jk2/urls.py

from django.contrib import admin
from django.urls import path, re_path, include
from django.views.generic.base import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name="index.html")),  # 服务器配置
    path('api/accounts/', include('backend.account.urls'))
]

然后，配置 django 的模板搜索路径。

jk2/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [],
        'DIRS': ['frontend/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',
            ],
        },
    },
]

npm run buildjk2/settings.py

import os

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),  # 服务器配置
]

python manage.py runserver

4、开发环境配置

npm run buildnpm run dev

jk2/urls.pyjk2/settings.pypython manage.py runserver

frontend/configproxyConfig.js

module.exports = {
  proxyList: {
    '/': {
      target: 'http://127.0.0.1:8000',
      changeOrigin: true,
      pathRewrite: {
        '^/': ''
      }
    }
  }
}

frontend/config/index.js

var proxyConfig = require('./proxyConfig')

module.exports = {
  dev: {
	proxyTable: proxyConfig.proxyList,
  }
}

npm run devpython manage.py runserver

5、初始化数据

创建管理员用户，第一次配置时，首先需要创建一个可以登录管理后台的账号，在cmd中输入：

python manage.py createsuperuser

填写用户名、邮箱和密码，这里我们创建了一个admin账号。这样，我们通过网址 http://127.0.0.1:8000/admin/ 可以访问系统后台，直接修改数据库数据。

四、项目目录说明

• backend：后端功能模块，生成接口供前端调用。
• docs：存放项目文档（自建）。
• frontend：前端Web应用，调用后端接口显示数据，并进行交互。
• services：后端服务模块，封装方法供后端功能模块调用（自建）。
• jk2：存放Django配置文件。

五、后端接口封装

待续…

六、服务器部署

见服务器/02-CentOS上部署及管理Django+vue项目。

学习资料

我如何使用 Django + Vue.js 快速构建项目 https://zhuanlan.zhihu.com/p/24893786

---

​ By Mason-2021.4.30