django中,用vue.js获取后端json数据并加载

最新推荐文章于 2024-04-16 20:11:09 发布

dyh4201

最新推荐文章于 2024-04-16 20:11:09 发布

阅读量3.3k

点赞数

分类专栏： python基础 django vue.js

本文链接：https://blog.youkuaiyun.com/dyh4201/article/details/80751250

版权

python基础同时被 3 个专栏收录

10 篇文章

订阅专栏

django

4 篇文章

订阅专栏

vue.js

1 篇文章

订阅专栏

本文示例了如何在Django项目中使用Vue.js从后端获取JSON数据，并在前端进行加载展示。通过Vue的`vue-resource`插件发起HTTP请求，接收到的数据被渲染到Vue实例的模板中。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
  <ol>
    <li v-for="site in sites">
      [[ site.username ]]
    </li>
  </ol>
</div>

<script>
         var demo = new Vue({
            el: '#app',
            data: {
               sites: [],
               apiUrl: '/api/app/user/?format=json'
            },
            mounted: function() {
               this.getCustomers()
            },
            methods: {
               getCustomers: function() {
                  var _this = this;
                  this.$http.get(this.apiUrl)
                     .then((response) => {
                        _this.sites =response.data;
                        console.log(_this.sites)
                     })
               }
            },
                delimiters : ['[[', ']]'],
         })
</script>
</body>
</html>