• 一个问题一份收获——请求回来的数据应该怎么处理


    今天使用vue在开发的时候遇到一个问题   具体可以看 https://segmentfault.com/q/1010000010041611

    看了别人的回答,感觉收获很大,所以来写一下自己的理解。

    从数据结构、后台减压、<template>这几点来说

    列表已经通过table做出来了,需要的进一步功能是在“查看详情”的点击事件中请求回该条数据的详细情况,且一次只显示一条反馈的详情,把数据放在data中的一个currentMsg对象中(只存放当前请求回来的数据),然后在该行追加一个tr并将相应的内容填充进去,

    当时困惑的是如何能够以vue数据驱动视图的方式追加详情行,因为如果用js操作dom来做的话肯定没问题,但是在vue里面这样做就很low了,过不了自己这关,然后就在sf上面提了这个问题,看了boxsnake的回答之后有一种茅塞顿开的感觉,

    数据结构

    这个可以说是通用的了,不仅仅是针对前端,因为一个良好的结构化数据可以很好的优化程序的结构,让别人更容易理解,

    就这个历史反馈功能来说,后端给了我2个请求的接口,一个是根据当前用户获取该用户提交的所有反馈(allTitleInfo)的摘要信息,结构如下:

    我也是按照这样的结构把数据填充到页面中的,另一个接口就是根据ID获取反馈的详情,

    当时想的是增加一个变量currentInfo,点击查看详情请求数据之后把当前数据覆盖到currentInfo,然后在页面中渲染出来。  后来想了想:每次都要重新重新请求,不管是否请求过该条数据。

    后台减压

    对于用户反馈来说,这可以算是一个错误的算法,因为首先用户反馈的信息总量不大,完全可以在allTitleInfo中新增一个detail对象,请求之后就把该数据添加到其中,这样就通过判断当前反馈中是否存在减少了后续的请求。

    并且,这样以id作为一组存放数据后,比单独增加一个currentInfo查找想要的数据更快,比如说原来的复杂度是O(1) + O(1),现在就变成了O(1)。

    来看下优化后的allTitleInfo:

    <template>

    现在来说说vue里面的template,这个标签就类似我在 VUE2.0+VUE-Router做一个图片上传预览的组件 中提到的router-link一样,并没有实际的html意义(类似于一个意念盒子,反之div、section等是实体盒子)

    图1渲染出来的方式是通过在tr中v-for遍历,类似下图:

    既然已经把detail添加到里面了,肯定要在页面中把他体现出来(使用v-if达到不渲染占位的目的)

    接下来来看用template如何做:

     

     v-if通过判断item.detail是否为空来决定渲染新增的tr,v-show通过判断currentIndex是否等于当前的index是否展示该tr,至于currentIndex的改变就可以放在“查看详情”的单击事件中了。

    至此,这个功能算是完成了,放一张项目里面的效果图

  • 相关阅读:
    iPerf 笔记
    Monkey相关参数 笔记
    adb相关指令 笔记
    Linux常用命令 笔记
    eclipse配置android开发环境并搭建第一个helloWord工程
    python + eclipse + pydev 安装、配置
    print带参数格式
    JS获取按下的键盘字符
    Mysql 创建用户并对其赋予操作权限
    扩展内置对象
  • 原文地址:https://www.cnblogs.com/lonhon/p/7119042.html
Copyright © 2020-2023  润新知