weixin_43755513的博客

原创 解析上传的Excel文件以及对Excel里面的日期格式做处理

解析上传的Excel文件<template> <div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"> <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="hand

原创 小程序坑

问题：iOS不识别2020-02-03日期格式，只识别2020.02.03解决：可以使用dayjs进行兼容问题：iOS不识别0.5px解决：可以直接使用1px

原创 微信小程序订阅模板的使用

1.使用的API订阅模板使用wx.requestSubscribeMessage(Object object)2.获取用户对某个模板消息的订阅消息用户订阅一个模板消息时，可能会选择“总是保持以上选择，不再询问”，这时如果我们想要获取用户对模板消息的选择状态时，可以使用wx.getSetting3.参数templIds：Array类型，必填，需要订阅的消息模板的集合，一次调用最多可调阅3条信息。success：function类型，选填，接口调用成功的回调函数。fail：function类型，

原创 微信小程序拉开输入框与键盘的距离

微信小程序拉开输入框与键盘的距离<input cursor-spacing="100"></input>效果图

原创 vue中的富文本编辑器组件vue-quill-editor的使用

安装npm install vue-quill-editor -S引入import {quillEditor} from 'vue-quill-editor'import 'quill/dist/quill.snow.css'使用<template> <quill-editor v-model="editor" ref="myQuillEditor"...

原创 Element UI中的el-tree的使用，在每个节点后面添加内容

html部分<el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current> <span class="custom-tree-node" slot-scope="{ node,data }"> &lt...

原创 轮播图使用vue-awesome-swiper插件 配置属性

vue-awesome-swiper插件的安装 使用 配置安装npm install vue-awesome-swipercnpm install vue-awesome-swiper插件引入全局引入：import vue-awesome-swiper from "vue-awesome-swiper"import "swiper/dist/css/swiper.css"组件方...

原创 利用Blob下载文件

前端涉及到导出文件时可以使用Blob进行下载这里是用的vuethis.$store.dispatch('exportList').then((response) => { var blob = new Blob([response], {type: 'application/vnd.ms-excel'}) var downloadElement = doc...

原创 Vue中的移动端事件

Vue中的移动端事件用vue-touch安装：cnpm install vue-touch@next -S使用：现在入口文件index.html中进行引入,并且使用import VueTouch from "vue-touch";//Vue.use就是用来使用插件的 //name的值是组件的名称Vue.use(VueTouch,{name:"v-tou...

原创 Vue中的生命周期

生命周期概念一个组件从创建到销毁的过程。生命周期函数（生命周期钩子函数）生命周期的过程创建过程beforeCreate：创建前当new Vue执行的时候，beforeCreate会做一个初始化的操作，在当前生命周期中我们访问不到data中的属性和methods中的方法，当前生命周期中我们可以执行一个loading，当页面加载完毕的时候将loading移除create...

原创 Vue脚手架

安装cnpm install @vue/cli -g创建项目vue create 项目名称manuallyBabel、Vuex、Css Pre-processorssass/sacc(with daet-sass)In package.jsonSave this as a preset for future project(y/N)N...

原创 Vuex

Vuex的概念公共的状态管理模式一种最好的非父子组件传值的方案安装cnpm install vuex -SVuex中常用的配置项vuex的基本配置框架import Vue from "vue"import Vuex from "vuex"Vue.use(Vuex);//vue配置 公共的内存空间const store=new Vuex.Store({ s...

原创 Vue的全局API

Vue.extend使用基础Vue构造器，创建一个“子类”。参数是一个包含组件选项的对象Vue.nextTick在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOMVue.set向响应式对象中添加一个响应式属性，触发视图更新Vue.delete删除对象的属性Vue.directive自定义指令Vue.filter全...

原创 Vue

初识VueVue的作者尤雨溪Vue的框架MVVM框架M:model层 ：数据的增删改查操作V：view层：类似于HTML一样的模板VM：映射层：Model层与V层的一个映射层渐进式的JavaScript框架Vue的特点操作数据来改变视图操作虚拟DOM虚拟DOM就是真实JS对象，操作内存中的JS对象永远要比操作DOM的速度要快。响应式数据的底层原理...

原创 Mock数据

Mock是模拟数据库的安装cnpm install json-server -g启动环境随便创建一个文件夹，文件夹中创建一个json文件在当前文件夹中通过终端启动Mock数据环境json-server 文件名称.json使用GET：获取数据获取全部数据axios({ method:"get", url:"http://localhost:300...

原创 mockJS

mockjs：模拟数据安装方式cnpm install mockjs -Syarn add mockjs引入const Mock=require("mockjs")创建接口//在index.js中使用const Mock=require("mockjs");const url=require("url");const data=Mock.mock({ ...

原创 NodeJS中的express框架

express的概念express是基于NodeJS平台，快速、开放、极简的Web开发框架express的安装首先建一个文件夹然后在这个文件夹中进行使用npm init 命令初始化一个package.json文件然后使用命令：cnpm install express --save安装expressexpress的使用新建一个index.js文件引入express依赖：co...

原创 NodeJS

NodeJSNodeJS的基本概念1.什么是NodeJSNodeJS是一个基于Chrome V8引擎的一个JavaScript运行环境。NodeJS使用了一个事件驱动，以及非阻塞I/O模式，使其更轻量高效。NodeJS的npm包是全球最大的包管理网站。V8引擎内核：脚本引擎(V8引擎)渲染引擎。I/O模型I：input 输入O：output 输出npm：包管理器...

原创 VCode中在Vue文件中自动生成Vue结构以及自动补全HTML标签

在Vue文件中自动生成Vue结构自动补全HTML标签

原创 在VCode中使用Vue时可安装的插件

原创 在Google中安装扩展程序(插件)显示程序包无效时的解决方法以及如何安装vue-devtools以及安装vue-devtools报错时的解决方法

找到需要安装的程序包(插件)，如果后缀名是.crx就把crx改为rar修改插件扩展名后系统会提示：如果改变文件扩展名，可能会导致文件不可用。点“确定”即可。3.建一个空文件夹，把这个压缩包解压到这个空文件夹中4.然后点击浏览器的右上角的三个点的地方，里面有一个更多工具---->扩展程序，点击进到扩展程序中5.在扩展程序页面有一个开发者模式，打开(拖到最右边)，点击 加载已解压的...

原创 token的原理和使用

token的原理和使用token就是用来进行身份验证的一：登录的验证流程当用户请求登录的时候，如果没有问题，我们在服务端生成一条记录，这个记录里可以说明一下登录的用户是谁，然后把这条记录的ID号发送给客户端，客户端收到以后把这个ID号存储在Cookie里，下次这个用户再向服务端发送请求的时候，可以带着这个Cookie，这样服务端会验证一下这个Cookie里的信息，看看能不能在服务端这里找到...

原创 Mongodb数据库

Mongodb数据库如何开启数据库服务器mongod —dbpath c:\data\db(数据库的安装路径)mongo 进入数据库服务器数据库常用的命令show dbs ：查看当前数据库服务器中有多少个数据库use 数据库名称 ：创建/切换数据库(如果数据库中没有东西则不会显示)use bk1917db.createCollection(“表名称”) ：创...

原创 从MySQL中读取到的数据在浏览器上显示的是乱码

使用show variables like 'character%';检查MySQL当前的字符集,需要是下面这个状态，如果不是就进行修改打开MySQL中的my.ini文件在里面修改或添加以下内容在运行(window+R)中使用services.msc进入服务，重启一下mysql就行了...

原创 购物车1

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

原创 烟花效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

原创 封装运动框架（轮播图）

以下全部为JS代码function Animate(_ele){ this.timer=null; this.hz=30; this.step=function(_css,_times){ this.time=_times/this.hz; if(_css.left){ this.hs=(Number(_css.le...

原创 仿京东放大镜效果

点击向左的箭头显示没显示出来的小图时有bug<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...

原创 淘宝轮播图

点击上下箭头有小bug<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...

原创 打字游戏ES5面向对象的写法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

原创 小游戏：贪吃蛇

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

原创 根据不同的要求进行排序(ID，价格等)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html,body{ margin:...

原创 透明度轮播图ES6面向对象的写法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

原创 正则表达式的案例

正则表达式的案例

原创 透明图轮播

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

原创 加减速运动

Document <script type="text/javascript"> function create(_body){ let _circle=document.createElement("div"); _body.appendChild(_circle); } ...

原创 碰撞运动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

原创 圆沿曲线运动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

原创 打字游戏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

原创 跟随鼠标效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...