网页开发过程中,尤其是在表单开发过程中,不可避免的会有各种各样的基础数据需要展示,供用户使用。例如,大家在办理信用卡时,经常需要填写各种表单数据,其中:性别(男、女)、学历(高中及以下、大专、本科、研究生及以上)、状态(启用、停用)等等,均属此类。日常软件开发过程中,通常习惯称之为配置项。在系统中配置后,提供相应的接口,方便在多个表单页重复使用。

网页或APP中初始化配置项,通常的做法是在页面初始化的时候,有些需要立即展示给用户的,则优先加载配置项内容;否则,可在使用的时候再行加载也可。若配置项使用频率较高,或配置项本身配置内容较多(耗用网络资源等),则可以考虑使用本地缓存的方式对配置项进行暂存。

VUE中初始化配置项,可在 methods 中编写相应的方法,请求服务端获取配置项内容,在页面初始化时调用方法即可。

我通常习惯将所需的配置项,统一存放在 selectConditions 中,以便后期使用或在页面跳转时,传递配置项。比如,新增或修改表单页面跳转时进行配置项的传输,减少服务请求。

VUE初始化请求后端服务,获取配置项操作(后端接口服务请求不再赘述),如下所示:

  上述代码,请求后端服务接口,并进行相应的数据处理,仅获取需要的配置项内容进行保存。   

  获取配置项信息后,在页面对应所需的属性位置,进行相应的数据绑定,实现相应的功能即可。部分源码如下所示:

  上述源码中, @focus=“pullData” 即为在需要使用的时候,获取相应的配置项、绑定。

优点是,若用户未操作相应功能,则节省了网络流量,页面初始化速度也快;操作时的数据时效性好。

缺点是,若进行页面跳转时,需要将配置项传给跳转页面,则必须在跳转前进行配置项数据的获取。否则,跳转页面将缺失配置项。

页面配置项的初始化,无论使用哪种方式,无所谓对错,均可实现相应的功能,适当权衡即可。

VUE-009-页面打开时初始化配置项内容的更多相关文章

  1. 使EditText不要在页面打开时自动获取焦点(因为软键盘会自动弹出)

    当页面上有EditText时,第一个EditText会在页面打开时自动的获取焦点,这样带来的问题就是系统键盘会自动的弹出来. 解决方法比较简单只要为EditText的父控件设置一下就行了: andro ...

  2. vue 浏览器页面刷新时执行一段代码

    当刷新(浏览器刷新)页面的时候,重置到首页(或其他页面)纯js的是window.onload()但是vue几乎不会用到这个,vue所有的是生命周期那么我们可以根据生命周期来实现这个beforeCrea ...

  3. jQuery页面加载初始化常用的三种方法

    当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码代码如下: <s ...

  4. 解决HTML加载时,外部js文件引用较多,影响页面打开速度问题

    解决HTML加载时,外部js文件引用较多,影响页面打开速度问题   通常HTML文件在浏览器中加载时,浏览器都会按照<script>元素在页面中出现的先后顺序,对它们依次加载,一旦加载的j ...

  5. 使用vue的mixins混入实现对正在编辑的页面离开时提示

    mixins.ts import { Vue, Component, Watch } from "vue-property-decorator" Component.registe ...

  6. CSS侧边栏宽度不动(更改页面宽度时),内容区宽度自适应

    一个页面,左栏是内容栏content,右栏是侧边栏sidebar.如何使侧边栏宽度不动(更改页面宽度时),内容区宽度自适应呢?为了保证内容区宽度自适应,先不设定其宽度,使其填充整个DIV区域,设定足够 ...

  7. vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  8. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  9. vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息

    一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 st ...

随机推荐

  1. 一、cryptsetup文件系统加密

    cryptsetup文件系统加密   今天做了SYC攻防题的文件系统挂载部分,在找到挂载最内层的final文件时发现mount无法识别,这也许就是一个加密的文件系统吧,还好-在龟速的 网络环境下查阅到 ...

  2. CSS圆环百分比DEMO

    <html> <head> <title>test</title><!--本DEMO参考http://www.cnblogs.com/jr1993 ...

  3. Java——静态变量/方法与实例变量/方法的区别

    静态只能调用静态 非静态: 对象名.方法名 package ti; //通过两个类 StaticDemo.LX4_1 说明静态变量/方法与实例变量/方法的区别. class StaticDemo { ...

  4. PID控制器开发笔记之十二:模糊PID控制器的实现

    在现实控制中,被控系统并非是线性时不变的,往往需要动态调整PID的参数,而模糊控制正好能够满足这一需求,所以在接下来的这一节我们将讨论模糊PID控制器的相关问题.模糊PID控制器是将模糊算法与PID控 ...

  5. 【转】Java Socket编程基础及深入讲解

    原文:https://www.cnblogs.com/yiwangzhibujian/p/7107785.html#q2.3.3 Socket是Java网络编程的基础,了解还是有好处的, 这篇文章主要 ...

  6. 昨天开始使用lr controller 已停止工作问题

    其实看到这个,只能看日志 看到日志也是无能为力 然后只能尝试修复,但是无法解决,最后通过重装系统,问题解决

  7. 多台CentOS服务器下实现SSH免密码登录

    ROOT用户下实现SSH免密码登录 第一步:进入目录/root/.ssh $ cd  /root/.ssh/ 执行以下命令,会在当前目录下生成公钥(id_rsa.pub)/私钥(id_rsa)对 第二 ...

  8. 执行Python出现LookupError: unknown encoding: cp65001解决办法

    执行Python出现LookupError: unknown encoding: cp65001错误 dos下执行以下命令即可 chcp 以上.

  9. 【Codeforces】【网络流】【线段树】【扫描线】Oleg and chess (CodeForces - 793G)

    题意: 给定一个n*n的矩阵,一个格子上可以放一个车.其中有q个子矩阵,且q个子矩阵互不相交或者是重叠(但边界可以衔接).这q个子矩阵所覆盖的地方都是不能够放车的.车可以越过子矩阵覆盖的地方进行攻击( ...

  10. Petrozavodsk Summer-2017. Moscow IPT Contest

    A. A Place For My Head 留坑. B. New Divide 从高位到低位贪心,当这一位是$0$时,要尽量取$1$,维护高维后缀最小值进行判断即可. 时间复杂度$O((n+a)\l ...