入门教程

1.问题一

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

<el-tableref="multipleTable":data="tableData"@selection-change="handleSelectionChange"
><el-table-column type="selection" width="55"> </el-table-column>
<el-table>
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);}
},  .el-table {
margin-top: 20px;
thead tr th:nth-of-type(1) {visibility: hidden;
}
.el-checkbox__inner {border-radius: 50%;
}
}

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

5.问题五

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

6.问题六

解决eslint代码换行符报错问题
.eslintrc.js 文件内加上这一条
rules: {
endofLine: ‘auto’,
},

7.问题七

接口返回response的token数据，浏览器可见，但是axios不能读取到，需要后台加上这个设置
// 让浏览器能访问到其它响应头
response.addHeader("Access-Control-Expose-Headers","token");

8.问题八

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

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

9.问题九

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

10.问题十

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

11.问题十一

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

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

12 问题十二

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

 <el-inputv-model="form.roleDesc"class="w350"placeholder="请输入角色描述"clearable@blur="form.roleDesc=$event.target.value.trim()"/>

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;}

14 问题十四

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

application/msword doc
application/pdf pdf
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 = thisxhr.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 = blobif (typeof blob == 'string') {downloadElement.target = '_blank'} else {href = window.URL.createObjectURL(blob) // 创建下载的链接}downloadElement.href = hrefdownloadElement.download = tagFileName + '.' + fileType // 下载后文件名document.body.appendChild(downloadElement)downloadElement.click() // 点击下载document.body.removeChild(downloadElement) // 下载完成移除元素if (typeof blob != 'string') {window.URL.revokeObjectURL(href) // 释放掉blob对象}
},

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.10add_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;}
}

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"},

npm install cross-env --save-dev

修改后

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

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));

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, //是否iPadwebApp: 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 {// uiwebviewSnow.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");
}

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);

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框，实现换行输入内容

    <spanclass="mn-input"v-html="ipt16"@blur="ipt16 = $event.target.innerText":contenteditable="isEditStatus"></span>.mn-input {padding: 0 10px;outline: none;border-bottom: 1px solid #000;font-weight: 600;font-size: 18px;
}

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键聚焦的输入框顺序

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

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

29 下载文件的vue包可以兼用ie浏览器

做项目中遇到过得难点相关推荐

总结之前做项目中要注意的一些书写规范
通过这次的<小巨蛋项目>网站的实战中,最主要的还是代码的书写规范吧,可能在这次的网站的实战中代码不是写的很好,没有好好的去规划规划再做,导致了给人的感觉就是有点乱的感觉,所以要求以后的项目 ...
uniapp结合uView组件库做项目中遇到的系列问题（一）
一.使用u-image组件显示图片时 H5正常显示小程序显示不了 //小程序不能显示 H5可以显示 <u-image width="100%" mode="wid ...
jsp怎么从后台读取远程共享文件夹下的图片在前端显示_Vue后台项目中遇到的技术难点以及解决方案
作者:yeyan1996 转发链接:https://juejin.im/post/5c76843af265da2ddd4a6dd0 写在前面金三银四招聘时间已经过去,很多公司开启了今年第二轮招聘的热 ...
vue后台项目中遇到的技术难点以及解决方案
写在前面马上到了金三银四的时间,很多公司开启了今年第一轮招聘的热潮,虽说今年是互联网的寒冬,但是只要对技术始终抱有热情以及有过硬的实力,即使是寒冬也不会阻挠你前进的步伐.在面试的时候,往往在二面,三 ...
关于做项目中关于文件读取遇到的一个问题（0x80070299）
目前维护的正在用的一个项目中,有xml记录和推送的部分,突然有一天,发现xml推送都失败了,查了原因发现是在某一时间点后程序在生成xml时都出现了错误,随后就觉得可能是文件夹读取权限的问题,遂去查存储 ...
【工具与解决方案】从做项目中积累学习
[Java-Swing] 1.http://java-mans.iteye.com/blog/1650786 JAVA-SWT如何在Jtable单元格中加入复选框Jcheckbox,Jbutt ...
在做项目中遇到的JS问题
name和value: 例如: <input type="text" name="txt"/> name用于定义这个input收到的值的变量名,在上 ...
算法练习day14——190402（贪心：切金条、做项目、会议室安排）
1. 切金条一块金条切成两半,是需要花费和长度数值一样的铜板的. 比如长度为20的金条, 不管切成长度多大的两半,都要花费20个铜板. 一群人想整分整块金条, 怎么分最省铜板? 例如,给定数组{10 ...
今天项目中遇到的一个问题：判断新闻Id是否存在
今天做项目中,写了个类,中间用于判断新闻是否存在.其中我的记录只有8条,Id分别为7,8,9,10,11,12,13,14,当用sql语句: private const string SQL_SELE ...
做产品与做项目的区别
1 背景概述在软件行业飞速发展的今天,我们可以将软件公司分大体分为两类,一类是使用框架进行开发的软件公司,另一类是套装软件产品的提供商,前者公司多数定位是项目类公司,后者则可以称为产品类公司.但做 ...

做项目中遇到过得难点

1.问题一

2.问题二

3.问题三

4.问题四

5.问题五

6.问题六

7.问题七

8.问题八

9.问题九

10.问题十

11.问题十一

12 问题十二

13 问题十三

14 问题十四

15 问题十五

16 问题十六

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

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

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

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

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

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

23 移动端适配

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

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

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

26 微信小程序真机调试echarts

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

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

29 复制链接的方法

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

29 下载文件的vue包可以兼用ie浏览器

做项目中遇到过得难点相关推荐

最新文章

热门文章

做项目中遇到过得难点

1.问题一

2.问题二

3.问题三

4.问题四

5.问题五

6.问题六

7.问题七

8.问题八

9.问题九

10.问题十

11.问题十一

12 问题十二

13 问题十三

14 问题十四

15 问题十五

16 问题十六

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

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

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

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

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

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

23 移动端适配

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

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

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

26 微信小程序真机调试echarts

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

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

29 复制链接的方法

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

29 下载文件 的vue包 可以兼用ie浏览器

做项目中遇到过得难点相关推荐

最新文章

热门文章

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

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

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

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

29 下载文件的vue包可以兼用ie浏览器