- 博客(48)
- 收藏
- 关注
RSS订阅原创 刷卡检测转码
const lock = ref(true) // 避免在转码这个过程中再次触发card_id.value.length > length.value。// 手动删除完毕时重置状态，此处判断为==1也可，为一表示在输入框为空时刷卡。console.log(‘触发clear’)let timeDown // 停止输入。
2023-05-17 13:51:30
265
原创 按周的日期下拉组件
/ let lastWeek = arr.value[arr.value.length - 1].value.substring(6, 7) // 上周是第几周。// let lastMonth = arr.value[arr.value.length - 1].date.substring(4, 6) // 上周一月份。// let lastYear = arr.value[arr.value.length - 1].date.substring(0, 4) // 上周一年份。......
2022-08-26 16:53:54
540
1
原创 文本换行省略号(单行换行省略以及多行换行省略)
单行：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;多行：display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; // 此行用于控制从多少行开始，溢出时用省略号替换overflow: hidden;
2022-01-24 15:12:13
689
原创 js中字符串方法集合
1.获取字符串长度 str.lengthstr.length语义：返回一个字符串的长度示例：const str = 'asdf'const length = str.length// 返回结果 length 4 2.字符串字母大小写转换 str.toLowerCase() str.toUpperCase()将字符串中的字母全部转换为小写str.toLowerCase()语义：将字符串中的字母全部转换为小写，并返回一个新的字符串；不改变原字符串示例：const str =
2021-12-22 15:25:36
1176
原创 js中数组方法集合
1.动态获取数组长度arr.length示例：let sequence = [1, 1, 2, 3, 5, 8, 13];for (let i = 0; i < sequence.length; i++) { console.log(sequence[i]);}最常用于for循环数组遍历2.数组转字符串arr.join() arr.toString()语法：join()中可以传入参数，表示用何种字符将其数组元素进行连接，可以是任意字符，也可以是空字符串‘’，返回一个字符串
2021-12-14 17:45:32
1266
原创 video标签和videojs配置（vue视频弹窗组件）
直接摆出一个视屏弹窗的vue组件代码实现效果：点击父组件中某个按钮后，打开视频弹窗，并且可以通过X按钮关闭优点：动态生成与销毁vedio标签，解决hls视频流数据一直在后台请求的问题，避免关闭弹框后，视频流数据传输仍在继续消耗资源。实现的方法：1.向外抛出了两个属性：visible和videoURL，visible用于控制弹窗组件的生成与销毁，控制核心是v-if；videoURL是用于接收外部点击后传入的视频地址2.由于只能在updated上添加vedio标签的原因，只能将vediojs代码写
2021-12-10 22:50:20
4243
原创 构造函数实例方法和原型方法构造方式上的区别
先上测试代码：<script> class Ceshi { constructor(){ // 1.constructor中，通过this.来添加方法 this.shili = function(){ console.log(this,'this.shili'); return this } // 2.constructor中，通过类名.prototype.方法名来添加方法 Ces
2021-12-07 15:52:00
184
原创 后台管理系统权限管理实现步骤
1.管理员给账户分配角色通过api接口的调用给用户添加不同的参数字段标识2.管理员给角色分配权限通过api接口的调用，将不同的权限参数绑定给相应的角色3.路由权限与权限有关的组件路由提取到一个新的js文件中，作为动态权限的路由文件4.菜单权限5.按钮权限...
2021-12-05 21:19:43
4566
原创 Vue.component、Vue.use和Vue.prototype.$xxx的区别；自定义组件批量注册
使用区别：Vue.component注册.vue文件，Vue.use注册.js文件Vue.use常用于各种配置文件中进行npm包引入组件的注册，Vue.component只能在main.js文件中进行公用组件注册Vue.prototype.$xxx用于向对象空间prototype注入所有vue实例公用的方法注册实质：Vue.componentimport component from ‘导入组件的路径’语法：Vue.component(el-name, component) //el-
2021-11-25 14:22:01
1092
1
原创 vue中render函数的作用及解析
在vue脚手架的main.js文件中，存在这样一段代码：意思是对vue实例的配置，其中render函数的作用是，将h创建的Node节点信息return返回给Vue.js底层处理文件中的beforeMount()生命周期钩子函数，让其将Node节点信息在界面中渲染出来render函数语法如下render: (h,context)=>{return h(‘el’,{‘css’},vnodeArr)}render函数带有两个参数，分别是h和context(1) h是一个createEleme
2021-11-21 19:21:02
7331
1
原创 vue路由传值
基本路由传参传递参数：方式一：this.$router.push('/path地址?参数一=参数值1&参数二=参数值2')方式二：this.$router.push({path:'',query:{参数一:参数值1,参数二:参数值2}})接收参数：this.$route.query.参数名示例：在做token失效退出的axios配置中，axios.interceptor.response.use((res)=>{return res},(error)=>{
2021-11-18 19:10:56
581
原创 递归分类处理树状数据
应用场景：在某些系统中，会存在数据的层级关系，以及会有将这些层级关系表现出来的需求(最常见的就是在管理系统中)当我们将数据通过请求拿出来时，数据是这样的数据的特点是:顶层的数据，pid=‘’，而依附于某个顶层数据(或者说某个父节点数据)的数据项，其pid=‘父节点数据的id’将数据转换为树状数据结构的原因为了匹配UI组件中的需求，此处以ElementUi为例,ElementUi组件中，树状样式结构处理如下： <el-tree :data="treeData" //存放树
2021-11-17 20:17:09
517
原创 vue自定义指令并实现批量注册
需要知道的知识：自定义指令中生命周期分为五个阶段，分别是bind, // DOM渲染前inserted, // DOM渲染后update, // DOM更新前componentUpdate, // DOM更新完成后unbind // 指令销毁1.新建一个文件夹directives,里面新建一个index.js文件2.index.js文件中如下配置示例一个img图片加载异常的自定义处理指令export default {imgError:{insert(dom,
2021-11-16 21:41:10
673
原创 路由钩子函数
全局路由钩子beforeEach 路由前置守卫beforeResolve 路由及组件加载完毕afterEach 路由后置守卫路由所对应组件钩子beforeRouterEnter进入路由所对应的组件之前，在beforeCreate前产生的，他不能使用实例化对象thisbeforeRouterUpdata路由更新之后，但是显示的组件还未更新，如果需要在此时获取到更新之后的数据，可以通过this.$nextTick来获取beforeRouteLeave离开前，切换页面离开前就会触发
2021-11-16 20:16:44
651
原创 前端解决跨域问题的方法
方法一：创建一个解决了浏览器同源策略的跨域浏览器副本前提：只有谷歌浏览器可以实现步骤：1.将谷歌浏览器的快捷方式复制一份2.在任意地方新建一个空文件夹3.在浏览器副本的属性目标最后加入如下代码–disable-web-security --user-data-dir=C:\Users\Lenovo\Desktop\跨域注意：=号后面的是你新建的空文件夹的路径该代码在目标的最后加入，在原本内容之外，并且该代码前面需要加入一个空格方法二：在vue.config.js文件中，加入如
2021-11-14 21:42:11
475
原创 mockjs生成随机数据，拦截Ajax请求
1.下载包mockjs 命令：npm i mockjs 或者 yarn add mockjs命令：npm i mockjs 或者 yarn add mockjs2.在api文件夹下新建文件mock.js3.mock.js文件中导入import Mock from 'mockjs'4.实例化一个mockMock.mock('http://geek.itheima.net/v1_0/channels', {//前面是要拦截替换的api地址，后面的data是模拟的数据，根据需求，可以在h
2021-11-14 21:24:19
757
原创 vue打包优化流程
1.配置vue.config.js// 覆盖默认的webpack配置module.exports = { publicPath: './', //设置以相对路径作为访问方式 devServer: { // 配置服务器参数 port: 3000, //设置默认端口号 open: true //设置自动打开页面 }}2.配置路由懒加载原来的形式：此种方式会在初始化时便将所有路由加载import login from '../views/login.vue'co
2021-11-12 15:05:55
979
原创 elementUi-form-rules参数匹配问题
案例代码：<el-form :model="editForm" status-icon :rules="rules" ref="addCate" label-width="150px" class="demo-ruleForm" > <div style="margin:
2021-11-10 10:51:55
761
原创 通过async+await了解同步与异步
案例代码：set(){ this.$refs.addCate.validate(async (valid) => { console.log('数据提交请求'); if (!valid){ return 'shibai'} await this.addCateList(this.ruleForm) await this.$refs.addCate.resetFields(); this.visible=
2021-11-09 00:46:36
3909
原创 $nextTick作用过程、使用场景及使用方法详解
使用场景在大部分事件的处理函数中，会对原本的数据进行修改，存在修改后的数据导致新DOM元素产生的情况应用场景：我们需要对此次新出现的DOM元素进行处理存在的问题：对新出现DOM元素的处理语句需要写在当前的事件处理函数中，但是由于DOM更新异步的问题，导致无法获取到新的DOM元素，以至于无法给它设置处理语句作用过程此处举例说明：<template> <div> <input ref="myInp" type="text" placeholder="这是
2021-10-29 22:04:56
839
1
原创 奇怪的作用域插槽
作用域插槽概念在父组件中依旧能够使用到子组件中定义的数据方法在子组件中如此定义：<slot name='er' :hello='note'>默认内容</slot>其中：name是给当前插槽定义的名字，目的是为了在具有多个插槽的情况下，在父组件中可以通过名字来准确锁定当前的template是写给哪一个插槽的hello是自定义的一个属性名，目的是将note以属性值挂载在插槽模块里note是我在data中定义的数据在父组件中如此接收：<template slo
2021-10-27 20:58:45
93
原创 vue基础阶段性思考一
vue基础小结在子组件中，当前数据的键值对和当前DOM元素绑定，对于每个DOM元素，this指向的直接就是当前DOM元素绑定的那一组键值对，而非指向的整个数据组。利用这一点，可以设置监听事件，将当前DOM元素绑定的键值对中某个具有识别性的数据传给父组件，让父组件可以在整个数据组中锁定那个需要进行操作的键值对。和之前绑定自定义属性的对比和之前学过的在创建标签时，给标签绑定和数据相关的自定义属性类似，只不过之前的是需要通过e.target来获取被操作的元素，进而来修改元素的属性，而vue是通过被监听的元素
2021-10-25 19:46:17
69
1
原创 有参数传递的情况下：vue事件绑定和原生js事件绑定执行时具有本质上的区别(以DOM元素删除操作为例)
原生js在原生js中，主要通过操作DOM元素来调整页面。以删除操作为例，以下是和删除操作有关的代码片段：如下为原生js绑定自定义属性的代码 data.forEach(function(item){arr.push(`<li class = "list-group-item" >${item.content} <a class="javascript:; badge" data-id=${item.id}>删除</a> <
2021-10-21 21:53:17
532
原创 堆栈传值问题
堆栈原型图栈：(简单数据类型)及(复杂数据类型地址)的存储仓库，代码从这里开始获取数据堆：复杂数据的存储仓库，将数据存在此处，数据存储的地址交给栈保存，用于索引到相应的数据案例：在案例中，定义了四个全局变量：var cvar num = 10var obj1 = {item:"unchanged"}var obj2 = {item:"unchanged"}定义了如下函数：var changStuff = function(a,b,c){a = a*10b.item ='chan
2021-10-18 22:18:12
114
原创 使用webpack时报如下错误：(function (exports, require, module, __filename, __dirname) { import path from ‘path
使用npm run build打包压缩代码时，出现如下报错：解决办法：将里面的包导入导出方式全部用ConmonJS的方式书写，即const path = require(‘path’), module.exports = {}让人容易迷惑的地方：import "./less/index.less";import "./css/index.css";明明不支持es6，但是在这里却又能够使用es6提供的导入方法原理：webpack包会在打包文件时，自动处理，使其能够适应es6语法，所以在
2021-10-17 21:39:19
1365
1
原创 随笔：前后端交互
在数据交互中，前端会发起ajax请求，请求方式如下示例：$.ajax({type:'post', // 请求方式类型url:'http://127.0.0.1:8080/user',// 该请求对应的api接口地址data:{name:'zs'}, //提交的数据success:function(res){ // 请求的回调函数console.log(res)}})后端api会对前端的请求产生如下响应：const express = require('express') //
2021-10-14 22:10:46
295
1
原创 jwt认证机制(token作用及原理解析)
jwt认证机制实际上就是通过token密钥对于用户信息的认定jwt工作原理(token运作流程)从上图中可以看出，jwt的工作原理是：(以下号表示注释标号)(1)客户端通过post请求(1)将用户名密码提交给服务器，服务器验证通过之后，将用户的重要信息从信息对象中剔除并加密生成一个token字符串(2)服务器响应客户端的post请求，并将生成的token字符串返回给客户端(3)客户端将token存储在本地localStorage或sessionStorage中(2*)(4)客户端再次发起请求时
2021-10-13 21:26:06
4051
3
原创 node.js中cors模块解析
作用主要用来解决客户端请求与服务端的跨域问题，具体步骤在作者解决跨域问题的文章中有说明cors解决跨域问题的原理：cors中间件配置在服务端，cors由一系列HTTP响应头组成，这个响应头可以决定浏览器是否阻止前端JS代码跨域获取资源，当接口服务器配置了CORS中间件之后，再发起请求时，就会自动配置相应的请求头，进而解除浏览器的跨域访问限制cors请求头介绍origin指定允许访问该资源的外域url语法：‘Access-Control-Allow-Origin’,‘域名’用法： res.se
2021-10-11 20:21:33
1408
1
原创 客户端请求与服务端的跨域问题及解决办法
解决办法一、从服务端配置上解决重点在于cors模块，提供了一个解决跨域问题的中间件步骤：（1）npm i cors //安装cors中间件（2）const cors = require(‘cors’) //导入cors中间件模块（3）app.use(cors()) // 配置注册全局中间件二、从客户端请求方式上解决重点在于jsonp是一个封装的，利用script标签src属性不受同源策略影响的特点，使用回调函数来将服务器将数据转接到客户端的函数。解决办法如下：在请求中添加一个data
2021-10-11 19:57:55
734
1
原创 如何通过node.js操作数据库
创建数据库操作模块的步骤为：导入数据库模块const mysql = require(“mysql”)创建数据库连接const db = mysql.createPool({host:‘服务器地址’,user:‘数据库用户名’,password:‘数据库密码’,database:‘数据库名称’}）创建请求监听事件在请求监听事件里面通过数据库连接调用query方法，并写入当前监听地址的sql语句，准备对数据库进行操作通过db.query里面的回调函数值err是否存在，来判断数据库是否
2021-10-11 19:04:17
966
1
原创 数据库的常用增删改查等命令
查询方法一：全部查询SELECT * FROM 表名称 //表示查询表中所有的数据方法二：选定查询SELECT 列名称 FROM 表名称 //表示查询选定列的数据如果要查询多个列，可写为：SELECT 列名称1,列名称2 FROM方法三：count()**作用：**查询选定数据结果的总数量，用于写入到页面的分页上，返回值为一个表格语法： select count() from 表名称 where 列名称 = 字段值用法： select count() from user where s
2021-10-11 18:08:19
2380
1
原创 模块化中module.exports对于路由和中间件模块的导出挂载误区(TypeError:app.use() requires a middleware function)
module.exports常规的挂载方式这样可以将js模块文件中特定的数据和方法向外导出但是当在导出路由模块和中间件时，却出现了如下报错根据它提示的问题路径，我找到了导致报错的地方，原因是在express模块文件中，存在一个语句，它标明app.use()这个设置全局中间件的方法中不能导入一个中间件文件。解决办法改写一下挂载方式，不使用点语法，而是直接写module.exports = 函数名，这样就能让服务器正常运行了总结：对于此问题，只是找到了解决的方法，但是app.use()这个设
2021-10-09 20:58:27
1565
2
原创 js高级原型链解读
原型链模型：**原型链：**思路上还是接着上面原型对象prototype原理解析当生成一个构造函数时，js系统会自动生成一个绑定于该构造函数的公用空间prototype，而原型链则是解释了这个空间存在于哪里，以及实例对象对于方法的索引顺序。因为原型对象prototype本质上也是一个对象，所以其内也存在__proto__属性，当使用prototype.__proro__进行索引时发现，其上层空间是Object.prototype，而当Object.prototype再次向上索引时，发现为空了，这说明
2021-10-08 16:50:31
86
1
原创 js高级原型对象解读
原型对象产生原因说明：**构造函数的缺陷：**每个构造出来的实例对象里面都会内置有构造函数里面的所有方法，这会导致同一个方法在多个实例对象中同时存在，而方法这个复杂数据类型又需要占据较大的空间，所以会造成大量的空间浪费解决办法： js规定，每一个构造函数都有一个prototype属性，指向另一个对象(原型对象，一个对象空间)。prototype特征 prototype本身就是一个对象，这个对象的特性是：其内所有的属性和方法，都会被构造函数所拥有**优点：**这也可以使所有实例对象都能共用里面的方法
2021-10-08 16:41:42
83
原创 js文件的入口代码及需要入口代码的原因
1.需要入口函数的原因 在js解释器解释代码时，是从上往下逐条执行的，但是在js文件中，存在许多进行页面交互的代码，它们需要获取到当前按钮元素，比如：var btn = document.querySelector('button'), 如果将js文件写在了页面结构之前，就会导致检测不到当前所需要获取的页面元素，从而导致报错。2.入口函数的作用 入口函数也称为是窗口事件，其作用是让页面先加载完毕之后再执行其内的代码，保证页面元素在js文件之前被读取，从而保证js代码中的页面元素获取
2021-10-07 21:37:49
1063
原创 js基础概念及底层的基本组成元素(变量、数据类型、数据类型转换、运算符)
JS1.客户端脚本语言脚本语言：运行的时候一句一句读取，解释代码执行就可以了(逐行执行，所以要注意打印时的位置)传统编译型语言：先将高级语言的代码转换成机器语言代码，再执行。2.浏览器执行js代码的过程解析渲染html,css的渲染引擎（内核）解析引擎，将高级语言转换成机器语言，v8(谷歌的浏览器解析引擎)3.组成ECMA ： Script基础语法DOM文档对象模型 ：利用js操作元素的一系列内容BOM浏览器对象模型 ： 利用js操作浏览器的一些内容4.代码填写位置行内式 //
2021-10-07 21:00:39
172
原创 node.js初始以及几个常用的基础模块
Node.js**概念：**基于Chrome v8引擎的js后端运行环境 (v8引擎解析效率最高)运行环境： javascipt的后端运行环境，但无法调用浏览器的内置API，如操控DOM和BOM的API等**作用：**通过javascript进行后端接口开发版本区别： LTS版本：长期稳定版 Current版本：最新版(测试版),测试完成后的新特性才会移入稳定版在node.js环境中执行javascript代码方法：在js文件同层次目录下进入cmd终端，输入node 文件名.jsfs文
2021-10-07 20:29:28
87
原创 震惊！npm发包竟如此简单！！
开发包首先新建一个package.json文件，然后往里面填入属性(可以在文件里填入，也可以在使用npm init后，根据提示信息一个个填)，其中name属性是唯一的，不可以和其它的包名重复（可以在npmjs官网中查询，来确认该包的名字是否已被使用）操作顺序：1.npm init -y //生成package.json文件npm view 或者 在npmjs官网中查询，包名是否已被注册在当前目录下建一个js文件，里面写入的是封装好的，想要上传的功能，里面的功能模块通过module.exports
2021-10-07 19:51:32
295
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人