手把手Django+Vue前后端分离开发入门(附demo)

python manage.py runserver

npm run dev

pip install django-rest-framework

python manage.py startapp books  
cd books  
touch urls.py

# book_demo/settings.py  
INSTALLED_APPS = [  
    'django.contrib.admin',  
    'django.contrib.auth',  
    'django.contrib.contenttypes',  
    'django.contrib.sessions',  
    'django.contrib.messages',  
    'django.contrib.staticfiles',

    # demo add  
    'rest_framework',  
    'books',  
]

# book_demo/settings.py  
from django.contrib import admin  
from django.urls import path, include

urlpatterns = [  
    path('admin/', admin.site.urls),  
    path('api/', include('books.urls')), # demo add  
] 

# books/models.py  
from django.db import models

class Books(models.Model):  
    name = models.CharField(max_length=30)  
    author = models.CharField(max_length=30, blank=True, null=True)

# books/serializer.py  
from rest_framework import serializers

from books.models import Books

class BooksSerializer(serializers.ModelSerializer):  
    class Meta:  
        model = Books  
        fields = '__all__'

# books/views.py  
from rest_framework import viewsets

from books.models import Books  
from books.serializer import BooksSerializer

class BooksViewSet(viewsets.ModelViewSet):  
    queryset = Books.objects.all()  
    serializer_class = BooksSerializer

# books/urls.py  
from django.urls import path, include  
from rest_framework.routers import DefaultRouter

from books import views

router = DefaultRouter()  
router.register('books', views.BooksViewSet)

urlpatterns = [  
    path('', include(router.urls)),  
]

python manage.py makemigrations  
python manage.py migrate  
python manage.py runserver

// appfront/src/components/HelloWorld.vue  
<template>  
  <div class="hello">  
    <h1>{{ msg }}</h1>  
    <!-- show books list -->  
    <ul>  
      <li v-for="(book, index) in books" :key="index" style="display:block">  
        {{index}}-{{book.name}}-{{book.author}}  
      </li>  
    </ul>  
    <!-- form to add a book -->  
    <form action="">  
      输入书名：<input type="text" placeholder="book name" v-model="inputBook.name"><br>  
      输入作者：<input type="text" placeholder="book author" v-model="inputBook.author"><br>  
    </form>  
    <button type="submit" @click="bookSubmit()">submit</button>  
  </div>  
</template>

<script>  
export default {  
  name: 'HelloWorld',  
  data () {  
    return {  
      msg: 'Welcome to Your Vue.js App',  
      // books list data  
      books: [  
        {name: 'test', author: 't'},  
        {name: 'test2', author: 't2'}  
      ],  
      // book data in the form  
      inputBook: {  
        "name": "",  
        "author": "",  
      }  
    }  
  },  
  methods: {  
    loadBooks () {...}, // load books list when visit the page  
    bookSubmit () {...} // add a book to backend when click the button  
  },  
  created: function () {  
    this.loadBooks()  
  }  
}  
</script>  
...

pip install django-cors-headers

# books_demo/settings.py  
INSTALLED_APPS = [  
    ...  
    # demo  
    'corsheaders',  
    ...  
]

MIDDLEWARE = [  
    'corsheaders.middleware.CorsMiddleware', # 需注意与其他中间件顺序，这里放在最前面即可  
    ...  
]

# 支持跨域配置开始  
CORS_ORIGIN_ALLOW_ALL = True  
CORS_ALLOW_CREDENTIALS = True

cnpm install axios

// appfront/src/api/index.js  
import Vue from 'vue'  
import Axios from 'axios'

const axiosInstance = Axios.create({  
    withCredentials: true  
})

// 通过拦截器处理csrf问题，这里的正则和匹配下标可能需要根据实际情况小改动  
axiosInstance.interceptors.request.use((config) => {  
    config.headers['X-Requested-With'] = 'XMLHttpRequest'  
    const regex = /.*csrftoken=([^;.]*).*$/  
    config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1]  
    return config  
})

axiosInstance.interceptors.response.use(  
    response => {  
        return response  
    },  
    error => {  
        return Promise.reject(error)  
    }  
)

Vue.prototype.axios = axiosInstance

export default axiosInstance

// appfront/src/api/api.js  
import axiosInstance from './index'

const axios = axiosInstance

export const getBooks = () => {return axios.get(`http://localhost:8000/api/books/`)}

export const postBook = (bookName, bookAuthor) => {return axios.post(`http://localhost:8000/api/books/`, {'name': bookName, 'author': bookAuthor})}

// appfront/src/components/HelloWorld.vue  
<script>  
import {getBooks, postBook} from '../api/api.js'  
export default {  
  ...  
  methods: {  
    loadBooks () {  
      getBooks().then(response => {  
        this.books = response.data  
      })  
    }, // load books list when visit the page  
    bookSubmit () {  
      postBook(this.inputBook.name, this.inputBook.author).then(response => {  
        console.log(response)  
        this.loadBooks()  
      })  
    } // add a book to backend when click the button  
  },  
  ...  
}  
</script>  

npm run build

# books_demo/books_demo/settings.py  
...  
TEMPLATES = [  
    {  
        'BACKEND': 'django.template.backends.django.DjangoTemplates',  
        'DIRS': [os.path.join(BASE_DIR, 'dist')], # demo add  
        ...  
    },  
]  
...  
STATICFILES_DIRS = [  
    os.path.join(BASE_DIR, 'dist/static'),  
]  
..

# books_demo/books_demo/urls.py  
...  
from django.views.generic.base import TemplateView

urlpatterns = [  
    ...  
    path('', TemplateView.as_view(template_name='index.html'))  
]