- 博客(26)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue+element-ui上传文件到七牛云组件
Vue+element-ui上传文件和分片上传到七牛云一、实现效果二、上传到七牛云的过程三、实现组件代码1.上传组件代码2.引入组件3.提示公司可能会将图片文件等存储到七牛云、阿里云等服务器方便管理。我这里将文件上传到七牛云，通过七牛云的api来实现上传和分片上传。使用element-ui的el-upload组件改造来完成。一、实现效果点击添加附件弹出dialog操作框选取文件后添加文件到待上传列表，点击上传后同时上传文件，超过一定大小（自己设置）的文件会采用分片上传。上传后的添加附件变为查看
2021-09-13 11:36:47
3411
原创 vue2.0源码之数据双向绑定原理和实现
vue源码之数据双向绑定原理一.双向绑定的原理介绍二.代码简单实现这里什么说是vue2.0的双向绑定原理是因为和vue3.0的实现方式是有区别的。一.双向绑定的原理介绍vue的双向绑定是数据和视图的同步变化，即当数据发生变化的时候，相关的视图会发生改变；视图发生改变的时候，数据也会随之变化。它是通过 数据劫持 结合 发布订阅模式的方式来实现的。下图是一个vue数据双向绑定的过程：将vue中的data里的所有属性通过实现Observer来完成数据劫持Dep是一个容器来存放所有的订阅者Watc
2021-08-12 17:37:02
1211
1
原创 Vue2.0源码之虚拟dom和diff算法的原理
Vue2.0源码之虚拟dom和diff算法的原理一.虚拟dom介绍二.diff算法一.虚拟dom介绍现在使用的Vue和React，都有虚拟dom这个说法，既然是虚拟dom，肯定和真实dom有区别但又有关联。所以虚拟dom是什么呢？虚拟dom就是真实dom的所映射的一个JS对象。简单来说就是把页面的dom节点树通过JS对象的形式来表示出来。为什么要用虚拟dom的方式来设计Vue框架呢？因为不管在原生JS或者是JQuery时，我们会在开发中操作大量的dom节点，dom的大量操作会让页面的性能
2021-08-09 10:36:41
164
1
原创 vue-baidu-map百度地图设置标记点及信息窗口
vue-baidu-map自定义设置标记点及信息窗口一.项目需求二.实现后的效果三.代码实现四.小结一.项目需求首先项目的功能需求是在指定服务区域内选择详细地址（保修地点），然后显示这个地址周围的工程师到地图上面。并且可以查看指定工程师的信息。从而达到派单的目的。二.实现后的效果左侧是选择地址，范围等条件。右侧是地图，显示的是当前保修地点和周围的工程师，点击地图工程师头像弹出详细信息（我这里是自定义信息窗口的样式）。三.代码实现因为我这里的代码涉及到项目的其他功能并且具有关联性，所以我的实际代
2021-08-02 16:42:29
6319
6
原创 el-cascader级联实现已有区域省、市、区选择并保存区域id
el-cascader级联实现已有区域省、市、区选择并保存区域id一.需求分析二.实现效果三.代码实现一.需求分析前几天公司有一个需求，多选已配置好的区域（包括省、市、区/县）,并返回区域的id。这听起来好像很正常，但我的数据是这样的：1.这是所有区域的json文件格式:city下的每一项：country_code表示当前城市属于的国家； province_code表示当前城市属于的省份；code为当前城市的code。country下的每一项：code为当前国家的code。district
2021-07-16 10:27:49
1652
1
原创 Vue可拖动未读消息组件
分享一个Vue的可拖动未读消息提示的小组件一.效果图二.在Vue中实现自定义指令三.在项目中使用此组件使用Vue自定义指令实现一个全局显示可拖动的未读消息提示。思路就是通过自定义指令来实现一个组件在页面中的拖动。一.效果图在项目中的效果（按住鼠标左键可以拖拽）二.在Vue中实现自定义指令首先定义一个自定义指令 @/assets/utils/darg.js文件import Vue from 'vue';//使用Vue.directive()定义一个全局指令//1.参数一：指令的名称，定义时
2021-07-06 12:00:23
756
1
原创 TypeScript之泛型（六）
TypeScript之泛型的理解和使用一.什么是泛型二.泛型的使用三.接口泛型四.泛型类上一篇：TypeScript之interface接口（五）一.什么是泛型什么是泛型？我们可以理解为是在编译期间不确定方法的类型，在方法调用时再指定类型的一种特性。这句话又怎么理解呢？在TS中，定义变量最重要的就是对类型的约束，但是当需要定义一个参数类型 返回 值类型不确定的函数时，这时就可能会使用泛型。这时有人会说为什么不使用any类型来定义呢？还要弄一个泛型出来？这对于写高复用性的第三方库和第三方源码的时候，泛
2021-06-29 17:47:01
147
1
原创 TypeScript之interface接口（五）
TypeScript之接口的定义和使用一.接口的定义二.接口初识三.包含函数的接口四.接口对类的约束五.接口的继承上一篇：TypeScript之类，抽象类，继承，多态（四）在前面创建数据类型我们简单提到了接口，使用接口在约束一组数据结构来定义指定的对象。这里来详细介绍一下TS中的接口。一.接口的定义在各种开发语言里基本都有interface接口的定义，这个接口与开发中的API接口不是一个概念。interface接口定义了某一批类所需要遵守的规范，时一中数据格式的约束。接口不关心内部属性的数据，也不
2021-06-25 15:46:49
800
1
原创 TypeScript之类，抽象类，继承，多态（四）
TS中关于类的理解一.类的定义二.类的继承三.类的修饰符四.静态属性和方法五.抽象类六.多态在es6之前，要想实现JS的服用方法或组件，需要使用函数，原型和原型链等方法来实现。在es6中引入了JS类的概念，我们使用JS也能基于面向对象的方式使用和构建类。在TS中也允许使用es6的类的写法，最终编译为JS代码允许在浏览器。一.类的定义和其他面向对象语言的语法一样，使用class关键字定义一个类。类中this表示此当前对象本身，如下的this.name就表示当前类的name属性。//定义一个'人'的类
2021-06-23 11:56:21
352
1
原创 TypeScript之函数定义（三）
TypeScript中函数的定义和规范一.函数的定义二.可选参数三.默认参数四.剩余参数五.函数重载TS中的函数语法和JS（es5和es6的函数）的语法类似，多了TS的类型特性和规范，通过类型判断实现函数重载。一.函数的定义//1 函数的定义 //es6函数声明f1(){ console.log("hello world");}f1();//调用函数 //ts中定义函数 函数名(参数1:类型1,参数2:类型2,...) :返回值类型//定义一个没有参数没有返回值的函数f2():
2021-06-21 14:40:03
518
原创 TypeScript之interface定义对象（二）
TypeScript语法的对象定义和使用一.JS中的对象二.TS中定义对象三.任意属性四.可有可无的属性五.只读属性前面我们说到了基本数据类型，还有数组，枚举等类型，那么在typescript中是如何定义像JavaScript中的对象的呢？一.JS中的对象我们先来看一下在JavaScript中的定义对象的方式，定义方式如下：//定义let student = { name: '狗蛋', age: 18, eat: function () { console.log(this.n
2021-06-17 18:34:02
5581
1
原创 TypeScript之数据类型（一）
TypeScript基本语法一.数据类型的定义1.布尔类型（boolean）2.数值类型（number）3.字符串类型（string）4.undefined 和 null类型4.数组类型（array）5.枚举类型（enum）6.任意类型(any)和类型推断7.联合类型（多种类型）6.没有废话，不讲背景，不讲定义。直接说语法。一.数据类型的定义Typescript中基本数据类型：布尔类型（boolean）、数值类型（number）、字符串类型（string）、undefined、null等。定义的基
2021-06-01 12:01:03
522
1
原创 golang简单快速搞懂接口类型
golang简单快速搞懂接口类型一.接口是什么二.接口的格式三.接口的实现四.实现后的使用五.接口嵌套六.空接口1.空接口存储任意类型的值2.空接口作为函数的参数3.空接口作为map的值4.空接口作为slice的值七.注意一.接口是什么 接口(interface)是一种类型,一种抽象类型。它是一组方法的签名，是一组仅包含方法名、参数、返回值的未具体实现的方法的集合。当不同的父类具有相同的行为的时候，单一继承无法
2021-05-27 11:24:33
1049
1
原创 简单vue父子iframe页面跨域通信传值postMessage()
vue不同域名父子iframe间相互传值1.子页面向父页面传值2.父页面向子页面传值1.子页面向父页面传值a.vue 父页面 b.vue子页面//b.vue 子级给父级发送数据methods:{ sendMessage(){ window.parent.postMessage(data, "*"); //data传递的数据，“*”跨域的域名 *代表所有 }}//a.vue 父级页面接受数据mounted(){//父页面监听发送过来的消息 window.addEven
2021-05-25 11:18:42
2417
1
原创 golang函数和方法的区别
golang函数和方法的使用和区别一.函数二.方法go语言的函数和方法的定义和使用都有一定的区别，但方法不过是一种特殊的函数。一.函数函数声明包含一个函数名，参数列表， 返回值列表和函数体。如果函数没有返回值，则返回列表可以省略。函数从第一条语句开始执行，直到执行return语句或者执行函数的最后一条语句。// 类型相同的相邻参数，参数类型可合并。多返回值必须用括号。//(func 声明函数 test函数名 第一个括号里:传入参数 第二个括号:返回参数 )func test(x int,
2021-05-19 17:36:45
428
1
原创 前端vue，js封装常用的各种方法，处理数组，对象，深拷贝，随机数，判断等等
前端js在项目中封装各种常用的方法关于使用1.存取sessionStorage2.存取localStorage3.生成随机数和字母4.数组和对象深拷贝5.菜单数据组织6.阿拉伯数字转中文7.数字补0占位8.时间戳转化为 YY-MM-DD HH:mm:ss9.ajax错误处理10.文件大小换算11.下载文件12.图片、文件url对http的处理13.列表转树状14.数组去重15.数组对象去重16.数组按某一属性分组17.html实体字符转标签18.过滤掉html的图片和其他标签19.获取对象key并返回数组2
2021-05-08 15:34:26
1070
1
原创 egg.js使用sequelize+mysql创建数据表并带token验证信息请求数据
带token验证信息请求数据一.连接数据库1. 安装 egg-sequelize 插件和 mysql2 模块2. 配置egg-sequelize插件3. 连接Mysql数据库二.创建数据表1. 创建数据表2. 添加数据并请求数据不带token的请求结果带token后的请求结果jwt登录鉴权获取token配置和示例地址如果你没有安装Mysql数据库，先去安装再来学习一.连接数据库1. 安装 egg-sequelize 插件和 mysql2 模块npm install --save egg-seque
2021-04-30 11:44:56
1075
4
原创 egg.js登录获取token验证信息 (egg-jwt)
登录获取token一.安装和配置1.安装egg-jwt和egg-cors2.在egg项目中配置插件二.登录接口使用1.控制器controller里写登录接口2.路由router里写登录接口三.请求login接口一.安装和配置1.安装egg-jwt和egg-corscnpm i egg-jwt --save使用jwt需要配合cors来配置跨域请求否则会报错 message: “invalid csrf token”cnpm install egg-cors --save2.在egg项目
2021-04-29 16:57:46
2515
2
原创 Vue中用element-ui封装的el-tree和el-select实现下拉树状多选单选，灵活自定义模糊查询、单选多选，默认选中值。
这里写目录标题一.实现效果1.多选样式2.单选样式二.组件代码三.引入方法一.实现效果1.多选样式2.单选样式二.组件代码文件路径：pages/publicComp/selectTree<template> <div> <el-popover popper-class="selectTree" v-clickoutside="replyOutside" placement="bottom-start"
2021-04-28 16:45:42
4703
31
原创 Vue启动报错This is probably not a problem with npm. There is likely additional logging output above.
出现原因：Vue项目中node_modules包里缺少相关插件和依赖，当拉取别人的项目时不能直接运行。第1步： 删除项目中的 node_modules 文件夹和 package-lock.json 文件**第2步：强制清除缓存 （有npm淘宝镜像的使用cnpm）npm cache clean --force **第3步： 安装包（有npm淘宝镜像的使用cnpm）npm install推荐使用cnpm淘宝镜像安装（速度快，解决包的其他兼容性问题）安装完成后再运行项目,如果还有这个报错
2021-04-28 14:55:53
831
1
原创 简单快速搞懂Node.js是什么？
Node.js基础介绍一.简介二.node.js的3个特点(1) 单线程(2) 非阻塞I/O(3) 事件驱动（eventLoop）一.简介官方介绍：Node.js 是基于 Chrome 的 V8 JavaScript 引擎的 JavaScript 运行。Node.js采用事件驱动、非堵塞 I/O 模型，使其轻量化和高效。简单一句话：node.js是JavaScript运行在服务端的一个环境，它将前端语言的编程思想转移到了服务端。用js也能写服务端代码搭建后台了。二.node.js的3个特点(
2021-04-27 15:30:48
601
1
原创 Vue项目打开页面的速度提升优化
Vue项目打开页面的速度提升优化项目过大时第一次加载的资源文件很多新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入项目过大时第一次加载的资源文件很多在vue配置文件里添加取消预加载文件的配置。module.export
2021-04-26 12:24:53
701
1
封装element-ui下拉树状多选单选.zip
2021-04-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人