自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(60)
  • 资源 (19)
  • 收藏
  • 关注

原创 实现elementui-tree组件鼠标滑过显示标签信息

项目中产品提了一个这样的需求(鼠标悬浮标签之上展示标签信息),老大一直问能不能实现?他不确定的点是在他写的位置不对,还有取的定位值不对,因为如果是说单纯从树节点自定义滑入滑出显示定位标签的话当列表内容过多出现滚动条的时候会导致标签内容被遮住!那这个时候我们就可以考虑除了子元素相对定位之外还有什么方法可以获取到当前位置进行内容跟随显示,那就是我们的鼠标位置信息。可以通过获取鼠标位置信息,设置标签信息模块在外层,通过获取鼠标距离X轴Y轴的位置进行固定定位!

2023-05-30 17:54:43 1427

原创 树形结构数据处理封装函数(二)

【代码】树形结构数据处理封装函数(二)

2023-02-23 11:17:19 190

原创 树形结构数据处理封装函数(一)

【代码】树形结构数据处理封装函数(一)

2023-02-22 14:58:36 207

原创 基于element的地址三级联动

基于element的级联选择器的地址三级联动,真的简单粗暴,直接附上代码地址json文件,请点击这里实现代码,重点还是在json文件的数据结构,处理好基本上就ok<template> <div class="block"> <span class="demonstration">默认 click 触发子菜单</span> <el-cascader v-model="value" :options="optio

2023-02-22 14:52:34 314

原创 常用的工具类函数(一)

常用的工具类函数

2022-09-06 11:12:26 222

原创 微前端——qiankun(乾坤)实例

微前端qiankun+vue实例

2022-08-31 09:09:50 5669

原创 ES6新特性

const与let变量使用var带来的麻烦运行getClothing后输出的是undefined,这是因为执行function函数之前,所有变量都会被提升,提升到函数作用域顶部let与const声明的变量解决了这种问题,因为他们是块级作用域, 在代码块(用{}表示)中使用let或const声明变量, 该变量会陷入暂时性死区直到该变量的声明被处理.运行getClothing(false)后输出的是ReferenceError: freezing is not defined,因为 freezing

2022-06-16 15:57:48 185

原创 uniapp开发注意事项(二)

一个文档中的注意事项,往往是发生问题的原因,这里整合了我认为容易发生的错误(为了方便我搜索问题)1.static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。2.css、less/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。3.template内引入静态资源,如image、video等标签的src属性时,可以使用相对路径或者绝对路径。4.js文件不支持使用/开头的方式引入。5.css文件或style

2022-06-16 15:32:28 3238

原创 数组排序的N种方法

冒泡排序

2021-06-11 12:33:31 363

原创 数组去重的N种方案

1、indexOf/includes2、双循环3、先排序,再相邻比较4、对象键值对5、Se't

2021-06-08 17:40:47 186

转载 写好javascript条件的5条守则

原文地址:5 Tips to Write Better Conditionals in JavaScript译文出自:阿里云翻译小组译文链接:https://github.com/dawn-teams/translate/blob/master/articles/5-Tips-to-Write-Better-Conditionals-in-JavaScript.md译者:眠云(杨涛)校对者:也树,Mcskiller在用 JavaScript 工作时,我们经常和条件语句打交道,这里有5条让

2020-09-30 17:34:03 96

原创 vue引入本地字体

首先把字体下载到本地然后在css文件里新建css文件,为字体重命名最后在main.js引入即可全局使用页面中使用,例如<template> <div class="expant"></div></template><style>.expant{ font-size:rr}</style>...

2020-09-30 17:16:55 1386 3

原创 vue+element动态生成可折叠表格

最近看到很多人问怎么样做多层可折叠表格,其实vue+element是很简单实现的,就是数据结构的问题,使用element table组件的树形数据与懒加载,实现代码如下(主要是数据的处理,跟后端同事协调好返回的数据结构,或者前端做数据处理都是可以的)<template><div> <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key=.

2020-09-30 17:07:19 2553 1

原创 对 el-table 进行二次封装

<template> <div class="swdTable"> <div class="table"> <el-table ref="multipleTable" :data="tableData1" tooltip-effect="dark" style="width: 100%" :header-cell-style="{ 'back.

2020-09-14 09:35:53 1343

原创 再来一篇,在js中引入vditor的用法

简单粗暴,上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- ⚠️生产环境请指定版本号,如 https://cdn.jsdelivr.net/npm/vditor@x.x.x/dist... --> <link rel="stylesheet" hre

2020-09-11 17:14:30 1115 5

原创 Vue中引入vditor插件的正确用法

很多人看vditor的官网可能第一时间就想到在main.js里面引入,但是官网的例子又是一个实例化的过程,我们的spa不支持多个实例化,所以其实他的核心是new的过程是个实例化的过程,需要要真实的dom给他承载。向echars这些我们平时的引入使用是一样的附上代码,可直接拿到项目里面运行(必须引入插件vditor,npm install vditor --save)<template> <div class="order"> <h5>富文

2020-09-11 16:03:08 3401 1

转载 面试必问——react与vue的区别

原文地址:https://juejin.im/post/5ef55acde51d4534bf67a878 1.Vue和React源码区别1.1 Vue源码 1.1.1 挂载初始化$mounted会挂载组件,不存在 render 函数时需要编译(compile);...

2020-09-11 10:43:28 1267

原创 uniapp-语音识别

首先先配置好权限注意:不能同时支持讯飞语音识别和百度语音识别,只可二选一百度语音识别在manifest.json文件“App模块配置”项的“Speech(语音输入,只能选一个)”下,勾选“百度语音识别”项,并输入从百度开放平台申请的参数:appid: 百度语音开放平台申请的AppID apikey: 百度语音开放平台申请的API Key secretkey: 百度语音开放平台申请的Secret Key请到百度语音开放平台申请:https://console.bce..

2020-09-08 15:05:33 7179 6

原创 vue组件通信的几种方法

vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法组件通信的几种方式1、父子组件通信2、兄弟组件通信3、跨多层级组件通信4、任意组件(vuex)一、父子组件1、父组件通过props传递数据给子组件,子组件通过$emit发送事件传递数据给父组件(单向数据流)2、还可以通过v-model语法糖(双向数据绑定)3、$parent,$children对象来访问组件实例中的方法和数据4、$listeners,$sync(2

2020-08-12 15:47:18 589

原创 uniapp热更新(wgt)

uniapp分两种更新机制:一、整包更新(这种方式比较繁琐,即每次更新之后就要打云包,更新整包,用户体验也不好)二、资源包更新,即wgt(因第一种方法想到利用资源更新,用户体验大大提升,用户更新之后无需跳转到应用市场或者浏览器去重新更包,俗一点就是无感更新)wgt热更新的注意点一、必须要获取appid二、配置需要的版本名称和版本号三、判断平台,区分安卓ios获取相对应的下载连接(第一次整包需要,之后全部是wgt资源包的下载地址)四、在本地打包时和热更新时,App版本和wgt.

2020-08-12 11:06:52 22074 5

原创 动画效果-飞翔的小鸟

<DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .bird{position:absolute;left:0;width:200px} </style> <script> /* 匀速运动 * 速度保持不变的运动 飞翔小鸟: * 不断改变l.

2020-07-22 14:30:43 282

原创 四.css sprites 的原理

1.将多张背景图片等有规则的合并成一张背景图,即多张图片合为一张整图,然后用background-position来实现背景图片定位技术①,通过图片整合来减少对服务器的请求次数,从而减少页面的加载速度②,通过整合图片来减少图片的体积2.滑动门技术...

2020-07-22 14:12:21 122

原创 三.overflow 内容溢出容器时的处理方式

三.overflow 内容溢出容器时的处理方式visible可见的 hidden隐藏 scroll出现滚动条 auto内容溢出才出现滚动条设置某个方向:overflow-x 水平方向 overflow-y垂直方向当某一个方向的值不为visible,另一个方向的值会自动设置为auto备注:隐藏元素的两种方式1.display:none;隐藏元素,不占位置2.visibility:hidden;隐藏元素,占位置overflow的应用场景:1.高度塌陷,子元素都浮动了,父元素会没有

2020-07-22 14:12:05 773

原创 二. 定位 position

二. 定位 position1.static 静态定位,默认定位不能配合left right bottom top使用。2.相对定位relative特点:①.相对于自己本身所在的位置进行移动定位②.配合left,right,top ,bottom使用,相对于自己的某条边往元素中心方向移动为正值③相对定位的元素不脱离标准流(灵魂定位)3.absolute绝对定位特点:①绝对定位的元素相对于html或者最近的有定位(除了static)的父元素进行定位②通过left,right,t

2020-07-22 14:11:29 143

原创 元素类型及转换

一.元素类型1.块级元素:div、h1-h6、p、列表、form特点:①占父元素宽度的一整行,若是设置死宽度,那多余的位置会用margin填充。②可以设置宽高③块级元素可以包含部分块级元素及所有的行内元素应用:若想子元素(块级元素)在父元素水平居中,对子元素设置margin:0 auto。2.行内元素:span/a/加粗/倾斜/input/select/textarea/label特点:①宽高由内容决定,不能设置宽高②一行显示多个③行内元素遵循盒模型,不能设置上下的pad

2020-07-22 14:10:48 946

原创 移动端布局

一.页面结构布局1.百分比布局。2.弹性盒布局。3.分栏布局。4.响应式布局。移动端布局为多种布局结合使用,达到完美适配效果二.单位1.px2.百分比3.em 相对单位,基于自身字体大小font-size来计算,所以不同的元素1em代表的具体大小可能不同(部分浏览器的默认字体大小为16px)4.vw viewport width,视窗宽度,1vw等于视窗宽度的1%5.vh viewport height,视窗高度,1vh等于视窗高度的1%注意:使用vw/vh,需设置met

2020-07-22 14:09:52 169

原创 <HREF>元素/标签

值描述URL超链接的 URL。可能的值:·绝对 URL - 指向另一个站点(比如 href="http://www.example.com/index.htm")·相对 URL - 指向站点内的某个文件(href="index.htm")·锚 URL - 指向页面中的锚(href="#top")在页面中点击a标签后

2020-07-22 14:07:20 495

原创 接上一篇图片转base64->图片上传

//图片处理的js文件export function uploadImgToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = function () { // 图片转base64完成后返回reader对象 r.

2020-07-22 13:55:46 174

原创 图片转Base64

export function uploadImgToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = function () { // 图片转base64完成后返回reader对象 resolve(reade.

2020-07-22 13:51:37 187

原创 自适应布局与响应式布局

自适应布局不同大小设备呈现同样的页面效果,只是文字、图片等的大小不一样,但是相对位置一样。例如:百分比布局、弹性盒布局flex、分栏布局。百分比布局所有的宽高都用百分比来实现Css3分栏布局css3多列布局可以自动将内容按指定的列数排列,这种特性实现的效果和报纸、杂志类排版非常相似。分栏布局属性columns:列宽 列数column-width 栏目最小宽度column-count 栏目最大列数column-gap 栏目间距,不能为负column-rule 栏

2020-06-19 16:11:26 484

原创 三大循环语句

一.while循环1.格式:while(条件){条件成立执行这样的代码这里的代码执行完毕,继续判断条件是否成立避免死循环:让条件不成立变量更新:往条件不成立的方向改变}2.循环语句的组成部分:*变量初始化*条件判断*变量更新3.重点:循环语句的整个执行过程二.do _ while循环1.格式:do{先执行一次这里的代码(不管条件是否成立)再进行条件判断,如果成立再执行这里的代码}while(条件)三.for循环1.格式:for(变量初始化;

2020-06-18 16:39:07 807

原创 说一说浏览器兼容

一、浏览器兼容Internet Explorer (IE)Safari (ios) ( Safari)Mozilla Firfox (Firefox 火狐)Google Chrome (Google)Opera (Opera)最早:Netscape Navigator网景全页航者(1994-2008 “NN”)二、五大浏览器内核代表作品Trident:IE Maxthan, 腾讯,360,Theworld世界之窗;IE (MSHTML) 捆绑在windows中,只应用

2020-06-18 13:39:03 144

原创 node图片验证码

新建modules文件夹,在文件夹下新建captcha.js下载相关插件npm i svg-captchavar svgCaptcha = require("svg-captcha");exports.getCode = (req,res)=>{ var codeConfing = { size:4, ignoreChars:'0o1il', noise:2, height:44 } va

2020-06-17 15:57:25 453

原创 node+mysql+express图片上传

最近闲来无聊,自己用node写了个后台管理系统,对于图片上传的问题我这边进行分享一下,有不对的地方,请指正关于一些准备工作我就不做详细说明了,安装环境我相信大家都会,下面我们进入正题我这里使用的是multer实现文件的上传,首先下载multer模块然后在项目里引入我们做文件上传,肯定是要先设置文件保存的路径这里可以看到,图片上传成功后会保存在public下的images文件夹下,我对文件进行了改名,所以文件保存到指定路径的时候会加上当前时间戳multer分单文件上传和多文

2020-06-17 14:10:20 1526 1

原创 基于element-ui的input二次封装,实现表单单个认证

由于项目有很多表单,很多都是一个,所以想起了封装input组件好了实现思路:因为本身表单就有验证,所以结合了表单的部分认证去实现,可以自己进行自定义模板操作代码如下:大家视情况,有些是不用点击事件触发的,按钮可以视情况而定props主要接收两个参数:input框类型,还有一个是验证的类型,因为我这里有textarea验证,限制长度,验证内容自定义,根据实际需求通过watch监听type的变化改变ruleForm下面的变量这个要注意,trigger如果是相对于多

2020-06-16 18:05:34 2268

原创 uniapp请求封装

在main.js直接引入import http from './static/js/http.js'Vue.prototype.$http=http;组件中使用

2020-06-16 10:58:35 219

原创 uniapp开发注意事项

第一次用uniapp开发真的????了很多坑,每个项目都是在踩坑中不断的走过,不断得查资料解决中度过的,现对自己踩过的坑做一个总结,因为只涉及到app端,所以总结的可能不是都适用1、在pages.json里的titleNView或页面里写的plus api中涉及的单位只支持px,不支持rpx2、tenplate内引入静态资源,比如图片,视频的src属性时,可以使用相对路径或者绝对路径3、静态文件目录下打js文件不会被编译,如果里面有es6的代码,不经过编译转换直接运行的话,在手机上是会报错的

2020-06-16 10:46:41 1000

原创 github操作守则

之前写过一篇关于GitHub的配置,但是不够详细,今天来详细写一下github的整个流程操作步骤如下:一.下载git,安装地址:https://git-for-windows.github.io二.配置个人信息(名字与邮箱)1.单击鼠标右键,出现Git Bash Here2.配置个人信息*git config --global user.name "Your Name"...

2020-04-21 15:00:12 268

原创 对双向数据绑定的理解

应该很多人面试都会被问到这个问题,现在趋势面试已经趋向于底层原理的刨底了,因为vue谁都会,你用vue做了一个项目,真的不能代表你对vue就很熟悉了,随着vue3.0的出现,双向数据绑定使用ES6的Proxy 作为其观察者机制,取代之前使用的Object.defineProperty。这篇文章我们先来说说怎么利用Object.defineProperty()去实现双向数据绑定的?首先vue通过...

2020-04-17 13:29:01 526

原创 H5新特性有哪些?怎么理解语义化

H5新增了很多新的特性,这也成了我们面试的时候面试官喜欢问的一个问题,那我们可能在开发的过程中如果没有去关注过那也不是很清楚用到的是不是H5的新特性,下面我们就来讲一下H5十大新特性1、语义化标签,为我们提供了更好的页面结构,比如<header><section><nav><aside>,这些标签可以让我们更直观的知道你要表达的是什么,再更进...

2020-04-07 21:17:05 784

通用权限管理系统前端页面+html5+css3+javascript+vue+elementui

系统后端使用 Spring Boot框架开发,前端使用的是 Vue框架和 Element UI的组件,持久层框架使用 MyBatis,数据库使用 MySQL。 系统支持基于角色的用户权限分配功能。用户只有被分配的权限才能访问相应的资源。该系统通过账号、密码和登录验证来匹配用户的不同访问权限。使用一套代码实现多个系统的共享,并实现用户信息权限的隔离。如果需要添加新的功能,程序员只需维护权限表并设计一个权限系统即可。该系统支持动态配置权限和角色之间的关联信息,以及用户和角色之间的关系。只需在数据库中配置权限信息,系统就可以动态地读取角色和权限信息,并由管理员将二者关联起来。前端页面只需在该系统的基础上添加,并分配好权限即可。该系统使用动态路由,使得前端页面的添加变得更加容易。可用于毕设项目学习

2023-05-30

通用权限管理系统+springboot+mybatis plus+spring security+jwt+redis+mysql

通用权限管理系统可练手可毕设,如果项目中有权限开发要求可直接拿来基础开发。 系统设计包括前端Vue框架和后端SpringBoot框架的搭建,以及数据库和权限控制模块的设计。前端使用Vue框架进行页面开发,利用Vue Router实现路由管理和权限控制。后端使用SpringBoot框架进行业务逻辑开发,利用Spring Security实现权限控制。数据库采用MySQL进行数据存储,使用MyBatis进行数据访问。 权限控制模块设计包括用户、角色和权限三个主要模块。用户模块用于管理用户信息,角色模块用于管理角色信息,权限模块用于管理权限信息。实现对用户访问资源的控制,可以通过将权限与角色进行关联。 系统实现主要包括用户登录、权限验证、角色管理、权限管理、资源管理等功能。当用户尝试登录时,系统会通过核实其用户名和密码来确认其身份。权限验证时,根据用户的角色和权限信息,系统评估用户是否具备访问该资源的权利。角色管理、权限管理和资源管理等功能,通过对应的模块实现。 总的来说,基于SpringBoot+Vue的通用权限控制系统设计与实现,可以提供灵活、可扩展、易维护的权限控制功能,适用于各种应用

2023-05-30

css3-3d旋转-色子

这是一个利用css3技术实现的3d旋转,很多动画效果都可以通过css3去操作,下载下来即可使用,照片换成自己的就可以,还有布局你也可以随意更改,动画的频次也可以根据需求进行更改

2020-09-30

全国地址三级联动json

地址三级联动json文件,设置基于饿了么的级联选择器整合的数据结构,如果你是不用饿了么的ui框架,把chuildren字段改成相对应的citylist,arealist(名字自定义)即可

2020-09-11

onlineChat.zip

实现一对一,一对多聊天功能,

2019-07-01

web开发工具

第一步安装:sublime软件 双击:Sublime Text Build 3083 x64 Setup.exe 第二步:打开文件路径: C:\Users\你的用户名\AppData\Roaming\Sublime Text 3 第三步:把 "插件环境.zip" 解压到 上面的路径中。 第四步: 打开sublime,enjoy it import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

2017-08-04

奥多比集成运行时

adobe air是网络与桌面应用结合开发的技术,可以运行所有基于air开发的网络程序,adobe Air就是一个平台,这个平台提供一些软件接口,想开发软件的人员用这些接口和其他的编程技术

2017-08-03

九宫格游戏

主要设置格子游戏,格子打乱,在两个相邻格子之间点击互换,当格子一一相对应即可,原理就是相当于拼图游戏,很简单的一个小游戏,不才请见谅

2017-08-01

mysql的安装与卸载

mysql数据库的安装与卸载

2017-07-29

校园一网通

主要针对学院学生开发一系列的生活系统,包括寻物启事,校园公告,校园活动和校园外卖等服务

2017-07-29

模拟数组中的内容交换(swap)

增加两个文本输入框,抬头可以用“要交换的单元格1”(以下用X来代替),“要交换的单元格2”(以下用Y来代替); 用户输入要交换的单元格的序号,点击按钮,两个单元格的颜色互换: 初始状态,所有的单元格的颜色为白色,除了单元格2的颜色是红色,单元格5的颜色为蓝色,单元格8的颜色为绿色,用户在X中输入2,在Y中输入5,然后点击按钮,那么单元5和单元格2的颜色互换。

2017-07-29

增加一个文本输入框,用户输入单元格的序号,点击按钮,该单元格背景变颜色

初始状态,所有的单元格的颜色为白色,用户在文本框中输入数字6,然后点击按钮,序号为6的单元格变成黄颜色,然后用户输入3,单元格6变回白色,单元格3变成黄色。

2017-07-29

模拟数组的顺序遍历

在按钮旁边有个文本框,每点击按钮后,在文本框中显示对应单元格的序号,比如,点击按钮后,应该单元格5变黄色,那么文本框应该显示5,在文本框旁边最好显示一个标题,比如“单元框为:”

2017-07-29

把数据结构中的数组视觉化

使用学习的表格技术画出一个表格(比如有一行六列个单元格),每个单元格按顺序编号,要能看到编号(从0开始,模拟数组)创建一个按钮,每次点击按钮的时候表格中的单元格(<td>)按编号顺序背景颜色都会变成另一种颜色,从编号为0的单元格开始。比如在起始状态,所有的单元格背景色都是白色,第一次点击按钮后单元格0的背景色变成黄色,再点击一次后单元格0变回白色,单元格1的变成黄色,如此往复。当到达最后一个单元N的时候,点击后,单元格N变成白色,单元格0变成黄色,产生循环的效果。

2017-07-29

单元格的背景颜色根据点击按钮发生变化

使用学习的表格技术画出一个表格(只有一个单元格),创建一个按钮,每次点击按钮的时候表格中的单元格(<td>)的背景颜色都会变成另一种颜色,比如一个单元格A的背景色是白色,那么,点击按钮后变成红色,再点击变成绿色,如此往复在几种颜色中循环变化(比如在红,兰,黄,绿四种颜色之中循环变化)。

2017-07-29

学生成绩管理系统需求文档

学生成绩管理系统给的需求分析文档

2017-07-29

学生成绩管理系统测试文档

学生成绩管理系统的测试文档

2017-07-29

模仿计算器简单操作

实现简单的计算操作

2017-07-28

百度二级导航

实现二级导航,鼠标移到导航栏出现下拉导航

2017-07-28

模仿京东商城首页

模仿京东商城首页

2017-07-28

学生成绩管理系统

主要是实现学生与老师之间的信息管理化

2017-07-28

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除