工作中遇到的问题及解决方法

一、本地vue项目配置IP地址访问,可以让同局域网内的同事预览


  解决:在package.json文件中 dev中配置 --host 本机IP
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 10.10.50.73",
    "start": "npm run dev",
    "build": "node build/build.js"
   },

二、Vue使用axios请求数据,默认post请求传参是json格式,但后台需要formData格式


  解决:使用node的qs模块

  qs.parse()将URL解析成对象的形式
  qs.stringify()将对象 序列化成URL的形式,以&进行拼接

  import axios from 'axios';
  import qs from 'qs';

  this.$axios({
    method: 'post',
    url: url,
    data: qs.stringify(data)
  }).then(res => {})

三、过滤器(简单)
  filters: {
    visitedFilters(value) {
      let set = {0: "未到访", 1: "已到访"};
      return set.hasOwnProperty(value) ? set[value] : value
    },
  },

四、在H5中使用qrcodejs2生成二维码

  npm i qrcodejs2
  import QRCode from 'qrcodejs2'

  this.$nextTick(() => {
    document.getElementById('qrcode').innerHTML = '';
    this.qrCode = new QRCode('qrcode', {
      width: 200, // 设置宽度,单位像素
      height: 200, // 设置高度,单位像素
      text: this.urlData.urlValue // 设置二维码内容或跳转地址
    });
  })

五、深拷贝,浅拷贝问题
  在做el-select 下拉数据过多时,region_code ,region_name 以分页形式显示(显示前15条,之后可进行搜索),但是在数据回显时,发现在15条数据之后,因为没有数据,回显失败,
  进行数据回显时(region_code和region_name互换值),在不进行更改时,保存提交时时(region_code和region_name再转换回来)时发现
  问题:
    当用obj1复制了一个对象obj2, 更改obj1内的属性时,obj2内的会同步更改,
  原因:
    因为 = 复制为浅拷贝,只拷贝了它的栈内存中的"引用路径",所以当更改obj1时,更改了堆内存中的值,obj2的指向也是它,所以会同步修改

  解决:

    运用深拷贝,复制时不仅要拷贝栈内存中的引用路径,堆内存中的值也要同步复制

  方法1:

    首推的方法简单有效,JSON.stringfy()和JSON.parse()即可搞定。但是这种简单粗暴的方法有其局限性。当值为undefined、function、symbol 会在转换过程中被忽略。。。所以,对象值有这三种的话用这种方法会导致属性丢失。
    var person = {
      name :'tino',
      say: function(){
        console.log('hi');
      },
      ok: syb,
      un: undefined
    }
    var copy = JSON.parse(JSON.stringify(person))

  方法2:

    写个函数递归复制
    function deepCopy(obj) {
      var result = Array.isArray(obj) ? [] : {};
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (typeof obj[key] === 'object' && obj[key]!==null) {
            result[key] = deepCopy(obj[key]); //递归复制
          } else {
            result[key] = obj[key];
          }
        }

      }
      return result;
    }  

六、https使用iframe嵌入http资源的问题(了解,未使用)


  目前现象:
    https 网站 使用iframe嵌入http资源网站的内容,会弹出“是否加载不安全的内容”的提示,点击“加载”按钮后显示正常。
    对用户来说显示不友好。

  问题原因:
            https中使用http的资源时,浏览器会认为可能会不安全, 会自动弹出“是否加载不安全的内容”的提示。
            该提示由浏览器自动弹出,不能通过修改代码的方式解决。
            https中使用https资源时,如果https资源不安全,同样会报错。

    尝试解决方案:
             1) 使用自定义ssl证书,将http资源模拟成为https
                   使用nginx或者apache服务器,将http协议的资源包装为https协议的资源使用,前提条件是nginx或者apache服务器可以同时访问到http的资源和https的资源,将http链接地址从原网站改为nginx或apache包装的https的地址即可。
                   否则会报错“ 因为没有使用有效的安全证书进行签名,该内容已被屏蔽”的新错误提示。
             2)使用第三方签名的ssl证书,将http资源转换成为https
                      和方案1相同,但是使用第三方签名CA证书,网站可以正常访问。
                     但是第三方的CA签名的ssl证书是需要按年付费的, 价格 从每年几百到每年几千元均有。
             3)   要求http网站资源提供https的格式内容,且使用的ssl证书为第三方CA签名证书。

  

七、当在 element ui 使用 resetFields()重置表单后,表单无法输入的问题


  this.$refs[formName].resetFields(); 使用后部分表单无法输入

  解决:

    resetFields 是对整个表单进行重置,讲所有字段值重置为"初始值",并移除校验结果.
    所以给表单默认一个初始值就可以解决

&&&&&&&&&&&&&&&&&&&《项目中的知识点》&&&&&&&&&&&&&&&&&&&&&&&&

1、hasOwnProperty:
  hasOwnProperty()方法返回一个布尔值,判断对象是否包含特定的自身(非继承)属性。
  function Person(name, age) {
    this.name = 'Tom';
    this.age = 11;
  };
  Person.prototype = {
    job:'资深前端开发工程师',
  };
  console.log(Person.hasOwnProperty('name'))//true
  console.log(Person.hasOwnProperty('job'))//false

2、JSON.stringify()
  JSON 通常用于与服务端交换数据。
  在向服务器发送数据时一般是字符串。
  我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
JSON.parse()
  JSON 通常用于与服务端交换数据。
  在接收服务器数据时一般是字符串。
  我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

猜你喜欢

转载自www.cnblogs.com/zjz666/p/12097877.html
今日推荐