入坑集锦（一）

最新推荐文章于 2024-01-05 09:14:45 发布

Bonjourjw

最新推荐文章于 2024-01-05 09:14:45 发布

阅读量480

点赞数 1

分类专栏：学习笔记

本文链接：https://blog.csdn.net/Bonjourjw/article/details/78537992

版权

学习笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.使用Vue.js框架，form表单的数据必须要在data里定义（包括表单数据中的每一个属性），今天偶然发现，仅仅在data里定义了form{}对象，然后通过后面的函数调用，动态地向数组中添属性值，表单上只有部分数据显示，其余的都为空。如下所示：
这里写图片描述

然后再form中将所有的属性值加上之后：
这里写图片描述

这里写图片描述
结合之前又一次也是因为下拉列表选项更新了，而页面未更新的情况，确定此种原因为Vue.js的视图没有被及时触发更新，作为MVVM模型，视图的更新依赖于data中数据的变化，虽然定义了数据对象form，即使在函数中动态向数组中添加对象属性，但form整体始终是作为一个常量，整体未变化，因此不会触发视图更新。因此也会发现，页面上有一个switch选择开关，拨动后，所有的数据又能在对应处正确显示，又进一步证明所确定的原因是比较正确的。
为了进一步证明，在最开始未在data中写具体属性。将获取的数据存储到另一个对象中，最后再将对象赋值给form对象，这样form对象发生了改变，如下图所示。
这里写图片描述
通过上面的手段，通过让form发生变化，也能触发Dom更新视图。当然为了规避不必要的错误，推荐还是将所有要用到的数据全都按Vue的规范在data里定义声明。

同样地后来遇到了视图未刷新：
界面上的开关状态控制某些输入框及下拉列表的编辑状态，然而发现在代码中虽然设置了开关状态改变时触发的其余输入框可编辑函数，但最开始进入界面时的开关状态并没有正确对应其他输入框及选择框的可编辑状态。例如开关打开时，输入框应该是可编辑的，实际上却是灰的。但是切换为关闭后再打开，发现状态又正确了。这也正是上面所说的视图未被触发刷新。
自己的解决办法就是，在created()函数中（创建实例后）调用初始化函数，将输入框编辑状态设为与原来相反的，强制调用开关状态监听函数。使视图刷新，达到进入界面时不需要任何操作，输入框编辑状态能与开关状态正确对应。
这里写图片描述

2.使用tag标签，通过点击不同的标签页切换到不同页面，页面切换的过程通过路由跳转。这里发现了两个严重的问题：
（1）页面残留；
这里写图片描述
（2）当停留在第二个标签及页面下，刷新后标签返回到默认第一个标签，而内容却还是第二个标签对应页面；

分析了很久后才发现，将主从关系搞错了。两个页面的内容我是单独放在其他的.vue文件中，
这里写图片描述
当点击发射配置时，将一个页面push进去，当点击第二个标签时，push另一个页面。这样的做法无疑是标签和路由是同一级，路由内容并不是在标签下。因此点击刷新时，两者处于同一级，标签当然是恢复默认值，而两个路由页面也是相互独立的，仍旧停留在该页面。。因此，对应的两个页面封装为两个子组件写入对应标签下即可。

3.使用echart画图，结果一直报错：Uncaught Error: Initialize failed: invalid dom.
错误原因：在created（）中调用画图函数，可能界面还未渲染完，函数就被调用，导致dom不能被initialize；
修改：改为在mounted钩子函数中调用即可。

4.将v-model和v-bind:model混了，导致表单验证一直没有起作用。
（1）element-ui中，model是表单数据对象，使用时会利用v-bind将其数据对象与表单进行绑定，因此有：model=‘data’；
（2）而每一个表单项的数据，由于要监测数据的双向变化，所以用v-model进行双向数据绑定，且只对于表单控件有用；

5.表格里嵌套输入框时的数据绑定：
这里写图片描述

这里写图片描述

对Vue的理解不够，因此在写这个时，不知道怎么绑定数据，以此记录。

6.异步
很多时候我们在实现一个功能时，可能会调用多个函数，又特别是这些函数的调用都是通过axios异步进行的的，所以导致前面的函数还没执行完，就已经在执行函数后面的语句，而后面的语句又恰好需要函数返回的结果。因此，异步执行会导致取到的结果值不正确，也因此最后的效果也差强我意。
经查询发现，解决异步问题有三个方法：
（1）计数器
这个方法只适用于异步执行的函数不多时，确切地知道不同情况下要执行的函数个数，每执行完一次就加1，在最末尾判断所有的函数执行完时才开始执行后面的语句。
（2）顺序.then（）
这个方法当然也和上面类似，也只适用于函数个数不多时。而且是以此执行，执行完第一个函数后，再接着执行第二个函数……
（3）ajax同步请求
ajax具有异步和同步两种方式，这种技术通过使用XMLHTTPRequest对象，js在不重载页面的情况下与web服务器交换数据，产生局部刷新的效果。参考这篇博主的笔记：https://www.cnblogs.com/sdya/p/4624578.html，使自己对ajax的同步异步进一步地理解。
同步状态下：当执行到这里时，会将页面所有代码将停止加载，会等当前的代码执行完之后才会继续往后走。

这里写图片描述

上图中下面的res[j]是需要addTasksCh（）执行完返回的结果，因此将addTaskCh()方法改为同步请求，确保后面能正确用到它。

这里写图片描述

async默认为true，这时候的ajax也即为异步请求，改为false则为同步。success方法，是请求服务器成功返回应答后要调用的函数，两个参数为返回的应答数据，和状态描述。
而complete方法在ajax请求完成时执行，即使请求并未成功。
error则是请求失败后的处理函数。
另外，axios是封装了ajax的异步请求部分，因此一般通过axios发起请求的都是异步请求。

///
axios和ajax的本质均是利用了原生的XMLHTTPRequest对象，通过后台与服务器进行数据交互的。在w3cschool中，对该对象是这样描述的：
（1）不重新加载页面的情况下更新网页
（2）在页面已加载后从服务器请求数据
（3）在页面已加载后从服务器接收数据
（4）在后台向服务器发送数据

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();   //创建对象
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  //创建对象
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change; //请求状态改变的事件触发器
  xmlhttp.open("GET",url,true); //指定和服务器端交互的HTTP方法，URL地址
  xmlhttp.send(null);  //向服务器发出请求,内容可以是DOM或者输入流又或是字符串
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()        //交互的结果处理
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    var message =  xmlhtp.responseText;//纯文本的数据接收方法
    //或者下面的方法，服务端需要设置content-type为text/xml
    //var domXml=xmlhttp.responseXML;

    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

但是，在按上面的方法自己想在chrome试验一把的，又遇到了跨域问题，因为我把url地址改成了http://www.baidu.com，这个就不得行了，因为通过本地域fill:///访问外网，需要对方修改访问的权限，不过这当然是不可能的。如果允许跨域，会产生安全问题。Cookie在被访问时会被带上，如果允许跨域，则有可能被恶意网站的代码来获取安全网站的身份验证信息。又或者是直接将病毒信息发送到各个电脑上。
这里写图片描述

接着，我想那就在当前路径下写一个页面吧，看能不能获取，结果发现没有任何反应。当然这就是另一个坑，浏览器的安全策略，在当本地文件前域下通过浏览器不允许访问本地域下的文件的。但可以通过一些手段来解决，比如修改浏览器的名字，加一串参数–enable-webgl –ignore-gpu-blacklist –allow-file-access-from-files，重启浏览器后，发现并没有效果。
这里写图片描述