- 博客(74)
- 收藏
- 关注
RSS订阅
原创 不写Js也能实现点击事件？说说你不知道的HTML之＜Label＞标签
判断HTML中的那些黑科技之label 标签，不写js 我一样实现点击切换事件。
2022-10-11 16:26:36
745
10
原创 微信小程序接入NFC，使用HCE模拟主机卡完成NFC刷卡发送消息
NFC是一种采用13.56MHz频带的近距离无线通讯技术，虽然通讯距离仅为10cm左右，不过和非接触式IC卡技术一样，我们只需要“触碰一下”即可在不同的电子产品之间交换数据。与非接触IC卡不同，NFC与非接触式IC卡不同，NFC可进行双向通信。只要是支持NFC的产品和IC卡，就可以读出或写入数据。还可在手机等便携产品间进行通信。数据传输速度不高，有106kbit/秒、212kbit/秒、424kbit/秒以及848kbit/秒四种速度可供选择。NFC介绍。
2022-09-19 18:14:26
11460
3
原创 electron实战 - 项目搭建
工欲善其事,必先利其器从0入门electron + react 之 项目初始化搭建。正所谓，你要去当一个运动员之前，你必须有一个好的底子，而我们本章就着重于项目初始化搭建。安装依赖与环境1. 我们需要安装判断electron的开发环境插件npm install electron-is-dev --save-dev2. 安装渲染进程的react开发环境npx create-react-app 项目名3. 安装electron环境npm install electron .
2021-09-18 19:48:41
1287
6
原创 Egg如何实现文件上传
那么在没有单独的资源服务器的时候，上传的文件可能要放在我们的项目文件夹服务器上，我们如何实现文件上传呢？在当前项目找个目录将图片放进去，一般都会放在 app/public/upload 下。我们需要在服务端中确定文件的接收方式，这里我们采用file 模式。其中 multipart 的配置有许多，如 上传格式的定制，文件大小的限制等。在服务端接收到发来的图片信息的时候，我们需要获取到图片内容。返回上传文件的地址。我们需要在前端调选择文件，调用接口并且将图片带上。将获取到的图片内容放入到指定的目录下。
2022-11-18 16:24:23
1675
1
原创 Egg实现用户注册登录以及使用jwt进行token鉴权
用户鉴权，一种用于在通信网络中对试图访问来自服务提供商的服务的用户进行鉴权的方法。用于用户登陆到DSMP或使用数据业务时，业务网关或Portal发送此消息到DSMP，对该用户使用数据业务的合法性和有效性（状态是否为激活）进行检查。将复杂的东西简单化。简单来说，鉴权就是用户在浏览网页或App时，通过约定好的方式，让网页和用户建立起一种相互信赖的机制，继而返回给用户需要的信息。Token 令牌OAuth(开放授权)
2022-11-18 14:38:48
1637
1
原创 【Egg从基础到进阶】二：安装本地Mysql
什么是数据库：数据库是用于将数据持久化存储的一个容器，并且在这个容器处于云端，而不是像游览器的本地存储一样，数据只是针对你当前所在游览器。游览器的存储是一对一的。而线上数据库的存储是一对多的，或者是多对多的。而在服务端要做的事情就是将数据库中的表与表之间，简历好一定的联系，根据产品需要的逻辑联系，将数据以API接口的形式抛出，供前端人员使用。所以我们虽然是前端，但是为了成为一名合格的全栈，数据库是我们避不开的问题。本章就带大家安装自己的mySql。Mysql 的安装分为 Mac跟 windows。
2022-11-17 10:48:03
487
原创 前端算法之搜索插入位置
给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。这就是搜索插入位置算法。与二分算法很相似
2022-11-01 18:12:00
352
原创 前端算法之二分查找
二分查找又称之二分折半查找法，指的是在一个有序（升序，或者降序）的列表中进行查找某一个值的办法。它的意思是，二分查找维护查找空间的左、右和中间指示符，并比较查找目标或将查找条件应用于集合的中间值；如果条件不满足或值不相等，则清除目标不可能存在的那一半，并在剩下的一半上继续查找，直到成功为止。如果查以空的一半结束，则无法满足条件，并且无法找到目标。在实际情况中也可以这么理解。1. 有一个有序的列表（例如某个升序或者降序的大批量数据）
2022-11-01 11:50:19
605
原创 前端设置页面字体尺寸跟随屏幕大小而进行变化
window.onresize的意思是，当监测到屏幕分辨率变的时候，所以我们需要一个操作就是，页面一加载完成，我们给window.onresize 绑定一个方法。这是因为，每次window.onresize 都会去执行 resize，而在屏幕分辨率发生变化的时候，window.onresize 和浏览器的自身实现有关系.不同的浏览器和操作系统实现可能不一样,目前谷歌是执行了两次，有是时候是一次。我们去页面上查看，会发现当我们拖动文档流的时候，字体并不会重新设置。1. 我们需要一个监测屏幕分辨率的方法。
2022-10-19 20:13:27
6392
原创 Electron如何调用.dll文件
调用.dll文件与调用.exe稍有类似 ，类似的是可以在主进程里调用，但是同时也可以在渲染进程中进行调用。invoke3 这个方法第一个为要传递给.dll的入参，因为我们没有，所以不用传递，第二个则为一个函数，它返回两个值，第一个值为调用错误。大家可以这样解决，如果是在渲染进程中，大家的存放 .dll 的文件尽可能地放在项目的根目录，这样不管是开发环境还是编译环境我们都可以直接通过。一定是先从DOM（渲染进程）发送通知到主进程（main.js）中，由主进程接收到后，我们再进行.dll的文件调用。
2022-10-19 18:14:43
2593
原创 Electron如何调用.exe文件并传递参数
在网上找了一堆说的都是下载什么包，做什么操作，云里雾里。至于为什么.exe软件后面要跟参数，这个是需要大家去跟客户端程序员去对接的，看需不需要跟参数，每个参数都是什么，一定要记住，顺序是以客户端程序员排列的顺序为主。这样他那拿到的就是一个对象。在使用exec的时候一定要注意，cwd 指的是当前.exe存放目录，一定要配置正确，否则可能软件能调通，但是工作环境会出现一些问题，导致.exe软件内部出现一些问题。如上代码，我们从渲染进程给主进程发送指令，并携带了一些参数，如上：ip，端口，电话号码，密码等参数。
2022-10-19 17:52:47
5930
原创 React、Vue项目中如何调用多个不同的后台请求地址
在项目每次发起请求的时候，根据当前业务传入不同的参数，分别获取不同的请求接口即可。线上一个服务器，那如果说这是在内网环境下部署呢，就比如医院项目中，有三个服务器，一个资源上传，一个普通接口（包含认证），一个表单数据记录。上述代码中axios，是我二次封装的axios，axios的部分代码如下，它接收传递进来的url 做为项目的请求地址。首先，我们先来拆解它的需求，也就是说我们一个网页项目需要同时使用三个不同地址的需求。
2022-10-19 15:49:50
4025
2
原创 React、Vue项目build打包编译后如何再修改后台请求地址
目打包编译 npm run build 之后成为了普通的静态网页才可上线进行部署及发布。同样这时候我们也已经将代码全部写好了。如果说要改里面的某个值或者修改请求地址我们应该怎么办呢？
2022-10-19 15:13:30
3082
2
原创 Webpack之知识初探索，搭建一个简单的webpack开发环境
webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。对前端来说，webpack的理解就是：webpack是从入口文件开始，经过模块依赖加载/分析/打包三个流程完成项目构建。
2022-10-19 11:10:23
236
原创 Electron之开发中的难点整理
而主进程渲染完后，同时又启动了一个新的子窗口。项目中，我们经常会碰到这样一个情况，开发环境中，electron的打开地址一般指向本地的项目开发地址，如：localhost:8080。进程之间的通信无非就是，渲染进程给主进程发消息，主进程接受到后来调用node一些能力进行处理window交互的一些东西。根据当前环境我们可以配置出，如果是开发环境我们就走 地址，如果不是开发环境，我们则走项目打包之后的地址即可。在一个electron的程序中，一般会存在一个主进程跟若干个渲染进程。则可以将其中部分区域排除掉。
2022-10-19 10:39:25
497
原创 JavaScript之canvas初使用
canvas标签中写入的HTML内容只有在游览器不支持canvas的时候才会显示，一般情况下，为了使网站建设更加完善，我们在canvas标签里，会写入一些视频、图片、当canvas标签不能正常显示的时候，canvas标签中的内容就会被代替canvas显示。ctx.drawImage(imgObj,原图开始裁剪位置x坐标，原图开始裁剪位置y坐标，原图裁剪的宽度，原图裁剪的高度，canvas上开始绘制位置的x坐标，canvas上开始绘制图片y坐标，canvas上图片宽度，canvas上图片高度)；
2022-10-19 10:12:31
2863
原创 PHP之基础入门
Php全称为：Hypertext Preprocessor(中文名：超文本预处理器)；简称：personal Home page;
2022-10-19 10:07:47
2076
原创 Vue之函数式弹窗组件的封装原理
很明显指的就是vue的实例。细心的朋友会发现，这个页面与以往的组件页面不一致，那是因为，我们本次的组件是需要JavaScript来调用的，而非传递数据改变其状态调用。所以在这一步，我们就必须将当前的弹窗进行实例化，因为我们不是常规使用组件方法，所以这是哈哈我们使用Vue.extend 或者 newVue 实例化后，利用$mount 挂载到body下。因为我们通过已知的业务，通知可以是多条的，并且每一条都可以有不同的展示时间，所以在弹窗展示这里，我们用notices 数组来保存一个个的单内容。
2022-10-18 15:48:13
1806
1
原创 Vue之如何动态渲染.vue文件
动态渲染.vue文件其实存在于很多地方，例如近期做的表单设计器就是其中一个，生成vue代码后，应用在其它地方。要求下载完vue文件在其它项目中引入即可使用。那么动态渲染.vue项目如何去做呢？
2022-10-17 18:23:16
3366
3
原创 Vue之深入理解extend与手动挂载$mount
这样既可以使用 .vue 来写复杂的组件（毕竟在 template 里堆字符串很痛苦），还可以根据需要传入适当的 props。上一章节我们说到，创建一个vue实例的时候，都会有一个选项el，来指定实例的根节点，如果不写el选项，那组件就处于未挂载状态。方法对组件进行了手动渲染，但它仅仅是被渲染好了，并没有挂载到节点上，也就显示不了组件。的作用，就是基于 Vue 构造器，创建一个“子类”，它的参数跟。，就可以让组件渲染，并且挂载到任意指定的节点上，比如 body。手动渲染的组件，如果要销毁，也要用。
2022-10-14 18:43:13
1201
原创 vue之浅谈extend与$mount
使用场景：在写vue时，不管是cdn的方法还是在webpack里用npm 引入vue，我们都会有一个根节点。并创建一个实例。类似于 webpack 。也有一个入口文件。在main.js里，最后会创建一个实例。因为webpack 基本都是前端路由的，它的html里一般都只有一个根节点其余都是通过JavaScript来进行完成的，也就是说许多的vue组件，每一个页面也是一个组件。比如，我们要使用一个组件 渲染时，这个自定义标签就会被替换为组件的内容，而且在哪写的自定义标签，就在哪里被替换。换句话说，
2022-10-14 11:25:12
414
原创 Vue黑科技之组件万能通信方法
findComponentsUpward 的使用场景较少，一般只用在递归组件里面，因为这个函数是一直向上寻找父级（parent）的，只有递归组件的父级才是自身.最后还是要叮嘱大家，这5个函数的原理都是通过递归，遍历找到指定组件的name选项匹配的组件实例并返回。context.$children 得到的是当前组件的全部子组件，所以需要遍历一遍，找到有没有匹配到的组件。name，如果没找到，继续递归找每个 $children 的 $children，直到找到最近的一个为止。寻找兄弟组件的方法，是先获取。
2022-10-13 19:59:04
283
原创 React之Context 上下文模式
React组件树A节点，用Provider提供者注入了theme，然后在需要theme的地方，用Consumer消费者形式取出theme，提供给组件渲染使用。老版本的Context老版本中，React用PropTypes来声明context类型，提供者需要getChildContext来返回需要提供的context，并且用静态属性childContextTypes声明所需要提供的context数据类型。
2022-10-12 19:35:43
630
原创 React之ref的高阶用法
如果通过高阶组件包裹一个原始类组件，就会产生一个问题，如果高阶组件HOC没有处理ref，那么由于高阶组件本身会返回一个新的组件，所以当使用HOC包装后组件的时候，标记的ref会指向HOC返回的组件，而并不是HOC包裹的原始类组件，为了解决这个问题，forwardRef可以对HOC做一层处理。在爷爷组件中可以进行使用。比如想要通过标记子组件ref，来获取子组件下的孙组件的某一DOM元素，或者是组件实例。父组件使用 props传递值，将子组件给父组件要说的话的方法传递给子组件，供子组件给父组件进行传递。
2022-10-12 19:32:00
1594
原创 React之Ref如何去使用？
ref对象的创建，所谓创建，就是通过React.createRef或者React.useRef来创建一个Ref原始对象。而react对ref的处理则是，主要指的是对于标签中的ref属性，react是如何处理以及react转发ref。什么是ref对象，ref对象就是用createRef或者useRef创建出来的对象。第二种是通过函数组件创建Ref，可以用hooks中的useRef来达到同样的效果。第一种是通过React.createRef 创建一个ref对象。react提供两种方法创建ref对象。
2022-10-12 19:28:50
446
原创 React之ReactHook与生命周期
useEffect 和 useLayoutEffect的区别： 修改DOM，改变布局就用useLayoutEffect，其它全用useEffect。问： useEffect 与 componentDIdMout 以及 componentDidUpdate执行时机有什么样的区别？答：useEffect对react是异步执行，而componentDIdMount 以及 componentDidUpdate是同步执行。useEffect不会阻塞游览器绘制。
2022-10-12 19:25:26
1397
原创 React之Class类组件的生命周期
react在render阶段会深度遍历react fiber 树，目的就是发现不同（diff），不同的地方就是接下来需要更新的地方，对于变化的组件，就会执行render函数，在一次render过程中结束后，就回到commit阶段，commit阶段会创建修改真实的DOM节点。在mount阶段，首先执行的是constructClassInstance函数，用来实例化React组件，在组件章节已经介绍了这个函数，组件中constructor就是在这里执行的。
2022-10-12 19:23:19
1514
原创 React之使用Props的小技巧
上述代码中，Container 为父级组件，Children为子级组件，父级组件嵌套子级组件的时候，在父级组件中可以通过props.children获取到父组件下的子级组件的元素。1， 抽象 props 抽象 props 一般用于跨层级传递 props，一般不需要具体指出 props 中某个属性，而是将 props 直接传入或者抽离道子组件中。Father组件一方面直接将Index组件的IndexProps抽象传递给了Son组件，一方面也混入了自己的fatherProps。2，混入 props。
2022-10-12 19:21:39
466
原创 React之setState详解
a. 在不是 pureComponent 组件模式下，setState 不会浅比两次 state 的值，只要调用 setState，在没有其它优化手段的前提下， 就会执行更新，但是 useState 中的 dispatchAction 会默认比较两次 state 是否相同，然后决定是否更新组件。setState 的第一个参数： 当 obj 为一个对象的时候，则为即将合并的 state，如何 obj 是一个函数，那么当前组件的 state 和 props 将作为参数，返回值用于 合并新的 state。
2022-10-12 19:18:06
2625
原创 javaScript杂谈之Promise
Promise 是 JavaScript 语言提供的一种标准化的异步管理方式，它的总体思想是，需要进行 io、等待或者其它异步操作的函数，不返回真实结果，而返回一个“承诺”，函数的调用方可以在合适的时机，选择等待这个承诺兑现（通过 Promise 的 then 方法的回调）。async函数是一种特殊语法，特征是在function关键字之前加上async关键字，这样就定义了一个async函数，我们可以在其中使用await来等待一个promise。这里每次的执行过程，其实都是一个宏观任务。
2022-10-12 19:11:41
393
原创 js之正则表达式
如果reg设置了全局匹配的话，返回所有符合reg的字符串组成的数组，如果未设置全局匹配，则只返回第一个。找到str中第一个符合reg的公式，（或者第一个str2）出现的位置，就算reg设置了全局匹配，依旧返回第一次出现的位置，如果没有找到符合条件的字符串，则返回-1；将str中符合reg公式的字符串替换成了newstr，如果reg设置了全局匹配，就替换所有，如果未设置，则只替换第一个。元字符：在正则表达式中，有一些字符有着特殊的含义，如果要去匹配这个字符的本身，要将其进行转移（例如：/\//）；
2022-10-12 18:58:14
483
原创 angular之入门基础
2，angular 是由谷歌开发的框架，奇特点是对于DOM的操作变的更加的简介；代码量大大的降低了，对数据的操作变的更加的灵活（通过控制数据的变化，间接的控制了DOM节点。脏检查（一旦某一个数据发生变化，angular就会在第一时间检测到这个元素，angular一直在实时检查中），angular的模块化也让开发变的更加的方便简洁）；（2）要配置angular路由，必须要引入angular路由的js文件，而且这个文件必须和当前引入的angular。值为true的时候为降序，false的时候为升序。
2022-10-12 18:55:39
1854
1
原创 vue之vue2.x基础知识
v-bind:class = "{ active : isActive }"( isActive 是一个bol类型的值，false不添加，true为添加。v-on:click.self.prevent只会阻止元素本身元素的点击事件。( v-on:click.self=“ ” )点击事件只在当前绑定元素上触发。3.vue的条件语句（为true的时候，显示，为false的时候隐藏）数组的索引循环 （v-for=“（v，i） in users”）/键值对形式循环对象:（键值对形式）k代表的是值，v代表的是键。
2022-10-12 18:49:46
270
原创 JavaScript之观察者模式
物业会在群里通知办公楼的封锁情况，而各个公司的负责人则需要在群里随时观察是不是有情况，从而做出改变。同时这个群的所有者（物业）也会用有拉人入群，发送公告，清人出群的权限。观察者模式，其实指的就是，一对多的解释。一个对象发生改变，对应的多个订阅者都需要发生对应改变，这种多个对象观察一个对象的区别就是观察者模式。有一个对象为主体，我们也可以叫他为通知者，也就是说，这个主体需要在被观察者的状态改变后，用来通知观察者们。而观察者（公司）仅仅是在物业群有公告发出的时候，根据公告自身，自己做出响应。
2022-10-11 14:57:03
286
空空如也
报错在运行时中解析用户控制的指令，会让攻击者有机会执行恶意代码
2022-09-28
TA创建的收藏夹 TA关注的收藏夹
TA关注的人