fangboo
fangboo

Vue+Django前后端分离

参考网上其他文章，学习实践

Demo采用Vue作为前端框架，代替Django自身的模版引擎；Django作为服务端提供API接口，使得前后端完全分离，更适合单页应用的开发构建。

单页应用，多页应用的区别：https://www.jianshu.com/p/4c9c29967dd6

一、构建Django项目

  1. Pycharm自动生成Django项目（Django1.11）

  2. 创建一个app，命名为myapp

  3. settings.py配置文件，配置mysql数据库（MySQL5.7），将myapp添加至installed_apps列表中

  4. myapp的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)

    def __str__(self):
        return self.book_name
  1. myapp的views中新增两个结构，一个是show_books返回所有的书籍列表（通过JsonResponse返回能被前端识别的json格式数据），二是add_book接受一个get请求，往数据库里添加一条book数据
from django.shortcuts import render
from .models import Book
from django.views.decorators.http import require_http_methods
from django.core import serializers
from django.http import JsonResponse
import json

# Create your views here.
@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)
  1. myapp目录下，新增一个urls.py文件，把新增的两个接口添加到路由里
from django.conf.urls import url, include
from . import views

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

将myapp下的urls.py添加到系统urls.py中

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

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

在项目根目录下，控制台中输入命令，自动创建数据库

python manage.py makemigrations
python manage.py migrate

  1. 启动项目，通过postman测试一下我们刚写的接口


    屏幕快照 2019-08-19 11.07.50.png
屏幕快照 2019-08-19 11.08.24.png

二、构建Vue前端项目

  1. 在项目根目录下，新建一个前端工程目录
vue-init webpack appfront

进入appfront目录，运行命令

npm install //建立vue所需的node依赖
npm install vue-resource
npm install element-ui
  1. 后缀为vue的文件是Vue.js框架定义的单文件组件，其中