前后端开发实践（Vue3 + DRF）下：Vue3 + Vite

原理概述

VUE目录，编辑一个JS的API，通过JS API去读取json数据，返回JS数据，绑定到自定义的VUE组件（FlightPlanList.vue）上，然后通过App.vue展示。

Vue的教程都非常长，讲得很细，看了好几天都没搞懂怎么弄，如果要长期用Vue开发，可以抽空反复看。我这边只是为了实现Demo，跑通流程就行，建议大家直接看菜鸟教程。用Vite创建比较方便。

Vue很重要的一个原理图如下：

Demo介绍

项目目录如下所示：

api.js文件：Vue推荐用axios进行http调用，我折腾了一段时间Jquery后没搞懂就放弃了。下面是使用axios的代码。

坑：注意host不能直接指定后台url的地址，否则会报跨域问题。搜索”Vue3跨域问题”就有很多解决方案。我这里用了一个最简单粗暴的方案，就是将路径修改一下，然后在vite.config.js中通过proxy代理修改/api为http://127.0.0.1:8000。

import axios from 'axios';

let host = '/api';

//获取商品类别信息

export const getFlightPlanList = params => {

return axios.get(`${host}/flightplan/`)

}

FlightPlanList.vue文件：创建一个自定义vue组件如下，然后在App.vue中调用。

<script>

import { getFlightPlanList } from "../api/api";

export default {

  data() {

    return {

      flightplanlist: [

      ],

    };

  },

  components: {},

  props: {},

  created() {

    // 请求航班计划列表

    getFlightPlanList()

      .then((response) => {

        //console.log(response.data);

        // 更新flightplanlist数据

        this.flightplanlist = response.data;

      })

      .catch(function (error) {console.log("getFlightPlanList()  出错了"); });

  },

  watch: {},

  computed: {},

  methods: {},

};

</script>

<template>

  <h1>航班列表</h1>

  <ol>

    <li v-for="item in flightplanlist">

      {{ item.callsign }}--{{ item.depAirport }}--{{ item.depTime }}

    </li>

  </ol>

</template>

<style scoped>

</style>