- 博客(77)
- 收藏
- 关注
RSS订阅原创 2020-12-30
下载mp4文件流问题：前端下载后端接口数据中的文件流1. 首先在axios.post的请求中把默认的 " responseType:‘json’ " 改为" responseType:‘blob’axios({ method: 'get', url: debug.servers + '/TinklingCat/api/rechargeManage/exportPertrolRecord', responseType: 'blob', params: submit
2020-12-30 13:43:49
108
原创 2020-12-30
JS去掉时间的空格，冒号，横杠例如 ：var date = “2018-8-8 08:08:08”//去掉中间的-var dateTimeNum = date.replace(/-/g, '');//去掉中间的:var dateStr = dateTimeNum.replace(/:/g, '');//去掉中间的空格和全部空格var start = this.strTrim(dateStr, "g")//去掉字符串中所有空格(包括中间空格,需要设置第2个参数为字符串:g)s
2020-12-30 13:42:50
307
原创 2020-12-30
js判断一个时间是否在一组时间段内例如：let data = 2020-12-12 01:05:40数组：let dataList =[ { startTime:'2020-12-12 00:00:00' endTime: '2020-10-12 01:00:00' }, { startTime:'2020-12-1
2020-12-30 13:41:43
128
原创 2020-12-30
iview 中日历禁用问题：let data ={ '2020-11':'1,2,5,9,14' '2020-12':'19,20,21,22,23,24' }设置属性options对象中的disabledDate可以设置不可选择的日期。disabledDate是函数，参数为当前的日期，需要返回Boolean是否替换这天。效果：<template><Row&
2020-12-30 13:39:49
90
原创 UUID
UUIDGUID是一个128位长的数字，一般用16进制表示。算法的核心思想是结合机器的网卡、当地时间、一个随即数来生成GUID。从理论上讲，如果一台机器每秒产生10000000个GUID，则可以保证（概率意义上）3240年不重复。UUID是1.5中新增的一个类，在java.util下，用它可以产生一个号称全球唯一的IDUUID 的目的，是让分布式系统中的所有元素，都能有唯一的辨识资讯，而不需要透过中央控制端来做辨识资讯的指定。如此一来，每个人都可以建立不与其它人冲突的 UUIDUUID由以下几部分的
2020-09-30 10:34:31
303
原创 vue-video-player组件实现视频播放
vue-video-player组件实现视频播放使用1.安装：npm install vue-video-player --save在main.js入口文件中引入import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') Vue.use(VideoPlayer)在页面中引用<
2020-09-30 10:24:05
581
原创 时间转化为带有毫秒的格式
时间转化为带有毫秒的格式封装转换格式的js文件export function timeTransform_reverse(day) { Date.prototype.formatTime = function(fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinu
2020-09-30 09:39:57
1160
原创 HTTP-FLV协议的视频播放
Web直播之HTTP-FLV协议：flv.js视频直播服务目前支持3种直播协议：RTMP、HLS、HTTP-FLV。本文主要讲解在 Vue 项目中如何使用 flvjs 播放器播放 flv 流。Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。1.准备工作cnpm install --save flv.js2.代码实战<template> <div id="app"> <video
2020-09-30 09:36:49
1838
原创 react-redux
react-redux安装npm install --save react-reduxProvider标签react-redux 是官方提供的解决方案，Provider 本身并没有做很多事情，只是把store放在context里罢了。实际上如果你用react-redux，那么连接视图和数据层最好的办法是使用 connect 函数。本质上Provider 就是给 connect 提供store用的。在入口文件1.引入标签import {Provider} from ‘react-redux
2020-07-21 21:26:53
237
原创 redux核心
reduxRedux 是一个独立的JavaScript 状态管理库， 非React内容之一redux使用场景引入 Redux 是比较明智的：你有着相当大量的、随时间变化的数据你的 state 需要有一个单一可靠数据来源你觉得把所有 state 放在最顶层组件中已经无法满足需要了安装npm i redux核心概念理解Redux 核心几个概念与它们之间的关系store ：仓库reducer：纯函数，用此来修改state数据state：仓库中的数据，但是只读，同时
2020-07-20 17:41:43
109
原创 react-router
路由前言传统模式下，我们是把整个应用分成了多个页面，然后通过 URL 进行连接。但是这种每次切换页面都需要重新发送所有请求和渲染整个页面，不止性能上会有影响，同时也会导致整个 JavaScript 重新执行，丢失状态。安装npm i -S react-router-domSPASingle Page Application: 单页面应用，整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容简单说来就是：不管你这个网站有多少页面，我都
2020-07-14 19:51:17
283
原创 函数式组件
函数式组件函数式组件中，没有 state 和 生命周期，所以又被称为 无状态组件，在早期 react 版本中，被当前纯渲染组件来用Hook 使用规则只在 React 函数中调用 Hook只在函数组件调⽤Hooks，React Hooks目前只支持函数组件，所以⼤大家别在class组件或者普通的函数⾥面调⽤Hook钩⼦函数React Hooks的应用场景在函数组件，自定义hooks只在顶层调⽤Hooks Hooks的调⽤，尽量只在顶层作⽤域进行调用不要在循环，条件或者是嵌套函数中调⽤Hook，否
2020-07-13 21:40:14
696
1
原创 setState
setState(updater, [callback])参数1： updater: 更新数据 （函数/对象）参数2callback: 更新成功后的回调 FUNCTION changeName=()=>{ this.setState({ name: "大王" }); }异步:react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能浅合并 Object.assign()组件间通信在 React.js 中，数据
2020-07-03 15:48:41
125
原创 组件
组件对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复用，且不用担心冲突问题。函数式组件函数的名称就是组件的名称函数的返回值就是组件要渲染的内容类式组件组件类必须继承 React.Component组件类必须有 render 方法// 类式组件写法的必要条件import React, {Component} from 'react';import FriendList from './FriendList';// 1.组件类必须继承 React.Compo
2020-07-01 17:38:22
130
原创 React
React 是什么？一个用于构建用户界面的 JavaScript 库命令式编程 和 声明式编程告诉计算机怎么做（How） - 过程告诉计算机我们要什么（What） - 结果如何使用 React基于浏览器的模式React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件React.createElement(type,props,children); // 2.利用React创建视图 let h1 = React.createElement("
2020-06-30 19:01:06
107
原创 数据库
云开发新建云开发模板增删改查初始化在开始使用数据库 API 进行增删改查操作之前，需要先获取数据库的引用。以下调用获取默认环境的数据库的引用：const db = wx.cloud.database()增Promise 风格也是支持的，只要传入对象中没有 success, fail 或 complete，那么 add 方法就会返回一个 Promise：数据库的增删查改 API 都同时支持回调风格和 Promise 风格调用。在创建成功之后，我们可以在控制台中查看到刚新增的数据。ad
2020-06-15 20:14:56
493
原创 小程序--自定义组件、插槽
自定义组件component 的使用component使用模板目录1.创建components目录2.在其中添加任意名字目录（success）3.在该目录下新建任意名字的component（index）在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法使用自定义组件使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：{ "usingCo
2020-06-09 20:45:04
1707
原创 小程序开发
小程序与普通网页开发的区别小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等。小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DO
2020-06-09 18:03:08
306
原创 Git
Git什么是版本控制？版本控制是指对软件开发过程中各种程序代码、说明文档等文件的变更进行管理，它将追踪文件变化，记录文件的变更时间、变更内容、甚至变更执行人进行记录，同时对每一个阶段性变更（不仅仅只是一个文件的变化）添加版本编号，方便将来进行查阅特定阶段的变更信息，甚至是回滚人工版本控制器通过人工的复制行为来保存项目的不同阶段的内容，添加适当的一些描述文字加以区分繁琐、容易出错产生大量重复（冗余）数据版本控制工具通过程序完成上述人工版本控制行为方便且功能强大只记录不同版本之间变化的
2020-06-07 16:09:35
111
原创 webpack
webpackwebpack 是什么？官⽅方⽹网站:https://webpack.js.org/中⽂文⽹网站:https://www.webpackjs.com/本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。安装webpack 是一个使用
2020-05-31 13:39:19
201
原创 webpack 与 模块化
webpack 与 模块化模块化模块化已经是现代前端开发中不可或缺的一部分了把复杂的问题分解成相对独立的模块，这样的设计可以降低程序复杂性，提高代码的重用，也有利于团队协作开发与后期的维护和扩展从 ECMAScript2015 开始引入了模块的概念，我们称为：ECMAScript Module，简称：ESM模块化的核心独立的作用域如何导出模块内部数据如何导入外部模块数据ESM从 ECMAScript2015/ECMAScript6 开始，JavaScript 原生引入了模块概念，而且
2020-05-31 13:37:42
145
原创 vuex
vuex1、为什么要用 vuex ？组件通信的类型父子通信跨级通信兄弟通信路由视图级别通信2、通信解决方案props/$emit（父子通信）$refs/ref（父子通信）children/children/children/parent（父子通信）attrs/attrs/attrs/listeners（父子通信、跨级通信）provide/inject（父子通信、跨级通信）eventBus（父子通信、跨级通信、兄弟通信）vuex（父子通信、跨级通信、兄弟通信、路由视图级别通信
2020-05-31 13:35:32
65
原创 vue-router
vue-router路由当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由路由：把 url 与 应用中的对应的组件进行关联，通过不同的 url 访问不同的组件vue-router 的安装npm i vue-router// ORyarn add vue-routerVue.use()通过前面提到的 Vue.use 方法，把 vue-router 安装到指定的 Vue 实例中import Vue from 'vue'import VueRouter
2020-05-31 13:31:43
136
原创 动态组件
动态组件有的时候，我们需要在多个不同的组件之间进行切换。虽然我们可以通过 v-if 来处理，但是会比较麻烦，vue 提供了一个更方便的方式来处理这种情况component 组件component 是 vue 内置的一个组件，它提供一个 is 属性用来动态渲染不同的组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport
2020-05-31 13:11:00
187
原创 Vuex
1、为什么要用 vuex ？组件通信的类型父子通信跨级通信兄弟通信路由视图级别通信[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mfezXnAg-1589883568732)(./assets/vue-components.jpg)]2、通信解决方案props/$emit（父子通信）$refs/ref（父子通信）children/children/children/parent（父子通信）attrs/attrs/attrs/listeners（父子
2020-05-19 18:21:21
148
原创 组件生命周期
组件生命周期组件生命周期指的是组件从创建到销毁的过程，在这个过程中的一些不同的阶段，vue 会调用指定的一些组件方法基本生命周期函数有下面几个阶段：创建阶段挂载阶段更新阶段卸载阶段每一个阶段都对应着 <u>之前</u> 和 <u>之后</u> 两个函数创建阶段beforeCreate()初始化阶段，应用不多,创建之前调用cr...
2020-05-06 18:42:45
211
原创 vue-cli 安装
vue-clivue-cli 是 vue 提供的一个用于自动化构建和开发项目的工具，也称为：脚手架，它是一系列工具的集合，它主要有：根据配置选项自动构建项目，并安装所需要的依赖启动一个本地开发服务器，通过这个服务器可以基于服务器环境访问本地项目，同时提供了跨域代理服务项目的自动编译、打包项目测试（单元测试、e2e测试）安装前提：安装npmnpm install -g @vue/...
2020-05-06 18:35:06
970
原创 组件
组件的注册在 vue 中，我们可以通过 new Vue 来创建一个组件，不过通常它是作为整个应用的顶层根组件存在的，我们还可以通过另外的方式来注册一个更为通用的组件组件根组件：通过new Vue（）来创建的，通常应用中只有一个可复用性组件：通过Vue.component()来创建分为全局组件，局部组件component全局不带s局部带s ，componentsVue.compo...
2020-04-28 17:25:35
101
原创 computed 和 watch
computed在实际的应用中，我们会有一些原始数据，同时在应用中又会有一些数据是根据某些原始数据派生出来的，针对这样的一种情况，vue 定义了一个专门用来处理这种派生数据的选项：computeddata和computeddata 存储着没有经过计算（不限于数学）的数据computed依赖于data中的数据存储着被计算过的数据，以及计算如果数据需要被二次或多次处理，就属于计算属性...
2020-04-24 19:13:15
80
原创 过滤器
过滤器过滤器是一个使用在 双大括号插值 和 v-bind 中，用于过滤输出内容的函数， 对内容（数据）进行过滤（二次处理）的一种方式过滤器的使用过滤器的使用：很类似与管道流管道流：将第一位的结果，以参数（第一位）的形式传递给下一个，以此类推| : 管道符，表示数据从左至右通过管道符进行传递过滤器可以有多个，执行顺序从左至右，过滤器函数第一个参数的值就是其管道符前一个的结果注册过滤...
2020-04-24 19:03:23
299
原创 用vue实现拖拽
拖拽拖拽问题：1.指令内部 和 按钮操作同一个数据2.方法之间的沟通解决方法：1.指令通过传参来拿到data数据， 事件也能拿到data数据点击按钮时数据发生改变，指令的数据也接受到改变，根据值做不同的事件通过指令传参，自定义指令中通过binding中的参数value接到参数2.找同一的挂载点bind 和 componentUpdated 有共同的el参数，两者通过e...
2020-04-21 17:50:25
429
原创 Vue指令续
Vue指令修饰符一个指令可以包含的内容包括：指令名称指令值指令参数指令修饰符指令名称：参数 .修饰符 = 值v-bind:value.number = “msg”不同的指令有不同的参数，也有不同的修饰符有些指令是没有修饰符，有的多有的少，有的里面有重复的，有的完全是不同的注意事项：1.不同的指令下，有不同的修饰符，需要使用时，查看api中对应的指令具...
2020-04-20 18:07:50
72
原创 vue指令
vue指令表达式一些数值通过 运算获取 来取得的结果的式子变量，多个变量，多个数值通过运算组成的内容v-指令名称 = 表达式（而不是普通字符串）表达式的出现表达式的值放在内容区可以，但不可以放在属性中去不能使用 {{}} 语法，而是需要 指令< div class=“box” >{{x+y}}< /div>< script>let b...
2020-04-16 17:55:38
116
原创 Vue
vue.jsvue.js 是一套用于构建用户界面的渐进式框架构建用户界面：UI页面（静态页面）vue 渐进式框架，Vue功能1.模板引擎 （把数据动态加载到指定页面中）2.组件 （模板封装页面增加复用性）3.路由 （多页面时，承担前端路由）4.状态管理器(管理数据–可伸缩性)5.自动化构建引入我们还是先通过 <script> 的方式来引入 vue...
2020-04-15 19:09:21
62
原创 解决跨域——后端代理
后端代理跨域是浏览器规范，通过同服务器请求数据，不通过浏览器请求，也能解决浏览器限制； 转发请求利⽤http模块实现简单的服务器转发利⽤ koa-server-http-proxy中间件实现代理前端页面xhr.open(“post”,"/api/Serverpost",true);后端服务器引入const koaServerHttpProxy = require(“koa-s...
2020-04-13 18:37:02
668
原创 CORS跨域设置
CORS跨域设置CORS(Cross-origin resource sharing)，跨域资源共享，是⼀份浏览器技术的规范，⽤来避开 浏览器的同源策略 简单来说就是解决跨域问题的除了jsonp外的另⼀种⽅法；⽐jsonp更加优雅。1.(‘Access-Control-Allow-Origin’, ‘*’) //这个表示任意域名都可以访问，默认不能携带 cookie了。(必须字段)res...
2020-04-12 16:32:38
346
原创 ajax跨域
ajax跨域xhr.open(“get”,“http://localhost:4000/getAjax”,true);解决跨域问题：利用jaonpjsonp 利用script标签的特性（浏览器在同源策略下允许script，img标签访问）解决跨域问题但script标签出现的问题：1.后端返还数据时，不能使用对象，能够返还js代码，但大量的js代码在服务器是不太合理的2.端口号和参...
2020-04-12 16:19:17
49
原创 ajax
返还数据类型服务器返还json数据xhr.responseText //来获取服务器返还xml数据xhr.responseXML //获取值重写response里的content-type内容xhr.overrideMimeType(‘text/xml; charset = utf-8’)xml接口- 前端页面xhr.open(“get”,"/xml",...
2020-04-12 16:01:47
40
原创 前后端交互
ajaxXMLHttpRequest对象ajax的基本使用1.实例化对象let xhr = new XMLHttpRequest();2.创建请求并配置参数//参数1：提交方式//参数2：提交地址 ?属性值=属性名（前端页面传参）//参数3：是否异步 true表示异步xhr.open(“get”,/checkUserName?username=${this.value}...
2020-04-05 22:23:27
428
原创 客户端存储
cookiecookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式。koa中cookie的使用储存cookie的值；ctx.cookies.set(name, value, [options])获取cookie的值ctx.cookies.get(name, [options])options常用设置maxAge 一个数字表示从 Date.n...
2020-04-05 22:10:25
70
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人