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 搭建前后端通信,您可以根据您的需求进一步拓展,希望这篇攻略对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:django+vue项目搭建实现前后端通信 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • Vue js如何用split切分并去掉空值和item的空格

    首先,我们需要明确split是字符串的一个方法,Vue js并不提供这个方法,我们可以利用JavaScript语言特性来进行字符串分割和操作。 下面是如何使用split方法来切分字符串并去掉空值和item的空格的完整攻略: 1.使用split方法分割字符串 我们需要对目标字符串使用split方法,将字符串根据指定的分割符分割成一个数组。 var str = …

    Vue 2023年5月27日
    00
  • 你知道Vue中神奇的$set是如何实现的吗?

    当你使用Vue的时候,可能会遇到一种情况:当向一个已经定义好的Vue实例中给不存在的属性赋值时,这个属性不会自动响应式地更新视图。这是因为Vue在实例化时只对已经存在的属性设置了响应式,如果后续添加了新的属性,就需要手动调用$set去设置响应式。 $set实现的原理是通过调用对象的defineReactive()方法,将新增的属性动态转换成getter/se…

    Vue 2023年5月29日
    00
  • Vue项目配置router.js流程分析讲解

    Vue项目可以使用Vue Router来实现页面的路由管理。在配置Vue项目中使用Vue Router,需要在项目中引入Vue Router并在router.js文件中进行路由的配置。下面是Vue项目配置router.js的详细攻略: 安装Vue Router 在Vue项目中使用Vue Router 需要先安装Vue Router。可以使用npm来进行安装,…

    Vue 2023年5月28日
    00
  • vue以组件或者插件的形式实现throttle或者debounce

    实现throttle或者debounce可以让我们在处理一些频繁触发的事件时,能够避免多次调用同一个方法。Vue框架本身并不内置支持throttle或者debounce的方法,但我们可以用组件或者插件的形式来实现。 以下是基于组件的实现攻略: 创建一个throttle或者debounce的组件,并在created钩子中初始化,通过watch监听传入的事件名,…

    Vue 2023年5月28日
    00
  • Vue3响应式对象Reactive和Ref的用法解读

    Vue3响应式对象Reactive和Ref的用法解读 什么是Vue3的响应式对象? Vue3中的响应式对象是指一种特殊的JavaScript对象,它可以被Vue3追踪其变化并进行响应式渲染。在Vue2中,响应式数据的实现是通过ES5提供的Object.defineProperty()方法来实现的,而在Vue3中,响应式数据的实现则是依赖于ES6中的Proxy…

    Vue 2023年5月28日
    00
  • vue-cli3全面配置详解

    vue-cli3全面配置详解 简介 vue-cli3是vue官方提供的脚手架工具,它可以帮助我们快速搭建一个vue项目框架,包含项目中所需的各种配置项。本文将对vue-cli3的全面配置进行详细讲解,帮助初学者快速上手。 安装 若未安装node.js和npm,需先安装node.js和npm,安装方法可参照官网。 全局安装vue-cli3: npm insta…

    Vue 2023年5月28日
    00
  • Vue this.$router.push(参数)实现页面跳转操作

    当我们使用Vue.js构建单页面应用时,有时需要在不同的页面之间进行路由跳转。Vue Router提供了一些方法来实现这一功能,其中之一是$this.$router.push()方法。以下是关于如何使用$this.$router.push()方法实现页面跳转操作的完整攻略。 前置准备 要使用Vue Router,需先安装Vue Router模块并配置路由。 …

    Vue 2023年5月27日
    00
  • Android判断json格式将错误信息提交给服务器

    当我们使用Android App与服务器进行数据交互的过程中,有时候会出现Json数据格式错误的情况。这时候我们需要在App中进行判断,将错误信息提交给服务器以便进行修复。下面是针对此情况的完整攻略: 判断Json格式是否错误 在Android App中,我们可以使用try…catch语句块来判断Json格式是否错误。具体方法如下所示: try { JS…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部