django+vue+vue-resource+django-cors-headers實現先後端分離

PS:網上資料要不殘缺，要不通篇一概的複製。。本身花了幾天時間整理出確切可行方案

參考  https://cloud.tencent.com/developer/article/1005607?fromSource=waitui

　　 https://zhuanlan.zhihu.com/p/24893786

安裝VUE 

首先網上載NODE 安裝NODE

http://nodejs.cn/

安裝VUE.JS

#CMD執行
npm install -g vue-cli  #方法一源在國外至關慢
#方法二速度較快
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g vue-cli
#輸入vue若是有信息安裝成功

建立項目(在 django項目下，與app同級)

vue init webpack django_front(項目文件夾名)

進入到django-front目錄下執行

cnpm install //安裝vue所需要的node依賴

 

 cnpm install //安裝vue所需要的node依賴

 

npm run dev運行

前端設置路由

import Vue from 'vue'
import Router from 'vue-router'
import tomato from '@/components/tomato'
import watermelon from '@/components/watermelon'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/tomato',
      name: 'tomato',
      component: tomato
    },
    {
      path: '/watermelon',
      name: 'watermelon',
      component: watermelon
    }
  ]
})

tomato.vue模板

<template>
  <div class="tomato">
    <img src="../../static/tomato.png"/>
    <h1>{{ msg }}</h1>
        <a
          href="/watermelon"
        >
          西瓜
        </a>
  </div>
</template>

<script>
export default {
  name: 'tomato',
  data () {
    return {
      msg: 'this is tomato'
    }
  }
}
</script>

 

npm run build 生成部屬用的目錄 dist

配置 django 

pip install django-cors-headers #解決跨域問題

修改setting.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  #添加

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['django_front/dist'],   #設定模板路徑
        # 'DIRS': [os.path.join(BASE_DIR,'templates')],
        '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',
            ],
        },
    },
]
STATIC_URL = '/static/'
# Add for vuejs
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "django_front/dist/static"),
]

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'tomato/', TemplateView.as_view(template_name="index.html"),name="index"),
    path(r'watermelon/', TemplateView.as_view(template_name="index.html"),name="index")
]

到此整合完畢python manage.py runserver 8080

訪問127.0.0.1:8080/tomato進行查看

ps 與bootstrap整合將bootstrap源碼的dist文件放到django static目錄便可

django與vue交互簡單演示(基於以上配置完成)

 安裝vue-resource（需在項目目錄裏面，在package.json同級）

npm install vue-resource --save

在入口文件main.js插入

import VueResource from 'vue-resource'
Vue.use(VueResource);

新建路由(router/index.js)submit

import Vue from 'vue'
import Router from 'vue-router'
import tomato from '@/components/tomato'
import watermelon from '@/components/watermelon'
import submit from '@/components/submit'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/tomato',
      name: 'tomato',
      component: tomato
    },
    {
      path: '/watermelon',
      name: 'watermelon',
      component: watermelon
    },
    {
      path: '/submit',
      name: 'submit',
      component: submit
    },
  ]
})

View Code

建立submit模板/components/submit.vue

<template>
<div id="tomato">
  <form @submit.prevent="submit">
      <div class="field">
          書名：
          <input type="text" v-model="book.book_name">
      </div>

      <input type="submit"
             value="提交">
  </form>
  <button v-on:click="display">搜索</button>
  <table v-for="item in books">
    <tr>
      <td>書名:{{ item.fields.book_name}} && 添加時間:{{item.fields.add_time}}</td>
    </tr>
  </table>
</div>
</template>
<script>
  export default {
    data (){
      return {
      books: [],
      book:{
        book_name:null,
      }
    }
    },
//    mounted() {
//      // GET /someUrl
//      this.$http.get('http://127.0.0.1:8000/api/show_books').then(response => {
//        this.books = response.data.list;
//        console.log(this.books[0].fields.book_name);
//        // get body data
//        // this.someData = response.body;
//
//      }, response => {
//        console.log("error");
//      });
//    },
    methods: {
        submit: function() {
          var formData = JSON.stringify(this.book); // 這裏纔是你的表單數據
          //console.log(this.book.book_name);
          console.log(formData);
          this.$http.post('http://127.0.0.1:8000/api/add_book', formData).then((response) => {
              // success callback
              console.log(response.data);
          }, (response) => {
               console.log("error");
              // error callback
          });
        },
        display() {
      // GET /someUrl URL爲django接口地址
        this.$http.get('http://127.0.0.1:8000/api/show_books').then(response => {
          this.books = response.data.list;
          console.log(this.books[0].fields.book_name);
          // get body data
          // this.someData = response.body;

        }, response => {
          console.log("error");
        });
    },

    },
  }
</script>

View Code

npm run build

django上的配置（setting配置以上）

建立數據庫

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

    def __unicode__(self):
        return self.book_name
#執行python manage.py makemigrations blog
#python manage.py migrate

View Code

views.py

# Create your views here.
from django.shortcuts import  render,HttpResponse,redirect
from .apps import AppnameConfig
from blog.models import *
from django.views.decorators.http import require_http_methods
import json
from django.core import serializers
from django.http import JsonResponse
import simplejson
@require_http_methods(["GET",'POST'])
def add_book(request):
    response = {}
    try:
        if  request.method=='POST':
            req = simplejson.loads(request.body)  # json格式傳過來的數
            Book.objects.create(
                **req
            )
            # Book.objects.create(   #x-www-form-urlencoded傳過來的數據
            #     **{"book_name":request.POST.get('book_name')},
            # )
            response['msg'] = 'success'
            response['error_num'] = 0
        if request.method=='GET':
            # book = Book(book_name=request.GET.get('book_name'))
            # book.save()
            Book.objects.create(  # 方法二建議這種，直接將前端字典插入
                **{"book_name":request.GET.get('book_name')},
            )
            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)

View Code

urls.py總路由

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

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include('blog.url_blog')),
    url(r'^$', TemplateView.as_view(template_name="index.html")),
    path(r'tomato/', TemplateView.as_view(template_name="index.html"),name="index"),
    path(r'watermelon/', TemplateView.as_view(template_name="index.html"),name="index"),
    path(r'submit/', TemplateView.as_view(template_name="index.html"),name="index")
]

View Code

子路由url_blog.py

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

View Code

測試

python  manage.py runserver 8000

網頁訪問127.0.0.1:8000/submit

vue與django 實現CSRF認證參考《vue與django CSRF認證》