- 博客(23)
- 收藏
- 关注
RSS订阅原创 VUE前端使用exceljs导出table以及echart图 生成excel文件
后端可以在Node中使用 node-echarts-canvas 插件直接实现渲染 将图片从插入到excel表中，但是前端无法使用，于是想了个折中的方式，先在页面渲染出一个 echart图标，再使用canvas画出并获取到生成图片的base64字符串，后袖写入到excel中。最近项目新增一个需求：导出部分列表数据(较少)以及生成的echart图放到一个excel文件中，全部需要在前端完成。好了 此时渲染成功，后面就是将图表使用canvas画出来得到base64。sheet2里面如下。
2022-10-19 17:58:43
4482
3
原创 git拉去远程所有分支内容
远程项目分支过多，本地使用git branch只展示master1、git clone xx 使用git branch只能看到拉去的master分支 使用 git branch -a 可查看所有2、git branch -r | grep -v '\->' | while read remote; do git branch --track "${remote#origin/}" "$remote"; donegit fetch --allgit pull --all3、此时本地
2022-07-13 19:02:33
923
原创 el-table 实现下拉加载
1、npm install --save el-table-infinite-scroll2、全局 import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll);3、局部组件import elTableInfiniteScroll from 'el-table-infinite-scroll';export default { directives
2022-07-07 10:22:57
1603
原创 shell脚本批量更新git/svn项目
直接打开工作目录终端 输入./updateData.sh即可看到批量更新项目若无法生效可以chmod 755updateData.sh；非权限问题可以看下终端报错是否No such file or directory，检查一下工作目录的父级目录是不是英文名后面有空格 例如：abc 目录；h1、新建 updateData.sh文件，一级目录直接使用下面即可：file>git项目#!/bin/shfor dir in $(ls -d */)do cd $dir ec...
2021-05-12 17:40:31
325
原创 form表单一些问题
1、input无法输入，可以尝试添加@change='' 使用 this.$fouceUpdate()跟新视图，，，如果无效可以考虑在data中的form对象中声明一下例如：form { name:'' } 能确保name能正常输入，出现无法输入原因不是很清楚，猜测是和校验有关系2、input无法实时校验，怪自己手残，在rules:{vistiorType: [{ required: true, message: '访客类型不能为空', trigger: 'change' }] } ，的trig...
2021-04-13 11:06:15
240
转载 文字发光效果
<div> <p>xinpureZhu</p></div>body { background: #000;}.container { width: 600px; margin: 100px auto 0;}p { font-family: 'Audiowide'; text-align: center; color: #00a67c; font-size: 7em; -..
2021-04-07 12:11:20
123
原创 前端图片上传使用，base64直接上传，base64转化成file上传，form表单直接上传文件，element-ui上传图片
最近项目中使用到了图片上传功能，作为前端开发对此应该不陌生，正常来说图片会有一个单独存储的服务，例如现在公司使用minio统一集中管理，直接部署在docker上面非常方便，下面记录一下使用经历过的图片上传1.base64直接上传这种base64直接上传给后端，然后后端拿到数据之后就能自行处理，一般前端会对base64数据前面拼接"data:image/jpeg;base64," + base64数据；代表图片格式，其余后端自行处理，相对来说这种方式对前端更加友好，上传方式跟普通数据上传...
2021-04-06 21:59:23
12445
原创 vscode代码格式化时属性不换行
最近一直使用vscode,项目中也使用了eslint等代码格式化工具，但是自从更新之后标签属性一直换行，查询尝试了多种方法发现都已经不行，纠结好久才搞好，终于觉得编辑器清新了好多1、需要 command+,；打开设置，搜索wrap 如下选择 代表永不换行2、插件市场下载插件：Prettier - Code formatter；安装完成之后需要打开settings.json添加如下配置 "vetur.format.defaultFormatter.html": "js-beautify-h
2021-04-01 14:26:18
6888
原创 自定义axios配置多个ip
这几天项目遇到一个情况：一个vue项目除了对接的后端的接口，还需要去使用统一登录平台的登录以及权限等接口，分别部署在不同服务器中；本来还一种处理方法就是后端做一次接口转发，这样我们就不需要另外配置ip了，但是由于开发任务较紧急不能额外占据更多资源，就意味着要前端自己处理(其实也非常简单)主要思路还是创建两个axios实例，这样就能配置两个baseURL。。。。以此类推N+1都行，当然肯定也不能直接 const service = axios.create({}) const service2 .
2021-03-28 16:59:54
2509
原创 vue项目(通用方法+axios自定义+http请求统一管理绑定+vue.config.js别名alias配置)
一般项目中会出现大量http方法和公用JS方法，在使用的时候每个页面都会出现大量 import { } from '../../。。js' ，项目迭代或者设计图修改之后就会有所变动需要重新引入，经常出现路径问题，此处大概讲一下 路径别名与axios重写与通用方法和正则的统一导入与引用，欢迎交流
2021-03-16 16:50:53
842
原创 element-ui多次弹出message消息提示，仅显示一个
项目中最常用的UI框架就是element-ui，经常在点击操作按钮时候多次点击上一个弹窗未消失，下一个又出现，类似于ant-vue里面提供了 this.$message.destroy()方法，能够销毁。但是在饿了么里面是不存在的，只能对此重写处理，代码如下import { Message } from 'element-ui'let messageInstance = nullconst resetMessage = options => { if (messa...
2021-03-16 10:24:46
1927
原创 统一批量注册vue全局公共组件
项目中有大量弹窗组件与公共UI组件，每次使用需要在组件内import并且需要在components中注册，，或者在main.js中引入然后Vue.use(component)全局注册较为麻烦，尤其组件较多时候，main文件是越简洁越好；一般拆分出来的dialog弹窗自行引入即可，公共UI一般都是全局注册，方便使用与管理如上项目新建几个组件，AnimateNum.vue为数字改变跳动动画效果组件，echart.vue为图表组件，XBox.vue为模块盒子样式，以上组件例子在智慧城市等大屏展示项目与.
2021-03-15 13:09:59
369
原创 实时疫情数据+echarts地图+自定义背景
目前需求是在地图上展示全国各省的地图并展示实时疫情数据，以重庆为例展示各地前往重庆的数据迁移图1、引入echart与china.json数据//最新版echart必须要以此种方式引入import * as echarts from 'echarts'let uploadedData = require('./china.json')echarts.registerMap('china', uploadedData)2、tooltip配置：由于地图较大，有些情况下弹窗位置有问题，因此除了默认的p
2021-03-15 11:09:32
2056
3
原创 typescript学习（1）配置、编译
做一些总结与记录：查看index.ts文件运行结果：1、tsc --outFile ./js/index.js index.ts 即可将根目录ts文件转为js文件，node index.js即可运行此js文件2、使用ts-node：npm install ts-node -g；mac安装失败可以加sudo；安装完成之后直接：ts-node index.ts即可查看ts文件运行结果3、配置tsconfig.json{ "compilerOptions": { ..
2021-01-19 15:07:54
341
原创 echarts实现词云效果vue
cnpm install echarts-wordcloud --save;cnpm install echarts --save在需要组件中直接 require(“echarts-wordcloud”);即可； var echarts = require("echarts"); require("echarts-wordcloud"); var data = { value: [{ name: "独居老人", va
2021-01-18 14:56:05
1052
原创 uni-app+vant-weapp使用vue.js快速开发微信小程序
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。此文章主要配合使用vant-weapp，方便习惯使用vue的开发者快速完成微信小程序
2020-12-31 11:05:15
2002
原创 微信小程序view-scroll的ios真机点击跳转返回之后无法滚动
微信小程序view-scroll的ios真机点击跳转返回之后无法滚动<scroll-view scroll-y="true" @scrolltolower='toBottom' class="scrollView" lower-threshold='5' @refresherrefresh='pullResert' refresher-enabled="true" :refresher-triggered="triggered">//列表list
2020-12-29 15:10:13
501
原创 实现element-ui的table列表点击只允许一行展开
避免不了使用table,当然table单纯只是展示list数据,项目中遇到需要在table的row中在嵌套一个表格,由于接口做了拆分功能块比较独立,需要先获取list,当点击相应row展开折叠框的时候在获取row对应的下级数据,row还提供编辑功能,修改完之后再次获取list列表。如果同时展开两个折叠框会对table里面嵌套type="expand"的el-table-column里面数据有影响...
2019-04-23 00:19:47
4034
1
原创 css自定义滚动条
1、在谷歌浏览器和Safari中可直接设置，如果想单独对某个盒子添加，直接在伪类前面加上选择器即可::-webkit-scrollbar 滚动条整体部分---可设置颜色边框之类 ::-webkit-scrollbar-thumb滚动条里面的小方块，能向上向下移动（或往左往右移动，scroll-x或者scroll-y） ::-webkit-scrollbar-track滚动条的轨道...
2019-04-22 16:24:04
807
原创 window与Mac下安装ionic
Windows安装方法 安装环境node.jsnpm准备工作1、下载Node.js2、JDK（webstorm运行环境/为了编译到android平台）-视情况而定3、Android SDK（Android编译）JDK建议安装到C盘，之后配置环境变量 开始安装打开CMD，首先安装CNPM淘宝镜像（由于GFW问题，有些插件不好整） npm i
2017-08-31 16:04:42
617
原创 Ajax的基础请求以及获取JSON的两种解析方式
作为一个前端，避免不了需要做前后台交互/*基础请求*/var xmlhttp = null;if(window.XMLHttpRequest){ var xmlhttp = new XMLHttpRequest();}else{ var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');}xmlhttp.open('GET',...
2016-09-10 11:31:10
3685
原创 谈谈面向对象
相信不少人也迷惑面向对象是什么？该怎么理解？这是一个令人相当头疼的问题，以前有个大神给我讲过，在这里整理一下，留作纪念，希望能帮到大家，也欢迎各位大牛指导。所谓对象，无赖的理解就是万物皆对象，一般在大型项目中必须要使用面向对象编程(OOP)。优点是能够更好地建立模型，使代码更加清晰，易于维护，当然逼格也更高了(PS：不管大小公司面试必须会问面向对象，瞬间就觉得高大上了;)一般来说越是逼格...
2016-09-10 02:29:49
415
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人