Django+Vue.js实现前后端数据传递

记录一个Vue.js+Python.Django项目的前后端数据传递实现过程。

Vue框架

新建一个Vue框架的前端项目后，在根目录下会有一个index.html文件，在这个文件里我们引入需要的css文件和js文件。
然后在body标签里有一个div块：

<div id="app"></div>

这样在这个标签内就会引入src文件夹下APP.vue的内容。
在src文件夹下还有一个main.js文件，在这里import一些要用到的模块，比如我们要用ajax实现前后端交互，那么就引入axios模块:

import Axios from 'axios';

接下来我们看APP.vue文件。一个Vue文件主要由三个部分组成，

<template>html</template>
<script>js</script>
<style>css</style>

在template标签内就有一个id="app"的div块，我们就在这个块里写HTML部分。
这里用的是element-ui的element-select标签，这是一个下拉选项框，我们设置当点击的时候就会刷新下拉选项的内容：

<el-select v-model="value" :loading="loading" @click="updateOptions()">
	<el-option v-for="item in options" :key="item.id" :label="item.file" :value="item.id"></el-option>
</el-select>

在script标签内：

export default {
  data() {
      return {
        options: [],
        list: [],//传回后端的参数
      };
  },
  methods:{
    //点击后更新下拉选项
    updateOptions(){
      this.list=[{value:''}, {value:''}];//按需修改
      axios.post('http://127.0.0.1:8000/api/getnewoption/', this.list).then(res=>{
        console.log(res);
        this.options=res.data;
      }).catch((mes)=>{
        this.$message.warning("请求失败")
      });},
  }
}

好了，前端差不多就是这样了，接下来我们要到后端接受前端的请求并返回一个新的options。

Django

在一个Django项目里，我们主要操作view.py文件，在这里我们创建一个前端请求的方法：getnewoption。

def getnewoption(request):
    if request.method == "POST":
        r_list = json.loads(request.body)  # 前端向后端发送的参数
        # 对r_list进行操作，结果存入arr。以dict数据类型{'id': '', 'file': ''}格式存储，方便后续取用；
        arr = []  # 后端返回前端的参数
        return HttpResponse(json.dumps(arr, ensure_ascii=False), content_type='application/json', charset='utf-8')

然后在urls.py文件中import这个函数并添加url：

urlpatterns = [
    url("^getnewoption/", getnewoption)
]

完事儿。