django+vue项目搭建实现前后端通信

下面让我来详细讲解一下如何使用 Django 和 Vue.js 搭建前后端通信的完整攻略。

1. 准备工作

在开始之前，需要确保本地已经安装了以下软件：
- Python 3
- pipenv 或 virtualenv
- Node.js
- Vue CLI

2. 后端 Django 项目搭建

首先需要创建一个 Django 项目，可以直接使用命令行创建：

django-admin startproject myproject

接着创建一个应用：

python manage.py startapp myapp

在项目中安装 Django REST framework 和 django-cors-headers ，这两个库分别用于快速构建 RESTful API 和处理跨域资源共享请求。

pipenv install djangorestframework
pipenv install django-cors-headers

在 myproject/settings.py 中添加以下内容：

INSTALLED_APPS = [
    # ...
    'rest_framework',
    'corsheaders',
]

MIDDLEWARE = [
    # ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True

然后在 myapp/views.py 中编写一个示例 API：

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def hello(request):
    return Response({'message': 'Hello World!'})

在 myapp/urls.py 中添加以下内容：

from django.urls import path
from .views import hello

urlpatterns = [
    path('hello/', hello),
]

3. 前端 Vue 项目搭建

在开始前端项目之前，需要确保已经安装了 Vue CLI ，可以使用以下命令全局安装：

npm install -g @vue/cli

在命令行中使用以下命令创建一个基于 webpack 模板的 Vue 项目：

vue init webpack myvueapp

创建完毕后安装必要的库：

cd myvueapp
npm install axios
npm install vuex --save

4. 前后端通信

为了在前端使用此 API ，需要使用 axios 发送 HTTP 请求，并处理响应。

在 Vue 中，可以将 HTTP 请求封装在一个公共服务对象（src/services/ApiService.js），如下所示：

import axios from 'axios'

const API_URL = 'http://localhost:8000/api'; // Django API URL

class ApiService {
  get(url) {
    const headers = { 'Content-Type': 'application/json' }
    return axios.get(`${API_URL}/${url}`, { headers })
  }
}

export default new ApiService()

接着在 Vuex 存储中使用这个服务对象，如下所示：

import Vue from 'vue'
import Vuex from 'vuex'
import ApiService from '@/services/ApiService'

Vue.use(Vuex)

const state = {
  message: ''
}

const mutations = {
  setMessage(state, data) {
    state.message = data
  }
}

const actions = {
  fetchMessage({ commit }) {
    return ApiService.get('hello/')
      .then(response => {
        commit('setMessage', response.data.message)
      })
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

最后在 Vue 组件中使用该存储对象，如下所示：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex'

    export default {
      name: 'Hello',
      computed: mapState(['message']),
      methods: mapActions(['fetchMessage']),
      created() {
        this.fetchMessage()
      }
    }
</script>

在以上示例中，代码展示了如何在 Vue 中使用 axios 获取来自 Django API 的信息，并存储该信息到 Vuex 存储中，最终在 Vue 组件中渲染展示。

5. 示例说明

下面是两个使用 Django 和 Vue.js 搭建前后端通信的示例：

示例一：TodoList

在这个示例中，我们将创建一个 Todo List 回应 API，然后在 Vue 中使用此 API 获取 Todo 列表并展示。

首先创建 Django API：

from django.http import JsonResponse

todos = ['Todo 1', 'Todo 2', 'Todo 3']

def todo_list(request):
    return JsonResponse({'todos': todos})

接着在 Vue 组件中展示 TodoList：

<template>
  <div class="todolist">
    <ul>
      <li v-for="todo in todos" :key="todo">{{ todo }}</li>
    </ul>
  </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex'

    export default {
      name: 'TodoList',
      computed: mapState(['todos']),
      methods: mapActions(['fetchTodos']),
      created() {
        this.fetchTodos()
      }
    }
</script>

在 Vuex 存储中处理 Todos：

import Vue from 'vue'
import Vuex from 'vuex'
import ApiService from '@/services/ApiService'

Vue.use(Vuex)

const state = {
  todos: []
}

const mutations = {
  setTodos(state, data) {
    state.todos = data
  }
}

const actions = {
  fetchTodos({ commit }) {
    return ApiService.get('todo-list/')
      .then(response => {
        commit('setTodos', response.data.todos)
      })
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

示例二：登录和认证

在这个示例中，我们将创建一个用户登录和认证回应 API，在 Vue 组件中，用户输入他们的凭证和密码，然后将这些信息提交到 Django API 完成用户认证。

开始创建 Django API：

from django.contrib.auth import authenticate, login
from django.http import JsonResponse

def login_user(request):
    username = request.POST.get('username')
    password = request.POST.get('password')
    user = authenticate(request, username=username, password=password)

    if user is not None:
      login(request, user)
      return JsonResponse({'message': 'Authenticated'})
    else:
      return JsonResponse({'message': 'Not authenticated'})

接着在 Vue 上面创建登录和认证表单：

<template>
  <div class="login-form">
    <form>
      <input type="text" placeholder="Username" v-model="username" />
      <input type="password" placeholder="Password" v-model="password" />
      <button type="submit" @click.prevent="submitForm">Login</button>
    </form>
  </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex'

    export default {
      name: 'LoginForm'
      data() {
        return {
          username: '',
          password: ''
        }
      },
      methods: {
        ...mapActions(['login']),
        submitForm() {
          this.login({ username: this.username, password: this.password })
        }
      }
    }
</script>

最后在 Vuex 存储中处理登录和认证：

import Vue from 'vue'
import Vuex from 'vuex'
import ApiService from '@/services/ApiService'

Vue.use(Vuex)

const state = {
  authenticated: false
}

const mutations = {
  setAuthenticated(state, data) {
    state.authenticated = data
  }
}

const actions = {
  login({ commit }, { username, password }) {
    return ApiService.post('login/', { username, password })
      .then(response => {
        if (response.data.message === 'Authenticated') {
          commit('setAuthenticated', true)
        }
      })
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

以上示例介绍了如何使用 Django 和 Vue.js 搭建前后端通信，您可以根据您的需求进一步拓展，希望这篇攻略对你有所帮助。