- 博客(60)
- 收藏
- 关注
RSS订阅
原创 vue h5 项目适配ios问题
vue h5项目适配ios的问题h5项目在安卓上运行正常，但是在ios上就出现问题1适配iphoneX以上型号底部栏遮挡的问题@media (min-device-height: 810px) { padding-bottom: .5rem;}2ios页面缩放问题在index.html页面<head>标签里面加入如下<meta> <meta na...
2019-11-15 22:18:52
2365
原创 Vue更改数据页面不同步更新
Vue更改数据页面不同步更新在请求数据并写入页面后，需要更改其中一些属性值，但是更改的时候发现页面上并没有同步更新，使用vue的devtools工具进行手动测试也是不更新。官网上说需要使用vue,set()进行更新，于是使用vue.$set()进行更改数据，但是发现还是不行。于是搞了半天，发现只有我要改的这个属性值不能同步更新，别的值就能，数据已经改成功了，页面就是没有更新。更奇怪的是，发现...
2019-11-03 19:32:54
6326
原创 使用layui/layuiAdmin的总结
layui是一个前端UI框架。主要是配合JQuery使用。开始使用首先是下载文件，然后引入css和js文件。引入之后就需要在<script>标签里面写代码了。layui里的js代码都需要在layui.use()里面写。举个例子，如果你想写form表单，那么在html里面复制代码之后，需要在js文件里面这样写：layui.use('form', function() {...
2019-08-17 15:01:06
17712
2
原创 微信小程序把openid放到缓存里
在微信小程序里面，openid只能通过wx.login获取，如果在多个页面使用的话需要传递openid，比如说：wx.navigateTo({ url: 'main/main?openid=' + openid})这样就能够传递openid，并在main里面使用了。但是我发现如果在导航栏里面，就是app.json的tabbar里面，这里设置的导航页面，是没法传递的。所以我想要把open...
2019-07-28 11:08:25
8404
6
原创 解决Vue请求接口出现跨域问题。Access-Control-Allow-Origin
解决Vue请求接口出现跨域问题在使用axios请求了接口后，发现并没有请求到，F12里面出现如下图所示的报错这是提示跨域了。所有使用JavaScript的浏览器都会支持同源策略。同源策略即指域名/协议/端口号相同。只要有一个不同，就会当作跨域请求。解决方法为：一种是让后端接口里添加如下两句代码：header('Access-Control-Allow-Origin:*');//允许...
2019-07-07 14:38:14
43910
9
原创 three.js 引用 OrbitControls 报错 Uncaught TypeError: Cannot read property ‘ROTATE‘
在 three.js 中 引入 OrbitControls.js 后文件报错，原因是版本不同的原因，需要 three.js 的版本跟 OrbitControls.js 的版本是一致的即可。
2021-01-03 20:40:52
2166
5
原创 mac mongodb Automatically disabling TLS 1.0, to force-enable TLS 1.0 specify --sslDisabledProtocols
mac 下 mongodb 执行命令 mongod 报错，标题为报错的第一句，因为一般人百度的时候都是根据第一句百度，所以起的这个标题。具体报错如下图：我的具体信息如上，可以发现，报错的主要信息在于 没有找到 data 数据的存放路径导致的报错，所以启动 mongod 的时候，加上 --dbpath 就可以了：$ sudo mongod --dbpath /usr/local/var/mongodb...
2020-12-30 22:50:39
1655
原创 mac 网络下载软件打开后提示无法验证开发者
mac 网络下载软件打开后提示无法验证开发者首先打开系统偏好设置，然后找到[安全性与隐私]，在最下面一栏会有提示 [仍然允许]按钮，点击即可。
2020-12-12 09:59:27
6084
原创 前端 10 月面试题总结
面试题总结HTML & CSSHTML5&CSS3 新特性垂直水平居中JS基本数据类型typeof null/undefined/Array怎么判断是否是数组（Object.prototype.toString.call([])）判断下列输出顺序 （考察微任务和宏任务队列）setTimeout(() => { console.log('timeout')})new Promise((resolve, reject) => { resolve(1
2020-11-01 21:16:50
867
原创 正则表达式使用 ES6 的模板字符串
有时候可能需要使用动态的验证某个内容，所以如果正则表达式能够使用变量就好了，但是通过 /\w/ 这种方式声明的正则，是不能够使用模板字符串的。那么能够使用模板字符串的方式是使用 new 命令：let count = 1let reg = new RegExp(`a${count}`, 'gi')通过 new 来创建一个表达式，就可以使用 ES6 的模板字符串了。...
2020-10-22 17:07:35
2299
原创 webpack 优化启动项目速度
优化 webpack 项目启动速度有些时候，需要频繁的启动项目，但是如果项目庞大起来，那么启动一次就需要花费非常多的时间，所以我们可以自己优化一下配置，来减少项目的启动时间babel如果使用 chrome 浏览器，那么在开发环境下，其实可以关闭 babel 的转义：includes: []。还有可以添加 babel 的缓存：loader: "babel-loader?cacheDirectory=true"devtooldevtool 是 webpack 用来显示 source map 格式的。
2020-09-13 10:19:14
4783
原创 Vuepress 使用 github actions 实现 自动部署
Vuepress 使用 github actins 实现自动部署说明在使用 Vuepress 写完文档后，就是部署了。那么如果每次都手动打包的话，比较麻烦，所以就使用 github 提供的自动部署服务， actions 来实现自动部署。配置首先是在使用 github actions 时，需要配置下 vuepress 项目的配置文件，看你需要部署在xxx.github.io/xxx/ 上，还是 xxx.github.io 上。具体配置可看 vuepress 官方文档部署站点的基础路径，如果你想让你
2020-08-20 08:27:49
2068
原创 Duplicate keys detected: ‘xxxx‘. This may cause an update error.
在 Vue 项目中，控制台报如下错误： Duplicate keys detected: xxxxx'. This may cause an update error.这是因为，通过 v-for 遍历的数据，有相同的 key，导致的错误提示。所以解决办法就是寻找哪个地方数据重复了，有可能是两个地方相同遍历使用了相同的 key，这个解决办法可以添加个标识：`${item.id}-1``${item.id}-2`有可能是数组中存在两个一模一样的数据，需要看看代码写没写错。如果没有马上找到问题
2020-08-18 22:14:12
2184
原创 关于 select 分页获取数据优化
项目中，有个 select 下拉选择做成了分页的形式，就是默认请求第一页的数据，然后当用户下拉到底部的时候，在重新请求一个接口，页码 +1。这个做法有两个难点，第一个难点是你需要知道用户何时滚动到底部，并且调用接口获取数据；第二个难点是，比如说用户选择了第三页的某个 option，但是当你复原数据的时候，默认只请求第一页的数据，你直接赋值的话，会把用户选择第三页的值原封不动的显示在页面上。首先是如何知道用户滚动到底部，因为使用的是 Vue + element-ui，所以可以使用 Vue 提供的自定义指令
2020-08-15 10:33:08
1218
原创 前端上传图片，在本地加载时，有时显示正常，有时显示 404，以及在 Vue 中的解决办法
文章目录出现问题的过程解决办法出现问题的过程前端在上传图片的时候，需要在项目里面显示出用户上传过后的图片，但是实际中显示的时候，有时正常，有时加载失败同时控制台报 404 错误。在报 404 错误后，复制路径直接访问，却发现能够访问到这个图片，所以这就很奇怪了。秉着专研主义精神的我，必须要找到原因。于是我在控制台编辑这个图片的路径，先是改为错的路径，html 里会看到图片重新载入，然后加载失败，继续把路径改为正常的，html 重新加载后，显示正常。我突然想到，既然能够访问到这个图片，说明上传到服务器
2020-07-12 17:59:54
3458
原创 在 Vue 中多表单深层次嵌套结构，创建响应式属性，以及多层级表单验证
在 Vue 中多表单深层次嵌套结构，创建响应式属性，以及多层级表单验证文章目录在 Vue 中多表单深层次嵌套结构，创建响应式属性，以及多层级表单验证设置响应式属性表单验证设置响应式属性在 Vue 中，只有在跟级别中创建的属性，才具有响应式，如果后期手动添加，如使用 this.xxx = xxx这种方式创建的属性是不具有响应式的。在 Vue里面，封装了 7 个方法，使用如下的方法来添加属性，同样可以创建响应式属性，并触发视图更新：push()pop()shift()unshift()spl
2020-07-05 17:21:17
5493
原创 使用 fullpage.js 全屏滚动插件 页面滚动有间隔
使用 fullpage.js 全屏滚动插件，页面滚动的时候有间隔，不流畅。也就是每滚动到一个页面后，需要等待一会，才能滚动到下一个页。原因很简单，
2020-06-16 22:30:49
613
原创 javaScript 利用 Set() 在一个数组里去重另一个数组
在一个原数组里，去重另一个数组里的数据，如果用普通的遍历的方法，比较麻烦，所以利用 ES6 的 set() 来实现这个功能。方法一利用 set 和 set 提供的 delete 方法，来实现let arr1 = ['name', 'age', 'gender', 'size']let arr2 = ['name', 'age']function removeRepeat(rawArr, removeArr) { let raw = new Set([...rawArr])
2020-05-30 15:28:30
592
原创 JavaScript 逻辑或 和 三元运算符 运算符优先级 导致的 bug
最近接手一个项目，然后收到一个 bug 说是每次接口返回的数据都是上一次的旧数据，所以我对当前项目的接口配置文件进行了排查。经过我精心的排查，最后发现了一段可疑代码，大概长这样：'12345' || '67890' ? '67890' : ''这段代码乍一看下，应该返回：12345，可是实际上，返回的确是：67890。代码作者的思路我认为是：首先判断 12345 是否存在，如果存在，则直接返回 12345'12345' '67890' ? '67890' : ''如果不存在，则进入
2020-05-23 22:05:11
1123
原创 传统 Web 项目热更新 和 使用 less 预处理器 热更新
文章目录项目热更新less 热更新项目热更新在传统的项目里，如果不使用 webpack 等工具的情况下，更改代码，需要手动刷新页面，这样比较麻烦。所以为了简化操作我们需要使用插件来实现这个功能。打开 VScode，点击左侧第 5 个图标，在插件市场里搜索 live Server，点击 install 安装。安装好后，如果当前页面刷新了，则可以看到当前页面的右下角有 go live 图标（如果没有则需要从新打开一下），点击它则会在页面开启一个本地服务器。这回更改代码后，保存（ctrl + s）则可以看
2020-05-16 15:05:14
541
原创 恢复 outlook 邮箱 垃圾桶里删除的邮件
恢复 outlook 邮件今天收到一封重要的邮件，发现在垃圾邮箱里面。在我看完想把它恢复到普通邮件时，一不小心手滑把它给删除了。结果我怎么找也找不到已删除的邮件。最后通过百度发现了一篇文章，里面有官方人员的回复。我在里面找到了解决方法。首先访问这个网址：https://store.office.com/zh-cn/app.aspx?assetid=WA104380447&sourc...
2020-04-21 17:50:53
2768
原创 ant design 配置按需加载
ant design 配置按需加载使用 create-react-app 创建一个 react 项目，并安装 antd。根据文档需要下载下面几个插件 react-app-rewired customize-cra babel-plugin-import。安装插件yarn add react-app-rewired customize-cra babel-plugin-import...
2020-04-12 14:31:37
619
2
原创 ant design 使用自定义阿里巴巴图标
在 react 中，使用ant design 框架中的自定义图标首先，复制例子中的代码:import { createFromIconfontCN } from '@ant-design/icons';const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.j...
2020-03-25 18:43:59
1027
原创 ajax 设置全局拦截器
ajax 设置全局拦截器在使用 jQuery 的项目中，如果要对所有的请求统一设置一些参数的话，可以设置拦截器 $.ajaxSetup。$.ajaxSetup的参数和 $.ajax 的参数一样。举个例子，如果你要对所有的请求添加一个 name参数的话，可以进行如下配置：$.ajaxSetup({ data: { name: 'xxx' }})这样，以后所有的请求都会带上 na...
2020-02-21 15:11:59
5358
原创 在 Vue 中使用粘贴板
在 Vue 中使用粘贴板有时候用户需要使用复制的功能。所以，我们使用一个插件来完成这个功能。首先需要安装 npm 包 vue-clipboard2。执行命令: npm i vue-clipboard2 --save在 main.js中，配置如下代码import Vue from 'vue'import VueClipboard from 'vue-clipboard2'Vue.u...
2020-02-19 16:09:00
2110
原创 修改 vscode vim 插件 esc 键位
在 VScode 中 使用 vim 插件，因为esc键位比较远，所以修改一下esc键的位置。首先需要安装vim插件，左侧插件市场安装一下vim插件即可。接着，按F1搜索settings.json文件。找到文件后，在默认配置下面，另起一个{}，并写入如下代码：example:{ "terminal.integrated.shell.windows": "C:\\windows\\Sy...
2020-02-17 22:31:30
4280
原创 Node.js 中 使用async/await + Promise不能正常返回值的问题
在node.js中可以使用Promise和async/await，但是在我今天写代码的时候，发现直接使用Promise.resolve这个api后，await不能正常返回值，代码大约如下：const fs = require('fs')const test = (file) => { fs.readFile(file, (err, data) => { if(err) Pro...
2020-01-04 22:29:35
2705
原创 Vue 项目出现 Refused to load the image 'http://localhost:8082/favicon.ico' 的问题
问题出现的原因是在我按需引入element-ui，然后先是下载babel-plugin-component这个插件，然后去配置.babelrc文件。在我按照步骤弄完了之后，npm run dev就显示了如题 中出现的错误，这个错误也是我第一次遇见，既然突然出现了这个问题，肯定是我以上操作产生了这个问题。我先是把.babelrc更改回来，发现可以，没有错误了，但是为了使用element-ui还是...
2020-01-02 06:13:17
1990
原创 关于element-ui loading 的函数封装和yield 封装
根据官方文档说明，element-ui提供了服务的方式调用。这里提供了两种封装方法。一种是使用函数封装，另一种是ES6的yield封装。创建一个loading.js文件，里面放入配置代码。第一种使用普通函数，有两种方式调用，根据传入的参数去判断是开启或关闭。这里开启传入start为开启，传入close为关闭。// loading.jsimport { Loading } from '...
2019-12-23 21:26:34
1074
原创 vue中 根据时间戳 判断对应的时间（今天 昨天 前天）
根据时间戳 来显示对应的时间段本文是根据vue缩写，但是原理都是想通的根据一个时间戳，然后来显示对应的时间段。如果为今天，则显示对应的time，如果为昨天，则显示为昨天，如果为前天，则显示为前天。剩下的显示为对应的日期需求定义好了，然后开始实现：首先，是把时间戳转换为对应的时间格式，js提供了原生的获取对应年、月、日等格式的方法，但是不够灵活，这里提供了一个网上找的比较灵活获取固定格...
2019-12-19 20:18:45
3090
原创 vue 项目打包上线后 js css 文件找不到
在vue项目完成后打包上线，放到服务器上发现js和css引入不到，页面加载不出来。需要在vue 项目的config文件夹的index.js文件里面配置对应的路径。build: { assetsPublicPath: '/xxx/' // 默认为'/' }...
2019-12-11 21:10:22
7982
原创 vue 中确定url中的参数
有个需求就是接口需要需要根据url中的参数，然后传递对应的值。比如说，url中的参数有两种情况，一种是?a=xxx，一种是?b=xxx，所以需要确定url中到底是a 还是b。比较简单直接放代码：// cmmmon.js const getUrl = url => { // 这里确认参数的时候不能`a`和`b`同时存在 if(url.includes('a'))...
2019-12-11 19:53:31
1605
原创 vue h5 ios点击屏幕不收起键盘
vue h5 ios点击屏幕不收起键盘在安卓下，点击屏幕能够正常的收起键盘，但是在ios下，点击屏幕是不会收起键盘的，那么就需要手动让他收起键盘。在网上查找一番后，看到一篇文章：https://www.cnblogs.com/binmengxue/p/5993166.html。受这篇文章的启发，我改良成vue版。原理就是：在ios下，键盘弹出，然后点击屏幕空白，键盘不会收起，其实就是in...
2019-11-29 22:13:54
2754
原创 使用Mint-ui 的Radio，最后一个元素底部出现一条线。
Mint-ui 中使用Radio，解决出现一条线的问题。在vue中，使用mint-ui，发现默认的radio选项都是column的。因为需要row的，所以需要转换一下位置。F12审查元素后，找到对应的class，为mint-radiolist，在<style>中进行如下覆盖样式.mint-radiolist { display: flex; flex-flow: row ...
2019-11-07 20:30:02
586
原创 Vue 项目在手机上预览
Vue 项目在手机上预览首先找到项目里面config => index.js，找到host: localhost，把localhost改为你的电脑的ip地址。（ip地址可以通过cmd输入命令ipconfig查看）修改完后，需要重新启动项目。（确保电脑和手机处于同一局域网内）手机输入带ip的网址，就可以访问了（带端口号）。...
2019-11-07 19:54:46
411
原创 Vue 调用微信支付接口配置 支付目录
Vue 调用微信支付接口 配置支付目录微信官方文档是这样说的：一、设置支付目录请确保实际支付时的请求目录与后台配置的目录一致（现在已经支持配置根目录，配置后有一定的生效时间，一般5分钟内生效），否则将无法成功唤起微信支付。在微信商户平台（pay.weixin.qq.com）设置您的JSAPI支付支付目录，设置路径：商户平台–>产品中心–>开发配置，如图7.7所示。JSAP...
2019-11-06 21:34:01
1023
原创 vue中使用import之后报错There are multiple modules with names that only differ in casing. This can lead to u
在vue中使用import后，浏览器报如下黄色警告信息There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal ca...
2019-10-30 22:38:11
452
原创 Websocket中报错Method "socket" has already been defined as a data property.
在使用Websocket的时候，发现浏览器报如下错误Method "socket" has already been defined as a data property.因为有个东西依赖websocket，需要等到websocket初始化后才能使用，如果没初始化好就先执行了，就会发现使用不了。于是百度后，有说可以设置this.socket.readyState === 1，设置了之后，虽然...
2019-10-30 22:32:16
918
原创 vue中报错 Property or method "xxxx" is not defined on the instance but referenced during render. Make
报如下错误：Property or method "XXXX" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by init...
2019-10-29 19:48:54
12851
1
原创 vscode 设置代码片段 Vue设置快捷模板
vscode 设置代码片段首先shift + ctrl + p输入snippet选择首选项：配置用户代码片段新建全局代码片段文件输入文件名vue结构代码片段{ "vue-template": { // vue-template 为快捷键的名字 // "scope": "vue-html", //这里可以设置作用域，只能在`<template>...
2019-10-28 19:54:15
1108
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人