写的一些小玩意
记录一下自己写的一些工具类的代码
1. 读取excel表格内容转换为markdown文档
需要安装依赖,主要是用到了一个node-xlsx的npm包
1npm install node-xlsx --save
主要代码部分
excelToMarkdown.js
123456789101112131415161718192021222324const XLSX = require('xlsx');const fs = require('fs');// 读取 Excel 文件const workbook = XLSX.readFile('input.xlsx');const worksheet = workbook.Sheets[workbook.SheetNames[0]];// 将表格数据转换为对象数组const data = XLSX.utils.sheet_to_json(worksheet, { header: ['title', 'content'] ...
记一次开发微信小程序使用高德地图sdk踩坑经历
最近开发一个微信小程序项目的时候有一个需求就是逆地址解析和poi检索,一般来说微信小程序最好还是使用腾讯地图最合适,不会出现奇怪的地理位置偏移什么的。但本着折腾一下的心理去使用高德地图的微信插件,但万万没想到这一下直接掉坑里面去了。
这个坑主要体现在微信使用wx.getLocation()和wx.chooseLocation()方法获取到的数据默认来说是纬度在经度前面,导致数据直接给高德地图sdk使用,就会在失败的回调中报错误代码20011。然后就去翻高德的错误代码说明,说是”查询坐标或规划点(包括起点、终点、途经点)在海外,但没有海外地图权限”。但是我使用腾讯地图就很正常,那时我就在想有没有可能是单词写错了,但是经过排查发现并不是。于是我就在想有没有可能是经度纬度搞反了,但是我查了网上的帖子都是我这样的写的呀,不过我还是抱着试试的心态将经度纬度互换了一下位置。然后…… 然后……数据就出来了。这就让我很是无语了,于是再去翻看高德的文档最后还是在Web服务API下才看到这么一条信息。
我只想说,“高德,你文档可以写的全一点嘛,我只是想在微信小程序上用上你的逆地址解析,真的犯不着把你 ...
前端使用vue-qr生成二维码并下载
简介:vue-qr(项目地址)一款可以生成带logo和背景图片二维码的vue前端插件,功能强大但使用简单,你可以使用该插件生成各种漂亮的二维码图片。需要注意的就是不支持ie浏览器
安装:12345// npmnpm install vue-qr --save// yarnyarn add vue-qr
导入
如果多出组件中需要使用,在main.js中全局导入注册
123456789// 导入// vue2.x import VueQr from 'vue-qr'// vue3.x import vueQr from 'vue-qr/src/packages/vue-qr.vue'// 注册Vue.use(VueQr)
属性
说明
是否必须
text
欲编码的内容
是
correctLevel
容错级别 0-3
size
尺寸, 长宽一致, 包含外边距
margin
二维码图像的外边距, 默认 20px
colorDark
实点的颜色
colorLight
空白区的颜色
bgSrc
...
element-ui表格组件设置单元格不换行显示
在一个项目中运用到了element-ui的表格组件,但是遇到一个问题就是,当一个单元格内的数据特别多的时候,但是单元格宽度又不够放下全部的内容。于是就会发生在单元格内部换行,这就会让这个页面的布局变得不可控,经过一番搜索找到了一个算是解决问题的方法。
给el-table 设置属性 cell-class-name,自定义 className
代码如下:
1234567<!-- 表格部分 --><el-table :data="tableData" :header-cell-style="headClass" cell-class-name="table_cell" :cell-style="rowClass" border style="width: 100%"></el-table><!-- css部分 ::v-deep 表示将样式穿透到element-ui里面,记得给<style>标签里面加上scoped,不然这个样式就变成 ...
Element-UI的Cascader级联选择器懒加载插件封装
直接上代码,使用的接口还是上一篇文章的给出的接口。实现懒加载数据。
123456789101112131415161718192021222324252627282930313233343536373839404142434445<template> <div class="block"> <el-cascader v-model="value" :props="props" @change="handleChange"></el-cascader> </div></template><script>import { getprovinces, getcities, getareas, getstreets } from '@/api/riskarea'export default { data () { return ...
elementui中el-tree控件懒加载和局部刷新
最近项目上一个组件需要使用到tree组件来选择省市县乡,因为数据量比较大所以打算使用懒加载的方式来解决一次性加载太多数据而造成体验不好的问题。树组件如果数据比较多的话,一次性把整棵树的数据都请求到,略有耗时。所以为了优化性能,我们就要实现树组件懒加载的效果,也就是当我们点击树节点的时候,再去向后端发请求,获取对应点击的树节点下的数据。这样的话,点击哪里,加载哪里,性能会提高不少。
tree组件常见属性
data—-用来展示数据
props—-树状图配置
label—指定节点标签为节点对象的某个属性值
children—指定子树为节点对象的某个属性值
disabled—指定节点选择框是否禁用为节点对象的某个属性值
show-checkbox—显示选择框
getCheckedKeys—-获取当前选中的节点的keys
default-expand—–all-默认展开
check-strictly—-设置true,可以关闭父子关联
this.$refs.tree.setCheckedKeys([])—–清空当前的选择
懒加载按照 elementui官方文档示 ...
Vue中main.js里的render是干什么的
以下是我在学习Vue时,对main.js中render函数的个人理解。
在打开利用Vue脚手架创建的项目文件main.js之前,我们猜想它应该长这样
实际上的mian.js如下
跟我们想的不一样,那这里的render又是什么呢?
我们可以先假设,如果按照我们猜想的写法,会发生什么?
报错了 ,意料之中
那么我们来分析一下错误提示
错误提示我们引入的是非完整版的Vue,缺少模板解析器,并给出了两种解决方法
我们先来试试第二种方法,引入完整版的Vue,我们怎么知道引入的是不是完整版的?完整版的又在哪呢?
看代码
实际上我们引入的是vue.runtime.esm.js,是精简版的Vue,它与完整版的不同就是少了模板解析器,那完整版的Vue哪里呢?
引入完整版的Vue我们只要改一行代码就行
import Vue from ‘vue/dist/vue’
运行成功!第二种方法可行
接下来我们再来试一下第一种办法,使用非完整版的Vue,把render函数写上去
同样运行成功
此时我们发现,这不就是Vue一开始采用的解决方法吗?
从vue官网中知道,vue提供了两个版本,完整版和 ...
随机动漫图片API集合
序号
地址
备注
1
http://www.dmoe.cc/random.php
2
https://api.btstu.cn/sjbz/?lx=dongman
3
https://api.hanximeng.com/ranimg/api.php
4
https://img.xjh.me/random_img.php?type=bg&return=302
5
https://air.moe/ranimg/api.php
6
https://www.dmoe.cc/random.php
7
https://air.moe/ranimg/api2.php
8
https://air.moe/ranimg/api1.php
9
https://www.dmoe.cc/random.php
10
https://air.moe/ranimg/api.php
11
https://api.btstu.cn/sjbz/?lx=dongman
七牛云+PicGo-Core实现Typora图片上传自由
七牛云对象存储+PicGo-Core
一、概述
最近在做一个个人博客项目,发现博客中会插入很多图片,怎么存储成了问题,经过一番查询发现大家都是用的图床工具,之前了解过七牛云,注册认证后有10G永久免费空间,每月10G国内和10G国外流量,速度相当快,七牛云是国内专业CDN服务商,插件支持比较多,有免费ssl证书,但https流量收费,所以便想用七牛云进行图片的存储,打算以后的文章图片都使用七牛云来进行存储,不过要注意的一点是,七牛云30天后会回收测试域名,因此你必须要绑定自己的已备案的域名。我将采用Typora作为Markdown编辑器,PicGo为上传图片工具,使用七牛云做存储,Typora和PicGo需要自己下载。
二、配置七牛云图床
七牛云官网
首先,需要在七牛云官网注册账号并进行实名认证,注册—–>实名认证,基本上就是这个步骤,在这就不做细致介绍咯,相信难不到聪明的你。提醒一下,最好使用谷歌浏览器访问进行实名认证,我开始用的是火狐浏览器,在通过微信扫码实名认证时,怎么都刷新出二维码,换成谷歌,秒解决。
2、配置存储空间
2.1、新建空间
依次点击【管理控制台】—–【对 ...
Git使用笔记笔记
一. 走入Git1.Git介绍
Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。
Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
版本控制
版本控制(Revision control)是一种在开发的过程中用于管理我们对文件、目录或工程等内容的修改历史,方便查看更改历史记录,备份以便恢复以前的版本的软件工程技术。
团队协作
从单兵作战转换为团队开发。
2.Git对比SVN
SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而工作的时候,用的都是自己的电脑,所以首先要从中央服务器得到最新的版本,然后工作,完成工作后,需要把自己的代码推送到中央服务器。集中式版本控制系统是必须联网才能工作。
Git是分布式版本控制系统,没有中央服务器,每个人的电脑就是一个完整的版本库,工作的时候不需要联网了,因为版本都在自己电脑上,可以离线工作。
3.Git安装
https://git-scm.com/
下载好以后,直接双击进行安装就行
一直下一步就可以,安装再默认 ...