- 博客(36)
- 收藏
- 关注
RSS订阅原创 使用Google reCAPTCHA进行人机验证
而且reCAPTCHA还可以记录并分析使用该人机验证的请求次数，并对可以的请求进行统计和监管。reCAPTCHA是Google公司推出的一项验证服务，使用十分方便快捷，在国外许多网站上均有使用。它与许多其他的人机验证方式不同，它极少需要用户进行各种识图验证。验证通过后success返回的值为“true”，如果验证失败则会返回error-code，下面为error-code及其对应原因。可以设置验证框的主题默认主题为light，可以添加属性：data-theme="dark" 变为暗色主题。
2022-09-28 16:51:42
7525
原创 运用i18n 实现国际化（中英文切换）
命令进入项目目录，执行以下命令安装vue 国际化插件vue-i18n在项目的src下添加lang文件夹增加中文翻译文件（zh.js）以及英文翻译文件（en.js），里面分别存储项目中需要翻译的信息。zh.js 中文语言包上面的代码正式将 vue-i18n 引入 vue 项目中，创建一个 i18n 实例对象，方便全局调用。我们通过 this.$i18n.locale 来进行语言的切换。当 locale 的值为‘zh-CN’时，版本为中文；
2022-09-28 16:40:47
2669
原创 vue-router技术点
所谓“嵌套视图”，从组件树的角度来讲，所显示的组件的内部还有；重定向与别名：当用户访问一个未定义的路由时，给一个重定向（跳转到另一个已定义的路由上），这是一种用户体验的优化。别名是path的简写，可以用于路由访问；动态路由传参：像这样 `{path: '/good/:id', component }`定义路由规则，在这条动态路由规则对应的组件中使用this.$route.params接收，或者开启props:true后使用 props选项来接收。
2022-09-28 16:12:56
363
原创 vuex技术点
mutations方法在actions中或组件中使用，使用$store.commit('mutations方法',payload)来触发。在组件中使用this.$store.dispatch('actions方法', payload)。原则1：只要使用Vuex一定要拆分store，拆分store后在根store上不要再使用state/mutations/actions。第二步：使用封装过的axios实例进行调接口。- 第三步：在组件中使用this.$store/四个map方法来使用store或走数据流程。
2022-09-28 16:08:59
643
转载 JS中使用bignumber处理高精度小数 失去去精确度运算 bigNumber用法
或 npm install bignumber.js --save 命令安装后使用 import BigNumber from 'bignumber.js' 引用。2、bignumber.js API地址： http://mikemcl.github.io/bignumber.js/下载地址：https://github.com/MikeMcl/bignumber.js/releases。解决方式：引用bignumber.js用于数字精度要求较高的计算。
2022-09-28 15:59:27
900
原创 Web前端浏览器兼容性问题及解决方案
继续往下读，他也认识*heihgt， 所以当ie6读到*height:200px的时候会覆盖掉。} /* IE7+、FF、Chrome、Safari、Opera 可以识别 */} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别。继续往下读，ie6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度。} : /* 仅IE9识别 */
2022-09-27 16:11:32
1027
转载 vue3项目全家桶知识
15.在Vue2中，组件有一个 render 选项（它本质上是一个渲染函数，这个渲染函数的形参是 h 函数），h 函数相当于 React 中的 createElement()。21.Vue3中，新增了 组件，这相当于 ReactDOM.createPortal()，它的作用是把指定的元素或组件渲染到任意父级作用域的其它DOM节点上。12.Vue3中，对于 v-if/v-else/v-else-if的各分支项，无须再手动绑定 key了， Vue3会自动生成唯一的key。
2022-09-27 16:08:21
770
原创 antd vue 表格rowSelection
如上图，是antd的可选择列表，我们如何将普通列表变成可选择列表呢，这就用到了一个很重要的属性rowSelection。如下图，rowSelection属性是一个对象，他有很多的参数。下面是antd官网截图，关于rowSelection的功能配置。
2022-09-27 11:26:08
2991
转载 antd Table组件rowSelection方法的一些坑：table组件多选时，会选中下一页的表格同行数据
在 组件中有 rowSelection={rowSelection} 方法，可以让Table的第一列成为联动的选择框。中说到通过 rowSelection.selectedRowKeys 来控制选中项。比较坑的是，selectedRowKeys 控制的只是dataSource当前的顺序编号。一定要加上rowKey="id"或者rowKey={record => record.id}，后来经过多次调试发现很多BUG都跟这个参数有关，不然会导致联动的选择框状态异常。
2022-09-27 10:49:16
824
原创 路由的三种传参方法
sessionstorage/localstorage/cookie 进行离线缓存存储也可以，用vuex也可以，不过有些大材小用吧，不管怎么说因场景而异。可以看出需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。通过路由属性中的name来确定匹配的路由，通过params来传递参数。使用path来匹配路由，然后通过query来传递参数。
2022-09-20 17:23:45
186
原创 webpack（超详细）
一个静态模块打包器。但，webpack的配置项十分的多，如果我们希望在构建测试/准生产代码时使用A版本配置项，而在构建生产代码时使用B版本配置项，我们将面临着来回修改配置项的痛楚。通过上一节，我们已经可以使用打包工具去将写好的代码进行打包了，但是在操作的过程中大家可能会发现有一个比较麻烦的地方：修改一次代码就得重新打包一次，这种感觉有点类似于之前的。在浏览器中执行的时候会报错，需要注意，代码是没有问题的，问题是浏览器不兼容（浏览器不认识模块化的语法，需要使用特定的工具进行转化）。
2022-09-19 10:44:42
1486
转载 Vue实现登录功能全套详解（含封装axios）
1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面5、每次调后端接口，都要在请求头中加token。
2022-09-16 16:35:19
654
原创 vue3开发环境搭建（vite趋势）
这个是尤大开发的新工具，目的是以后替代webpack，原理是利用浏览器现在已经支持es6的import了，遇到import会发送一个http请求去加载文件，vite拦截这些请求，做一些预编译，省去了webpack冗长打包的时间，提升开发体验。有两种视图组件书写的方式，单文件组件SFC；本人还是比较喜欢JSX语法书写的，单文件组件 支持，方便组内成员使用。懒加载有助于代码分割，减少包的体积。路由首页，用于记录跳转的菜单路由信息。可通过工具函数定义，获得类型提示。按照vue的语法书写项目，安装。
2022-09-15 16:23:10
832
转载 vue-cli3创建项目
这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪，通常我们会选择放到独立位置，让package.json文件干净点，所以选择第一个。这里的意思是问你本次项目是否采用history模式，如果选择Y,需要后台配置具体看vueRouter官网解释，这里我门选择 n。这里的意思是问你什么时候进行代码规则检测，我一般会选择保存就检测，也就是Lint on Save。这里的意思是问你选择哪一种CSS预处理语言，我的项目中一般使用的是SCSS我选择第一个。最开始回车会出现下面两项。
2022-09-15 15:25:15
91
原创 vue2中的vuex的使用和讲解，$store(它就是由vuex创建的)
假设组件里面有一个数据 n=1(这个不是公共数据)，state.sum才是公共数据，其实原理就是，通过调用actions 的方法触发mutations 的方法修改state。概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。补：上面这句话太抽象了，简单地说就是$store里面有方法和共享数据，但是这个方法只能对里面的共享数据操作，你传参也只是配合方法对这个共享数据操作。
2022-09-14 14:53:38
1208
原创 encodeURI和decodeURI转码和解码
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。使用函数可以对 URI 进行编码。
2022-09-13 14:22:36
3401
原创 vue中this.$route.query和this.$route.params的正确使用
(4)、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据还会显示存在（项目中遇到此问题）（4）、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据不存在（(url中没带参数)）（3）、在url中形式（url中不带参数）(3)、在url中形式（url中带参数）
2022-09-13 14:14:32
757
原创 JavaScript Storage setItem() 方法
方法设置指定的存储对象项的值。方法属于Storage对象，可以是对象 ，也可以是对象。
2022-09-13 13:54:22
1716
原创 JavaScript fromCharCode() 方法
fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。该方法是 String 的静态方法，字符串中的每个字符都由单独的 Unicode 数字编码指定。使用语法： String.fromCharCode()。
2022-09-13 11:44:01
231
原创 Vue Router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由（套娃，父子路由）模块化的、基于组件的路由配置路由参数、查询、通配符带有自动激活（默认选中效果）的 CSS class 的链接HTML5 历史模式或 hash 模式MVVM框架采用的路由都会在地址改变的时候页面不刷新，这种应用我们称之为SPA（Single Page Application）
2022-09-08 11:24:55
477
原创 前端路由实现
HTML5的History API为浏览器的全局history对象增加了该扩展方法。它是一个浏览器（bom）的一个接口，在window对象中提供了onpopstate事件来监听历史栈的改变，只要历史栈有信息发生改变的话，就会触发该事件。有带#号，后面就是hash值的变化。改变后面的hash值，它不会向服务器发出请求，因此也就不会刷新页面。并且每次hash值发生改变的时候，会触发hashchange事件。// 替换当前页在历史记录中的信息。// 通过 location.hash 获取到最新的 hash 值。
2022-09-08 11:14:21
197
原创 Vue2中双向数据绑定原理
/ 应当直接在Object构造器对象上调用此方法，而不是在任意一个Object类型的实例上调用。// 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。要定义选项，“{ }”。在这里面设置getter和setter（计算属性）。要定义或修改的属性的名称。// es5中提供的方法。
2022-09-08 11:00:07
91
原创 虚拟DOM与Diff算法
在一次操作中，往往会伴随多次个DOM节点更新，浏览器收到第一个DOM请求后并不知道还有若干次更新操作，因此会马上执行流程，最终执行若干次次。在后续找DOM坐标的时候，可能因为前期更新DOM导致了后续需要寻找的DOM坐标发生了变化。：若一次操作中有若干次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这若干次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象。定义：指将真实的dom按照特定的语法转化（抽象）成一个js对象，这个。放到DOM树上，再进行后续操作，避免大量无谓的计算量。
2022-09-08 10:57:17
103
原创 Vue目录结构介绍，关于ESlint
public：不需要去改动现有的文件，里面存放的是浏览器访问的入口文件（index.html）src（）main.js：项目/程序入口文件 （该文件中JavaScript代码都会被执行）App.vue：根组件（万物之根）功能assets：静态资源目录（图片、视频、音频等就是静态资源），这里面的静态资源浏览器是无法直接访问的，而是给组件通过模块化的方式导入进组件使用的。项目中的静态资源有2个地方可以放public：供在public/index.html中直接引入（link标签、script标签）的。
2022-09-08 10:45:25
217
原创 Vue项目创建（vue cli详细）
如果当前你的终端工作路径带有中文或者空格，你可以使用`cd 路径`形式进行路径切换，切换到符合要求的路径中。# 首先需要进入到对应的目录中(英文目录不要有空格及中文),执行如下命令。vue create 项目名称(创建时会自己以对应的项目名称生成目录)# 上述命令中，可以允许变的就是`myproject`部分。vue create 项目名。通过UI界面方式去创建（了解）通过命令行的方式切创建（推荐）是否保存本次操作预设。
2022-09-08 10:32:49
187
原创 Vue项目初始化 - 创建项目与同步
以后实际工作是master分支为最终稳定运行的版本的代码，而在开发期间提交的代码一般会提交给开发分支，待后期测试没问题，再与master分支进行合并（pull request）。后续操作开发就在dev分支上开发，等全部代码编写完毕，再与master分支合并。（用于做测试的分支，等测试代码没问题之后再往主分支上合并）# 将本地当前的分支代码上传到远程的master分支中。# i-moive，根据自己的项目名称进行替换。（==可选操作==）为当前项目设置记住密码/同步初始化项目到远程仓库。
2022-09-08 10:24:26
289
原创 URL.createObjectURL和URL.revokeObjectURL
每次调用createObjectURL的时候,一个新的URL对象就被创建了.即使你已经为同一个文件创建过一个URL. 如果你不再需要这个对象,要释放它,需要使用URL.revokeObjectURL()方法. 当页面被关闭,浏览器会自动释放它,但是为了最佳性能和内存使用,当确保不再用得到它的时候,就应该释放它.比如一张图片,我创建了一个对象URL,然后通过这个对象URL,我页面里加载了这张图.既然已经被加载,并且不需要再次加载这张图,那我就把这个对象URL释放,然后这个URL就不再指向这张图了.
2022-09-06 17:35:55
633
原创 window BOM 根节点
console.log(location.hostname)//域名。console.log(location.protocol)//协议。console.log(location.pathname)//路径。console.log(location.port)//端口号。") //产生历史记录,只能设置跳转页面的地址。
2022-09-06 15:56:26
109
原创 鼠标事件，滚轮事件
e.cancelBubble 设置为true取消冒泡，e.stopPropagation()兼容写法。mouseenter mouseleave 只执行监听当前元素的进入和离开事件，对子元素不冒泡。e.metakey 按着command点击 苹果。主要用于 mousedown mouseup。e.shiftkey 按着shift点击。e 就是鼠标点击，系统抛发的鼠标事件。e.ctrlkey 按着ctrl点击。contextmenu 右键菜单。e.altkey 按着alt点击。
2022-09-06 15:40:09
379
原创 严格模式的要求
Cannot set property offsetLeft of # which has only a getter（获取） setter(可以设置)console.log(this);//严格模式中this被指向undefined。arguments.callee.caller 回调当前函数的函数。arguments.callee 就是这个参数所在的当前函数。严格模式下不能使用with。
2022-09-06 15:33:21
1245
原创 DOM操作 - setAttribute方法，getAttribute方法
代码解释：通过ID获取到DOM属性节点a,再设置节点a的dir属性值为main，达到动态改变路径的效果。②文本节点：向用户展示的内容，如...中的JavaScript、DOM、CSS等文本。①元素节点：即标签节点，、、等都是元素节点。③属性节点：元素属性，如标签的链接属性href=" "。div.setAttribute(标签属性名,标签属性值)div.getAttribute(标签属性名);1.getAttribute()方法介绍。
2022-09-06 15:15:20
472
原创 stopPropagation（）方式阻止事件向上传播
js中的事件默认是冒泡方式，逐层往上传播，可以通过stopPropagation()函数停止事件在DOM层次中的传播，通过dojo中的event.stop(evt);有些时候有两个节点绑定了相同的事件，例如：click事件，只是节点的级别可能不同，可以是父子节点，所以可能当点击子节点的时候，可能在触发子节点的同时会触发父节点。当点击按钮时会触发这两个节点的事件，所以需要阻止事件向上传播事件，一般为冒泡方式传播事件，每一个事件对象，都有stopPropagation()函数，用于阻止事件的传播。
2022-09-06 15:00:01
528
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人