- 博客(65)
- 收藏
- 关注
RSS订阅
原创 微信小程序怎么发布？
微信小程序的发布1.先解决不合法域名的问题这里不能选中哦，不然发布后可能没有数据解决这个问题的话，可以去微信服务平台设置合法域名，把你的域名加入就可以了。例如我原请求地址为这里配置合法域名只需要 输入 https://api-hmugo-web.itheima.net 就可以了这时候重启下小程序开发软件，看看能不能请求到数据。2.发布直接填版本号备注提交就行回到管理版本点击提交审核，它会让你完善项目的基本信息和选类基本就是这样填，可能发布失败，试试换换种类，个人的发布可能比
2020-10-13 18:18:24
1136
4
原创 微信小程序实现电商购物
演示地址B站演示地址:视频演示码云地址：源码在这！效果图说明接口和样式的参照都来自b站黑马的。另外还有其他页面，图片太大就不多放点了，可以下源码，自己看看。我基本上都是用自己的方法写的，和老师教的不太一样，包括一些请求封装，组件的封装，虽然这个项目较小，但还是进行了封装，以及自己修改了一些样式和添加了一些功能。由于没有企业级appdi没有权限使用微信支付，惨~，本来想做个微信支付，如果有大佬愿意提供下，我会把支付功能做了。如果自己不太熟练的话可以跟着老师慢慢做，自己会的话直接看着样式和接口
2020-10-13 10:54:46
3721
19
原创 vue实现音乐平台项目
成果具体效果看B站视频演示；B站地址：视频演示github地址：项目源码码云地址：项目源码各位大佬，帮忙点个赞，投个币，star下,万分感谢大家！项目结构因为文件较多，我是通过截图然后注释上文字，图片有点多，想要了解的话可以私信我，或者b站也有联系方式。代码重要部分都详细注释解释了过程说说搭建过程吧，从无到有，感觉刚开始就得要有构思，先不急着做，先观察结构上布局，规划好路由的设置，有哪几个部分需要跳转，哪里是公共的，哪里是一直显示的，都要好好想想。刚开始的话还是要做出页面的大致布局。
2020-09-18 13:20:25
13557
17
原创 如何用vue自己封装一个轮播图 移动端 pc端
vue封装一个轮播图结构结构布局和样式我就不多解释了 今天主要淦逻辑结构大致结构为如下样式如下 采用的是flex布局看看父组件传递的数据吧逻辑结构及原理实现这里定义一些下面要用的属性，和可传递的属性开始原理简单介绍：给数组前加原先数组最后一个 给数组后加原先数组第一个例如数组有4个 刚开始把第一张图片复制一份给数组最后加一个 把最后一张图片复制给数组第一项调整数组从 下标1 即第二个元素开始，并控制判断轮播是不是到了第一或者最后，是则取消过渡效果返回对应原数组的位置例如 到
2020-08-22 11:27:13
2270
9
原创 怎么用vue编写一个拼图小游戏？
用vue编写一个拼图小游戏今天带大家用Vue完成一个拼图游戏的demo最终成果准备工作创建Vue项目，把需要的图片放在public目录下（图片最好是正方形的），父组件APP子组件sumImg，父组件引入子组件1.大致结构布局父组件只需引入对应子组件，再添加上想修改的属性，如果过多可以考虑用v-bind来进行包装，这样布局会更清晰一点。子组件需要根据关卡难度进行不一样的选择，所以这里很多属性是需要变化的，即通过父组件来传输的。还要注意的一点就是最后一块拼图是空白的，我们可以判断索引来给它
2020-08-09 10:13:41
3013
13
原创 Vue 中的更改数组，和更改对象的规范及简单底层原理介绍
Vue 中的更改数组，和更改对象的规范及简单底层原理介绍1.Vue 更改数组 对象的规范在Vue中想要更改数组和对象中的数据同样得到页面的相应需要做到一些规范，这些规范是由Vue来设定的，以便能让代码性能提高。数组1.不能通过数组的索引（下标）去更改数组的值，这样不会渲染页面。eg: vm.arr[0] = 10; 虽然数组的数据修改成功，但是并不会渲染到页面.2.不能通过更改数组长度的方式去更改数组，这样也不会渲染页面。eg: vm.arr.length = 1; 同上，长度修改为1，页面
2020-08-05 15:53:54
1913
1
原创 videojs 实现自定义组件(视频画质/清晰度切换) React
最近使用videojs作为视频处理第三方库，用来对接m3u8视频类型。这里总结一下自定义组件遇到的问题及实现，目前看了许多文章也不全，官方文档写的也不是很详细，自己摸索了一段时间陆陆续续完成了，这是实现后的效果.样式啥的自己检查后覆盖就行了，没啥说的，重点看看画质切换这个组件如何实现的。最开始我是采用函数组件直接嵌入进去，后面发现是报错的，原因是hook使用范围有误，找了半天也不知道是什么原因。后面采用继承Videojs内的menu组件来实现。// 切换视频清晰度代码// 初始化清晰度按钮。
2023-08-24 09:21:45
1487
原创 React useCallback如何使其性能最大化？
React中最让人畅谈的就是其带来的灵活性，可以说写起来非常的舒服。但是也就是它的灵活性太强，往往让我们忽略了很多细节的地方，而就是这些细节的东西能进行优化，减小我们的性能开销。可以说刚学React和工作几年后写React的代码真的是完全不一样。废话不多说了，今天带大家来了解useCallback有哪些细节之处可以让我们做进一步的性能优化。如果你不太了解useCallback......
2023-02-26 11:15:01
515
1
原创 webpack5内部是如何处理模块化的？
今天给大家带来一期webpack5处理模块化的文章,我们将从webpack如何处理 ESModule 和 CommonJS,以及它们两者之间的互相引用从打包后的源代码作为分析。
2022-09-18 12:42:50
530
原创 20张图带你彻底搞懂二叉树的删除操作
最近在学习数据结构与算法，记录下二叉树的删除操作是如何实现的，相对于其他的插入，排序等操作。删除操作逻辑上稍微比较复杂，今天通过图形化的方式帮你们彻底搞懂到底是怎么实现删除操作的。话不多说，直接开始。注：本文采用js语言作为演示。
2022-09-10 13:26:45
3923
1
原创 关于为了少搬砖，而用node手写了一个React脚手架这件事
hellow,大家好。最近刚写完一个react项目，又想写一个练练手，可是我突然发现一个问题。那就是又要从零构建一个完整的项目环境，避免不了要重复搬砖搬砖还是搬砖，确实挺麻烦，可能得花费20多分钟。啥？我项目都还没写就花了我半小时？气愤之下，我立刻想了个好主意，我能不能用node写个脚手架呢？就像vue react它们的脚手架一样，直接运行vue create xxx 就直接把它那套模板搬过来了，可是我的明显是基于他们之上再结合自己日常项目需求所需的额外的包来搭建我们的项目。
2022-08-23 21:53:45
329
原创 解决antd side侧边栏菜单收缩时二级菜单不跟随
借用下图片，大概就是这种bug，直接看怎么解决吧，简单记录一下，有遇到相同问题的可以试试我这样的方法。我又回来了，BUG BUG BUG…核心代码都在上面，且有注释！
2022-08-19 16:17:35
1410
原创 react18+Ts+V6最新实战项目来袭！
看过我上一篇文章的应该知道最近在写一个后台管理系统，大概的技术栈是react18+ts+v6+antd。运用到的更多技术的看我下面的详细介绍，此项目是由B站千锋教育kerwin老师的产品，接口用的也是他们的。但是本项目与kerwin老师写的版本和技术都不同，只是基于接口与功能来实现。大家看看项目源码就一目了然了，如果完全不知道该如何下手建议可以去B站看看原版视频哦。
2022-08-19 15:53:11
2377
原创 react-router v6 如何实现动态路由？
最近在肝一个后台管理项目，用的是react18 + ts 路由用的是v6，当需要实现根据权限动态加载路由表时，遇到了不少问题。v6相比于v5做了一系列改动，通过路由表进行映射就是一个很好的改变（个人认为），但是怎么实现根据权限动态加载路由表呢？我也是网站上找了许多资料发现大部分还是以前版本的动态路由，要是按照现在的路由表来写肯定是不行的。难不成又要写成老版本那样错综复杂？只能自己来手写一个了，如有更好的方法望大佬们不吝赐教。...
2022-08-16 16:48:48
6381
13
原创 react-router-dom6 路由懒加载与组件懒加载
需要用到懒加载的组件：此时我这个组件默认是关闭的，类似于弹窗之类的，就需要最好做一个懒加载。这样就实现了组件懒加载，在我们需要将该组件懒加载的时候就采用lazy的方式导入即可。再配置一个过渡组件，就是等待我们懒加载的组件还没过来时运行此组件。我们会发现此时会加载一个文件，这个文件就是对应的懒加载文件。本文教学如何配置最新路由的懒加载 以及 组件懒加载。我这边是配置在index.tsx里面。第二个是加载路由组件的懒加载文件。第一个是加载组件的懒加载文件。说明我们成功实现了懒加载。点击控制懒加载组件显示。...
2022-08-09 15:46:16
1883
原创 redux 持久化(redux-persist) 结合 immutable 使用问题
最近学习了redux以及react-redux的结合使用确实让redux在react中更好的输出代码啦~但是考虑到项目的各种需求，我们还是需要对redux进行深一步的改造，让其能更好的满足我们的日常开发，大大提高我们的开发效率。今天给大家推荐两个好用的功能包，并解决一个它们结合使用存在的问题。...
2022-08-07 16:16:53
1601
原创 React 正确使用useCallback useMemo的姿势
简单给大家总结下useCallback 缓存函数useMemo 缓存函数返回值都是解决组件频繁渲染从而频繁创建函数及频繁运行函数正确的思路应该是 跟我有关的时候我才需要去重新创建函数及重新运行函数跟我无关的时候，直接拿上一次的缓存结果就行啦！求赞！！！...
2022-08-06 15:40:04
350
2
原创 Moment.js显示中文 React
Moment.js显示中文看了很多博客都是手动，教大家一种简单的方法就可以实现了。他内部其实有给我们提供很多语言包的，我们按需引入就可以了。大家可以看看，想要什么语言包可以自行切换就行了。修改的话我们直接在index入口文件中修改就行了import 'moment/locale/zh-cn';vue中要引用也是一样的道理！不详细说了...
2022-04-18 11:46:36
1132
原创 React 爷孙组件之间相互通信
前言最近在学习React，给大家总结下跨组件通信中，爷孙组件之间怎么相互通信。简单明了上代码直接一把梭，不多解释。爷孙组件间通信案例如下代码//跨组件通信import React, { Component } from 'react'//创建context 给初始值const UserMessage = React.createContext({ nickName: 'yyy', level: 1})export default class TextSingal e
2022-04-04 12:09:35
2293
2
原创 参数也有作用域？来看看这道题你真的懂了吗
前言函数传参时，参数也具有作用域，你遇到过吗？当我听到的时候也觉得不可思议，因为在日常开发中基本不会遇到类似的代码，只有可能在一些面试题可能会遇到，考察的是对函数总体的了解程度吧。今天让我们来详细聊聊函数中的参数作用域。ps:(原创！掘金和csdn是同一人)例题看下面代码，思考它的输出var x = 0var k = 99function bar(s = () => { console.log(this); }) { var j = 'zj' function foo(x,
2022-03-26 12:58:28
1256
原创 一图带你深入理解原型继承关系
前言原型继承关系一直是一个比较复杂的点，最近看了《你不知道的JavaScript》才豁然开朗，再结合社区资料深入扩展才终于是啃下了这块知识。下面带大家来深入理解下原型继承之间的关系。看图解析下面这幅图大家肯定都不陌生，这是在社区广为流传的一副原型继承之间的关系图。画的也是特别好，但是如果你第一次直接去了解它，那你肯定是懵懵懂懂的，只有自己对原型有一定的认识才能真正的理解它所表达的含义。整体上来都不知道该怎么下手，现在我们一步一步分解来看。1.系统自带的构造函数 function Object我
2022-03-05 11:08:43
2078
原创 vue3+ts+ElementPlus 实战项目 musicPlus
项目成果码云项目地址觉得不错的话，帮忙点个star!万分感谢具体效果下载项目后浏览，相当于用vue3 ts 重构了之前的项目技术栈分布情况学习收获学习此项目你将会收获vue3的项目实战使用 setup等新增语法使用以及结合ts对vue3的支持ElementPlus项目实战使用 对应更新内容的调整使用工程化管理项目的书写规范 提交风格等ts 封装vuex中的mapgetters… 封装网络请求vue3封装具有更强通用性的组件以及封装组件的思想如何正确的根据项目结构化来划分ts
2022-02-27 16:55:40
2076
6
原创 elementplus最新版实现按需导入
安装准备先安装elementplusnpm install element-plus --save安装自动导入的插件npm install -D unplugin-vue-components unplugin-auto-import配置vue.config.jsconst AutoImport = require('unplugin-auto-import/webpack')const Components = require('unplugin-vue-components/webpa
2021-12-11 22:12:15
2609
原创 vue3中如何使用Ts搭建项目的网络请求axios
前言最近学习了vue3又学习了ts，学完准备搭建一个项目练练手时。突然想起现在封装的网络请求貌似是vue2和原生js以及axios结合使用的，所以当我们使用vue3和ts进行开发的时候那肯定也得根据当前的技术来重新封装一个结构性更强的基于axios的网络请求体系。封装好了我们以后搭建项目可以说直接采用就好了，学习此文能让我们体会ts在封装网络请求时所给予更加完善的安全性，让我们来看看ts的独特魅力吧。结构预览及说明src下新建service文件夹为主文件夹request为封装请求的文件夹con
2021-11-24 19:56:38
5181
2
原创 手摸手教你用webpack搭建TS开发环境
前言最近在学习typescript，也就是我们常说的TS，它是JS的超集。具体介绍就不多说了，今天主要是带大家用webpack从零搭建一个TS开发环境。直接用传统的tsc xx.ts文件进行编译的话太繁琐，不利于我们开发，经过这次手动配置，我们也能知道vue3内部对TS的webpack进行了怎样的配置，废话不多说进入正题。Node 编译TS先讲讲如何运行ts文件吧，最传统的方式当然是直接输入命令tsc xxx.ts当然你必须得先安装过ts，如果没有请执行以下命令npm install ty
2021-10-24 18:32:18
1956
原创 封装hook实现setup中使用mapstate
前言传统的vue2中我们使用optionsAPI使用mapstate很方便，但是vue3使用setup函数中我们想使用mapstate变得比较繁琐，今天我们来封装一个简单的hook，帮助我们方便的在setup中使用mapstate来进行开发，废话不多说，直接看源码吧。源码（附解释）很简单，看看就懂了,大家可以直接拿到项目中使用//useMapState.js hookimport { useStore, mapState } from "vuex"import { computed } fro
2021-10-18 19:42:33
255
原创 小白也能看懂的vue3源码之vue2响应式系统实现
前言最近在学习vue源码中的响应式系统，说实话确实花了点时间去研究它是如何实现的，研究过程也遇到了一些问题，我相信也是大家可能会感到疑惑的问题，经过一番折腾，终于是明白了它的操作，只能说一个字,绝！ 尤大yyds（吹捧一下）现在我们就从零开始实现下吧One Dep类先明白它的作用是啥储存依赖项 subscribes收集依赖项 depend通知更新依赖项 notify首先我们要知道啥是依赖项呢？它的作用是啥？依赖项即我们需要更新该数据所依赖的一些方法和引用 不同的地方调用同一个数据，或者
2021-10-11 17:39:14
297
原创 小白也能看懂的vue3源码之渲染系统实现
前言今天来模拟一下vue3的渲染系统的实现,不太了解这方面的可以认真看看，希望能对大家有帮助渲染系统众所周知vue框架是通过render函数将vue的template模板通过h函数解析成vnode（虚拟节点）慢慢变成了vdom(虚拟dom) 最后转换成真实元素，我们才能真正的在浏览器上看到。今天我们就来手动实现一个简单的渲染器，来探究探究其真正的原理。#mermaid-svg-90hPeR3U1UzJ9RvD .label{font-family:'trebuchet ms', verdana, a
2021-10-10 16:03:02
917
原创 vue3中组件的v-model使用及详解
v-model input中使用双向绑定数据v-model在vue中我们经常用它与input输入框的输入值进行绑定，简单的实现原理大家也应该都知道 通过v-bind绑定value值 及结合@input输入事件动态改变绑定的value值来实现双向绑定，如下vue3实现代码:<template> <input type="text" :value="tryText" @input="handelInput"> <h2>{{tryText}}</h2>
2021-09-25 23:07:20
10050
5
原创 解决 webpack5安装 webpack-dev-serve报错python问题 gyp ERR
安装 webpack-dev-serve执行指令：npm install webpack-dev-server -D发现并没有老老实实给我们安装，而是报了一大堆错误，如下报了一大堆Python相关错误查了一大堆博客都没有找到解决方案最后通过指定版本的方法解决了解决方案指定版本进行安装即可解决执行：npm install [email protected] -D安装成功！！防止大家踩坑...
2021-09-20 12:46:03
390
1
原创 webpack 启航（一）
前言此系列博客记录了学习webpack所需要的一系列配置，由于配置的信息太多再加上其中的细节也很多，一不小心就报错了。在无数次踩坑后总结出学习webpack时会遇到的一些问题，初学者可以看看，大佬可以回顾下，废话不多说，开始正题，整活。安装webpack webpack-cli安装全局webpack 指令 npm install webpack webpack-cli -g运行全局打包指令 webpack配置独立项目最好采用局部安装，大家可以看到后面安装的loader都是局部安装 -D安装局部w
2021-09-18 09:37:34
145
原创 vue如何封装网络请求至原型上，便捷调用提高开发效率？
vue如何封装网络请求至原型上，便捷调用提高开发效率？在日常工作中，我们开发项目必然是要用的Ajax网络请求服务器的数据来开发项目，今天博主就给大家讲讲我在日常开发中如何封装的Ajax网络请求，怎样才能达到最便捷，大大提高我们的开发效率呢？废话不多说，直接进入主题文件结构我通常是建立一个 network文件夹 来看看文件结构吧这里面建立了一个modules模块文件夹，是为了存放我们的请求接口，根据不同的页面来配置不同的接口 例如首页接口 登录接口等等… 下面来看看各文件吧request.js 封
2021-07-11 19:26:11
463
原创 vue使用fomdata数据格式上传图片，实现头像上传功能
fomdata数据格式上传图片，实现头像上传功能直接上源码吧，不废话了布局上用到了element-ui的弹出框组件 大家有需要可以下载下<template> <div> <div class="content-table-account"> <table> <tr> <td class="account-name">头像</td> <
2021-06-26 20:23:44
286
原创 使用chrome浏览器调试器DeBug
前言本篇博客主要在于教学如何使用chrome浏览器对代码进行调试，对于遇见bug的时候能更快的找到并处理。如果你是前端小白，不太会调试，可以看看哦。当然希望大家写代码永不遇见BUG，哈哈。废话不多说，开搞。操作F12打开控制台，选择sources找到你写代码的文件如图设置断点(观察你需要进行的数据的时刻变化),设置方式很简单，只需要单击下对应行号就行了。我这里写了个按钮事件，单击减少值得变化，对应不同值进入不同的if条件里面，让我们来看看吧 let num1 = 100 fun
2021-06-26 19:32:18
5847
1
原创 时间戳如何转换为时间字符串？附原理解读实现
时间戳如何转换为时间字符串我们在开发过程中往往会遇到需要显示日期的情况，这个时候我们一般去服务器拉取数据，而服务器返回给我们的是一堆数字，也就是所谓的时间戳。比如在做评论模块时，需要显示评论时间等等。这个时候我们该怎么处理时间戳变成正常的显示方式呢？时间戳的数字计时从1970年1月1日0：00开始，现在基于我现在的时间最新数据为： 1606790769311。这么大一串数字我们该如何转换呢？下方实现请慢慢揣摩。源码实现function formatDate(date, fmt) {
2020-12-01 11:26:55
3106
2
原创 uniApp怎么获取用户登录授权
uniApp获取用户登录授权在小程序里我们获取用户登录授权可以通过给按钮设置opentype 再设置bindgetuserinfo 便可以实现了，如下图所示。那么uniapp该怎么实现呢？其实uniapp也给我们封装了这个方法属性 只需要把bind换成@就可以了，大部分原生小程序里的方法属性都都已通过bind修改成@来实现，如图所示。这样我们就好了，可是我们一点击就会发现报错getUserInfo:fail 系统错误,错误码:1,这是什么问题呢？很多小伙伴会怀疑上面的方法属性的用法错误，其实不
2020-11-26 13:18:57
3537
2
原创 冒泡排序解读
冒泡排序说起冒泡排序大家肯定都不陌生，今天就带大家来解读下它究竟是怎样实现的，它的原理又是什么以及怎样去充分理解它。冒泡排序的作用简单明了就是排序，下面我们来手写一个冒泡排序实现数组从小到大排列。写之前我们得先想想怎么实现？1.比较前后项的值，大于则调换两者位置2.比较次数的考虑 怎样比较才能让数组里的所有值都进行了比较3.怎么过滤掉不必要的比较我们可以这样想 我们分为两次循环嵌套实现第一次循环的目的是排布好的次数 比如有5个值 那么我们只需要排布好4个值那么就排布好了，最后一个值已经是正确
2020-11-02 16:49:32
239
原创 深浅拷贝的终结
废话不多说，今天让我们来实现先深拷贝和浅拷贝浅拷贝浅拷贝是最常见的，我们通常对复杂类型的赋值操作基本就是浅拷贝。例如这样修改hobby对象里的复杂类型的值时，copy对象对应的值也会改变这里的hobby对象的mes中的num改变，copy中的也改变了现在让我们来封装一个方法来实现浅拷贝利用for in循环遍历key值赋值给新对象的相应属性我们可以发现id值就hobby变了，mes.num则是全变 说明成功实现浅拷贝了我们修改基本类型的值是不会影响拷贝的，修改复杂类型就会发生改变，原理
2020-10-28 09:44:43
73
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人