- 博客(205)
- 收藏
- 关注
RSS订阅
原创 echarts图使用的总结
1 整个echarts图的大小及位置grid: { x: "12%",//x 偏移量 y: "18%", // y 偏移量 width: "76%", // 宽度 height: "70%"// 高度}2 提示框位置position: function (point, params, dom, rect, size) { return [point[0]+20, point[1]-25];}3去掉刻度线axisTick: { .
2020-12-03 15:44:58
213
转载 ***微信登录过程***
1 登录当我们登录的时候需要用到一个微信的APIwx.login调用这个接口可以获取临时登录凭证code 通过code我们可以得到户的唯一标识openid及本次登录的会话密钥session_key2 微信登录过程关于微信登录过程，官网上面也有一个图示详情点击，过程解释如下通过wx.login获取code 将code发送给我们自己的服务器 我们自己的服务器需要将appid+appsecret+code,三者结合到一起发送给微信服务器（appsecret的获取后面会...
2020-08-03 16:43:10
626
原创 Vue2.0和3.0区别(总结版，不断更新)
一 安装及版本切换查看当前版本，如果是2开头说明当前使用的是vue-cli2，3开头的话就是vue-cli4vue --version如果无法识别vue命令说明没有安装vue-cli，使用以下说明进行安装安装3.0版本:npm install -g vue-cli安装3.0版本：npm install -g @vue/cli版本切换，即卸载当前版本，安装另外的版本从2.0升级到3.0：npm uninstall -g vue-clinpm install
2020-05-22 16:53:39
32785
11
原创 web移动端适配
1 一倍图，二倍图和三倍图js方法// vue项目// JSlet dpr = window.devicePixelRatioif(dpr>=3){this.imgTimes = '@3x'} else if(dpr>=2){this.imgTimes = '@2x'} else {this.imgTimes = ''}// HTML<img :s...
2020-04-16 16:06:49
208
原创 关于axios封装的几篇推文(持续更新)
axios在企业级vue项目中的应用（附带axios正确打开方式)vue中axios的封装axios的二次封装
2020-04-02 09:31:15
311
原创 常用时间处理函数（持续更新中）
常用时间处理函数一、时间戳转化为时间 function timestampToTime(timestamp) { var date = new Date(timestamp); var Y = date.getFullYear() + '-'; var M = (date.getMonth() + 1 < 10 ?...
2019-09-19 09:23:51
210
原创 用h5video和h5stream实现监控视频的播放--rtsp流
这几天一直很头疼这个监控视频的问题，研究了很多方案，包括直接用video写，还有vue-video-player插件，最后还是通过h5stream实现了，方法很简单，下面我来简单总结一下。(我是用的vue-cli2)第一步，先在唯一的html文件中引入几个js的文件 <script src="static/js/jquery-3.1.1.js"></script>...
2019-09-07 10:50:21
10718
275
原创 vue+element+js
根据一个信息匹配显示不同的图片。在vue项目中如果想在data里面定义图片就必须加上require(图片路径)比如，我的课程有语文数学英语。对应的有三张图片。我要显示他相应的图片。这个时候我们可以用对象的键值对来写，键代表科目。值就是图片的地址定义src:{“语文”:require("…/…/…/…/assets/H5/H5set.png"),“数学”:require("…/…/…/…...
2019-08-30 10:04:08
463
原创 问题！！！(随时更新)
如何在vue项目中使用md5.js及base64.js一、在项目根目录下安装npm install --save js-base64npm install --save js-md5二、在项目文件中引入import md5 from 'js-md5';let Base64 = require('js-base64').Base64;三、在项目文件中使用base64Base64...
2019-08-23 14:41:50
760
原创 收藏的网页！！！（随时更新）
vue路由嵌套https://blog.csdn.net/m0_37885651/article/details/81019973vue中Moment的使用https://blog.csdn.net/weixin_42549581/article/details/84990046http://momentjs.cn/$set()的正确使用方式https://blog.csdn.net/...
2019-08-22 11:25:52
1554
原创 js用递归改写多重数组
后台给返回的数据是这样的现在想得到这样的数据而且后台给的数组中并不确定是几层的，所以这里必须用到递归函数。用了下面的代码 let routerArr = JSON.parse(JSON.stringify(value)); function formatRoutes(routerArr){ const arr = [];
2020-12-30 13:44:39
1039
转载 js数组中的几种排序
1.冒泡排序//每轮依次比较相邻两个数的大小，后面比前面小则交换var b=0//设置用来存儲调换位置的值var a=[1,9,33,2,5,34,23,98,14]//冒泡排序for(var i=0;i<a.length;i++){ for(var j=0;j<a.length;j++){ if(a[j]>a[j+1]){ b=a[j] a[j]=a[j+1] a[j+1]=b
2020-12-19 10:09:49
263
1
转载 复习加巩固：vue组件间通信、数据传递（父子组件，同级组件）
一、组件目录结构父组件：app.vue 子组件：page1.vue 子组件：page2.vue二、通信过程介绍1.父组件向子组件传值1.1在父组件中引入需要通信的子组件import Page1 from "./components/page1";1.2 在父组件的components中注册该子组件components: { Page1 }1.3 在父组件的template中使用子组件<page1></page1>1.4 将需
2020-12-05 15:50:08
273
原创 css实现文字颜色渐变
.fl-left{ float:left; font-size: 46px; font-weight: 500; letter-spacing:4px; background-image:-webkit-linear-gradient(top,rgba(255,255,255,1) 60%, rgba(11,164,230,0.9) 80%); -webkit-background-clip:text; -webkit-text-fill-color.
2020-12-04 17:05:45
389
原创 网页中如何使用一些特殊字体
虽然我们可以通过图片，flash、SIFR等技术来实现网页使用特殊字体，有利于SEO网页中嵌入特殊字体方法，@font-face属性。通常网页上不能使用一些特殊字体，否则浏览者可能无法正确浏览到，虽然我们可以通过图片，flash、SIFR等技术来实现网页使用特殊字体，但是这都有个严重的缺点：不利于SEO。下面介绍一种非常有利于SEO的特殊字体应用方法：在CSS中通过@font-face属性来实现网页中嵌入特殊字体。第一步获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体
2020-12-03 15:51:05
638
原创 el-form-item中的样式和验证
想要实现上面那种格式，然后又对input框中的值进行验证，要求都必须是数字。代码：<!-- 配置报警值弹出框 --> <el-dialog title="配置报警值" :visible.sync="peiVisible1" width="40%" class="dialoge_black"> <el-form ref="peiform1" :model="peiform1" :rules="rules" label-widt..
2020-10-23 15:26:15
2139
原创 element-input中对ip0.0.0.0格式的验证
项目要求：ip不是必填项，但是对格式有要求（0.0.0.0格式）代码：ip:[{pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,message: 'ip格式不对！',trigger: 'blur'}]...
2020-10-23 15:21:36
803
转载 高频实用的 JavaScript 片段
1.三元运算符let someThingTrue = trueif(someThingTrue){ handleTrue()}else{ handleFalse()}****** 以下是简短版本 ******let someThingTrue = truesomeThingTrue ? handleTrue() : handleFalse()2.短路或运算const defaultValue = "SomeDefaultValue"let someVa
2020-09-02 15:17:19
134
原创 按回车键实现登录
1 按键修饰符<el-form-item prop="password"> <el-input @keyup.enter.native="login" type="password" v-model="form.password" placeholder="密码" prefix-icon="myicon myicon-key" ></
2020-09-02 14:53:59
624
转载 前端三大主流框架的区别
1.angular1.1. 简介:angular是最早出现的框架，angularjs是通过directive（指令）去封装组件，react和vue是通过component。1.2. 优点：1、背后靠山（google），有着稳定的维护团队。且google的Adwords业务就使用了angular，作为一个赚钱的业务，google也会让它的环境更稳定一些。2、angular+typescript，google和微软的双剑合璧。angular全面支持typescript语法，types..
2020-09-02 10:13:23
2067
转载 盒子模型，标准盒模型，怪异盒模型，两种盒模型的区别，box-sizing属性
什么是盒子模型CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型（Box Modle）可以用来对元素进行布局，包括实际内容，内边距，边框，外边距这几个部分。盒子模型分为两种：第一种是W3C标准的盒子模型（标准盒模型） 第二种IE标准的盒子模型（怪异盒模型）标准盒模型与怪异盒模型的表现效果的区别之处：1、标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度W3C标准盒模型下盒子的大小 =wid.
2020-09-02 09:39:24
1725
原创 仅两行代码实现文字播报功能
<script type="text/javascript"> var msg = new SpeechSynthesisUtterance("输入要朗读的文字"); window.speechSynthesis.speak(msg); </script>
2020-08-31 14:37:46
209
1
原创 小程序登录解析
1、调用 wx.login() 获取 临时登录凭证 code，有效期为 5分钟；（临时登录凭证 code 只能使用一次）2、将临时 code 传到我们的后端，后端调用 auth.code2Session 接口，换取用户唯一标识 OpenID 和 会话密钥 session_key；（ openid 是用户唯一标识，session_key 能保证当前用户进行会话操作的有效性）注意：获取 session_key 出于安全性的考虑，要在后端调用。如果我们在前端通过 request 调用此接口，就不可避免的需
2020-08-25 09:54:53
244
转载 Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作
安装npm install v-viewer引用在main.js文件下全局引用import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)使用方法 <viewer :images="imgList"> <img class="imgsrc" v-for="src
2020-08-22 09:56:45
808
转载 高阶数组方法
1.forEach()方法遍历数组var arr=[1,2,3,4,5]; arr.forEach(function(item,index,self){ console.log(item,index,self); })2.map() 方法通过映射返回一个新的数组var arr=[1,2,3,45,6]var arr1=arr.map(function(item){ return item*2})console.log(arr1)3.filter() 方法通
2020-08-21 11:05:07
488
原创 jquery复习与补充
jQuery 提供多个处理尺寸的重要方法：width() height() innerWidth() innerHeight() outerWidth() outerHeight()jQuery width() 和 height() 方法width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。jQuery innerWidth() 和 innerHeight() 方法innerWidth
2020-08-10 09:46:05
128
转载 vue搞定图片懒加载
(一) js原生实现方法css 代码段<style scoped lang="scss">.loading { width: 100%; display: flex; flex-wrap: wrap; .wrapper { width: 50%; img { width: 100%; height: 254px; } }}</style>html 代码段<template>
2020-08-08 09:42:47
288
转载 vue vue-touch移动端手势
1、安装 cnpm install vue-touch@next --save2、引入 在main.js中 import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) v-touch可以是自定义名称3、使用: Vue.use注册的name名称，默认该标签为div <v-touch (1)替换标签 ...
2020-08-07 11:34:20
889
转载 修改滚动条样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m.
2020-08-07 11:30:55
178
转载 找到字符串中的所有数字
1 数组+字符串// 定义字符串 var str = "sljlagjhaglk拉三等功2353离开家2346lsdlkfdlkfd30294875dlgskfslkfldk123"; // 定义接收数字的数组 var arr = []; // 定义临时存放数字的字符串 var strTemp = ""; // 遍历字符串 for (var i=0; i<str.length; i++) { // 利用if语句判断是否是数字 if (str.charCod
2020-08-07 10:44:16
1825
1
转载 js之数组去重
一、双层循环const unique = (arr)=>{ for(let i = 0; i < arr.length; i++){ for(let j = i + 1; j < arr.length; j++){ if(arr[i] === arr[j]){ arr.splice(j, 1); // 移除重复元素 j--; // 修正下标 }
2020-08-06 15:14:01
158
转载 几个css的高级用法
1.calc函数calc可动态设置某个元素的长度html{ font-size:calc(100vw / 8)}.main{ width:100%; height:calc(100vh - 200px)}比如上述代码，把main元素的高度就设置为当前窗口的高度减去200px，字体大小也可用于此函数实现自适应字体；这个函数可用于所有css长度的属性2.attr函数这个函数用于获取元素的属性的值，我常用于在before等伪类样式中。ul li::
2020-08-06 10:41:34
308
转载 回调地狱的解决方式
当我们遇到回调地狱，通常都是怎么解决的呢，如果不使用 async/await，那么写出来的代码，大部分（包括我）都是又臭又长的，不忍直视，那么使用下面的写法，会更加赏心悦目哦！1.第一种，普通的写法 bookModel.getHotList().then(res => { console.log(res) bookModel.getMyBookCount().then(res => { console.log(res) bookM
2020-08-06 10:32:02
205
转载 如何居中一个元素
本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下：这种情形可以有多种实现方式，下面我们详细介绍:一、水平居中1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。//在父容器设置.parent{ text-align:center;}此外，如果块级元素内部包着也是一个块级..
2020-08-05 15:45:22
171
转载 http几种请求方式
我们要进行数据的采集，但网站肯定是设置了限制，为了突破这限制，我们需要模拟浏览器访问获取数据，那么首先要了解HTTP的请求，那么在Web中HTTP请求是怎样的呢?HTTP的请求方式有几种?兔子ip今天就为大家带来最可靠的几种请求方式。其实HTTP协议是一个广泛应用的Internet协议，目前常用八种请求方式，分别是GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT，不同请求方法有什么作用呢?接下来跟小编一起去瞧一瞧http的请求方式有几种。1、GET方法
2020-08-05 09:35:44
455
转载 测试用例的分类
1，从是否关心软件内部结构和具体实现的角度划分①.白盒测试（针对代码，可以看到实现逻辑）②黑盒测试（页面跳转逻辑）③灰盒测试（接口）2，从是否执行程序的角度①.静态测试（需求评审、用例评审、代码走查）静态方法是指不运行被测程序本身，仅通过分析或检查源程序的语法、结构、过程、接口等来检查程序的正确性。对需求规格说明书、软件设计说明书、源程序做结构分析、流程图分析、符号执行来找错。静态方法通过程序静态特性的分析，找出欠缺和可疑之处，例如不匹配的参数、不适当的循环嵌套和分支嵌套、不允许的递归
2020-08-05 09:09:38
3777
转载 微信小程序实现导航功能
通过getLocation获得定位 必须要把你的地址转为实际的经纬度才能实现导航功能，因此要使用地理编码API。我这里使用的是高德地图地理编码API，请申请微信小程序，下图是申请后结果<!--wxml--><!--我这里的item携带了地址哦--><view data-item="{{item}}" catchtap="daohang">查看定位</view>//获得从前端传来的地址daohang:function(e){ v.
2020-08-04 11:01:58
2658
转载 微信小程序开发：用户位置信息授权及拒绝后再授权并加入未开GPS提醒
第一步：必须要在app.json对小程序进行全局配置//该字段会弹窗请求第一次使用小程序的用户授权"permission": { "scope.userLocation": { "desc": "我们将获取到你的位置信息" //文字最多不超过30字 }}第二步：在你使用定位的页面插入授权代码data：{ isshowCIty:''} //我是直接放在onLoad()函数加载出来onLoad:function(){ //wx.ge
2020-08-04 10:57:58
2737
转载 微信小程序父子组件间传值
一、父组件向子组件传值（通过 properties 属性）父组件json{ "usingComponents": { "reply": "../../components/reply/reply" }}html<!-- 评论回复 --><reply commentCount='{{commentList.length}}' commentAvatarUrl='{{commentAvatarUrl}}' bind:oneLevelComment='
2020-08-04 09:26:38
727
转载 移动端H5开发技巧
css篇1、常用的meta设置1、不缓存头部设置<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache, must-revalid
2020-08-03 15:23:03
696
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人