django and vue联合开发+合并部署

2021年9月17日 19:01 by wst

django

---

django_vue

django/vue合作开发

环境

• python: 3.7.10
• django: 3.2.3
• npm: 6.14.8
• node: 12.16.1

安装步骤

安装Django

1. 创建一个用于Django项目开发的独立虚拟环境，切换到本地开发目录，输入如下命令

# 创建一个名字为vue的虚拟环境
conda create --name=vue python=3.7

2. 运行如下命令，激活虚拟环境

conda activate vue

3. 虚拟环境激活后，在虚拟环境安装Django库

pip install Django

4. 安装完成后，可检查一下版本信息：

python -c "import django;print(django.__version__)"

5. 创建Django后端项目

django-admin startproject django_vue

6. 执行同步数据库文件(Django默认数据库为db.sqlite3)，执行同步过程如下：

cd django_vue
python manage.py migrate

7. 启动Django Server ，验证默认配置是否正常。

python manage.py runserver 8000

8. 打开浏览器，访问 http://localhost:8000

添加django应用

1. 创建Django App，进入django_vue项目主目录，输入如下命令：

python manage.py startapp api_test

2. 把api_test加入到settings文件中的installed_apps列表里：

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

3. 在api_test目录下的models.py里我们简单写一个model如下：

# -*- coding: utf-8 -*-
from django.db import models
class Book(models.Model):
    book_name = models.CharField(max_length=128)
    add_time = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.book_name

只有两个字段，书名book_name和添加时间add_time。 如果没有指定主键的话Django会自动新增一个自增id作为主键。

4. 在api_test目录下的views里我们新增两个接口，一个是show_books返回所有的书籍列表（通过JsonResponse返回能被前端识别的json格式数据）， 二是add_book接受一个get请求，往数据库里添加一条book数据。

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 Book

@require_http_methods(["GET"])
def add_book(request):
    response = {}
    try:
        book = Book(book_name=request.GET.get('book_name'))
        book.save()
        response['msg'] = 'success'
        response['error_num'] = 0
    except  Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1
    return JsonResponse(response)

@require_http_methods(["GET"])
def show_books(request):
    response = {}
    try:
        books = Book.objects.filter()
        response['list'] = json.loads(serializers.serialize("json", books))
        response['msg'] = 'success'
        response['error_num'] = 0
    except  Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1
    return JsonResponse(response)

5. 在api_test目录下，新增一个urls.py文件，把我们新增的两个接口添加到路由里：

from django.urls import include, path
from .views import *

urlpatterns = [
    path(r'add_book$', add_book, ),
    path(r'show_books$', show_books, ),
]

6. 我们还要把api_test下的urls添加到项目django_vue下的urls中，才能完成路由：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include("api_test.urls"))
]

7. 在项目的根目录，输入命令：

python manage.py makemigrations api_test
python manage.py migrate

8. 查询数据库，看到book表已经自动创建了：

"api_test_book"
"auth_group"
"auth_group_permissions"
"auth_permission"
"auth_user"
"auth_user_groups"
"auth_user_user_permissions"
"django_admin_log"
"django_content_type"
"django_migrations"
"django_session"
"sqlite_sequence"

Django生成的表名将以app名加上model中的类名组合而成。

9. 在项目的根目录，输入命令：

python manage.py runserver 8000

启动服务，通过httpie测试一下我们刚才写的两个接口。

10. 通过调用接口向Django App中添加两条书名记录。

http://127.0.0.1:8000/api/add_book?book_name=mikezhou_talk
http://127.0.0.1:8000/api/add_book?book_name=测试开发技术

11. 通过调用 接口，显示Django App中所有书名列表：

{
    "list": [{
        "model": "api_test.book",
        "pk": 1,
        "fields": {
            "book_name": "mikezhou_talk",
            "add_time": "2021-09-14T16:48:11.853Z"
        }
    }, {
        "model": "api_test.book",
        "pk": 2,
        "fields": {
            "book_name": "测试开发技术",
            "add_time": "2021-09-14T16:48:39.424Z"
        }
    }],
    "msg": "success",
    "error_num": 0
}

安装VUE

有关Vue的模块(包括vue)可以使用node自带的npm包管理器安装。推荐使用淘宝的 cnpm 命令行工具代替默认的 npm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、先用cnpm安装vue-cli脚手架工具（vue-cli是官方脚手架工具，能迅速帮你搭建起vue项目的框架）：

cnpm install -g vue-cli

3、安装好后，在django_vue项目根目录下，新建一个前端工程目录：

vue init webpack frontend

在创建项目的过程中会弹出一些与项目相关的选项需要回答，按照真实情况进行输入即可。

4、安装 vue 依赖模块

cd frontend
cnpm install
cnpm install  vue-resource
cnpm install element-ui

5. 现在我们可以看到整个文件目录结构是这样的：

├── api_test
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   ├── models.py
│   ├── __pycache__
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db.sqlite3
├── django_vue
│   ├── asgi.py
│   ├── __init__.py
│   ├── __pycache__
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── frontend
│   ├── build
│   ├── config
│   ├── index.html
│   ├── node_modules
│   ├── package.json
│   ├── package-lock.json
│   ├── README.md
│   ├── src
│   └── static
├── manage.py
└── README.md

本文为了读者方便查看，是直接将vue前端工程放在django项目目录下，实际多人协作开发过程中， 完全是可以放在不同代码仓库下面的。

6. 在frontend目录src下包含入口文件main.js，入口组件App.vue等。后缀为vue的文件是Vue.js框架定义的单文件组件，其中标签中的内容可以理解为是类html的页面结构内容。
7. 在src/component文件夹下新建一个名为Home.vue的组件，通过调用之前在Django上写好的api，实现添加书籍和展示书籍信息的功能。在样式组件上我们使用了饿了么团队推出的element-ui，
8. 这是一套专门匹配Vue.js框架的功能样式组件。由于组件的编码涉及到了很多js、html、css的知识，并不是本文的重点，因此在此只贴出部分代码： Home.vue

   <template>
     <div class="home">
       <el-row display="margin-top:10px">
         <el-input v-model="input" placeholder="请输入书名" style="display:inline-table; width: 30%; float:left"></el-input>
         <el-button type="primary" @click="addBook()" style="float:left; margin: 2px;">新增</el-button>
       </el-row>
       <el-row>
         <el-table :data="bookList" style="width: 100%" border>
           <el-table-column prop="id" label="编号" min-width="100">
             <template slot-scope="scope"> {{ scope.row.pk }}</template>
           </el-table-column>
           <el-table-column prop="book_name" label="书名" min-width="100">
             <template slot-scope="scope"> {{ scope.row.fields.book_name }}</template>
           </el-table-column>
           <el-table-column prop="add_time" label="添加时间" min-width="100">
             <template slot-scope="scope"> {{ scope.row.fields.add_time }}</template>
           </el-table-column>
         </el-table>
       </el-row>
     </div>
   </template>
   
   <script>
   export default {
     name: 'home',
     data () {
       return {
         input: '',
         bookList: []
       }
     },
     mounted: function () {
       this.showBooks()
     },
     methods: {
       addBook () {
         this.$http.get('http://127.0.0.1:8000/api/add_book?book_name=' + this.input)
           .then((response) => {
             var res = JSON.parse(response.bodyText)
             if (res.error_num === 0) {
               this.showBooks()
             } else {
               this.$message.error('新增书籍失败，请重试')
               console.log(res['msg'])
             }
           })
       },
       showBooks () {
         this.$http.get('http://127.0.0.1:8000/api/show_books')
           .then((response) => {
             var res = JSON.parse(response.bodyText)
             console.log(res)
             if (res.error_num === 0) {
               this.bookList = res['list']
             } else {
               this.$message.error('查询书籍失败')
               console.log(res['msg'])
             }
           })
       }
     }
   }
   
   </script>
   
   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped>
     h1, h2 {
       font-weight: normal;
     }
   
     ul {
     list-style-type: none;
     padding: 0;
   }
   
   li {
     display: inline-block;
     margin: 0 10px;
   }
   
   a {
     color: #42b983;
   }
   
   </style>

9. 在src/router目录的index.js中，我们把新建的Home组件，配置到vue-router路由中：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import VueResource from 'vue-resource'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.use(VueResource)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

10. 在src/main.js文件中，导入element-ui、vue-resource库。

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import VueResource from 'vue-resource'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.use(VueResource)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

11. 如果出现跨域问题，需要在Django层注入header，用Django的第三方包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

PS: 注意中间件的添加顺序。

12. 在前端工程frontend目录下，输入npm run dev启动node自带的服务器，浏览器会自动打开， 我们能看到页面(如果不能正确运行，请关注第10步)：

13. 尝试新增书籍，如填入：“自动化测试实战宝典”，新增的书籍信息会实时反映到页面的列表中，这得益于Vue.js的数据双向绑定特性。
14. 在前端工程frontend目录下，输入npm run build，如果项目没有错误的话，就能够看到所有的组件、css、图片等都被webpack自动打包到dist目录下了：

对于已经存在的前端项目，直接：

cd prject_home
npm install
npm run build

整合Django和Vue.js前端

目前我们已经分别完成了Django后端和Vue.js前端工程的创建和编写，但实际上它们是运行在各自的服务器上，和我们的要求是不一致的。因此我们须要把Django的`TemplateView指向我们刚才生成的前端dist文件即可。

1. 找到project目录的urls.py，使用通用视图创建最简单的模板控制器，访问 『/』时直接返回 index.html:

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include("api_test.urls")),
    path('', TemplateView.as_view(template_name="index.html"))
]

2. 上一步使用了Django的模板系统，所以需要配置一下模板使Django知道从哪里找到index.html。在project目录的settings.py下：

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

3. 我们还需要配置一下静态文件的搜索路径。同样是project目录的settings.py下：

# Add for vuejs
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

4. 配置完成，我们在project目录下输入命令python manage.py runserver，就能够看到我们的前端页面在浏览器上展现：

注意此时服务的端口已经是Django服务的8000而不是node服务的8080了，说明我们已经成功通过Django集成了Vue前端工程。

部署

前置工作

1. 添加以下配置项到settings.py中

# 部署时将作为放置静态文件的目录
STATIC_ROOT = 'static_deploy'

2. 安装uwsgi，建议使用conda安装。

conda install uwsgi==2.0.19 -n vue

3. 配置uwsgi启动文件:uwsgi.ini

[uwsgi]
# 项目根目录路径(full path)
chdir           = /data/django_vue
# Django的 wsgi 文件
module          = django_vue.wsgi:application
# virtualenv目录 (full path)
home            = /data/anaconda3/envs/vue
# 自动载入
py-autoreload=1
# 设置日志
daemonize   = %(chdir)/logs/uwsgi.log
log-maxsize = 5000000
master          = true
# 最大工作进程数（CPU密集型建议设为CPU核心数，IO密集型建议设为CPU核心数的两倍）
processes       = 1
# unix套接字文
socket          = %(chdir)/socket.sock
# socket文件权限
chmod-socket    = 777
# 退出时清空环境
vacuum          = true
# 用以重启服务
stats=%(chdir)/uwsgi.status
pidfile=%(chdir)/uwsgi.pid

4. 配置nginx，内容如下：

server {                                                                                                                                                                                                             
    listen 80;                                                                                                                                                                                                       
    server_name django_vue.com www.django_vue.com;
    access_log /data/django_vue/logs/access.log;
    error_log /data/django_vue/logs/error.log;                                                                                                                                                                     
    root /data/django_vue;

        location  /static/ {
            #如果你的static目录不在root里，可以配置 alias /path/to/your/mysite/static;
            alias /data/django_vue/static_deploy/;
        }

        location / {
            uwsgi_pass  unix:///data/django_vue/socket.sock;
            include uwsgi_params; # the uwsgi_params file you installed
        }
}

配置步骤

1. 构建前端代码

cd frontend
npm run build

2. 收集静态文件

# 此时静态文件会全部放到static_deploy中
python manage.py collectstatic

3. 启动uwsgi服务

uwsgi --ini /data/django_vue/uwsgi.ini

 

更新部署

1. 拉取前端代码到frontend目录中
2. 构建前端代码
3. 收集静态文件
4. 重启uwsgi

总结

该实战示例为大家充分展示了现在主流的前后端分离方式，由前端框架，如Vue.js来构建实现前端界面，再通过后端框架， 如Django来实现API数据提供，两者通过接口进行通讯、相辅相成、最终实现一个完整Web项目。

附：源码下载地址，关注公众号，回复“django_vue”

---