- 博客(73)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 python入门笔记
安装安装python访问官网,选择downloads选项，下载exe文件，安装安装pycharm访问pycharm网站,下载pycharm参考这篇文章来实现安装的具体步骤检测是否安装成功如果安装成功，命令输入python，显示如下1.python基础语法1.1变量和字符串变量a = 4;b = 5;t = a;print(t) ==> 4...
2019-12-12 15:32:26
1317
4
原创 vue动态渲染表格，显示上万条数据
<template> <!-- 表格 --> <div class="table-box"> <div class="tabletbody"> <div id="divScroll" style="float:right;"></div> <div cla...
2019-04-07 16:02:25
8998
原创 vue摄像头调用拍照
//连接摄像头connectCamera(){ navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia; let that=this; if (navigator.medi...
2019-04-04 21:47:37
9964
原创 react-native实现视频直播功能
import { VLCPlayer, VlCPlayerView } from 'react-native-yz-vlcplayer'; render() { return ( <View style={styles.container}> <VlCPlayerView ...
2019-03-21 17:15:54
8534
24
原创 vue项目复制组件clipboard
1.实现背景有时候项目中会有复制较长文本需要复制，为实现这个功能，封装公共方法2.公共方法import Vue from 'vue'import Clipboard from 'clipboard'function clipboardSuccess() { Vue.prototype.$message({ message: 'Copy successfully', type: 'success', duration: 1500 })}function
2020-10-25 21:58:59
839
原创 git review提交提示remote rejected
1.文章背景公司代码提交配置了review,在提交的过程中如果有其他同事成功提交并合入代码，同事提交的代码commit记录正好夹在你本地多次commit记录之间；本文主要针对这种情况的处理方式做一个简单的总结2.一般提交流程git add .git commit -m "this commit"git pull origin mastergit add .git commit -m "mergecode"git log（复制需要rebase的分支，如果你本地提交记录有同事的com
2020-10-19 21:05:48
3465
原创 vue项目树状图的实现
1.实现背景项目需要直观的展示元素之间的关系，需要实现一个树状图数据可视化可以用Echarts HighCharts,但是相关树状图的示例不够直观，且不美观几种工具之间比较，选择了蚂蚁金服的G6来实现（在开发期间有树状图的示例，之后再看发现这个例子没有了）2.相关技术介绍G6图可视化引擎（蚂蚁数据可视化 G6）G6是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。3.项目集成3..
2020-10-19 20:12:02
11458
8
原创 vue封装Cron任务周期选择组件
1.实现背景在项目中有需要用户输入具体执行任务周期的Cron表达式的需求，但是对不熟悉Cron表达式的用户，显然用户体验不太友好。项目用到的技术栈是vue,xxxjob任务管理系统有原生的任务周期选择组件，但是不适用于vue项目；网上查了一下，找到一篇vue-cron的文章，但是与项目中需要使用的需求还是有点差距，所以在改项目基础上做了封装与改动，具体实现如下文。2.cron表达式了解Linux系统中，一般用 cron 守护进程执行周期性任务；cron表达式简单语法如下~2.1设..
2020-09-26 12:36:45
2853
2
原创 将多个连续的IP地址转为一个IP范围
1.问题背景项目中有这样的一个需求：创建防火墙规则时，在用户选择的云主机、负载均衡、子网的IP地址中，如果有连续的IP地址，就把这些连续的IP地址合并为一个IP范围；具体实现方法如下：（实现框架为vue，放在methods里实现）mergeIP(ipArr){ // IP排序 前半部分 相同的排到一起；后半部分按数字大小 ipArr.sort(function(a,b){ let pre = a.split("."); let next = b.split(".");
2020-09-20 20:31:49
1879
1
原创 vue项目elementUI面包屑的封装
一般项目的菜单只有两级菜单，但是现在做的项目中有三级菜单；对应的第三级菜单下还有新增编辑和详情页面；层级较多有十级左右，所以需要面包屑的展示；本文章主要就项目中面包屑封装做一个总结；1.路由配置文件面包屑时根据vue-router的路由循环生成；所以想要展示的面包屑有多少层级，路由就有多少层级路由层级（三级菜单）每级都要有component，component对应页面要有对应...
2020-04-19 20:48:17
1776
1
原创 vue项目集成vuex
1.安装安装vuexnpm install vuex --save2.项目中添加vuex添加vueximport Vuex from 'vuex'Vue.use(Vuex)在src目录下新建store目录,store目录下新建store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(V...
2020-04-19 20:12:43
485
原创 vue项目mock数据
1.安装安装mockjsnpm install mockjs2 --save2.项目中添加mock2.1main.js添加mockimport './mock'2.2在src目录下新建mock目录,mock目录下新建index.jsif (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PR...
2020-04-19 20:09:01
237
原创 上传文件failed to load resource net::ERR_CONNECTION_RESET
1.问题描述1.1报错项目在上传文件时，后端请求没有返回结果，但是在谷歌浏览器控制台会报错net::ERR_CONNECTION_RESET在火狐浏览器测试，控制台并不会报错本地调试上传，报错文件/node_modules/rc-upload/es/request.js:90rc-uploadant design pro上传组件upload 所使用”rc-upload”组件...
2020-01-10 11:12:17
25278
2
原创 vscode代码统计
1.安装插件在vscode界面左侧，点击图中所示的菜单项，搜索Vscode counter2.使用插件统计代码点击顶部 View 菜单 => 在下拉选项中选择第一项 Command Palette => 工作区选择VscodeCounter:Count lines in directory => 输入框中默认是当前项目的路径 => 点击回车Enter开始统计...
2020-01-03 09:42:52
23258
4
原创 react官方文档阅读笔记
使用react做项目几年了，今天花了时间回顾了一下react官网，认真的仔细的阅读了react文档，结合平时项目中的经验，在此列出自己感受颇深的几点1.react何时使用state通过问自己以下三个问题，你可以逐个检查相应数据是否属于 state：该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。该数据是否随时间的推移而保持不变？如果是，那它应该也...
2019-12-25 13:38:55
246
原创 web前端工程师常用网站整理(持续更新)
1.前端框架1.1vuevue官网 vue-router vuex vue组件UI:element UI vue组件UI:ant design of vue vue管理系统：ant design pro of vue vue管理系统：vue-element-admin1.2reactreact官网 react组件UI:ant design react管理系统：ant ...
2019-12-23 14:58:25
307
原创 ant design pro请求返回全局参数
项目中需要全局变量（这个数据根据请求返回结果改变），且这个变量每个页面都要用到，不需每个页面都去请求一次但是数据又是请求返回回来的，请求数据是异步的。ant design pro公共布局ant design pro项目可以写全局请求的文件：\src\layouts\BasicLayout.js \src\layouts\UserLayout.jsant design pro静态变...
2019-12-21 13:49:42
4591
原创 ant design pro页面重定向
场景1项目中添加了license证书校验，只有校验通过才可以访问页面，否则只要在地址栏输入任一页面路径，都要重定向到license证书校验页面实现代码如下： 引入 import Redirect from 'umi/redirect'; 渲染 \src\layouts\BasicLayout.js <ContainerQuery query={query}>...
2019-12-16 17:07:24
3365
原创 Linux Shell脚本入门笔记
公司服务器一般都是Linux服务器，对于一些问题修改的定位，肯定涉及到一些Linux基本命令，以及一些基本操作，这里对这些基本操作知识点做一个简单的总结。1.在终端输出1.1shell脚本起始#!/bin/bash #!位于解释器路径之前 /bin/bash是Bash的解释器命令路径。bash将以#符号开头的行视为注释。脚本中只有第一行可以使用shebang来定义解释该脚本所使用的解释...
2019-12-14 22:41:21
179
原创 ant design vue实现穿梭框单选
最近有一个朋友问了一个问题，ant design vue的穿梭框如何实现单选，且禁用顶部的全选checkbox之前项目中用到的是ant design pro,没有用到ant design pro of vue，也没有用过穿梭框组件；所以克隆项目写了一个demo,并就开始一个ant design pro of vue项目做一个梳理总结1.克隆ant design pro of vue项目...
2019-12-13 16:00:05
5256
2
原创 ant design pro带分页 自定义表格列 搜索表格组件封装
ant design pro中有一个基础表格的封装，但是分页是前端分页处理数据；项目中每个页面都有用到表格，且表格都有分页、搜索、自定义表格，所以封装了一个定制的表格组件实现页面效果组件参数参数 说明 类型 默认值 tablePatam 表格的一些参数，pageSize/pageNo/loading/filterParam Object {} ...
2019-12-12 17:45:21
3301
原创 react-ace代码编辑
ant design pro中使用react-ace在react中使用react-ace,实现编辑代码 安装包 npm install react-acenpm install brace 引入包 import brace from 'brace';import AceEditor from 'react-ace';import 'brace/mode/json...
2019-12-11 16:56:31
1068
原创 ant design vue渲染表格显示no data
按照ant design vue给出例子写表格组件，有表格数据，却渲染不出来，在分析这一问题，发现几个需要注意的点，做一记录 一般开发环境，当出现问题时，都会给出警告信息，所以留意控制台的输出 开发环境script引入vue注意引入方式如下，否则不能看到警告信息；需引入vue.js,而不是vue.min.js <script src="https://cdn.jsdel...
2019-12-10 16:19:31
4744
原创 ant design pro js-cookie设置过期时间
ant design pro中用到了js-cookie,具体修改cookie的过期时间如下// 时间单位是天 1/24为一个小时Cookies.set('access_token', str, { expires: 1 / 24 }); // 第三个参数不传就是永不过期Cookies.set('access_token', str);...
2019-11-21 11:21:39
2417
原创 ant design pro直接提交不提示必填项错误且没有走validateFields方法
ant design pro表单必填项添加校验后，用户什么都不填，直接提交会提示用户：”请输入。。。”;但是如果没有提示，且没有走form.validateFields方法，是因为自定义校验没有callback(),务必确认每个分支都有callback()调用...
2019-11-20 16:54:05
3428
原创 ant design pro一个页面多个表单
如果一个页面中有多个表单，那需要return出不同的组件，否则不能对应起来const PasswordForm = Form.create()(props => { const { modalVisible, form, handleChangePassword, handleCancelPassword, current, ...
2019-11-20 14:40:15
3987
原创 ant design动态表单
项目有表单动态增加减少的需求，且表单列表的每一项有多个input输入框，虽然ant design有一个代码demo,但是只有一个input框，且没有最初默认数据的展示；本文章对这一需求的实现做一个归纳总结。动态表单实现过程中遇到了从列表中删除中间的项时，删除数据不对应的情况，主要是因为ant design的表单双向绑定不同vue一样，是通过v-model绑定的，而是用getFieldDe...
2019-11-20 14:07:24
3127
原创 前端文件下载
项目中定位问题，需要下载相关日志，具体实现这一需求，做一个总结。下载方法调用import downloadFile from '@/utils/downloadMoudle';downloadFile(`output.json`, JSON.stringify(res.data, null, 4));下载模块downloadMoudleexport default (fil...
2019-11-20 10:41:02
181
原创 kibana日志搜索规则及搜索界面显示处理
项目调用ES日志检索接口，实现简单的日志界面展示；操作数据，然后通过数据去渲染页面，而不是直接操作DOM日志检索语法简单的对基本的语法做一个总结1.语法关键字+ - && || ! ( ) { } [ ] ^ “ ~ * ? : /如果所要查询的查询词中本身包含关键字，则需要用\进行转义（注意是本身！）例1：rvm:5100/kibana/kibana:6.7...
2019-11-19 16:55:44
4812
原创 k8s创建资源yaml
项目有运用k8s创建资源的场景，对创建各种资源做一个总结。创建命名空间apiVersion: v1kind: Namespacemetadata: name: shizhihua namespace: shizhihua labels: name: shizhihuaPVapiVersion: v1kind: PersistentVolume...
2019-11-14 09:18:00
341
原创 eslint检查规则
ant design集成了eslint的检查规则，对于一些基本规则平常coding的时候注意一下，养成良好的代码习惯。常见规范类成员之间空一行 import和之后的代码空一行 样式文件的import在最后面 每个方法之间空一行 注释//后空一格 变量需要驼峰命名 命名了没有用到的变量 如果键值和key值相同，只需写一个即可 for in循环对象数据时，风格检查不通过，可使用...
2019-11-12 16:59:18
279
原创 garafana界面样式修改
frame引入garafana界面，部分可编辑操作不对外暴露，需要自定义样式，隐藏菜单和顶部编辑栏；但是garafana引入属于跨域引入，不可以直接获取garafana界面元素，本文章对具体实现做一总结。iframe引入garafanaiframe的src地址为garafana地址，添加参数&monitorFlag=true让用户区分引入与未引入import React, {...
2019-11-12 16:49:40
2268
1
原创 js数组对象方法
项目在需要对数据做处理的时候，经常需要百度一些最简单的数组、字符串方法，很是浪费时间；对这些方法经常回顾、归纳、总结，coding效率会更高。1.方法归纳1.1属性属性 length 设置或返回数组元素的数目;constructor 返回构造函数的引用1.2方法删除或添加类 push(数组元素) 向数组末尾添加新的元素，返回新数组长度，可一次添加多个元素 var ...
2019-11-11 17:42:14
169
原创 js数学对象方法
项目在需要对数据做处理的时候，经常需要百度一些最简单的数组、字符串方法，很是浪费时间；对这些方法经常回顾、归纳、总结，coding可以省下不少时间，本文章将会对常用处理数据场景及方法做总结，希望对你有所帮助。方法归纳 abs() 取绝对值 var nub = -3;console.log(Math.abs(nub)); // 3 round() 四舍五入 var nu...
2019-11-11 17:14:56
406
原创 js字符串对象方法
项目在需要对数据做处理的时候，经常需要百度一些最简单的数组、字符串方法，很是浪费时间；对这些方法经常回顾、归纳、总结，coding效率会更高一些，本文章将会对常用处理数据场景及方法做总结，希望对你有所帮助。1场景归纳 根据indexOf的结果是否为-1判断是否包含这个字符串 ant design pro中判断是否有管理员权限 'admin'.indexOf(getAutho...
2019-11-11 16:03:10
402
原创 ant design pro中umi-request拦截请求统一处理报错提示
ant design pro项目请求用的是umi-request，对于请求不成功的情况需要给用户错误提示，但是每个请求都对错误情况做处理，冗余代码太多，所以在src/utils/request页面拦截请求统一处理umi-request访问umi-request学习具体参数代码request.interceptors.response.use(async (response, op...
2019-11-08 15:07:35
12914
4
原创 ant design pro快速入门
项目需要用ant design pro实现一个管理系统，之前没有做过相关项目，所以将自己的学习过程与经验记录下来，做一个总结，也希望对看文章的你有所帮助。（做项目的时候用的是2.0版本，所以本文章基于2.0版本展开）一、技能点ant design pro主要用到的知识列表如下：ant design ant design pro dva umi umi-request二、克...
2019-11-08 14:01:40
408
原创 react实现RSA加密解密、DES加密
前端实现RSA加密解密、DES解密，主要用到的包有jsencrypt、crypto-js一、使用场景需要在本地存储一些标志位，安全问题 用户登录密码的加密二、加密代码RSA加密安装npm install jsencrypt在线生成一对RSA公钥和私钥import JSEncrypt from 'jsencrypt';const PRIV_KEY = `...
2019-11-07 15:10:34
5336
原创 react获取城市数据
address.json文件内容截图，是省市数据的数组处理数据import axios from 'axios';class Residence extends Component { constructor(props){ } getAddressData(){ axios.get('/address')//address.json数据 ...
2019-04-07 22:53:21
885
原创 一些常用正则的整理
只能输入数字/^[0-9]*$/.test("123abc")将手机号码的中间几位转化成****eg:18404444444 184****4444phone.replace(/^(\d{4})\d{4}(\d+)/,"$1****$2")金额限制/(^[1-9]([0-9]+)$)|(^(0){1}$)|(^[0-9]$)/.test(value) == f...
2019-04-07 16:18:21
301
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人