- 博客(150)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 Web产品仪表盘设计案例，附作品地址
当然，并不是一个页面可展示的数据模块越多越好，设计中需要尊重希克定律和米勒定律，即可供选择的选项越多越复杂，就越难做出选择；我们的大脑在同一时间只能处理大约7±2个对象。模块的复杂程度需要看公司业务。
2023-04-06 19:20:51
1207
1
原创 技巧分享：使用JS将SVG URL-Encoded导出为SVG图片，可用于Vue项目中
事情是这样的，今天项目中遇到一个问题，需要把一串SVG URL编码下载下来，成为一张svg格式的图片。
2022-10-27 22:33:47
1718
原创 Express监听req的data事件和end事件
在中间件中，需要监听 req 对象的 data 事件，来获取客户端发送到服务器的数据。如果数据量比较大，无法一次性发送完毕，则客户端会把数据切割后，分批发送到服务器。所以 data 事件可能会触发多次，每一次触发 data 事件时，获取到数据只是完整数据的一部分，需要手动对接收到的数据进行拼接。
2022-10-22 15:38:39
1102
原创 Express 中间件的分类
快速托管静态资源的内置中间件，例如：HTML 文件、图片、CSS 样式等（无兼容性问题）绑定到 express.Router() 实例上的中间件，叫做路由级别的中间件。解析 URL-encoded 格式的请求体数据（仅在4.16.0+ 版本中可用）解析 JSON 格式的请求体数据（仅在4.16.0+ 版本中可用），绑定到 app 实例上的中间件，叫做应用级别的中间件，⚠️ 注意：错误级别中间件必须注册在所有路由之后。作用：捕获项目中的错误，防止项目因为错误崩溃。
2022-10-22 14:59:29
434
原创 破除疑难杂症：Uniapp利用page{}修改页面背景颜色无效的解决方法
但这一次，死活都改不了，查了网上好多资料，确实是有这种用法的，但我尝试多次却修改背景色无果。做项目的时候，想要修改页面的背景颜色。这样就可以愉快的修改页面背景色啦。
2022-10-12 22:33:57
1963
原创 现成组件，详细教程：Uniapp去除微信小程序顶部导航栏，但保留标题和返回按钮；组件经多次调优，近乎完美
这篇文章是在微信小程序原生开发的基础上设计的，但是最近又做到了Uni-app的项目，好巧不巧又得适配小程序端，顶部这个导航栏就有得折腾了。好在之前在原生上折腾过一次，这篇文章就整理一下Uni-app上如何去除这个默认样式后，依旧显示标题和返回按钮。⭕️ 注意：这里我是利用Store去存放“状态栏高度”这个变量，如果你不想用Store，想直接用全局变量也是可以的。没记错的话Uniapp自带Store，不需要安装，只需要创建store文件夹，并编写index.js 文件。至此，组件的准备工作就结束啦。
2022-09-26 22:29:11
5853
3
原创 零基础专栏，从安装到实战：用Express快速编写接口
到这里，你已经可以用Express编写一些最基本的接口啦...功能：修改代码时，自动重启项目。继续深造❗️❗️❗️。
2022-09-25 19:05:52
495
原创 模版代码：Express 中间件快速入门
一个请求到达服务端后，可以通过多个中间件处理，再将响应内容发送给客户端。客户端发起任何请求，到达服务器之后，都会触发中间件，叫做全局生效中间件。定义的中间件，叫局部生效的中间件。
2022-09-25 19:04:22
403
原创 模版代码：Express模块化路由快速入门
但当路由一多的时候就很乱，不方便开发人员查找，也很难将功能相似的路由归纳在同一片地方，这时候就需要模块化路由了。为什么需要模块化（可跳过不看）
2022-09-25 14:24:35
190
原创 LeetCode 长度最小的子数组 JS版本
找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl+1, …, numsr-1, numsr] ，并返回其长度。如果不存在符合条件的子数组，返回 0。链接：https://leetcode.cn/problems/minimum-size-subarray-sum。著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注明出处。给定一个含有 n 个正整数的数组和一个正整数 target。来源：力扣（LeetCode）
2022-09-01 23:59:38
199
原创 奉劝不要在ElementPlus中使用el-table渲染大量树形结构数据
还有一点是，Element-Plus的树形结构还需要前端自己去将平铺的数组转化成对象里带children的数组嵌套数组的结构，但。，即使我不嵌入选择器，单输出节点名称，在拥有1w - 3w左右节点的树形结构中，页面照样崩溃掉（似乎只要达到3000节点以上，性能都很差）提问内容是，ElementPlus的el-table渲染一颗表格树形结构，在其中嵌入选择器，在大量树形节点的情况下会导致页面崩溃。想破头也没想出办法，最后求助领导，领导说这个无解。怎么用，我这卑微前端实习生表示，那个文档写的都是啥。
2022-08-23 17:38:40
2198
原创 亲测可用：Axios携带自定义的Cookie解决方案
做项目时遇到一个需求，后端需要在接口请求时，对用户登陆状态进行判断，需要在请求时携带Cookie。
2022-07-28 12:45:53
16310
原创 Vue3 基于setup语法糖（script setup）的父组件调用子组件中的方法
前置知识：Vue中让子组件给父组件传递数据的3中方法⭕️ 知识点：vue3；setup语法糖；组件ref；⭕️ 以下例子实现了在父组件中，点击按钮，调用子组件中的changeNum（）方法父组件：子组件：
2022-07-03 22:30:37
2500
原创 Vue3 script setup语法糖中使用v-model对子组件进行双向数据绑定
参考文章：vue3 v-model变化v-model对子组件进行双向数据绑定的意义：在某些情况下，我们可能需要对某一个 prop 进行“双向绑定”，vue3提供的可以很好的实现这个需求。父组件：子组件：
2022-07-03 09:53:26
2724
1
原创 react中Redux开启异步action
目的：想在action中实现方法调用的延迟⚠️：异步action不是必须要写的，完全可以在组件中写setTimeout()开启异步任务，等待异步任务结果后再去dispatch同步的action1⃣️ 安装中间件2⃣️ 配置store在中录入以下配置3⃣️ 创建action函数不再返回一般对象，而是一个函数，在函数中写异步任务4⃣️ 在组件中的使用：
2022-06-01 10:01:17
493
原创 React中Redux的创建和使用（代码模版）
redux原理图：1⃣️ 创建redux文件夹🧯警告🛠：❌修正错误：之前误将redux文件夹📁创建在components文件夹📁下，目前文章已经更正。但是后面的代码模板中所出现的：导入路径可能有误，按您本地的路径为准。在redux文件夹📁里面创建以下几个文件📃：2⃣️ 填入3⃣️ 填入reducer的本质是一个函数，接收：preState，action，返回加工后的状态reducer有两个作用：初始化状态，加工状态reducer被第一次调用时，是store自动触发的，传递的pre
2022-05-31 19:34:11
291
原创 JS数组的遍历方法有哪些
JavaScript数组的遍历方法有哪些1⃣️ forEach（）是否改变原数组：❌⚠️ 注意：没有返回值let arr = ['a','b','c','d']arr.forEach((value,index,arr)=>{ // output：数组中的值，数组下标，原数组 console.log(value,index,arr)})output：2⃣️ map（）是否改变原数组：❌⚠️ 注意：有返回值，可链式调用🔙 返回值：一个由原数组每个元素执行回调函数的结
2022-05-31 11:29:12
145
原创 Vue3 teleport，动态引入组件和Suspense的使用
Vue3 teleport，动态引入组件和Suspense的使用teleport（传送门）标签什么是<teleport to="..."></teleport>❓teleport 是一种能够将我们组件的html结构移动到指定位置的技术代码模版：<teleport to="标签选择器"> <div>...</div></teleport>动态引入组件 defineAsyncComponent✅ 优点：当页面嵌套非常非常
2022-05-29 18:53:11
605
原创 Vue3 provide 和 inject的使用
Vue3 provide 和 inject的使用provide() 和inject()的作用provide能向后代组件传递数据，inject能在后代组件中接收来自祖先组件传递过来的数据。两个函数联合起来能实现祖孙组件间通信。代码模版：祖组件中：<script>import {provide} from 'vue'export default { setup() { provide('msg','这是一条传递给后代的信息') return {}; },};
2022-05-29 16:07:52
316
原创 Vue3 自定义ref代码模版 customRef
Vue3 自定义ref代码模版 customRef<template> <input type="text" v-model="keyWord"> <h3>{{keyWord}}</h3></template><script>import { customRef } from "vue";export default { setup() { let keyWord = myRef('hello')
2022-05-29 15:30:34
1057
原创 vue3 toRef() 和toRefs的使用，代码模版
vue3 toRef() 和toRefs的使用，代码模版toRef（）代码模版<template> <h3>{{ name }}</h3> <h3>{{ age }}</h3> <h3>{{ jobType }}</h3> <button @click="changePerson">修改person中的值</button></template><script
2022-05-27 16:08:14
130
原创 Vue3自定义hook函数的使用，代码模版
Vue3自定义hook函数的使用，代码模版什么是hook❓本质就是一个函数类似于vue2的mixin自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂hook的本质就是一个函数，所以在.js文件中写一个默认暴露的函数，并且返回一些setup()里面会用到的关键数据编写hook函数import { onBeforeUnmount, onMounted, reactive } from "vue";export default function(){ let point =
2022-05-27 13:46:59
288
原创 Vue3 计算属性computed()和监视watch的使用，watchEffect的使用，代码模板
Vue3 计算属性computed()和监视watch的使用，代码模板computed()<script>import {reactive,computed} from 'vue'export default { name: 'Person', setup(){ let person = reactive({ name:'Ulrich', age:22, }) // 计算属性 - 简写 - 回调函数的形式 person.n
2022-05-27 11:01:55
207
原创 Vue3中setup()函数收到的两个比较重要的值：props和context（和自定义事件有关）
Vue3中setup()函数收到的两个比较重要的值setup()函数能接收到两个形参，一个是props，另外一个是context。props即父组件传递给子组件的参数，context意思是上下文，里面有一个emit('事件名', 事件回调函数收到的值)函数比较常用，可替代vue2绑定在vm身上的this.$emit('事件名', 事件回调函数收到的值);子组件：<template> <h3>{{person.name}}</h3> <h3>{{p
2022-05-26 21:28:43
1992
原创 Vue3 reactive函数的使用。reactive()对比ref()的优点
Vue3 reactive()的使用。reactive()对比ref()的优点作用：定义一个对象类型的响应式数据，基本类型用不了reactive()语法：const 代理对象 = reactive(源对象)接收一个对象或数组返回一个代理对象（proxy对象）reactive定义响应式数据是深层次的，对象中的对象，数组中的数组都能被监视到状态的修改（或叫值的修改）reactive内部是基于ES6的Proxy实现的，通过代理对象操作源对象内部数据进行操作。reactive()在vue3中的使用
2022-05-26 20:00:25
2499
原创 Vue2、Vue3响应式实现方案原理模拟，只是简单的模拟
Vue2 / Vue3响应式实现方案原理模拟，只是简单的模拟｜｜来源：尚硅谷前端vue视频，它家的视频巨好「模仿」Vue2响应式实现方案⭕️ 原理：使用defineProperty()let person = { name:'ulrich'}let p = {}Object.defineProperty(p,'name',{ configurable: true, get(){ return person.name }, set(value){ consol
2022-05-26 15:17:52
255
原创 Vue3中的ref函数，代码模版
Vue3中的ref函数前言vue2中我们只要是写在data中的数据就能成为一个响应式的数据，但为什么vue3定义响应式数据要这么难呢❓Vue3中为什么要用ref和reactive定义数据？Vue3.0 把创建响应式对象从组件实例初始化中抽离了出来，通过暴露 API 的方式将响应式对象创建的权利交给开发者，开发者可以自由的决定何时何地创建响应式对象什么是 ref()ref函数的作用：创建一个包含响应式数据的引用对象（reference obj）<script>import {
2022-05-26 10:59:00
591
原创 vue路由router的props配置
vue路由router的props配置前置知识：vue-router3路由配置和使用，适配vue2，vue-router代码模版路由props配置的作用：让路由组件更方便的接收到参数⚠️ 当不使用props配置，组件拿到路由传递过来的参数需要这么写，组件里面出现非常多的$route.query或$route.params的字样：如何配置路由的props说到配置路由，肯定是去router文件夹下的index.js中去写点代码export default new VueRouter({ r
2022-05-24 19:29:41
1346
原创 vue-router3路由配置和使用，适配vue2，vue-router代码模版。只需要这篇文章就够了。
vue-router3路由配置和使用，适配vue2，vue-router代码模版前言本文只适合vue2，不适合vue3，vue3对应的路由版本是vue-router@4安装 vue-router3npm i vue-router@3基本配置1⃣️ 在src目录下新建一个router文件夹，在文件夹里面创建一个index.js文件2⃣️ 在main.js添加以下代码import Vue from 'vue'import App from './App.vue'import Vue
2022-05-24 17:31:45
1232
原创 vuex3配置，vuex3代码模板，适配vue2版本
vuex3配置，vuex3代码模板，适配vue2版本前言：本文章不适合 vue 3 版本，只适合 vue2 版本vuex3 适配 vue2， vuex4 适配 vue3vuex3 原理图原理图展示的是组件修改存放在vuex中的值，首先先将要（修改的数据名以及修改的数据值）传递到actions对象的方法中actions对象的方法里面可以与后端api连接，也可以处理从组件拿到的value值（数据）做一些数据判断的逻辑，再将这个value值提交到mutations对象里对应的方法里面。mutati
2022-05-24 09:30:30
986
原创 Vue2脚手架配置代理代码模板（跨域）
Vue2脚手架配置代理：🔗链接：https://cli.vuejs.org/zh/config/#devserver-proxy方法一在vue.config.js中添加以下配置：module.exports = { devServer: { proxy: 'http://localhost:4000' }}说明：✅ 优点：配置简单，请求资源时直接发给前端（8080）即可。⚠️ 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。🌍 工作方式：若按照上述配置代理，当请求了
2022-05-22 19:42:04
340
原创 代码模板：Vue中默认插槽，具名插槽，作用域插槽
Vue中默认插槽，具名插槽，作用域插槽🔗 来源参考：尚硅谷Vue视频如何理解插槽大白话来讲，插槽相当于在自定义组件标签<MyComponent> </MyComponent>的中间写入（插入）html结构，把这些html结构传递到自定义组件中。当然，子组件也需要声明接收传入结构的摆放位置，让自定义组件知道如何将这些html结构摆放到页面中去。默认插槽父组件： <MyComponent> <div>这里插入的是html结构</div>
2022-05-22 00:46:14
177
原创 Vue中$nextTick()的使用
$nextTick(回调函数)的作用在下一次DOM更新结束后执行其指定的回调为什么需要有$nextTick()：Vue并不是在我们每一次修改数据的时候立刻更新DOM的，一般都会在整个回调函数走完，才更新DOM里面的内容。$nextTick()要在什么时候用？当数据改变后，要基于更新后的新DOM进行某些操作时，要在 $nextTick()所指定的回调函数中执行。...
2022-05-17 15:22:16
301
原创 微信小程序顶部去除默认样式后依旧显示返回按钮和顶部页面名称
微信小程序顶部白边变透明后依旧显示返回按钮和顶部标题名称⭕️ 实现效果：正文1⃣️ 官方并没有提供相关的api2⃣️ 本文实现的效果能响应式的适配任何机型（安卓苹果通用）3⃣️ 先得去iconfont下载一个返回按钮的图标⭕️ 步骤一在app.js里面写入以下代码：// app.jsApp({ onLaunch() { // 获取系统关键数据 wx.getSystemInfo({ success: (res) => { // 响应式获
2022-05-17 11:36:11
1554
1
原创 Vue全局数据总线代码模版加解析，贼详细
Vue全局数据总线代码模版加解析前言首先，全局总线并不难，理解起来也不算很乱，但需要有下面几个前置知识：🔗 Vue组件自定义事件上面的链接，如果你有点基础可以看这篇文章回顾下，如果没有基础推荐你去找更好的文章知道自定义事件绑在谁身上，就去找谁触发如果你知道消息订阅与发布（PubSub），这篇文章会更好理解正文本文的代码模版实现了如下图所示的数据传递例子：说明：这个例子即使不使用全局数据总线，也是可以实现的。使用全局数据总线带来的优点是，有一个「工具人$bus」可以给我们做传播媒介，无
2022-05-16 16:03:39
353
原创 MAC苹果电脑搭建ReactNative，CocoaPods安装问题解决
MAC苹果电脑搭建ReactNative，CocoaPods安装问题解决为什么没法直接安装CocoaPods❓解释看ReactNative中文网：所以如果实在搞不定这部分全局Proxy的小伙伴可能真的无解，但如果已经配置了全局Proxy，也不一定能直接下载，因为终端的Proxy和系统的Proxy压根是不相通的。解决办法如下：在终端中敲入curl cip.cc，如果出现以下情况，基本就是安装不了CocoaPods的这时候就需要用3⃣️条指令，来配置终端走Proxy：⚠️ 该指令是临时性的，如
2022-04-28 09:55:55
753
原创 React路由Router5版本问题和使用大杂烩，注意是第五版
路由的基本使用明确好页面中的导航区，展示区导航区的<a>标签改为<Link to="/xxx">...</Link>标签展示区写Route标签进行路径的匹配：<Route path="/xxx" component={Demo}/>在index.js里的<APP/>的最外侧包裹一个<BrowserRouter>或<HashRouter>路由组件和一般组件1⃣️ 写法不同一般组件： <Demo/>
2022-04-25 11:23:28
384
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人