caimaomaocai的博客

原创 数据处理笔记

2、有一个对象，还有一个key数组，根据数组存在的key，筛选现有对象的key。1、把对象处理成数组对象。

原创 node中使用jsonwebtoken 解析jwt token时报 invalid token的解决办法

出现背景，登录时根据jwt使用生成token，如下图然后登录成功时根据后台返回的token解析jwt令牌，关键部分代码如下前端点击登录会出现invalid token报错，如下图就在我百思不得其解百度了各种办法都试了没效果之后，突然发现我没有把token前的空格去掉解决办法：此篇仅作为我的踩坑记录...

原创 Mac 版 nginx出现403forbidden的解决方法

出现错误背景： nginx的外连配置文件。并且配置文件指向的root目录没有index文件 如下图所示 nginx的默认配置文件头部user已经修改为 user root owner; 百度了各种方法都是让在默认的nginx.conf头部的user改成 user root owner 如下图所示解决方法，在外联的conf文件加入autoindex on; 配置，如下图所示（完）...

原创 element 时间日期选择器限制选择范围为7天

1、template部分 <el-date-picker v-model="time" style="width:350px" :type="dateType" size="small" start-placeholder="开始日期" end-placeholder="结束日期"

转载 张鑫旭数组方法总结收录

转载地址：https://www.zhangxinxu.com/wordpress/2013/04/es5%e6%96%b0%e5%a2%9e%e6%95%b0%e7%bb%84%e6%96%b9%e6%b3%95/一、前言-索引ES5中新增的不少东西，了解之对我们写JavaScript会有不少帮助，比如数组这块，我们可能就不需要去有板有眼地for循环了。ES5中新增...

原创 js类型检测

1、typeof （返回值为数据类型）1 console.log(typeof "");2 console.log(typeof 1);3 console.log(typeof true);4 console.log(typeof null);5 console.log(typeof undefined);6 console.log(typeof []);7 console.l...

原创 vue+cordova开发混合app

1、引用vue-cli-plugin-cordova代码仓库https://github.com/m0dch3n/vue-cli-plugin-cordova2、命令步骤$ npm install -g @vue/cli //如果已经安装vue-cli此步骤可省$ vue create my-app $ cd my-app$ npm install -g cordova /...

原创 记录前端数据处理

最近写的项目都需要前端处理数据，我才知道自己数据结构重组能力有多差1、案例一：我写了一个小程序答题功能后端给我返回的数据结构是这样的 "data": [{ "answer": ["绿色", "在国外; 到国外", " 空白处，空格;遗忘; 空弹;", "演员;"], "freq": 2, "type": "en2cn", "word": "green" }, { ...

原创 Vue依赖注入provide,inject使用小结

使用背景：兄弟组件传值兄弟组件传值我有试过两种方法1、一个兄弟组件先把值传给父组件，父组件再传给子组件、2、bus总线今天我要说第三种就是依赖注入1、公共的父组件provide依赖<template> <div class="sv-monitor"> <layout-aside @handleSelectMenu="LoadDataLis...

原创 springboot学习笔记 杂七杂八

新手，没有系统分类的笔记，仅供自己记忆1、@RestController等于@Controller和@ResponseBody组合2、@ConfigurationProperties：将配置文件中配置的每一个属性的值，映射到这个组件中3、@ConfigurationProperties(prefix = "person"):prefix = "person"：配置文件中哪个下面的所有属...

原创 flex布局文本居中，文本溢出自动换行的方法

关键代码flex:1;overflow:hidden;word-wrap:break-word;word-break:break-all;border-right:1px solid #323232;font-size:12px;display:flex;align-items: center;justify-content: center;

转载 HTML+CSS项目实践八：同一个HTML页面，在不同电脑上的显示效果不一样！解决HTML页面针对不同分辨率的问题

版权声明：王迪 https://blog.csdn.net/dnruanjian/article/details/85336448表象问题：同一个HTML页面，在不同电脑上的显示效果不一样。（样式错位等）举例说明：当电脑分辨率不同时，第二张图片的样式无法完全展示。问题分析：由于电脑屏幕分辨率不同，像素密度不同，视觉上会有差异，甚至差异很大。参考资料：百度...

原创 自定义滚动条样式

#PrintByTool .el-table__body-wrapper::-webkit-scrollbar{ width: 7px; height: 1px;}/*滚动条滑块*/#PrintByTool .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 10px; -web...

原创 写展示大屏踩到的坑总结与常用到的echarts图表配置收录

写系统展示大屏已经写了很多个了，但是还是踩坑不少，有些做过的图表经常用到，每次都要自己重新写配置参数，效率特别低，自我感觉非常难受，所以我决定总结一下。所谓的系统展示大屏就是下图的这种，（签了保密协议了，所以打码是对公司的尊重）坑1：这种因为要自适应，我一般都是用的弹性布局，这次我发现弹性布局有坑，虽然布局的时候按照比例了。但是元素多了还是会改变比例，我找到了解决办法，...

原创 vue页面渲染没有问题，但是有报错的解决办法

vue路由传参和子组件接收值

1、父组件路由传参this.$router.push({ path:'/roomDetail', query:{ num:dd } })2、子组件接收 created () { ...

原创 map,filter,forEach的使用对比

1.map映射 let arr1 = [1,2,3]; let mapArr1 = arr1.map((value,key,arr) => { // console.log('值',value); // console.log('索引',key); // consol...

转载 Vue.js 你需要知道的 v-slot

面试官：谈谈 v-slot 的作用？自己先想一分钟。这篇文章假设你对组件的基础知识有定义的了解，如果你对此还不熟悉，请先阅读。从 [email protected] 开始，Vue 为具名和范围插槽引入了一个全新的语法，即我们今天要讲的主角：v-slot 指令。目的就是想统一 slot 和 scope-slot 语法，使代码更加规范和清晰。既然有新的语法上位，很明显，slot ...

原创 vue中使用echarts,窗口改变多个图表自适用窗口

/** * 图表自适应事件 */ chartAuto () { let chart1 = this.$echarts.init(this.$refs.toolsEchart); let chart = this.$echarts.init(this.$re...

原创 electron + vue + lodop实现打印预览功能

因为electron集成的客户端并不像浏览器那样自带打印功能，然后查了electron的打印，资料太少，什么静默打印乱七八糟的看不太懂，好像也没有预览的功能。。然后我找到了lodop控件，实现了打印功能步骤一:到官网下载lodop，安装到电脑。下载地址：http://www.lodop.net/download.html步骤二：修改LodopFuncs.js源码，其实很简单...

原创 websocket重连

实现websocket重连很简单：只需要知道断网到浏览器约定时限等一些异常情况都会触发onclose和onerror,所以理论上，我们只要在onclose和onerror时，重新创建长连接就可以。实现websocket重连的代码如下var webSocketUrl = "ws://localhost:8899/tv/ws";var ws = new WebSocket(web...

原创 css弹性布局，自动换行，文本垂直水平居中

/*父级*/ .location-box{ flex:1; background:#fff; display:flex; flex-wrap:wrap; /*换行*/ } /*子级*/ .location-box .one-item{ display:flex; ...

原创 websocket的使用

websocket的入门教程推荐阮一峰的http://www.ruanyifeng.com/blog/2017/05/websocket.html我的实际使用// webSocket连接未创建或者不是连接成功的状态，重新连接var webSocketUrl = "ws://localhost:8085/device/GasDetection"var ws = nul...

原创 vue-cli3 + element ui 后台管理系统

闲暇时自己搭了个架子，还没用上Vuex。。。等以后慢慢完善部分效果图如下，没有填充内容代码仓库，https://github.com/caimaomao/Vue-cli3...

原创 swiper + echarts实现多个仪表盘左右滚动效果

1、swiper的使用a.首先加载插件，&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; ... &lt;link rel="stylesheet" href="dist/css/swiper.min.css"&gt;&lt;/head&gt;&lt;body&gt; ... &am

原创 jquery实现表格无缝滚动

最近因为工作需要，写了好几个大屏展示的页面了。。因为这种只是一个单的页面，所以，还是选择用jq来写。。然后发现滚动表格使用率真的高。自己也没怎么写过这种，趁着周末，做做练习。css部分我是用的弹性布局*{ margin:0; padding:0; } ul,li{ list-...

原创 vue实现tab选项卡切换

最近在做公司的项目，一直用的element ui ，一直用别人写好的ui感觉很无聊。闲来无事自己试着用vue原生写个tab实现方式一：内容是死内容，不是动态组件时template部分的代码如下 &lt;div class="main"&gt;&lt;ul&gt; &lt;li v-for="(item,index) in navList" :class="{ac...

原创 jquery不同页面之间传值的方法

百度到的方法1：就是url 参数拼接 通过QueryString获取参数2：cookie3：h5本地存储 localStorage 长期存在 / sessionStorage 打开存在4：window.open 等等我目前实践过的方法就是第1种，通过url参数拼接，再取值，相关代码如下把需要的参数放在url，然后在跳转的页面拿到id，传到后台获取到对应的数据 在跳转的...

转载 ElementUI el-table 在flex下的宽度自适应问题

BUG：在flex容器下面的一个flex:1的子容器里面写了个el-table用来展示列表数据，在做宽度自适应测试的时候发现该组件的宽度只会增加不会缩小。Debug：通过控制台发现组件生成的table的宽度是动态计算的，翻查源码，发现以下代码段// table.vueif (this.fit) {  addResizeListener(this.$el, this.resizeList...

原创 在vue脚手架中使用mockjs

闲来无事，试着在vue脚手架中使用mockjs1、在当前目录安装mockjsnpm install mockjs2、在src目录下新建一个mock目录，然后再新建一个index.js文件如下3、在main.js引用mockjs4、然后再需要用到mockjs的组件中引入如下图此时浏览器控制台打印的数据为好了，看到status:200就代表在vue脚...

原创 Vuex的使用

1、在项目目录下安装vuexnpm install vuex --save2、在src目录下新建一个store目录,在store目录下新建index.js文件 index.js代码如下:import Vue from 'vue'import Vuex from 'Vuex'Vue.use(Vuex)export default new Vuex.Store({...

原创 element ui 树形控件的使用

项目需求，需要做一个多级菜单树，菜单的数据是后台调回来的数据。。。设计图是左边是菜单树，右边是点击菜单返回来的数据列表。。点击左边的菜单，右边的列表数据就做相应的刷新。。我的实现思路是这样的。。1.首先先在data里定义一个数组，用来存放从后台返回来的数据。2、点击菜单的时候获取相应的id，发送给后台。后台给我返回相应的数据，我再赋值给事先定义好的数据列表中...这样就实现了点...

原创 es6学习笔记（三）数组的扩展

一、扩展运算符[2,3,4,5]console.log(1,...[2,3,4,5],5)打印出来的结果是1，2，3，4，5，5二、替换数组的apply方法//Es5function f(x,y,z){...}var args = [1,2,3] //数组不能作为参数f.apply(null,args); //apply将数组转为函数//ES6...

原创 js模拟h5的placeholder

每天都在受兼容性折磨  js模拟h5的placeholderhtml &lt;input class="sortSearch_input" id="sortSearch_input" type="text" placeholder="请输入您要搜索的产品名称、品牌或型号" /&gt;jsvar funPlaceholder = function(element) {...

原创 mock.js的使用

 1.一个简单的例子：Mock.mock('http://123.com',{ 'name|3':'fei',//这个定义数据的模板形式下面会介绍 'age|20-30':25,})$.ajax({ url:'http://123.com', dataType:'json', success:function(e){ conso...

原创 es6学习笔记（二）——字符串扩展

1.includes() 返回布尔值,表示是否找到了参数字符串var s = 'hello world!"s.includes("o") //true2、startsWith() 返回布尔值，表示数字字符串是否在源字符开头var s = "Hello world"s.startsWith('Hello')3、endsWidth() 返回布尔值，表示参数字符串是否在源...

原创 IE8下实现兼容rgba

background: rgba(0,0,0,.5);但是要兼容到IE8，就发现没有透明效果，因为IE8不支持rgba()函数。下面我们总结一下rgba()函数的含义。rgba的含义，r代表red，g代表green，b代表blue，a代表透明度。红绿蓝是三原色，所有颜色都可以由这三种颜色拼合而成。比如rgba(0,0,0,.5)就是透明度为0.5的黑色。现代浏览器是支持rgba的，但是...

原创 react 学习笔记

在修改一个组件的数据的时候，我们不建议直接修改state的数据，而是复制一个副本。比如,state里有一个数组代码如下constructor(props){ super(props); this.state={ list:[] }}直接修改的方法:this.state.list.splice(index,1)复制一个副本的方法va...

原创 es6学习笔记（一）

最近在看阮一峰的《ES6标准入门》,打算在每天早起上班前看一小时，然后写个博客总结关于第二章let,const命令的总结 1、暂时性死区：只要进入当前作用域，所要使用的变量就已经存在，但是，不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量2、函数声明语句和函数表达式的区别函数声明语句{ let a = "select"; function f(...

原创 伪类实现下边框

.JTBabs.active:before { content: ''; position: absolute; left: 20px; bottom: 0px; right: 20px; border-top: 3px solid red;} 把要加的下边框的那个元素设置为相对定位position:relative;...