开发中，遇到过的难点，亮点_项目开发中遇到的技术难点

入门教程

1.问题一

element表格多选框改为单选框效果

<el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange"
>
    <el-table-column type="selection" width="55"> </el-table-column>
<el-table>
1
2
3
4
5
6
7

handleSelectionChange(val) {
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(val.pop());
      } else if (val.length === 1 ){
        console.log(val, 222);
      }
},  
1
2
3
4
5
6
7
8

.el-table {
	margin-top: 20px;
	thead tr th:nth-of-type(1) {
	  visibility: hidden;
	}
	.el-checkbox__inner {
	  border-radius: 50%;
	}
}
1
2
3
4
5
6
7
8
9

2.问题二

GitHub打不开

3.问题三

switchhost软件报 please run switchhosts as an administrator
‪C:\Windows\System32\drivers\etc\hosts

4.问题四

函数先备份，后调用

 var p = function (params) {
    console.log(11111111)
}
var c = p;
p = function () {
    console.log(222222)
}
console.log(c())//11111111
1
2
3
4
5
6
7
8

5.问题五

获取元素距离窗口的的距离，以及元素的宽高
offsetTop 只能显示元素到父元素顶部的距离
所以调用方法 getBoundingClientRect 后返回的对象中的属性的 top
即 (需要读取的元素).getBoundingClientRect().top 即可返回到页面顶部的距离

6.问题六

解决eslint代码换行符报错问题

// .eslintrc.js 文件内加上这一条
   rules: {
    endofLine: 'auto',
  },
1
2
3
4

7.问题七

接口返回response的token数据，浏览器可见，但是axios不能读取到，需要后台加上这个设置

// 让浏览器能访问到其它响应头
response.addHeader("Access-Control-Expose-Headers","token");
1
2

8.问题八

不同账号，有的账号能登录，有的账号出现跨域错误
前端根据login接口，得到token信息，存到cookie里面
因为，后天根据用户信息（包括权限）生成token，token超长，导致传给后台有识别问题

ip 地址解析   百度地图  后台解析地址
实名认证  创蓝云智  3毛钱
短信验证  创蓝云智  3毛钱
友盟读取地址信息
1
2
3
4

9.问题九

滚动条默认显示底部 如何让滚动条显示到顶部
滚动条层旋转180° 内容层再旋转180°

10.问题十

<input type='number'> 弹出默认键盘   不好看
<input type='tel' pattern = '[0-9]'>  弹出纯数字键盘
1
2

11.问题十一

页面切换路由 第一个页面没有滚动条 第二个页面有滚动条
会出现中间内容区闪烁问题，解决方法

<div style=" padding-left: calc(100vw - 100%);">
     <div style="width:1200px;height: 1000px;margin:0 auto;"></div>
</div>
1
2
3

12 问题十二

element使用v-model.trim修饰符，用户在输入的时候 不能输入空格 需要在内容之间输入空格
解决办法是下面

 <el-input
      v-model="form.roleDesc"
      class="w350"
      placeholder="请输入角色描述"
      clearable
      @blur="form.roleDesc=$event.target.value.trim()"
 />
1
2
3
4
5
6
7

13 问题十三

一个盒子 内有两个元素 一个svg 一个span文字 微调他们上下距离对齐

 .svg-icon.maintain {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  vertical-align: -0.45em;
}
.svg-icon.selected {
   margin-right: 14px;
   width: 18px;
  height: 18px;
  transform: translateX(-2px);
  vertical-align: -0.5em;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

14 问题十四

http://qfdfs.jhjzfund.com/group1/M00/00/00/CmVR3WCnBT-NLuotIE74.pdf
不同源 用a标签下载时，浏览器会直接预览pdf文件，doc文件可以下载，这时候需要走接口

1. application/msword doc
2. application/pdf pdf
3. application/vnd.openxmlformats-officedocument.wordprocessingml.document docx

this.fileLinkToStreamDownload('http://qfdfs.jhjzfund.com/' + url, '文件名', '文件后缀')
 fileLinkToStreamDownload(url, fileName, type) {
  const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/
  if (!reg.test(url)) {
    throw new Error('传入参数不合法,不是标准的文件链接')
  } else {
    const xhr = new XMLHttpRequest()
    xhr.open('get', url, true)
    xhr.setRequestHeader('If-Modified-Since', '0')
    xhr.setRequestHeader('Content-Type', `application/${type}`)
    xhr.responseType = 'blob'
    var _this = this
    xhr.onload = function() {
      if (this.status == 200) {
        // 接受二进制文件流
        var blob = this.response
        _this.downloadExportFile(blob, fileName, type)
      }
    }
    xhr.send()
  }
},
 downloadExportFile(blob, tagFileName, fileType) {
  const downloadElement = document.createElement('a')
  let href = blob
  if (typeof blob == 'string') {
    downloadElement.target = '_blank'
  } else {
    href = window.URL.createObjectURL(blob) // 创建下载的链接
  }
  downloadElement.href = href
  downloadElement.download = tagFileName + '.' + fileType // 下载后文件名
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  if (typeof blob != 'string') {
    window.URL.revokeObjectURL(href) // 释放掉blob对象
  }
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

https://blog.csdn.net/yueguangMaNong/article/details/110949974
在前后端分离项目中，由于跨域，导致前端每次请求后台都会发送一个
options请求去检查目标站点是否可达，这样后台就会收到很多响应码
为204的OPTIONS请求，虽然每次请求都耗时极少，但是一旦请求量大了，
还是会占用部分连接资源，并且日志中也会存在很多没用的数据，
导致日志文件体积增加。下面就来讲讲如何利用Nginx拦截这些OPTIONS请求

跨域存在预请求，走后台拦截options耗时多，所有用niginx拦截，直接返回204
但是$request_method = 'OPTIONS’时候也要设置跨域请求头

可以看到每个200响应之前都有一个204响应，耗时也就5毫秒，但是就是看它不爽。
同样服务器端的日志是一个204响应一个200响应

设置nginx之后 也会有204请求 但是耗时0ms
后台日志 也只有一个200的get请求

location /{
    if ($request_method = 'OPTIONS') {
        # 对于OPTIONS，不保存请求日志到日志文件
        access_log off;
        # 这里配置允许跨域的域名，* 代表所有，也可以写域名：http://www.xxx.com 或者IP+端口    	                                 	http://192.168.1.10
        add_header 'Access-Control-Allow-Origin' '*';
        # 允许的请求类型
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Credentials' true;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-    Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        # 允许跨域的最大时间，超过这个时间又会重发一次OPTIONS请求获取新的认证
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        # 直接在这里返回204响应，不转发到后台服务程序
        return 204;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

15 问题十五

nrm用cnpm安装后成功，但是nrm ls 报错

The “path” argument must be of type string. Received undefined

解决：使用npm降低版本安装

16 问题十六

项目借助git暂存，有时候改项目代码时候，不小心改了不该改的代码，发现页面崩溃了，这时候需要用到撤回代码看看

17 问题十七 微信小程序手机端调试不能访问后台

解决
问题
在微信开发者工具中能正常请求本地后台数据，但在手机预览中却请求不到。

解决办法
1、在微信开发者工具中设置：不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

2、微信小程序开发者工具中，wx.request请求的地址不得使用localhost，而应改成本地服务器所在的电脑IP，查看本机IP地址的方法为：打开cmd，输入ipconfig，IPV4即为需要修改的IP地址

3、手机和电脑（本地服务器）需要连接同一局域网（WIFI网络）

4、手机扫码进入小程序后，需要打开手机开发者模式，重启小程序，才能请求到数据。

18 Mysql连接报错：1130-host … is not allowed to connect to this MySql server如何处理

https://blog.csdn.net/sh541210/article/details/81981062
在搭建完LNMP环境后用Navicate连接出错

遇到这个问题首先到mysql所在的服务器上用连接进行处理

1、连接服务器: mysql -u root -p

2、看当前所有数据库：show databases;

3、进入mysql数据库：use mysql;

4、查看mysql数据库中所有的表：show tables;

5、查看user表中的数据：select Host, User,Password from user;

6、修改user表中的Host:update user set Host=‘%’ where User=‘root’;

7、最后刷新一下：flush privileges;

#一定要记得在写sql的时候要在语句完成后加上" ; "下面是图示说明

19 Mysql连接报错：wx.getUserProfile is not a function

20 当我们使用 NODE_ENV = production 来设置环境变量的时候，会有windows命令被阻塞，导致报错。cross-env 能够提供一个设置环境变量的scripts，这样就可以同时兼容unix和windows。

修改前

"scripts": {
    "build": "NODE_ENV=production webpack --config webpack.config.js"
  },
1
2
3

npm install cross-env --save-dev

修改后

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  }
1
2
3

21 配置nginx的https时候，配置完了，重启nginx报错，nginx: [emerg] unknown directive “ssl” in /usr/local/nginx/conf/nginx.conf:16

https://blog.csdn.net/weixin_38111957/article/details/81283121

22 霸屏动画在ios app中显示有白背景 ，所以要单独用其他的做

做lottie动画时 Android可以显示透明色

23 移动端适配

/* Rem 核心实现 */

  (function (doc, win) {
    var docEl = doc.documentElement;
    var clientWidth = docEl.clientWidth;
    var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
    var recalc = function () {
      if (clientWidth === undefined) return;
      docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
    };
    if (doc.addEventListener === undefined) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  }(document, window));
1
2
3
4
5
6
7
8
9
10
11
12

24 net start mysql 发生系统错误2 系统找不到指定的文件

转自：https://www.jianshu.com/p/6d8ed7c36e6f
以管理员身份运行，在命令行输入cd+mySQL的bin目录的安装路径
C:\Windows\system32>cd C:\Program Files\MySQL\MySQL Server5.6\bin
C:\Program Files\MySQL\MySQL Server5.6\bin>mysqld --remove
Service successfully removed.
C:\Program Files\MySQL\MySQL Server5.6\bin>mysqld --install
Service successfully installed.
C:\Program Files\MySQL\MySQL Server5.6\bin>net start mysql
MySQL 服务正在启动 .
MySQL 服务已经启动成功。

ALTER USER ‘root’@‘localhost’ IDENTIFIED WITH mysql_native_password BY ‘newpassword’;

25 Navicat ,SQLyog连接MySQL8 异常2059-Authentication plugin ‘caching_sha2_password’ cannot be loaded解决方案

https://blog.csdn.net/weixin_40845165/article/details/84076691
1，登录MySQL，使用命令
mysql -u root -p或mysql -u root -ppassword【ps：-ppassword后面的密码是你的root密码】
2，修改加密规则
ALTER USER ‘root’@‘localhost’ IDENTIFIED BY ‘password’ PASSWORD EXPIRE NEVER;

3，更新用户密码
ALTER USER ‘root’@‘localhost’ IDENTIFIED WITH mysql_native_password BY ‘password’;

4，刷新权限
FLUSH PRIVILEGES;

5，重置密码
alter user ‘root’@‘localhost’ identified by ‘你的密码’;

26 如何判断是否在app内部嵌套页面

var Westeros = {
  versions: (function () {
    var u = navigator.userAgent;
    return {
      trident: u.indexOf('Trident') > -1, //IE内核
      presto: u.indexOf('Presto') > -1, //opera内核
      webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //iOS终端
      ios_uiwebview: u.indexOf('UIWebView') > -1, //iOS终端，使用UIWebView（app2.0.0以下或iOS 8以下版本）
      ios_wkwebview: u.indexOf('WKWebView') > -1, //iOS终端，使用WKWebView（app2.0.0以上且iOS 8以上版本）
      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
      iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
      iPad: u.indexOf('iPad') > -1, //是否iPad
      webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
    };
  })(),
  language: (navigator.browserLanguage || navigator.language).toLowerCase(),
  inApp: navigator.userAgent.indexOf('HengDaJinFu') > -1
};
var Snow = function () { };
if (Westeros.versions.android) {
  Snow.prototype.invokeNative = function (args) {
    // hybrid交互传参
    prompt('snow://' + JSON.stringify(args), '');
    console.log(args);
  };
} else if (Westeros.versions.ios) {
  
  if (Westeros.versions.ios_wkwebview) {
    Snow.prototype.invokeNative = function (args) {
      window.webkit.messageHandlers.snow.postMessage(args);
      console.log(args);
    };
  } else {
    // uiwebview
    Snow.prototype.invokeNative = function (args) {
      var iFrame = document.createElement('iframe');
      iFrame.setAttribute('src', 'snow://' + encodeURIComponent(JSON.stringify(args)).replace(/\*/g, '%2A').replace(/!/, '%21'));
      document.documentElement.appendChild(iFrame);
      iFrame.parentNode.removeChild(iFrame);
      iFrame = null;
      console.log(args);
    };
  }
} else {
  Snow.prototype.invokeNative = function () {
    console.error('调用异常');
  };
  console.log("web");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

Ygritte.prototype.closeWebView = function (callbackName) {
  var args = ['knowNothing', 'closeWebView', callbackName || '', {}];
  //this.log(JSON.stringify(args), 1);
  snow.invokeNative(args);
};


import VConsole from 'vconsole';
var vConsole = new VConsole();
Vue.use(vConsole)

Vue.use(Vant);
1
2
3
4
5
6
7
8
9
10
11
12

26 微信小程序真机调试echarts

设置echart的属性：force-use-old-canvas=“true”

注意事项：
这个错误针对真机调试，上线后不会出现这个想象，因为添加 force-use-old-canvas="true"后，可能画面有点失真，上线的时候去掉该属性即可

最坑的几点

echarts 的所有父级元素都不能有定位 否则在测试时 就会出现echarts不随屏幕滚动的bug！！！ overflow：auto 也不行！！！！！！！！！

echarts的层级最高 如果自定义的tabar 要使用 cover—view 不然echarts会显示在tabar的上面

echarts在开发者工具上不卡，但是真机调试会特别卡卡卡卡卡卡卡卡卡卡卡卡卡卡（这也是困扰了我好几天的原因！但是发布之后就不会卡挺流畅的，使用预览也不会卡）所以真机调试卡不用担心也不用去怀疑是请求方式的问题，使用预览或者发布体验版本就可以

嘻嘻

27 设计师给的svg文件 外层设置颜色值无效

设计师把颜色设置为#000 这时候使用阿里图库上传 去颜色 就可以直接复制svg代码使用了

28 模拟input框，实现换行输入内容

<span
  class="mn-input"
  v-html="ipt16"
  @blur="ipt16 = $event.target.innerText"
  :contenteditable="isEditStatus"
></span>
1
2
3
4
5
6

.mn-input {
  padding: 0 10px;
  outline: none;
  border-bottom: 1px solid #000;
  font-weight: 600;
  font-size: 18px;
}
1
2
3
4
5
6
7

29 复制链接的方法

<input id="id_payment" type="text" :value="url" tabindex="-1" /> 

document.getElementById("id_payment").select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
    
#id_payment {
  position: absolute;
  left: 120%;
}
按tab键时候，会聚焦到这个输入框     
设置tabindex='-1'取消tab键聚焦功能  
tabindex是设置按住tab键聚焦的输入框顺序
1
2
3
4
5
6
7
8
9
10
11
12

29 element-ui的el-table组件 使用fixed ，出现样式错乱问题

this.$nextTick(() => {
  this.$refs.table.doLayout()
})
1
2
3

30.我给组件内的原生控件添加事件,怎么不生效了？

官网介绍

// 自定义组件的 v-model
<base-checkbox v-model="lovingVue"></base-checkbox>

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      return Object.assign({},
        this.$listeners,// 我们从父级添加所有的监听器
        {
          input: function (e) {
            vm.$emit('input', e.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// Vue 提供了一个 $listeners property，它是一个对象，里面包含了作用在这个组件上的所有监听器
// v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素
<base-input v-on:focus="onFocus"></base-input>

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

31. 我用了 axios , 为什么 IE 浏览器不识别(IE9+)

那是因为 IE 整个家族都不支持 promise, 解决方案:
npm install es6-promise
// 在 main.js 引入即可
// ES6的polyfill
require("es6-promise").polyfill();
1
2
3
4
5

32. 为什么我的引入的小图片渲染出来却是 data:image/png;base64xxxxxxxx

这个是 webpack 里面的对应插件处理的，对于小于多少 K 以下的图片(规定的格式)直接转为 base64格式渲染;

具体配置在webpack.base.conf.js里面的rules里面的 url-loader，这样做的好处:在网速不好的时候先于内容加载和减少http的请求次数来减少网站服务器的负担。

33. Vue SPA 没法做优化(SEO)!有解决方案么

可以的,SSR(服务端渲染就能满足你的需求),因为请求回来就是一个处理完毕的 html，现在 vue 的服务端开发框架有这么个比较流行,如下Nuxt.js。

34. Vue可以写 hybird App 么!

当然可以,两个方向.

codorva + nativescript
Weex

35. Vue可以写桌面端么?

当然可以,有electron和node-webkit(nw); 我只了解过electron;

electron
electron-vue: Vue-cli 针对 electron 的脚手架模板