- 博客(41)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 vue3配置基础模板及启用scss
1.打开VScode 左下角齿轮 点击配置用户代码片段 新建代码全局文件 输入vue3。二 . 安装sass sass-loader ,使你的项目支持scss。3.这样你在.vue的文件下输入 vue3 就可以自动出现一下配置了。在vite.config.ts中 配置如下。2.按照如下配置导入您的vscode。
2023-04-24 18:34:55
576
1
原创 css3 3d动画
在学习3d动画之前，我们要先了解一个概念，就是我们在网页上的所展示的内容，他是一个2d的平面，要想在2d空间内展示出3d的效果，仅凭x轴和y轴是无法做到的，因此我们需要在添加一个轴的方向，z轴，这条轴你可以看作是屏幕正对着我们的视线。一下还做了两个案例，一个是旋转木马，另一个是正方体盒面，你们可以先动手自己去做一下，尝试以自己的思想去把他给做出来，然后再对比我的，你可以把你的想法发出来，我们一起努力进步哦，前端道路深远且到长，让我们共同求进退。/* 隐藏背面旋转元素不可见 */
2022-10-29 21:03:34
534
原创 vuex的五大辅助函数使用技巧
vuex时vue的一个全局状态管理文件，又称全局数据共享，在这里定义的数据，我们在任何文件中都可以访问的到，为我们的项目带来极大的好处，以下是我定义在全局状态文件数据，所有示例均已这个为基础访问。一个两个还好，看不出什么问题，但如果属性或者数据过多时，我们还要一边一边的写重复的代码，降低工作效率，但辅助函数的出现，大大的节约了我们的开发效率。通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给。这样一来，我们便可以轻松的访问state中的数据 ：例如我们可以这样。
2022-10-17 14:44:26
1819
原创 防抖与节流运用（封装）
节流：在这里节流我并没有封装，有兴趣的小伙伴可以自行封装试试看，和防抖的函数相同（如若不想封装的请参考下方）如果我这样来写，一旦我轻轻的滚动页面，你就会发现请求了次数高达近200，要明白节流的作用就是减缓请求次数。注：这里的8次代表我一直在滚动界面，由于我间隔时间为1s,故只发送8次。如有issure还望指出,正在成长中…
2022-08-20 18:47:45
649
原创 VUE + EleMent Ui Form表单的二次封装
文件里边一共有三个文件，Form是一个封装好的组件，用的时候直接使用标签就好,checkfun.js是一个专门处理校验函数的文件，regexp.js则是存放校验规则的文件，你所有的规则都可以放在这里面。多条验证规则可以在checkfun.js里面书写，如有issue欢迎指出，若您在使用中有疑问，欢迎下方留言，我将会在看到消息后第一时间为你解答。注意因为是组件，所以这些东西一并放到Components下面，为了防止出错，你可以直接把我的整的文件一起拖拽进去。...
2022-07-19 15:31:01
1113
原创 React Ant form 自定义校验规则问题总结
官网给出的例子很简单label="用户名"rules={[{requiredtrue,message'请输入用户名',},]}>登录重值名称说明类型仅在type为array类型时有效，用于指定数组元素的校验规则rule）
2022-07-18 19:48:33
2259
原创 js中判断是否对象的方法
目前据我所致的方法共有三种1. typeoflet obj ={a:1,b=2,c:3}console.log(typeof(obj)) //返回'object'从判断结果上来看，似乎并没有太大的问题，但如果你把对象改为数组，他返回的也会是同样的结果，因此不推荐这种写法,对于数组、函数、对象来说，其关系错综复杂，使用 typeof 都会统一返回 “object” 字符串,null也会返回’object’对NaN返回是’number’感兴趣的小伙伴可以自己动手实现一下2. instance
2022-05-17 09:20:49
2816
原创 常用正则表达式
一、校验数字的表达式<!--n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$ 零和非零开头的数字：^(0|[1-9][0-9]*)$ 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$ 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$ 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$ 有两位小数的正实数：.
2022-04-07 14:07:42
160
2
原创 一行 CSS 代码实现整个网站网页变黑白灰的效果
背景在全国哀悼日（吊念地震、疫情等），如果你也是站长，想做点什么，那么可以把网站编程黑白以示哀悼。下面分享一行代码实现整个网站网页编程黑白灰色的效果，主要是通过修改 CSS 的方式实现的（如果想要全站去彩色、最好放到基础公共的css文件中全局引用）实现网站黑白灰效果的代码以下代码其实合并在一行就可以，所以标题的一行代码并没有什么问题。但是下面代码分成多行，为了方便大家阅读和理解<style> html { -webkit-filter: grayscale(
2022-04-07 13:44:03
5701
原创 vue页面刷新
vue页面刷新首先我们都知道vue属于单页面应用，默认境况下是不会触发刷新页面操作的，所以这个时候就需要我们通过事件来触发reload()来达到刷新操作接下来我就为大家介绍三种刷新页面的方法1.wiindow.location.reload([bForceGet])该方法强迫浏览器刷新当前页面bForceGet 可选参数，默认为false,从客户端缓存里取当前true,则以get方式，从服务器端获取最新的页面，相当于页面f5刷新wiindow.location.replace(URL)
2022-03-24 18:19:04
16183
3
原创 pdf文件预览
1.为了实现手机端pdf文件预览，花费了我整整一天，不，准确的说是一天多，不过现在回头想想，其实也没有那么的难，可能也是自己当初没有接触过吧，要怪只能怪自己还是一直小菜鸟，没啥见识，为自己的学习之路留下一片痕迹，做下总结：2.pdf包下载这个包是我之前下好的，当然你也可以到官方中去下载，都是可以的 官方链接地址3.下载好之后直接将包放进我们的项目中来，在此之前你要搞清楚pdf.js它主要原理是在一个页面中嵌套另一个页面，如果你使用是vue框架可以直接将他怼到public文件夹下，项目目录结构大致为下4
2022-02-23 23:47:04
2132
原创 vue点击导航 页面自动滚动到特定位置
vue点击导航 页面自动滚动到特定位置效果预览：1.npm i element-ui -S下载安装element组件库，导航我们使用element组件库中的样式，type="primary"刚好作为我们导航激活后的样式，省去了我们写样式的时间2.到 main.js 文件中全局引入element组件import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(Element
2022-02-10 23:27:30
3562
4
原创 vue中引入网络模块axios
在这里我呢用分包的方式导入，要不然都把东西写在main.js文件中，导致会很多，很杂，不好找首先引入axios包，有好多种方法，大家可以到axios的官方网站中去查看，在这里我们利用npm来下载我们要使用的包像这样，我们利用命令直接来生成我们所需要的包如图所示即为下载成功然后我们在src文件下创建一个untils我们要使用到的这个工具包然后在这里创建一个名为index.js的文件，里边内容为import Vue from 'vue'import axios fr
2022-01-07 22:50:51
1210
原创 css元素溢出省略号隐藏和鼠标移入显示
纯css代码，大致思路，给父元素定宽，元素溢出后隐藏，并且不换行，代码如下：.container{ width: 100px; border: 1px solid skyblue; box-shadow: 2px 2px 5px black; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; }然后当鼠标移入到子元素后显示该隐藏的元素内容.containerChilder{
2022-01-06 23:44:07
1669
原创 探索Vue中的$refs
探索Vue中的￥refs1.在页面中获取含有ref属性的Dom元素，粗暴记忆：如果你想在vue中进行dom操作，就行ref属性，然后通过$ref来获取例如：<template> <div> <div @click="change" id="demo"> 我是案例 </div> </div> <script> export default{
2021-12-18 12:07:03
336
原创 vue中的兄弟传参EventBus
vue中的兄弟传参EventBuseventbus事件车使用于两个组件之间的通信，方法是是vue的main.js中创建一个vue实例Vue.prototype.EventBus = new Vue()组件A <button @click="EventBus.$emit('change','我是来自组件A')">传参按钮</button>这里的change是个函数，后面的要是传递的参数组件B mounted () { this.EventBus.$on('ch
2021-12-17 21:08:40
514
原创 vue中的组件传参
传参1.vue的父子传参父传递参数<Son name='xiaoma' :age="18" />子组件<script>export default { props: ['name', 'age'], // 或者 规定类型写法 props: { name: {type: String}, age:{type: Number} }}</script>2.vue的子父传参子组件<button v-on:click="$emit('show'
2021-12-14 01:12:29
1082
原创 web前端登录密码保存业务
web前端登录密码保存业务一.首先要想实现密码保存业务这个需求，首先要明白localstorage,sessionStorage,以及cookie三者之间的区别，为什么要明白这三者之间的联系呢，是应为我们要将密码保存在这里面，以实现我们为您在进行网页登录时或者刷新的时候，不用输入再次密码便可以直接登录进来（1）localStorage储存空间很大，可以达到5M；存储时间长，不去手动清除localStorage值会一直在，可以自己根据存储时间手动设定保留时间① 设置localStorageif(!wi
2021-11-30 14:31:08
3674
原创 回调地狱与promise
// 回调函数 let p = function (fn) { //fn是参数，在这里代表的是一个函数 setTimeout(() => { //setTimeout是一段耗时代码，这一段代码回在异步执行，从而来模仿回调函数的使用，切记，回调函数的使用地方是想要 //获取一些异步执行后的结果 fn("喝奶茶"); }, 500); };p((data)=>{ //data为异步调用函数后返回来的结果 console.lo.
2021-11-22 23:30:58
191
原创 sql高级查询语法
查询时进行计算：select 2+3+4+5;查询所有员工的姓名及工资 ：select ename,salary*12 from emp;查询结果排序：查询出所有部们，结果按照编号升序排列：select *from dept order by did asc;查询出所有部们，结果按照工资降序排列：select *from dept order by salary desc;模糊条件：条件查询：查询出姓名中含有字母a的员工有哪些：select *from emp where ename like.
2021-11-10 01:08:04
118
原创 canvas动画弹幕功能的实现
<div class="container" style="position: relative;"> <video id="audio" src="./assets/let_it_go.mp4" poster="./assets/logo.jpg" controls></video> <!-- <button id="btn">点我输出音频播放属性</button> --> <c.
2021-11-08 19:09:28
338
原创 如何在vue项目中搭配使用swiper
如何在vue项目中搭配使用swiper1:命令行安装swiper切记：安装命令时一定要在vue启动下的目录下进行安装，它会自动安装到一个node_modules模块里安装命令：npm install vue-awesome-swiper --save2：在vue/src/untls 进行以下配置import Vue from ‘vue’import VueAwesomeSwiper from ‘vue-awesome-swiper’import ‘swiper/css/swiper.css’
2021-10-29 21:06:15
1297
原创 关于DOM对象
一.DOM基本理论感念DOM全称：Document Object Model是一种专门操作网页内容的一套对象和函数的总称干什么用：只要想操作网页中的内容时，就用DOM二.HTML特征查找的4个函数按id名查找一个元素var 一个元素对象 = document.getElementById(“id名”)意为在整个页面中通过id名查找元素①如果找到符合要求的元素，则指返回一个对象元素②如果没有找到，则返回null按标签名查找多个元素var 类数组对象=任意父元素id.getElement
2021-10-11 23:59:10
96
原创 数组遍历的方法
for…in…这种方法虽可以遍历数组,但不推荐,他是遍历对象的独有方式 var teachers = [ { name: "张三", score: 100 }, { name: "李四", score: 78 }, { name: "王五", score: 88 }, { name: "赵柳", score: 90 }, { name: "胖虎", score: 88 }, ] for(var i in t.
2021-10-08 20:53:04
99
原创 关于闭包你了解多少
首先要明白闭包的存在是干什么用的,他就是用来解决给一个函数定义一个专属的且可以复用的变量,只有函数自己可以用,别人不可以用时,就用闭包!闭包三步走用外层函数包裹要保护的变量和使用变量的内层函数在外层函数内部，返回内层函数对象。调用外层函数，用变量接住返回的内层函数对象。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv
2021-09-29 17:10:22
90
原创 正则元字符
正则表达式是一个对字符串进行逻辑验证的公示, 官方提供了很多元字符 来代表一些模糊的含义!正则含义\d{8}8个连续的数字[a-z]{2,8}a-z之间的任意字符，数量在2到8个1[3-9]\d{9}手机号的基础表达式[\u4e00-\u9fa5]\u代表Unicode编码字典，每个中文在计算机中，都是一个属来代表，因为计算机底层是2进制，只识别数字[\u4e00-\u9fa5]中文在计算机中的编码范围::正则表达式有两种声明
2021-09-28 19:07:52
160
原创 过渡,动画效果,美化界面
transition 在英文中是过渡的意思，过渡可以为一个元素在不同状态之间切换不同的过渡效果。它由四个部分构成，分别是：过渡属性的名称，过渡需要的时间，过渡的方式和过渡的延迟时间。1.过渡属性的名称transition-property 过渡样式过渡一定是有变化都，在 css 中变化都是样式，比如我们需要过渡一个颜色，那么你要过渡的属性名称就是background-color当过渡多个样式的时候可以写 all2.过渡需要的时间transition-duration如果让过渡的感觉柔和一下，那
2021-09-15 20:59:55
163
原创 弹性布局经验总结
给父元素加:display:flex; 使子元素横向排列,不用在为每一个子元素添加浮动了,父元素也不需要在清除浮动2,高度依然会被子元素撑开1…弹性布局的基本概念使用 flex 布局的元素（父元素），称为"容器"它的所有“子元素”自动成为容器成员，称为 “项目”它们各自有控制布局的属性，必须是容器包裹着项目<!DOCTYPE html><html lang="en"><head> <title>Document</title&g
2021-09-15 20:09:41
351
原创 css选择器
1.基础选择器（1）通用选择器*号，选择 html 文件内所有的元素 * {样式声明}最常用的用法是*{margin:0;padding:0} 清除浏览器的内外边距。但它的缺陷是性能太低，（2）元素选择器（标签选择器）通过标签的名字来选择 html 元素，权重值为 1，比如：div {样式声明}（3）id 选择器给标签的前半部分增加一个属性 id 这个属性可以指定一个唯一的不重复的值，权重值 100例如:#abc {样式声明}（4）类选择器【重要】类选择器先要使用标签的class属
2021-09-08 19:43:06
107
原创 关于css的超简概述
所谓css层叠样式表，它是专门用于修饰页面样式的，例如:可以更改内容字体，颜色，大小以及间距或是添加动画等等css的适用语法规范：（1）内联样式也可以内样式，通常直接写在标签里面，通过style属性来对元素进行渲染如：但他的缺点非常明显：太乱，不利于修改，复用性极差（2）内部样式:在网页的头部<head>标签中增加一对<style></style>标签，在<style>标签记中定义该网页的所有样式。特点：只能在当前页面使用, 优先级低于内联样式(.
2021-09-08 19:11:24
91
原创 Ajax,前后台交互数据登陆项目
这里写目录标题准备工作搭建文件路径创建连接池创建登陆路由创建服务器搭建前台准备工作要先创建一个数据库，#创建一个-- mydb数据库 SET NAMES UTF8; DROP DATABASE IF EXISTS mydb; CREATE DATABASE mydb CHARSET = UTF8; #进入 mydb 数据库use mydb;#创建一张用户表userinfo#u_member会员#电话号码不能重复create table userinfo( u_id int
2021-09-06 21:03:18
589
原创 Mysql主键约束与外键约束
主键约束：primary key声明了主键约束的列上不允许插入重复的值，一个表中只能有一个主键约束，通常加在编号列，会加快数据的查找速度，并且编号会按照从大到小的顺序排列注 ： 主键约束的列禁止插入null外键约束：声明了外键约束的列，插入的值必须在另一个表中出现过才行；外键列要和对应的主键列类型要保持一致目的就是为了让两个表之间产生关联foreign key(外键列) references 另一个表 （主键列）auto_increment 自动增长，如果设置了自增列，在插入数据的时候，只
2021-09-01 23:13:26
2720
原创 JS函数的应用
1.函数Number()/parseInt()/parseFloat()/alert()/prompt()…这些统称为函数函数分为系统函数和自定义函数函数：是一个功能体，提供若干个数据，返回处理结果，用于封装要重复执行的代码(1)创建普通函数function 函数名称(){函数体 —— 封装的要重复执行的代码}函数名称() //执行函数体中封装的代码，调用函数只是创建不会执行函数体中的代码，要想运用函数，必须调用才可以小试一下：创建函数getSum，在函数体中封装计算1~100
2021-08-23 21:46:49
172
原创 JS基本循环用法大全
一般循环主要有两部分组成，也就是常说的两要素循环条件： 控制循环是否往后执行循环体： 要重复执行的相同代码或者相似的代码1.whle循环while(循环条件){循环体}break在循环中使用，用于跳出循环，结束循环的执行简单练一下：使用死循环的方式产生11-20之间所有的整数，计算11-20所有整数的乘积...
2021-08-21 13:16:06
306
原创 关于JS的循环的一些练习
使用死循环的方式产生11-20之间所有整数，并计算11~20之间所有的整数乘积var a=11;var cj=1;while(true){ cj*=a; //用变量cj来记录每一次循环数过后的乘积和 if(a==20){ break; } //当循环到第二十次时跳出循环 a++;}console.log(cj);//打印11-20所有整数乘积打印出1~100之间所有的整数，不包含能被7整除的数字。遇到能被7整除的数字跳过。for(var i=1;i<=100;i.
2021-08-21 12:16:52
262
原创 JS中的一些条件判断语句
1.if语句满30减20用程序表示var a=30;if(a>=30){console.log(a-20);}if(条件表达式){语句块}如果语句块之间只有一行代码，大括号可以省略2.if-else语句满100减20否则打九折var a=90;if(a>=100){ console.log(a-20);}else{ console.log(a*0.9);}if(条件表达式){语句块1}else{语句块2}if-else嵌套打印成绩：100
2021-08-18 20:56:47
4194
原创 JS中的比较运算符与短路逻辑
一.比较运算符(> 大于 <小于 >=大于等于 <=小于等于 ==等于 !=不等于 ===全等于 !==不全等于)二.逻辑运算符&& 逻辑与，关联的两个条件都是true，结果是true否则是false|| 逻辑或，关联的两个条件有一个是true,结果是true,否则是false！ 逻辑非，取反三.短路逻辑&&：当地一个条件为false时就不在执行第二个条件var a =3,b=5;console.log(a+b
2021-08-18 19:50:19
148
原创 JS中的一些基本理论知识
一.数据类型分为原始数据类型和引用类型原始数据类型又分为数值型，字符串型，布尔型，未定义型，空型数值型例如：1 2 3 4 5 6var a =3;console.log(a,typeof(a));//运行之后你会在浏览器的控制台下看到他是一个'number'(数值型)的类型.字符串型被引号包含起来的数据就是字符串型，不区分单引号与双引号例如：‘abc’var a ='abc';console.log(a,typeof(a));//此方法与上边查看相同，你会看到这是一个'stri
2021-08-17 23:10:50
80
原创 关于mysql的一些常用知识
1.SQL命令(1)修改数据update user set phone=’1811111111’, …. where uid=’1’;(2)删除数据delete from user where uid=’2’;2.计算机如何存储字符(1)如何存储英文字符ASCII 对所有的英文字母及其符号进行了编码，总共有128个Latin-1 对欧洲字符进行了编码，总共有256个，兼容ASCII(2)如何存储中文字符GB2312 对6千多常用的汉字进行了编码，兼容ASCIIGBK
2021-08-16 21:03:35
70
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人