django+vue的整合步骤

最新推荐文章于 2025-04-28 09:48:01 发布

weixin_44079503

最新推荐文章于 2025-04-28 09:48:01 发布

阅读量402

点赞数

文章标签： django vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44079503/article/details/124257924

版权

本文详细介绍了如何将Django后端与Vue.js前端进行整合。首先，在index.html模板中引入vue.js和axios.min.js库，接着使用ID和双括号[[ ]]进行数据绑定，最后在script部分编写相关前端逻辑，实现前后端交互。

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

在index.html模板文件中引入vue.js和axios.min.js

<title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>

用id和[[ ]]进行数据绑定

<div id="app2">
    <table>
    <tr>
        <th>#</th>
        <th>标题</th>
        <th>定价</th>
    </tr>
    <tr v-for="book in books">
        <td>[[book.id]]</td>
        <td>[[book.title]]</td>
        <td>[[book.price]]</td>

    </tr>
    </table>
</div>

写script

<script>
    var app1=new Vue({
        el:"#app2",
        delimiters:["[[","]]"],
        data:{
          books:[]
        },
        mounted:function(){
            this.fetchData();
        },
        methods:{
            fetchData (){
                axios.get("/uav/api/books/").then(response=>{
                   this.books=response.data;
                }),err=>{
                    console.log(err);
                };
            }
        }
    });
</script>