Django+VUE交互——第一部分

一、背景

主要介绍如何使用后端Django + 前端Vue 的技术栈快速地搭建起一套web项目的框架。

为什么使用Django和Vue?

Django是Python体系下最成熟的web框架之一，由于Python语言的易用性和受众面广，Django框架也因其能够快速开发网站应用的特性成为了中小型网站开发框架首选。

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

使用Vue作为前端框架，代替Django本身较为孱弱的模板引擎，Django则作为服务端提供api接口，使得前后端实现完全分离，更适合单页应用的开发构建。

二、环境准备

Django:

Python 3.7

Django 2.2.5 使用python自带的pip安装器安装。命令：pip install django即可安装最新版本的django

Mysql 5.7 安装连接Mysql的库 pip3 install pymysql

Vue:

Node.js v14.3.0

官网下载：http://nodejs.cn

有关Vue的模块(包括vue)我们都使用node自带的npm包管理器安装

三、构建Django项目

首先使用Django来搭建web后端api框架。

1、mac os系统上执行pip3安装：

$pip3 install Django

2、查看安装是否OK：

$python3 -m django --version

3、创建工程（工程名为ATS_Web）

$django-admin startproject ATS_Web

如果命令不存在，寻找到django-admin,用下面的命令：

$ python3 /Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages/django/bin/django-admin.py startproject ATS_Web

4、创建应用（一个工程有多个应用）

$cd /Users/mac/ATS_Web

$python3 manage.py startapp myApp

5、在ATS_Web下的settings.py配置文件中，把默认的sqllite3数据库换成我们的mysql数据库, 并把app加入到installed_apps列表里：

# Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databases
 
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'ats_test',
        'USER': 'root',
        'PASSWORD': 'root',
        'HOST': '127.0.0.1',
    }
}


# Application definition
 
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myApp',     #add
]

在 python3 中，连接MySQL的库为pymysql 库，使用pip3 install pymysql 进行安装，直接导入即可使用, 但是在 Django 中，连接数据库时使用的是 MySQLdb 库，需要在setting.py中导入：

import pymysql
 
pymysql.install_as_MySQLdb()

6 、在 app 目录下的 models.py 里我们简单写一个 model 如下：

from django.db import models
 
# Create your models here.
 
class Book(models.Model):
    book_name = models.CharField(max_length=64)
    add_time = models.DateTimeField(auto_now_add=True)

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

from django.shortcuts import render
from django.http import JsonResponse
from django.core import serializers
 
from myApp.models import Book
import json
# Create your views here.
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)
 
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)

8、在project下的urls.py中，添加两个url：

from django.contrib import admin
from django.urls import path
 
from myApp import views as BookView
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('add_book/',BookView.add_book),
    path('show_books/',BookView.show_books),
]