学习网站项目学习 - 基于Django 和 Vue的前后端数据交互

最新推荐文章于 2025-05-21 09:44:53 发布

原创

最新推荐文章于 2025-05-21 09:44:53 发布 · 5.3k 阅读

73 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用Django和Vue实现前后端数据交互。前端部分涉及视图组件DataTest.vue的创建、router.js路由配置和App.vue的设置，以及axios的安装与使用来获取服务器数据。后端则讲解了路由设计、视图函数的编写，以及处理CORS跨域问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2-1-1 创建视图组件 DataTest.vue

2-1-2 router.js 路由配置

2-1-3 App.vue配置

2-2 使用axios获取数据

2-2-1 axios安装 - npm install axios

一、前后端交互实现思路

1-1 前端思路

创建视图组件，在template内进行数据的渲染

使用axios发送请求到服务器域名地址 - 注意路由的拼接

从后端获取的数据从respons.data内进行获取

1-2 后端思路

解决指定路由的跨域问题

基于DRF获取request内获取前端传输数据，处理之后使用response进行返回

二、前端设计

2-1 默认数据设置

2-1-1 创建视图组件 DataTest.vue

<template>
    <div class="about">
        <h1>This is DataTest</h1>
        {
   
   {d2}}
        <p v-for="d in d1">
            {
   
   {d}}
        </p>
        <button @click="init">点击获取数据</button>

    </div>
</template>

<script>
    export default {
        data:function () {
            return{
                d1:['默认列表数据1','默认列表数据2'],
                d2:'默认字符串',
            }
        }
    }
</script>

<style scoped>

</style>

2-1-2 router.js 路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting