- 博客(35)
- 资源 (11)
- 收藏
- 关注
RSS订阅原创 vue2简单封装highcharts
vue2简单封装highcharts前言一、vue文件(high-chart.vue)二、highcharts配置(default-options.js)三、包裹highcharts的div宽度变化时，需要重绘，因此需要监听el1、resize-event.js2、debounce.js四、依赖库版本(package.json)前言把highcharts封装成vue组件，任何项目用起来都很方便一、vue文件(high-chart.vue)<template> <div cl
2022-05-23 22:46:02
728
1
原创 浏览器滚动加载更多实现
文章目录一、代码实现二、参考文档一、代码实现下面的代码是基于我常用的UI框架vue实现的，如果你是其他框架，直接提取滚动的关键代码即可，注意 crollPoint 加了0.5是为了兼容企业微信内置浏览器，当企业微信内置浏览器首次滚动到底部的时候，变量 crollPoint 和 totalPageHeight值如下：TYPEASCIIscrollPoint1600.6666870117188Quotes1601可以看到如果不加 0.5， scrollPoint &g
2021-12-23 17:18:50
596
原创 vue2三种渲染方式其性能差异分析
文章目录前言3种渲染方式比较1、template2、h函数3、jsx结论前言大多数前端开发者可能习惯了vue模板引擎的渲染方式，但是不知道你留意过没，template模式其内存占用是最高的，渲染时间也是最长的，对于大型应用来说，这是不能接受的。下面我们分析一下vue2三种渲染方式template、h函数、jsx其各自性能表现。3种渲染方式比较1、template渲染5000个div，代码如下<template> <div> <UserProfile
2021-09-07 16:28:11
1514
原创 部署api_automation_test过程中遇到的问题
文章目录前言一、依赖准备1.升级python为python3.72.使用pip3安装python依赖3.安装MySQL4.运行启动django服务前言在github上看到一个接口测试平台，现把部署过程中遇到的问题记录一下。一、依赖准备1.升级python为python3.7 升级python3：https://www.cnblogs.com/zydeboke/p/11465890.html升级过程中出现 ModuleNotFoundError: No module named ‘_cty
2021-05-07 19:29:22
447
原创 Linux MySQL 5.6.51 Community Generic 安装教程
文章目录前言一、获取安装包二、安装1.解压安装包2.添加系统mysql组和mysql用户3.创建并修改mysql数据目录4.修改目录权限5.初始化数据库6.修改权限为root7.添加启动服务8.登录mysql总结前言作为前端开发，安装MySQL是最基本的技能之一。一、获取安装包https://dev.mysql.com/downloads/mysql/mysql-8.0.24-linux-glibc2.17-x86_64-minimal.tar二、安装1.解压安装包安装位置tar
2021-05-03 11:24:12
1858
4
原创 js中对于返回Promise对象的语句如何try catch
文章目录前言一、何为Promise？二、代码演示try catch1. 无 async 修饰符，无 new Promise2. 有 async 修饰符，无 new Promise3. 无 async 修饰符，有 new Promise，Promise里面无 async4. 无 async 修饰符，有 new Promise，Promise里面有 async5. 有 async 修饰符，有 new Promise，Promise里面无 async6. 有 async 修饰符，有 new Promise，Pro
2021-04-10 16:44:22
6659
3
原创 docker常用命令
创建容器：docker run -it 镜像ID sh进入容器：docker exec -it 容器ID sh查看退出的容器：docker ps -a停止所有容器：docker stop $(docker ps -a -q)删除容器：docker rm 容器id删除所有容器：docker rm docker ps -a -q 或者 docker rm $(docker ps -a -q)重命名镜像：docker tag xxx:0.0.1 yyy:0.0.2删除镜像：docker rmi 镜像
2021-04-08 20:31:27
154
原创 linux node环境变量设置
文章目录前言一、安装node二、环境变量设置三、参考文档前言因为设置一次就好了，所以会经常忘记，这里记下来，以后设置的话就方便多了一、安装node安装的话就不说了，直接去node官网看就好了，传送门二、环境变量设置查看当前node命令来源：设置环境变量：vim /root/.bashrc# .bashrc# User specific aliases and functions#alias rm='rm -i'#alias cp='cp -i'#alias mv='mv
2021-04-07 20:59:54
1833
原创 蚂蚁集团g6初探
文章目录前言一、安装依赖二、demo三、效果前言工作中经常会出现展示流程图的场景，最近发现蚂蚁集团的g6用来展示可视化交互效果不错。一、安装依赖 npm install --save @antv/g6二、demo<template> <div id="mountNode"> </div></template><script>import G6 from '@antv/g6'export default {
2021-03-27 18:07:22
615
原创 js中map和forEach的用法
文章目录前言一、map1.简单数组2.对象数组3.修改简单数组内容4.修改对象数组内容二、forEach1.简单数组2.对象数组3.forEach() 的 continue 与 break前言编码过程中一直分不清map和forEach的区别，闲下来，弄几个例子研究一下。一、map1.简单数组 const a = [ 5, 7, 10, ] const mapA = a.map((item, index, arr) => { console.log(item, i
2021-03-18 21:15:47
4486
2
原创 如何调试微信内置浏览器应用（企业号、公众号、订阅号）
文章目录前言一、步骤1.下载devtools_resources.pak2.微信开启步骤2.企业微信开启步骤参考文章前言微信企业号应用，微信默认是没有开启调试模式的，线上环境出了问题，没办法像PC端浏览器一样F12开启调试模式，是很不方便的，下面告诉你如何开启一、步骤1.下载devtools_resources.pak下载链接：https://dldir1.qq.com/foxmail/wwopen_docFile/devtools_resources.pak2.微信开启步骤第一步：将de
2021-03-15 17:10:31
2925
2
原创 vue中使用富文本编辑器mavon-editor粘贴图片上转到腾讯COS
文章目录前言一、步骤1.安装依赖2.组装mavon-editor组件1.编辑模式2.不使用CDN3.上传图片到腾讯COS封装4.阅读模式总结前言使用富文本编辑器mavon-editor粘贴图片上转到腾讯COS一、步骤1.安装依赖yarn add mavon-editoryarn add cos-js-sdk-v5在main.js文件中引入mavon-editor：2.组装mavon-editor组件1.编辑模式我把编辑模式和阅读模式分成了两个组件编辑模式代码：<te
2021-03-13 16:14:59
985
原创 深究vue中computed顺序、watch顺序、响应次数
文章目录前言深究步骤1.代码2.输出结果3.分析过程总结前言深究vue中computed顺序、watch顺序、响应次数深究步骤1.代码<template> <div class="hello"> <button style="font-size: 40px;" @click="change">改变值</button> </div></template><script>export d
2021-03-13 13:54:36
1351
原创 Promise中有resolve和无resolve的代码执行顺序
请写出下面代码的输出顺序：示例1：console.log('script start')new Promise(function(resolve) { console.log('promise') resolve() console.log('promise after resolve')}).then(function() { console.log('promise then')})console.log('script end')示例2：console.log('
2021-03-12 09:44:00
1753
原创 前端编码避坑记
1、尽量使用箭头函数，箭头函数可以访问this，箭头函数详解2、一些编辑器（如：phpStorm）代码格式化的时候，如果没有设置 Editor -> Code Style -> HTML -> Inline elements，有些标签会被换行，最明显的就是select option，如果你显示的内容是放在option里面而不是option属性的时候，一旦换行，有些select组件就会把换行的空格也显示出来，非常困扰，这里有两个方法可以避免：① 配置编辑器，对特定的标签不换行，phpSt
2021-02-03 10:45:25
135
原创 windows安装nodejs多版本管理软件GNVM
文章目录一、下载GNVM二、安装一、下载GNVM32位：https://github.com/Kenshin/gnvm-bin/raw/master/32-bit/gnvm.exe64位：https://github.com/Kenshin/gnvm-bin/raw/master/64-bit/gnvm.exe二、安装参考：https://github.com/Kenshin/gnvm
2021-02-02 11:41:51
269
原创 table 组件指定列合并行方法
大多数table组件只提供了一个合并行或者合并列的抽象方法，例如 element ui 组件，该方法的参数解释及其用法如下，看得出来，rowspan代表每一行数据实际占用的行数，colspan代表每一行数据实际占用的列数，我们可以基于原始数据封装如下方法，export const getSpanMethodData = (data = [], columns = [ ]) => { let mergeColumns = {} // 用来记住合并列时数据的索引和重复的次数 let po
2021-01-25 16:13:41
908
原创 vue项目使用yxg-xlsx-style组件将表格数据导出带有样式的excel文件
引入组件yxg-xlsx-style导出excel主要逻辑文件（跟业务无关）：excel-style.jsimport XLSX from 'yxg-xlsx-style'// 如果单元格是日期类型function datenum (v, date1904) { if (date1904) v += 1462 let epoch = Date.parse(v) return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 ..
2020-12-31 11:21:28
1186
17
原创 Sentry搭建和使用
sentry搭建和使用例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录sentry搭建和使用前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：p
2020-11-29 13:35:52
3828
2
原创 iview table 横向拖动表格内容滚动
当表格纵向滚动比较长的时候，横向滚动是很不方便的，要是横向可以拖动滚动就完美了，解决办法就是给表格添加拖动指令，代码如下：const directive = { inserted (my_el) { let el = my_el.querySelector('div.ivu-table-body'); el.style.cursor = 'grab'; el.onmousedown = function () { let gapX = event.clientX;
2020-10-12 11:40:24
2858
原创 nodejs镜像制作
文章目录一、安装Docker二、在镜像仓库上创建一个命名空间二、创建alpine和npm两个镜像二、上传镜像版本1、拉取alpine镜像2、登录腾讯云的镜像仓库3、上传alpine镜像4、构建npm镜像# 前言制作镜像的前提是：要有一台云服务器和用于存放镜像的仓库。本人使用的是腾讯云服务器，镜像仓库直接使用腾讯云提供的容器服务即可，[点我](https://console.cloud.tencent.com/tke2/registry/user)即可查看腾讯云提供的容器服务。一、安装Docker
2020-09-20 17:55:22
1682
原创 容易忘记的git命令
查看本地分支追踪远程情况：git remote show origin如果远程分支已经删除本地还在，使用 git remote prune 来同步删除这些分支：git remote prune origin另外删除远程和删除本地分支的命令是：git push origin --delete 远程分支名git branch -D xxx 本地分支名...
2020-09-18 22:40:04
185
原创 select组件和checkbox组件组合使用
由于业务的需要，当数据量多的时候，select组件没办法快速的去掉默认的选项，然后选择一个未选中选项，思索了好久，突然想到可以把select组件和checkbox组件组合使用，就可以达到目的了，先看效果：为了更通用和复用性更高，我把select和checkbox封装成了一个新的组件select-checkbox-group，核心代码如下：<template> <div> <el-popover :width="popoverWidth"
2020-09-18 17:04:06
2786
4
原创 table组件（iview和element ）合并重复行方法
表格某一列（一般是前几列）合并重复出现的字段是很常见的需求，合并行之后表格看起来会比较清晰（分组），合并的前提是需要合并的字段已经按照升序（降序）排列好，核心算法如下：<template> <div> </div></template><script>export default { name: 'tmp', components: {}, data () { return { table: {
2020-09-17 10:33:39
948
原创 nginx代理code-server配置
code-server是什么，请点我查看linux安装code-server过程，请看上面github的说明即可，安装完成之后，执行code-server 即可启动服务，想直接在浏览器里面访问http://127.0.0.1:8080是不行的，因此我们需要借助nginx代理来访问，具体配置如下，location /codeServer/ { proxy_pass http://127.0.0.1:8080/; proxy_set_header Host $host; proxy_set_
2020-09-11 09:51:47
3390
14
原创 微信小程序中集成有赞UI自定义Tabbar组件
下载有赞小程序demo vant-weapp打开app.json添加自定义tabBar{ "pages": [ "pages/cart/index", "pages/goods/index", "pages/user/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTit
2020-09-10 11:03:48
996
4
原创 PhpStorm如何配置小程序客户端开发环境
微信开发者工具用来写代码感觉不是很舒服，是在不好用，习惯了PhpStorm先找一个小程序的demo，个人建议使用vant demo比较好，毕竟有赞开源了很多年了，github上的星星也比较多，demo项目地址：https://github.com/youzan/vant-demo.git，2.使用微信开发者工具打开vant-weapp，执行"工具->构建npm"，构建完成就会出现miniprogram_npm目录，这个是最终vant组件的依赖库，使用PhpStorm打开vant-wea
2020-09-08 20:39:20
1185
原创 手把手叫你搭建小程序服务端
本例服务端使用的是php，搭建lnmp环境和配置https请查看我的上一篇文章，ubuntu 18.04.5 LTS 安装lnmp1.下载php版本的腾讯官方小程序demo，wafer2-quickstart-php，解压之后的目录结构，其中server目录是要部署到自己申请的腾讯云服务器上的，打开server目录，做如下配置，appId和appSecret是自己申请的小程序信息，useQcloudLogin请设置为false，2.登录自己的服务器，创建小程序存储数据的MySQL DB，参考
2020-09-07 14:29:16
2368
原创 前端webpack跨域配置
vue.config.js配置 devServer: { proxy: { '/api/v1': { target: 'http://106.53.217.166/api/v1', // 这里可以跟随项目实际部署服务器来 secure: false, // 如果是https接口，需要配置这个参数 changeOrigin: true, // 如果接口跨域，需要进行这个参数配置 ws: true, path
2020-09-03 14:43:28
312
原创 A系统借用window.open调用B系统，B系统处理完业务携带数据回调A系统
A系统核心代码块（域名：www.lgfq.work）openB: function () { var _this = this; var iWidth = 1400; var iHeight = 750; var iTop = (window.screen.availHeight - 30 - iHeight) / 2; var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; .
2020-09-03 14:19:29
176
原创 ubuntu 18.04.5 LTS 安装lnmp
更新源sudo su rootapt-get update && apt-get dist-upgrade -y安装nginxapt-get install nginx安装php（常用扩展，安装完了注意查看php的版本，我这里的版本是php7.2）apt-get install php-fpm php-gd php-mbstring php-curl php-xml php-mcrypt php-mysql php-zip php-json php-redis p.
2020-09-02 15:58:38
303
原创 获取element el-tree组件子节点全选的父节点的信息
// 获取子节点全选的父节点的信息const checkedNodes = this.getSimpleCheckedNodes(this.$refs.leftTree.store)getSimpleCheckedNodes (store) { const checkedNodes = [] const traverse = function (node) { const childNodes = node.root ? node.root.childNodes : node.child
2020-09-02 14:28:53
620
原创 Element UI Tree 树形控件，数据回填存在重大bug，附带解决方式
Element UI Tree 树形控件，数据回填存在重大bug，附带解决方式问题描述：解决方案：问题描述：异步加载数据，getPositionTreeByPost是请求数据接口，default_checked_keys是回填的节点ID，default_expanded_keys是回填展开的节点回填数据渲染结果默认选中的节点是20141119、3000564524591276，结果渲染出来，三个节点都选中了解决方案：组件默认给空值回填数据不变异步加载数据的时候，再回填，使用set
2020-09-01 16:59:10
4012
2
原创 VUE使用v-clipboard复制到剪切板(数据在复制的时候从后台获取)
VUE使用v-clipboard复制到剪切板(数据在复制的时候从后台获取)v-clipboard类库地址： https://github.com/euvl/v-clipboard 用法：<template> <div> <Modal width="600px" :title="`API Token`" v-model="modal.show" scrollable class-name="vertic
2020-08-28 15:37:29
4023
web自动化测试视屏
2017-10-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人