果冻

原创 使用 Express 写接口

使用Express 写接口

原创 Node.js 使用 cors 中间件解决跨域问题

cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题。CORS （Cross-Origin Resource Sharing，跨域资源共享）由一系列HTTP 响应头组成，。浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头，就可以。

原创 nodemon使用

在编写调试 Node.js 项目的时候，如果修改了项目的代码，则需要频繁的手动 close 掉，然后再重新启动，非常繁琐。现在，我们可以使用 nodemon（https://www.npmjs.com/package/nodemon） 这个工具，它能够监听项目文件的变动，当代码被修改后，nodemon 会自动帮我们重启项目，极大方便了开发和调试。

原创 nrm使用

为了更方便的切换下包的镜像源，我们可以安装 nrm 这个小工具，利用 nrm 提供的终端命令，可以快速查看和切换下。

原创 解决electron修改主进程后需要重启才生效

修改electron主进程代码后程序不会刷新，需要重新启动才生效，一行代码搞定自动重启。

原创 vue引导线leader-line-vue使用

【代码】vue实现连接线。

原创 vue Element ui上传组件el-upload封装

vue Element ui上传组件el-upload封装

原创 Electron mac申请麦克风/摄像头权限，Electron无法打开麦克风

在渲染进程中发送消息给注进程，让他申请麦克风或者摄像头权限。

原创 vue3插槽的使用

插槽内容可以访问到父组件的数据作用域，就好比上述中的 message 是父组件的。插槽内容无法访问到子组件的数据，就好比上述 App.vue 中的插槽内容拿不到子组件 child 的数据。

原创 h5页面腾讯验证调用调用安卓和ios方法传递参数

与安卓和ios定义好调用的方法名，定义好要传递的参数。

原创 纯前端播放文件流视频并预览并截取视频第一帧

纯前端播放文件流视频并预览并截取视频第一帧

原创 解决electron 下载依赖慢打包拉去依赖失败

解决electron npm install下载依赖慢或者下载依赖失败

原创 Mac制作icns

mac制作icns

原创 js点击复制 复制代码即可使用

js点击复制功能，复制代码即可使用

原创 vue富文本编辑器使用(简单粗暴复制即可用)

1、下载插件npm i wangeditor --save插件官网地址：https://www.wangeditor.com/2、封装富文本组件<template lang="html"> <div class="editor"> <!-- <div ref="toolbar" class="toolbar"></div> --> <div ref="editor" class="text"></div

原创 js扁平数据转成树形数据&树形数据转成扁平数据

1、扁平数据转成树形数据function setTreeData(source){ let cloneData = JSON.parse(JSON.stringify(source)) // 对源数据深度克隆 return cloneData.filter(father=>{ // 循环所有项，并添加children属性 let branchArr = cloneData.filter(child=> fat

原创 vue3.0学习笔记

完善中，后面会不间断更新。一、Vue 3.0六大亮点1、performance：性能比vue2.x快1.2-2倍。2、Treeshaking support：按需编译，体积比vue2.x更小。3、Composition API（类似react Hooks）。4.Better TypeScript support：更好的TS支持。5、Custom Renderer API：暴露了自定义API。6、Fragment，Teleport（Protal）,Supense：更先进的组件。二、Vue3.

原创 jQuery知识点记录

jQuery:类库(工具箱):宗旨是write less do more，功能：DOM操作，DOM获取，动画，数据交互(ajax),链式调用*。一、为什么jQuery可以使用链式调用因为 jQuery一直遵循一个准则：一切不关心返回值的语句都会返回你调用这个方法的jQuery对象本身，才到导致可以使用“链式调用”的方法，就是讲多条语句整合成一条语句。二、jQuery的核心方法1.在页面中查找与css选择器相匹配的元素,返回相匹配的jQuery对象$(“css选择器”)2.将源生JS节点(Node

原创 WOW.js配合animate.css实现网页滚动加载的动画

此文介绍WOW.js配合animate.css做网页滚动加载的动画的用法。下面是会用到的官网地址和下载地址，第一次用的时候找不到下载地址，这边以及记录下来。1、点击查看WOW.js官网滚动加载动画演示2、点击去WOW.js官网3、点击去animate.css官网4、点击去WOW.js文件下载地址5、点击去animate.css下载地址开始之前先按照第点击上面WOW.js和animate.css的下载地址，去下载animate.css和wow.js文件1、在需要使用滚动加载动画的页面引入ani

原创 react生命周期

react生命周期react生命周期三个阶段挂载阶段更新阶段卸载阶段一、挂载阶段1、constructor 初始化数据：它接收两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。2、componentWillMount ：dom渲染之前3、render：渲染函数，不要在这里修改数据。 vue中也有render函数。4、componentDidMount：在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可

原创 vue组件中的data为什么是一个函数？

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数，因为javascipt只有函数构成作用域，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响。...

原创 vue与react使用echarts，详细使用步骤

vue引入echarts1、下载npm install echarts --save2、在min.js全局引入import Echarts from 'echarts'Vue.prototype.echarts = EchartsVue.use(Echarts)3、使用3.1、在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。<template> <div> <div id="echarts" :style="{widt

原创 计算属性——computed

vuex的state与vue的data都是用户存放数据的地方，如果我们将vuex的数据直接赋值给data然后再页面使用数据，那么vuex的数据发生变化视图不会更新，那么这个时候就需要使用到计算属性computed。案例展示通过下图可以发现，如果直接将vuex的数据赋值给data中的变量，如果我们调用vuex的mutation中的修改操作，页面数据不会更新；如果我们将数据的变化交给computed来监听然后再页面使用，会发现数据更新视图也会更新。vuex部分代码截图...

原创 vue—watch深度监听（deep:true）

1、监听数字如下图：第一个输入框绑定了data中的num，使用watch监听num的变化，可以发发现是可以正常监听的。2、监听对象通过上面案例可以发现，如果监听的是一个对象，那么我们这种写法是监听不到对象内部的变化的。3、深度监听1、watch加上deep:true之后就是深度监听2、handler中返回变化后端obj3、watch第一次加载不执行，数据有变化才会执行，如果需要页面加载完毕执行，那就加上immediate:true与deep同级...

原创 react新增数据报错，The above error occurred in the ＜Table＞ component，

使用ntd组件新增数据的时候报错如下：提示时传输的数据格式不对，修改一下就好了。意思就是，错误发生在以上错误发生在组件中，考虑在树中添加一个错误边界来定制错误处理行为。也就是传入的数据格式不对原来新增数据时候的代码：修改后：...

原创 ts泛型

泛型在定义函数、接口或者类的时候、不需要先指定具体类型、而在用的时候再指定类型的一种特性。其实就是把类也当作变量（类是可变的，未知的）使用，把类放在<>尖括号内，表示声名的类型。定义 function 函数名<类型变量声明>(length: number, value: 类型变量): Array<类型变量> {}如：function 函数名(length: number, value: T): Array {}；其中T就是类型的变量名；调用 函数名(参数) /

原创 TypeScriptts使用—类型断言—访问控制符—泛型

介绍TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上TypeScript扩展了JavaScript的语法解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化为什么要用TypeScript1、开源2、简单TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。3、兼容性好TScript 是 JS的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaSc

原创 Array对象的全局方法——详细总结

总结会修改原始数组的方法有1、shift()删掉数组第一个,会修改原数组2、pop()删除数组最会一位，会修改原数组3、reverse()反转数组，会修改原数组4、slice(开始位,结束位)切割数组，会修改原数组5、splice()替换/删除/插入，会修改原数组注：splice()可以传递三个参数，)可以替换/删除/插入)，具体用法看下面的案例用法案例1、shift()删掉数组第一个,会修改原数组 let arr=[1,2,3] let a=arr.shi

原创 arguments参数对象

1、一个函数的所有参数的集合，它是一个类数组,它拥有数组的下标和.length特性。2、可以在函数内部使用arguments接收所传递过来的参数，是一个集合。可以把所有的实参复制一份，放进arguments里3、arguments只能在函数内部使用，代表的是当前函数的实参副本4、arguments是一个类数组对象5、arguments存了多个值，可以通过下标的方式去访问某一个6、arguments一般用于一系列参数，但是不确定个数得时候7、arguments得下标得取值范围 0 ~ argume

原创 while与do-while语法及小案例

while与do-while的区别1、do…while循环至少会执行一次循环体；2、while循环只有在条件成立的时候才执行循环体。语法while循环只有在条件成立的时候才执行循环体while(执行条件){逻辑} while(true){ var num=prompt('请输入谜底'); if(num==50){ alert('猜中了'); break; }else if(num<50){ alert('猜小了'); }els

原创 js条件判断语句switch

语法1、switch后面写的是表达式2、case后面的返回值代表的是表达式的返回值，当表达式的返回值与任意一个case后面的值相同，就会执行该case后面的代码段，然后将返回值返回出去3、如果没有满足全部case后面的返回值，那么就会返回default后面代码段的值，default就是设置默认值的地方switch (表达式){case 返回值1:{ 代码.. ... .. break; } case 返回值2:{ 代码.. ... .. break; } case 返回值3:{ 代码.. ..

原创 Redux—redux-thunk— action里处理异步，封装详细步骤，适合初学者。

1、2、3、4、

原创 Redux—redux-thunk——combineReducers

任何对数据的才做都会经理renducer，reducer要求是个纯函数（在函数内部不能修改函数的参数(输入)，要有返回值），它的功能是：传入旧的state，根据action对state做操作，返回新的state。redux是什么Redux是为javascript应用程序提供一个状态管理工具,集中的管理react中多个组件的状态。redux是专门作状态管理的js库（不是react插件库可以用在其他js框架中例如vue，但是基本用在react中）什么时候用redux需求场景：某个组件的状态需要共享的

原创 React—HOC 高阶组件

HOC 高阶组件基本概念对组件中可以被重复使用的内容进行封装什么是高阶组件高阶组件是一个函数，接收是一个组件，返回值也是一个组件，这类组件我么叫做高阶组件（HOC）；高阶组件的本质就是一个函数，比如js中的 map（） filter（）forEach…，高阶组件是React中用于重用组件逻辑的高级技术。HOC本身不是React API 的一部分。他是从React构思本质模式中浮现出来的一种模式。注意： 在使用高阶组件的时候 如果需要进行props的传递 那么必须在高阶组件中向组件添加 {…

原创 uni-app引入字体图标详细步骤

之前自己做学习中不会引入矢量图，在网上搜索方法，没找到哟个详细的，自己动手记录一下，uni-app引入字体图标1、在案例矢量图官网选择需要的图标进行下载2、得到如下文件3、将将文件中的六个文件放进项目里面，就是下面截图的那六个即可4、在全局App.vue中引入引入后会报如下错误5、解决方式进入你引入的字体图标中的iconfont.css中注意下下图标红的地方路径需要修改一下就号了。6、按照如下图的修改方式即可解决7、然后就可以在页面正常使用了在下载的字体图标的文件中店

原创 vue路由传参—params—query

1、Params的方式类似于get请求，传递的数据会在浏览器地址显示Params路由传参分为三步：1、绑定参数在你传参的路由绑定参数2、发送数据3、接收参数在路由页面用this.$route.params.listdata收传递过来的参数。二、query类似与post请求，传递的数据不会再浏览器地址显示。query传参分文两步:发送-接收（不需要再路由中配置）1、传递参数2、接收参数1、query和params是两种传参方式2、使用params传参只能由name引入路

原创 c3弹性盒—Flex布局

什么是弹性盒就是给父元素加上display:flex;会形成一个弹性盒，其子级会自动成为弹性盒成员，通过给父元素添加属性来改变子元素的排列方式、及空间分配。概念：弹性盒式c3中提出的一种布局方案。是为了针对不同屏幕不同设备的一整套解决方案。主要针对一个容器中的子元素进行排列、对齐、空间分配。#### Flex布局（弹性盒布局）添加给父元素的属性：1、display:形成弹性盒子 + display:形成弹性盒子 - flex(常用)/inline-flex(内联弹性盒子);

原创 react—props验证及默认值

原创 react组件之间参数传递—正传props—逆传—同级传值pubsub—跨组传值详细步骤

一、正传props：1、组件中使用rccp快速生成一个子组件(rccp快捷键会自动生成props验证）2、在父组件调用子组件并传递数据给子组件3、在子组件接收父组件传递过来的数据二、逆传思路：逆传需要通过单机事件触发，在父组件中传递一个函数在子组件，在子组件触发函数，逆传数据以形参的方式传递给父组件。1、在父组件调用子组件，并产地一个函数给子组件2、在子组件触发父组件传递过来的函数，并返回数据给父组件逆传小案例：在子组件触发事件删除父组件对应的数据。1、在子组件使用this.

原创 react搭建路由

一、路由—概念：实现spa(单页面应用)应用：整个项目只有一个完整的页面，页面切换不会刷新整个页面（不会感觉到页面闪烁，更加贴近原生应用的体验）二、路由—分类：1、React-Router：提供了一些router的核心API，包括Router, Route, Switch等，但是它没有提供 DOM 操作进行跳转的API。2、React-Router-DOM：提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转，大多数情