- 博客(76)
- 收藏
- 关注
RSS订阅原创 关于Vue中涉及到大量数据的级联菜单树状结构的数据多选勾选页面卡顿卡死问题
提示：放弃el-cascader,改用select + tree来实现，放弃element，改用原生tree配合el-select。本人使用的vue2.x，查看文档属性方法，灵活更加需求写逻辑，目标是不卡死页面。
2024-07-17 11:46:07
315
原创 关于vue elementUi校验slot插槽中的表单项
重点提示：这里要明确一个概念，凡是在组件内插槽的内容都属于组件管理，因此，要校验父组件使用子组件的slot插槽展示表单项，那么这个表单项的校验规则要放在子组件的表单数据中进行管理和校验。
2024-06-18 10:46:41
533
原创 Vue3 + Element-plus 报错 require is not defined 处理问题
记：同样可以解决 element-plus/es/locale/lang/zh-cn 引入报错问题。中修改配置，没有就新建。
2024-04-30 14:53:21
697
原创 关于Yii2基础controller和model的封装
如题，在实战项目中我们我们经常会要使用相同的逻辑，比如post/get获取参数，接口返回、参数校验等，因此可以将其封装起来调用。这里分为根目录下的控制器controllers和处理数据库的models两个文件，其他业务逻辑放在modules模块中。一、根目录下controllers。二、根目录下models。
2023-12-14 10:03:30
477
原创 关于vue3中响应式依赖注入provide/inject
优点：数据同步更新，并同步渲染视图，耦合逻辑处理更容易处理，更好的开发体验，推荐provide/inject 而非 vuex（繁琐）场景：适合单组件（多层嵌套组件），解决父组件的响应式数据能够传递给所有子组件（包括孙子组件及以下）
2023-12-13 19:05:36
1131
原创 2023年最新的前端面试收集（1）
minSize： 拆分包的大小, 至少为minSize，如何包的大小不超过minSize，这个包不会拆分。-增加多个节点使用documentFragment：不是真实dom的部分，不会引起重绘和回流。他们三个的应用场景都是缓存结果，当依赖值没有改变时避免不必要的计算或者渲染。maxSize： 将大于maxSize的包，拆分为不小于minSize的包。浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。4. 根据渲染树来布局，计算每个节点的位置。minChunks：被引入的次数，默认是1。
2023-11-10 15:29:04
479
原创 关于多个elementui的cascader级联组件页面滚动渲染样式导致卡顿问题
如题，多个cascader级联组件，下拉选项含大量数据，滚动时会有实时样式重新渲染，导致CUP内存溢满而卡顿。小优化技巧：可加loading一次性加载完多个cascader级联组件后再允许页面滚动。方法一：使用elementui中的内部源码的方法处理（推荐）方法二：强制写入display: none;
2023-10-25 10:46:44
898
7
原创 Yii2使用modules模块开发Api接口的注意点
如题：Yii2中使用modules开发Api接口一、新建modules目录``` - components - config - controllers - mail - models - modules // 新增 - runtion - tests - traits - vargrant```二、在modules中新建模块目录``` - modules -...
2023-09-21 11:55:00
120
原创 PHP多层级菜单树形结构递归处理
如题：一、数据库菜单数据表使用图片中id和parent_id两个参数来关联父子关系二、将数据库中的数据变成树状多层级解构```{ "id": 1, "parentId": 0, "treePath": "0", "name": "系统管理", "type": 2, "path": "/system", "component": "Layout", "perm": ...
2023-09-21 10:41:00
234
原创 vue-element-admin项目中tagView嵌入iframe不刷新重载
vue-element-admin项目中tagView嵌入iframe不刷新重载最近使用vue-element-admin来开发项目，因为以前老项目太大，暂不重构，如要通过iframe嵌套在新项目中，通过router来重写url加载，但是业务需要切换菜单或者tagView不能刷新重载iframe页面,因此需要改造一、vue-element-admin是通过keep-alive来缓存rou...
2023-08-22 11:48:00
473
原创 ElementUI图标icon乱码问题
如题：ELementUI图标icon乱码问题原因：在build编译时编译器处理导致的解决方案方案一：将saas更换为node-saas，安装不了问题可查看这里方案二：升级saas和sass-loader方案三：将element引入的样式代码注释，然后再main.js添加一行引入样式代码注释代码：import '~element-ui/packages/theme-chalk/s...
2023-08-22 11:27:00
214
原创 记录element table中展开行功能中内容选中
如题双击选中展开行中内容时，如果只能选中一个td，那么这是因为你设置了fixed，删除即可另外，通过css user-select: all; 可以点击选中文本
2023-08-16 14:27:00
61
原创 Vue3 setup的业务逻辑分离功能拆分
在Vue3开发中，我们可能遇到一个页面或者组件业务逻辑很复杂，代码量达到千行，不利于阅读和维护，因此需要将业务逻辑进行分离首页主界面 index.vue// index.vue<script> import {reactive, toRefs} from 'vue' import useOperate from './useOperate.js' imp...
2023-08-15 10:02:00
334
原创 node-sass 安装失败 Command failed 报错 node_modules\node-sass: Command failed. Exit code: 1
通过yarn install安装依赖包node-sass时总是报错，"../node_modules\node-sass": Command failed. Exit code: 1具体的错误原因为当前使用的node版本与依赖的node-sass版本不匹配，调整当前node版本，建议使用nvm来控制node版本切换具体对应关系如下：NodeJSSupported node-sa...
2023-08-01 17:26:00
1632
原创 Vue路由中resetRouter重置routes的参数hidden时无法生效
记录：如题，当在静态的router中设置伪权限，即设置routes路由的参数hidden代码如下：import store from "@/store";// 伪权限，设置定时器的原因是router/index.js中无法及时拿到storevar timer = setInterval(() =>{ if (store && store.getters....
2023-06-01 17:37:00
324
原创 Yii2-app-advanced的配置文件优先级
Yii2高级模板中支持多套环境配置，并且有优先级重写覆盖默认有两种dev和prod，在应用目录 environments 下Yii2中的config配置文件(main.php 和 params.php)具有极大的灵活配置，结合配置文件的加载顺序1、使用约定- 应用目录下有 config/main.php 和 params.php 是一个全职全集 目录下的 *-local.php...
2023-05-23 10:27:00
69
原创 Yii2连接多个数据库
1、使用高级模板 yii2-app-advanced2、设置 common\config\main-local.php 本地文件'components' => [ 'db' => [ 'class' => 'yii\db\Connection', 'dsn' => 'mysql:host=localhos...
2023-05-22 19:15:00
115
原创 Yii2启动Restful风格Api接口，用于前后端分离项目或者对外的第三方Api接口
使用高级Yii2模板：yii2-app-advanced原因：建立Restful的Api相当于一个独立的项目，如backend(后端)、frontend(前端)，又因为Api与后端项目相识度高，只是封装方法对外暴露，因此需要复制一份backend，重命名为api项目，放在根目录，与backend、frontend、common等同级。一、准备工作 1、下载安装集成工具，如 wampServ...
2023-05-22 11:28:00
234
原创 elementUI 多层结构动态生成el-form及校验
如题，当整个el-form 都是通过多层数据结构循环渲染出来的表单，那么每个el-form-item的prop和el-input、el-select等的v-model也是动态变量填充，怎么样才能内嵌rules校验呢？如下数据结构：// form通过initData数据结构进行渲染const initData = [ { channel: 'sms', title: ...
2023-05-09 10:28:00
247
原创 Vue2使用setup、ref、reactive等Vue3的组合式@vue/composition-api、vuex-composition-helpers
有些同学想在当前项目中体验Vue3组合式api，setup、ref、reactive等，而且一步就可以升级到Vue3，但是vue确实2.x版本，不改变当前版本怎么办呢？vue2.7.0开始自带composition-api可以放心体验，不支持 <script setup>语法糖，还需要return，但后面有对应的插件实现这种语法糖。那么之前版本呢，第一步：安装依赖 @vue/c...
2023-03-29 11:45:00
3397
原创 关于Vue3+ts引入文件使用alias别名@时报错问题，process is not defined
如题，解决办法：一、首先确保有两个文件： tsconfig.json vite.config.ts(注：如果是vue.config.js，则手动改为vite.config.js)二、 在ts.config.json中修改{ "compilerOptions": { ...... "paths": { "@/*": ["src/*"] }...
2023-03-17 10:44:00
580
原创 关于v-if切换导致校验触发错乱问题
如题对于这样的问题解决方法很简单：在<el-form-item> prop同级添加key，保证key值唯一，可以与prop相同原因：Vue推荐使用key来标记当前DOM的唯一性，便于准确、快速、高效更新DOM日常记录！...
2023-03-09 15:16:00
89
原创 2023前端开发最新面试题收集-Webpack篇
webpack整理谈谈webpack的理解webpack是一个静态模块打包器。当webpack处理应用程序时，会递归构建一个依赖关系图，其中包括应用程序所需的所有模块，最后将这些模块打包成一个或多个bundle，并输出到配置的位置。Webpack的执行顺序/加载机制webpack就像一个生产流水线，要经过一些列的loader来处理不同的文件，将这些文件编译转换成JS结果。这些loade...
2023-02-17 10:24:00
42
原创 2023前端开发最新面试题收集-Vue2/3篇
Vue整理1、谈谈MVVM的理解MVC(react)：数据流是单向的，View和Model之间通过controller连接通信，用户操作会请求服务器，路由拦截分发请求，调用对应的控制器controller，控制器会获取数据，然后数据和模版结合，将结果返回给前端，页面重新渲染。MVVM(Vue)：数据流是双向的，View和Model是完全隔离，用户不需要手动操着dom元素，将数据绑...
2023-02-17 10:22:00
137
原创 2023前端开发最新面试题收集-Javascript篇
前台、中台、后台- 前台：面向用户、客户可以感知的，如商城- 中台：可以看着对前台的补充，公共服务功能，如支付系统、搜索系统、客服- 后台：面向运营、比如商品管理、物流管理1、如何将数据非常大的数据渲染而不卡顿 / js完成一个无限循环的动画定时器setInterval，做数据分割，批次渲染高级进阶：requestAnimationFrame (H5新特性)cancalAnim...
2023-02-17 10:19:00
66
原创 Vue-router路由守卫的钩子和使用场景
vue-router中存在三个钩子，也叫hook，生命周期，守卫等。1、全局守卫2、路由独享守卫3、组件独享守卫全局守卫：页面加载时候触发，一般控制全局权限const router = new VueRouter();// 全局前置守卫router.beforeEach((to, from, next) => { ... next(); //所有前置守卫最后都...
2022-05-12 16:47:00
26
原创 Vuex中mutations与actions的区别
如题：// 1、mutations的方法，使用commit调用，一般在actions中执行，只能同步操作this.$store.commit('SET_NAME');/** 2、actions中的方法调用，使用dispatch调用，一般在组件中执行，可以异步操作，* actions中不可直接修改store数据，需要commit触发muttations中的方法*/ this.$s...
2022-05-12 15:44:00
29
原创 Vue2和Vue3响应式实现上的区别
Vue2是通过 Object.defineProperty来完成响应式处理，遍历对象所有的property，并将其转化getter/setter。它是只能针对object实现响应式，对于数组，则需要进行处理。创建Object.create(Array.prototype) 得到具有数组原型对象。优点：基于ES5实现，支持绝大部分浏览器缺点：由于是递归实现监听，如果数据层级较多，会导致初始...
2022-05-12 15:30:00
43
原创 Vue的插件机制及其原理
一、通常用来为Vue添加全局功能添加全局方法或者属性。如vue-custom-element添加全局资源：指令、过滤器、过度等。如vue-touch通过全局混入来添加一些组件选项。如vue-router添加Vue实例方法，通过把他们添加到Vue.prototype上实现一个库，提供自己的API。如vue-router二、使用插件方法通过全局方法Vue.use()使用方法，它需要...
2022-05-12 14:37:00
39
原创 关于async和await的异常捕获
一般我们会想到用 try/catch和then().catch()function getData(data) { return new Promise((resolve, reject) => { if (data === 1) { resolve('getdata success') } else { ...
2022-05-12 10:28:00
50
原创 JS中new的过程发生了什么以及实现过程
举一个简单例子// 构造函数function WhatNew(name) { this.name = name }let news = new WhatNew('小韭菜'); 通过构造函数创建的对象，原理是原型链的存在，每个构造函数都有一个prototype属性(函数特有属性)，它指向构造函数的原型对象(WhatNew.prototype)，而__proto__是每个对...
2022-05-11 11:25:00
53
原创 CSS动画开始硬件加速及其原理
当我们需要高频交互的CSS动画时候，我们需要考虑使用css3硬件加速。css3硬件加速又叫做GPU加速，是利用GPU进行渲染，减少CPU操作的一种优化方案。浏览器首先将页面解析成DOM树，DOM树和CSS让浏览器构建渲染树，渲染树包括渲染对象。每个渲染对象会被分配到一个图层中，每个图层会被更新到GPU中，由于GPU中的transform等CSS属性不触发repaint，因此不需要重绘，单独...
2022-05-11 10:27:00
40
原创 js数组长为什么能任意改变
如题，JS数组中有两种存储形式：快数组：在连续内存中存放数据，数组索引属性；慢数组：hashTable结构，一种典型的字典形式，命名属性；在V8中，直接创建数组默认的方式是快数组。快数组长度是可变的，根据元素的增加和删除来动态调整存储空间大小，原因是其内部可通过扩容(push)和收缩(pop)机制来实现的。快/慢数组之间的转化：快到慢：1、如果快数组扩容后的容量是原来的3倍以上，这...
2022-05-11 10:08:00
30
原创 如何在 macOS 12 Monterey 上设置 MAMP本地服务器
Apple 于 2021 年 10 月 25 日发布了 2021 年最新的 macOS 12 Monterey。今年又到了，如果您从 macOS 11 Big Sur 或更旧版本升级，您可能需要重新配置 macOS。或者，如果您有一台装有 macOS 12 Monterey 的全新 Mac，以下配置步骤应该可以帮助您在 macOS 平台上设置本地 Web 服务器。在 macOS 12 M...
2022-01-06 12:08:00
136
原创 关于MacOS12 Monterey的软连接
以前修改全局权限，直接在根目录创建文件夹的方法，关闭SIP不生效了，Mac read-only file system真正的解决方法：1、打开终端、输入sudo vi /etc/synthetic.conf ，如果没有synthetic.conf文件，请在etc创建，打开文件夹方法，进入etc，cd /etc，然后输入open .(点号)2、编辑按 A，即可编辑，注意格式data ...
2022-01-06 11:38:00
87
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人