记录一个Vue.js+Python.Django项目的前后端数据传递实现过程。
<div id="app">div>
这样在这个标签内就会引入src文件夹下APP.vue的内容。
在src文件夹下还有一个main.js文件，在这里import一些要用到的模块，比如我们要用ajax实现前后端交互，那么就引入axios模块:
import Axios from 'axios';
接下来我们看APP.vue文件。一个Vue文件主要由三个部分组成，
<template>htmltemplate>
<script>jsscript>
<style>cssstyle>
在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项目里，我们主要操作view.py文件，在这里我们创建一个前端请求的方法：getnewoption。
def getnewoption(request):
if request.method == "POST":
r_list = json.loads(request.body)
arr = []
return HttpResponse(json.dumps(arr, ensure_ascii=False), content_type='application/json', charset='utf-8')
然后在urls.py文件中import这个函数并添加url：
urlpatterns = [
url("^getnewoption/", getnewoption)
]
完事儿。
Original: https://blog.csdn.net/meiyanwan/article/details/122651000
Author: 乐蘼_lemin
Title: Django+Vue.js实现前后端数据传递
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/732953/
转载文章受原作者版权保护。转载请注明原作者出处！