精华内容
下载资源
问答
  • vue中实现先请求数据渲染dom

    万次阅读 2017-12-14 20:55:42
    在项目中遇到了一个问题,下面是...原因是没有按照 请求数据—>渲染dom—>获取dom的顺序执行,实际的执行顺序是 先获取dom,而此时数组option中还是空的,上面的v-for循环也就没有渲染出dom,所以根本取不到(不理解

    在项目中遇到了一个问题,下面是vue    template中的代码:


     

    我之前的写法是


    这样做的结果是下面取dom的操作,取到的dom都是undefined,也就是没有取到。

    原因是并没有按照 请求数据—>渲染dom—>获取dom的顺序执行,实际的执行顺序是 先获取dom,而此时数组option中还是空的,上面的v-for循环也就没有渲染出dom,所以根本取不到(不理解是为什么)

    后来我又把请求数据写在了created函数中,把取dom的操作写在mounted函数中,竟然还是先执行取dom的操作(是通过alert的顺序来判断执行的顺序),我也很绝望啊



    最后终于找到了解决的办法:


    看到一个别人的回答是:“在数据请求的回调中使用nextTick,在nextTick的回调里试试~”

    还有一个人的回答是:“如果有依赖dom必须存在的情况,就放到mounted(){this.$nextTick(() => { /* code */ })}里面”(这种之前我试过,我太好用,不懂为什么)


    我把这两种方法综合起来,其实主要是第一种方法,发现好用了!

    展开全文
  • 原理: jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据... // 原生ajax请求数据原理: // var xhr = new XMLHttpRequest() // 连接访问地址 // xhr.open('GE...

    原理:

    jQuery的ajax请求:
    complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据):
    return result
    原生的Ajax请求:
      // 原生ajax请求数据原理:
    //     var xhr = new XMLHttpRequest()
            // 连接访问地址
    //     xhr.open('GET','http://localhost:8000/shop/jsonApi')
            // 设置一个监听事件得状态
    //     xhr.onreadystatechange = function(e){
        // 判断请求得状态,达到下面条件即可拿到服务器返回得数据
    //         if(xhr.readyState == 4 && xhr.status==200){
    //             console.log(xhr)
    //             a=JSON.parse(xhr.responseText)
    //             console.log(a)
        // 得到返回得数据后,可以在这里进行dom操作渲染等
    //         }
    //         
    //     }
    //     xhr.send()

     

       
         

    jQuery的Ajax请求仿axios(只是将$换成axios):

    第一种方式:此处为get请求也可以是post请求,参数一是请求的地址,参数而是请求时携带的数据data,then表示
    请求成功后饭回来的数据为res,在该函数里即可做对dom的一系列操作了,不过返回来的数据要经过json解析,因为在后端的时候数据被转成json格式了
            
            $.get('http://localhost:8000/shop/jsonApi',{'username':'admin','password':'admin'}).then(function(res){
                console.log(res)
                console.log(JSON.parse(res))
    //挂载后请求数据渲染页面axios,data部分要用pramas参数,$也就是jQuery方式则不用添加这个参数
                    mounted:function(){
                        axios.get('http://127.0.0.1:8000/axioApi/',{
                            //传入后端的数据前要加一个参数params
                            params:{
                                'data':'nihao',
                                'mas':'keyi'
                            }
                            }).then(function(res){
                            console.log(res)
                        })
                    }

     

            })
     注意:当post请求页面出现下面报错时forbidden:
    的必须写一个安全访问参数到发送的数据里: csrfmiddlewaretoken: '{{ csrf_token }}',为固定用法,此时才能访问到页面并获取页面数据
    function edit(e){
     console.log(e)
    console.log(e.target.dataset.eid)
    }
    function delt(e){
     console.log(e)
     var delid=e.target.dataset.did
     console.log(e.target.dataset.did)
     $.post('/houtai/lxl_delt/',{
     'did':delid,
      csrfmiddlewaretoken: '{{ csrf_token }}',
     }).then(function(res){
     console.log('tag', res)
     })
    
    }

     


    第二种方式:
    参数一位请求的地址后面加一个?之后的都是用户名和密码是post的请求方式,这样就可以不用再写data参数了,下面的和上面的第一种方式一样。
    $.get('http://localhost:8000/shop/jsonApi?username=admin&passoword=132345').then(function(res){
                console.log(res)
                console.log(JSON.parse(res))
            })
     
    vue里前端渲染数据的方式:
    <body>
            <div id="app">
                <h1>{{productname}}</h1>
                <!--<div class="listItem" v-for='(item,index) in listArr' :key='index'>
                    <h1>{{item.title}}</h1>
                    <img :src="item.pic"/>
                </div>-->
            </div>
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        productname:''
                    },
    //              mounted:function(){
    //                  var that = this
    //                  fetch('http://127.0.0.1:5000/rank/0').then(function(res){
    //                      res.json().then(function(res){
    //                          that.listArr = res.data.list
    //                          console.log(res)
    //                      })
    //                  })
    //              }
                    mounted:function(){
                        var that = this
                        // 方式一:原生的fetch
                        // vue里的fetch是一个ie6原生的可直接访问数据,浏览器二次重写方式
                        fetch('http://localhost:8000/shop/jsonApi').then(function(res){
                            // Promise对象是一个异步对象res.json()是一个Promise
                            console.log(res.json())
                            // 下面的才是真正的返回的数据对象
                            res.json().then(function(res){
                                console.log(res)
                        })
                            
    //                      res.json().then(function(res){
    ////                            that.listArr = res.data.list
    //                          console.log(res)
    //                      })
                            
                            console.log(res)
                        })
                    }
                })
    
                // 方式二jQuery
                // vue里调用jQuery请求数据,并渲染页面
                $.get('http://localhost:8000/shop/jsonApi').then(function(res){
                    p = JSON.parse(res)
                    // 改变vue里的productname的值然后渲染页面
                    app.productname = p.name
                })
            </script>
            
        </body>
    View Code

     


     django后端请求的数据路由及方法:http://localhost:8000/shop/jsonApi
    路由:
    在服务端设置可跨域请求条件:
    
    
    import json
    def jsonApi(request):
        p1 = ProductModel.objects.get(pk=2)
        dictObj = {
            'name': p1.name,
            'brief': p1.brief,
            'productImg': str(p1.prodectImg),
            'content': '<h1>图片</h1>'
        }
    
        print(request.GET.get('username'))
        # ensure_ascii设置中文不乱码
        jsonStr = json.dumps(dictObj,ensure_ascii=False)
        # 设置可跨域请求得条件
        result = HttpResponse(jsonStr)
        result['Access-Control-Allow-Origin'] = '*'
        result['Access-Control-Allow-Headers'] = "Content-Type"
    
    django模式:步骤:在models.py建立class表---——》admin.py注册表---——》views.py实例化表增删改查,然后返回视图---》urls.py设置views.py下每一个不同方法的路由,即可

     

    转载于:https://www.cnblogs.com/Dark-fire-liehuo/p/9926410.html

    展开全文
  • 一、如何读出数据并渲染 1、首先在api下建一个js文件,然后在文件里写入拿到的接口,例如 export const getCompanyInfo = () => that.$http("/base/companyInfo", "get"); 2、在前端页面引入请求接口,在此之前...

    一、如何读出数据并渲染

    1、首先在api下建一个js文件,然后在文件里写入拿到的接口,例如

    export const getCompanyInfo = () => that.$http("/base/companyInfo", "get");
    

    2、在前端页面引入请求接口,在此之前需要对数据进行双向绑定,我是用的是v-model,我的数据是在表单<el-input>中存放,简单叙述一下v-model,v-model指令用于表单<input>、<textarea>、<select>元素上创建双向绑定,他会根据空间类型自动选取正确的方法来更新元素。她负责监听用户的输入事件以及更新数据。我是在created()中调用的接口,实现了读出数据并渲染。接下来代码展示。

    第一步
    import {getCompanyInfo} from "api/server/admin";
    第二步
    created(){
        const loading = this.$loading({			//这里有一个等待过程
          lock: true,
          text: "Loading",					
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        getCompanyInfo()
          .then((res) => {
            console.log(res);
            this.formLabelAlign = res.data;   //formLabelAlig是我存放数据的列表
            loading.close();
          })
          .catch((err) => {
            loading.close();
            console.log(err);
          });
    

    这样就可以实现从页面中读出数据并且将数据渲染到页面中。

    二、如何使用接口添加和修改数据

    1、首先在api项目下的js文件中引用后台接口。

    export const updateCompanyInfo = (data) => that.$http("/base/companyInfo", "post", data);
    

    2、先引入接口,在提交按钮上绑定一个点击事件,对这个点击事件在methods下写下此函数,这里我使用的是async/await用来执行异步任务。这里简单介绍一下async/await,在函数前面添加关键字async表示该函数将以异步模式运行,关键字await在async函数内部使用,表示紧跟在后面的表达式,需要等待结果。下面代码示例

    import { updateCompanyInfo } from "api/server/admin";
    
     methods: {
        async submit() {
            try{
              const res = await updateCompanyInfo(this.formLabelAlign);
              this.success("完成设置");
              this.parentInit();
            }catch(e){
              this.err(e.msg);
            }
        }  
    

    3、最后需要去页面中看是否可以使用。
    在这里插入图片描述
    这样就算操作成功了。

    展开全文
  • 这里是在vue请求的数据中将时间戳转换字符串的 关键部分 //item.add_time 为请求数据中的时间戳 var date = new Date(parseInt(item.add_time) * 1000); item.add_time = `${date.getFullYear()}/${date.getMonth...

    这里是在vue请求的数据中将时间戳转换字符串的
    在这里插入图片描述

    关键部分

    //item.add_time  为请求数据中的时间戳
    var date = new Date(parseInt(item.add_time) * 1000);
    
      item.add_time = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}
         ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
    
    展开全文
  • 内容:结合上一章得动态路由,实现从接口获取新闻列表以及新闻详情数据并在页面渲染展示,请求数据vue-resource插件; 代码示例 列表页: Home.vue <template> <div>我是HOME组件 <ul> <...
  • el-collapse 默认展开 并展示出从后台请求回来的数据 默认展开了但是请求回来的数据并没有渲染 遇到一个坑, 在控制台打印数据明明已经回来了,也赋了值,但是页面就是没有渲染,不知道大家有没有遇到这个问题。废话...
  • 在使用axios向后台请求数据时,根据后台接口返回的数据,res.data.data 返回的是一个数组对象,并且将这个数组对象赋值给了在data定义的一个空数组,打印这个空数组,是真实存在的数据 res.data.data 使用v-for循环...
  • import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue' import Welcome from './components/Welcome.vue' import Users ...
  • 其实看了官方文档之后觉得不难,文档说的很清楚,这里不再啰嗦,直接说我在使用过程中遇到的问题:在我将后台请求回来的数据和图表结合的时候(我这里使用的是饼图)发现统计图没有被渲染出来,非常疑惑感觉要...
  • 在postman测试请求后发现响应数据为一个二维码图片,不是链接,如何解决?...如果是上述请求并可以在浏览器地址栏请求后面拼接参数打开二维码图片的话,可以直接拼接链接来请求,直接将这个请求链接赋值给当前要渲染
  • 然后开始写渲染数据的方法 前提,封装好了获取数据的api接口,在main,js中注册到了原型。 然后在 1,首先在api中获取接口, 2,在utils中封装http请求的get 和post方法,注册到原型 import axios from "axios" ...
  • vue数据更新视图不渲染

    千次阅读 2019-03-30 16:04:32
    现在的需求是这串数据已经渲染完毕,但是我要往每列数据里面新增一个noWritedNum属性赋值,因为这个属性的值在另外一个请求的结果中,这个请求需要formData中的id作为参数。我于是尝试了下面几种方法。 第一种...
  • 一、环境搭建 1、安装Mock.js ...axios-mock-adapter是一款axios的请求模拟调试器,可以使用它来实现请求拦截模拟后台回复。 npm install axios-mock-adapter -D 二、使用 (1)建立文件 在src...
  • 之前的文章https://blog.csdn.net/qq_38830964/article/details/110545637中,有对echarts的...可能在页面渲染时,异步数据还未请求到,导致图表渲染不成功。 此时,比较合理的解决办法,应该是使用 async/await ...
  • 项目中要求实现在页面A中请求接口,点击确定键把接口中返回的数据保存到vuex中并渲染到组件内,要求可以对组件内渲染的数据要可以进行操作。 如果在页面上直接用: &amp;amp;amp;lt;mycheckTip @hidden=&...
  • Vue.js 是目前最火热的前端框架之一,而 Nuxt.js 是针对 Vue.js 推出的服务端渲染框架,通过高度定制化的配置以及简洁的 API,开发者可以快速进行服务端渲染项目的开发,本文将对 Nuxt.js 框架做一个简要介绍。...
  • list列表渲染不到页面上?...这里的this指向函数不指向vue,所以才无法将data的值赋给vue中的list,此时就没有list数据,表格为空。 空的表格 改为箭头函数,此时this指向vue。 下面表格中呈现出数据。 ...
  • vue 在哪个生命周期进行数据请求

    千次阅读 2020-07-31 08:59:08
    看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的话就用 mounted。 在created的时候,视图中...vue中实现先请求数据渲染dom 在项目中遇到了一个问题,下面是vue template
  • 有时候在更新数据时需要向后台发送请求得到最新的数据,但如果发送请求频繁并且数据返回较慢的时候,可能会使得数据渲染出错。因此我们可以标记每个请求的顺序计算总的请求数量,然后等待单个请求完成后判断其是否...
  • Nuxt.js是vue官方推荐的一款优秀的服务端渲染(ssr)项目,集成了VueVue-Router,Vuex,Vue-Meta等组件/框架,内置了webpack用于自动化构建,使我们可以更快速地搭建一个具有服务端渲染能力的应用。 今天主要来了解...
  • <div><h2>Vue.js应用的四种AJAX请求数据模式 翻译原文出处:<a href="https://vuejsdevelopers.com/2017/08/28/vue-js-ajax-recipes/">4 AJAX Patterns For Vue.js Apps</a><br /> 脾人翻译略差,别...
  • [vue] vue在created和mounted这两个生命周期中请求数据有什么区别呢? 看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的话就用 mounted。 在created的时候,视图中的...
  • 将其视为无需进行所有手动设置即可进行AJAX请求的简便方法。 非常适合需要从API端点获取数据的原型或小部件。 它只会处理普通的GET方法,考虑到如何使用它才有意义。 它在后台使用Axios。 这是一个不渲染的组件,...
  • 为什么不直接通过服务器端的进行渲染,而要用 Vue,这里的考量是怎么样的? 能否详细解释一下 SSR 的生命周期吗? 前后端分离的项目,为什么在掘金的 Web 项目里有 backend 文件夹? 当前内容版权归码字科技所有...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 226
精华内容 90
关键字:

vue请求数据并渲染

vue 订阅