- 博客(202)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 移动端小程序app封装message弹窗提示组件全过程
message弹窗组件在开发中使用非常频繁，很多操作的成果，警告，失败都需要进行提示，虽然大部分ui组件库都很方便的message提示弹窗，但是在ui定制化开发中，封装自己的组件是很有必要的，并且学会封装组件也是学习前端过程中必不可少的一部分。
2023-02-09 09:30:39
1015
1
原创 uniapp中使用Tag标签和input输入框连用，tag进行标签选择，使用input能够创建标签（uview）
最近写uniapp，遇到了产品的提的需求，需要做一个tag+input连用的功能，点击Tag进行选择，使用input可以进行tag的修改和创建，先来看看产品提的设计稿：大概是一个这样的功能，我开始理解错了以为是在input中显示tag，类似element-ui中有的select选择器，但实际这只是进行tag和input的连用，看下面的设计稿应该能看懂逻辑。
2023-02-08 21:03:09
4550
原创 uniapp中获取dom元素的方法，更改dom元素颜色（遇坑记录）
最近写uniapp，遇到一个需要获取到页面中dom元素，我第一反应是使用this.$ refs进行获取，于是我开心的使用this.$refs写了很多代码，使用h5调试的过程中没有发现任何问题，但后来真机调试的时候发现在app端无效，于是我查看文档发现了：非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）
2023-02-08 20:36:18
13695
7
原创 uniapp中app真机模拟以及小程序编译后css样式异常失效问题原因及解决方案
最近写使用uniapp写app，开发的时候写样式都是使用浏览器h5进行调试一切正常，但是最后进行手机真机调试的时候css样式出现了异常，本文归纳常见的问题比如在h5页面显示正常：但是在真机调试app的实现则显示：vue页面在App端的渲染引擎默认是系统webview（不是手机自带浏览器，是rom的webview），在较老的手机上，比如Android4.4、5.0或iOS8，一些新出的css语法是不支持的。注意这不意味着不能使用flex，Android4.4也支持flex，只是不要使用太新的css。可以找An
2023-01-01 23:31:33
10692
1
原创 uniapp小程序手写封装popup弹窗message提醒框组件
在写uniapp小程序的时候，弹窗提醒经常会用到，虽然弹窗的组件很多，但是通常别人封装好的弹窗组件自定义度不高，很难匹配自己的ui需求。所以本篇文章教大家封装自己的弹窗提醒组件。
2022-12-27 23:20:30
3053
原创 uniapp小程序手写tab导航栏切换（点击切换样式，动态样式绑定）
最近写uniapp，ui里面有一个导航栏切换的逻辑，因为要跟UI保持一致，对于组件库很难实现高度定制，所以这里就自己手写实现一个点击切换的导航栏。先看下图效果：主要实现的是通过点击切换导航栏，并且样式有一个切换的效果，大家可以根据自己的需求进行样式的DIY。
2022-12-27 20:49:13
3258
2
原创 uniapp实战仿写网易云音乐(三)—视频页面（scroll-view组件实现横线滑动，mescroll-uni实现视频列表，向下滑动刷新当前页面）
接着上篇文章继续完成剩下的部分，本篇文章是完成第二个页面——视频页面的部分，视频还是没有做播放的效果，主要是做展示效果。uniapp实战仿写网易云音乐(一)—底部工具栏以及首页轮播图swiper的实现uniapp实战仿写网易云音乐(二)—promise接口请求的封装和主页功能的实现，组件封装，配置下拉刷新文章底部会附上本页面的cssok到这里就实现了第二个页面的内容，后面会继续更新剩下的页面，感兴趣的可以点一个订阅关注呀~~
2022-12-17 22:24:57
2224
1
原创 Java基础刷题练习合集持续更新（判断素数，水仙花数，斐波拉契数列递归，闰年，大小写字母，顺序查找，折半查找）
本篇文章主要收集几个比较常见基础的编程题，适合刚学习Java基础或者复习Java语法的同学进行练习。本专栏后期会更新Java算法相关的知识，感兴趣可以订阅关注~本篇文章会持续更新，比较基础适合刷题练习的我都会加进来，后续会继续更新java算法编程，难度会慢慢加，本文只适合基础刷题，有兴趣可以关注~~~
2022-12-15 23:13:04
191
原创 uniapp实战仿写网易云音乐(二)—promise接口请求的封装和主页功能的实现，组件封装，配置下拉刷新
本篇文章继续完成上篇文章的部分，主要实现prromise接口的封装和首页主入口的实现到此首页基本实现了后续会继续完成其他页面，持续更新，感兴趣可以订阅本专栏。
2022-12-12 17:01:28
945
2
原创 uniapp实战仿写网易云音乐(一)—底部工具栏以及首页轮播图swiper的实现
从本篇文章开始记录uniapp实战仿写网易云音乐项目的过程，主要会写一下关键步骤和难点，本专栏会保持持续更新，并在最后送上源码，感兴趣的可以订阅本专栏。本篇主要实现的是首页tab栏以及图片滚动区域。本文内容到这里就结束了，下期会带大家继续完成首页部分的功能和一些细节，并且完成api的封装。
2022-12-12 12:15:17
1215
原创 uniapp中如何使用vuex进行状态管理（登录小案例讲解）
本篇文章来讲解uniapp中如何使用vuex来实现状态管理，后面会讲实现登录状态管理的案例。如果之前学过vuex全家桶的同学那应该没啥问题，在uniapp中使用vuex和vue中基本是一样的。Vuex从了解到实际运用，彻底搞懂什么是Vuex（一）Vuex从了解到实际运用（二），获取vuex中的全局状态（state，getters）链接。
2022-12-10 20:39:44
1926
原创 uniapp中tabBar菜单栏的实现以及页面常用的生命周期（菜单栏颜色切换）
本篇文章带大家使用uniapp通过小案例实现tab菜单栏的切换，并对页面中常用的生命周期进行介绍。本专栏会继续给大家带来uniapp的基础知识，后续也会有项目的实战的内容，感兴趣可以关注一波~
2022-12-09 22:56:20
4031
原创 uniapp组件传值的方法(父传子，子传父，对象传值)案例
最近看到uniapp组件传值的方法，这里记录一下，学过vue的应该都觉得很简单，传值的方法基本与vue的写法差不多。
2022-11-29 18:20:33
9815
原创 uniapp小程序实现上下固定中间滑动布局(附源码和实现过程讲解)
上下固定，中间可以上下滑动是移动端中非常常见的布局，实现的过程在本篇记录一下。
2022-11-06 23:01:15
2350
原创 快2023了你不会还没学uni-app吧？（uniapp开发快速上手，uniapp项目创建，基础目录介绍）
uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到14个平台，听起来是不是非常厉害，如果你后面想从事前端开发，这个技术栈那必须得了解，本篇文章就带萌新快速上车下面给大家介绍一下一个基础的uni-app的项目结构以及各个文件都是干啥的打开刚刚新建的文件目录，文件不多，下面一 一介绍pages文件夹，顾名思义里面存放的是页面，默认里面包含index文件夹和下面的index.vue页面。
2022-11-06 20:36:31
1128
原创 vue3+antd中使用Dayjs实现输出的日期格式化，和限制自定义日期选择器的可选范围
在vue3+antd项目中我们需要对日期数据进行格式化，通常大家会想到moment，但是在antd的v3版本中自带dayjs，强大的Day.js也拥有非常强大的日期数据格式处理的api，本文就来讲解如何在项目中进行使用
2022-10-31 21:08:27
3856
1
原创 nodejs的express框架中如何对用户密码进行加密存储（md5加密存储用户信息）
一开始实现注册功能，可以看到数据库的数据如下：密码是直接显示出来的但实际操作中，我们需要把用户的密码进行加密再存储到数据库中来保证数据的安全性本节就来介绍如何使用md5对用户的密码进行加密存储。
2022-10-24 11:18:12
1160
原创 使用express-validator中间件，实现客户端提交数据的安全校验
这样我们就完成了提交数据的校验，如果邮箱和手机号已经注册，我们就会返回提示响应的错误信息，这样的场景很多，只要提交的数据需要校验，我们都可以这样封装进行操作~在后端实现用户注册功能的时候，如果手机号或者邮箱已经被注册，我们应该进行检验的提示，在node的express框架中，我们就需要这个中间件俩解决。首先使用命令安装express-validator中间件。这里的User是我封装的数据库中用户的数据模型。使用错误格式的邮箱进行注册就会返回如下信息。封装完成之后我们就能直接在路由进行使用了。
2022-10-24 00:31:09
2591
原创 Node.js连接MongoDB进行增查删改的操作（举例说明）
本节主要是讲的Node.js连接MongoDB进行增查删改的操作，首先进行链接，然后使用语句进行对应的操作。
2022-10-09 18:58:54
1027
原创 MongoDB数据库中如何使用Mongo Shell，使用Navicat软件连接MongoDB
Mongo Shell是MongoDB提供给我们能够连接到MongoDB的一个服务，内置了一些关于数据库的指令，我们可以通过指令进行对数据库的操作。
2022-10-06 23:12:01
2704
原创 什么是MongoDB数据库，MongoDB数据库保姆级安装教程
当前数据库主要分为关系型数据库和非关系型数据库。关系型数据库有Oracle、DB2、Microsoft SQL Server、Microsoft Access、MySQL等。非关系型数据库有 NoSql、Cloudant。而我们现在讲的就是非关系型数据库MongoDB：一个基于文件存储的分布式NoSQL数据库系统数据结构由键值对（key, value）组成拥有非常强大的查询能力
2022-10-06 22:18:07
1210
2
原创 vue3+TS实战中Dialog弹窗封装复用技巧（修改和添加共用一个弹窗）涉及组件的传值（defineProps）和组件的自定义事件（emits）
组件的功能封装是前端工程师的必备技能，Dialog弹窗在后台管理系统中是使用频率非常高的组件，添加和修改数据基本都会用到，本文就讲讲在vue3和ts的项目中如何封装Dialog组件，实现代码高复用.
2022-09-18 18:58:57
6151
2
原创 学会nodejs中express框架进行get和post请求，如何获取和增加用户数据？(express的安装以及实战案例讲解)
本篇文章主要介绍node.js中如何使用express框架进行get和post的请求。本文案例中将数据存放在本地文件中，使用get和post请求对文件进行读取和添加数据，模拟实际开发中的情形。如果不太了解node基础的，可以先去看我的另一篇文章node.js新手入门—教你写属于自己的接口get和post请求基础详解本文主要介绍了express框架中进行get和post请求的处理，在实际开发中无非就联动数据库进行增查删改，以及实现其它的业务逻辑。
2022-09-16 23:42:01
3023
原创 node.js中HTTP不同请求方法的处理(GET,POST)，如何获取GET,POST请求中的参数
本文以原生nodejs切入，介绍在http中不同请求方法的处理，以get和post请求举例，如何获取请求中的数据
2022-09-14 21:53:09
2861
1
原创 浅尝Vue最新状态管理工具Pinia(实战使用Pinia管理登录状态)
浅尝Vue最新的状态管理工具Pinia,通过实战中使用pinia管理登录状态的例子让大家更清晰的理解pinia的使用
2022-09-05 16:31:47
4754
2
原创 Vuex从了解到实际运用（二），获取vuex中的全局状态（state，getters）
上篇文章给大家讲了什么是Vuex以及Vuex的核心特点，这篇文章就带大家了解实际项目中如何使用Vuex。如下图，App.vue中我们引用了两个子组件。然后我们在store中定义一个数据，让两个组件都能访问到import {state : {name : "张三" , age : "18" } , {name : "李四" , age : "17" } , {name : "王五" , age : "20" } , ] } , mutations : {} })...
2022-08-18 18:05:49
1654
原创 Vuex从了解到实际运用，彻底搞懂什么是Vuex（一）
在学习Vue的过程中，是不是经常听到Vuex呢，什么是Vuex，如果使用Vuex，有哪些骚操作，下面给大家一 一解答
2022-08-17 21:59:14
367
原创 vue中jest单元测试使用功能初探
今天给大家介绍了jest单元测试简单的功能使用方法，后面还会给大家继续带来相关的内容。如图这里是在jest配置文件中，这段单元测试的代码意思是找到a标签，看它是否有三个。在使用脚手架创建vue项目的时候，我们可以选择使用jest单元测试。可以看到测试不通过，并且反馈了比较详细直观的错误提示。使用yarnjest命令进行启动单元测试。下面在jest单元测试中进行测试。如图所示运行的测试结果没有问题。我现在把a标签删除再来测试。这里循环出来了三个a标签。...
2022-07-15 17:13:57
496
原创 vue中echarts实现双图联动展示数据，折线图+饼图（附带源码）
前言最近写项目，有一块功能需要使用双图进行联动的展示，左边折线图，鼠标移动折线图焦点，能把每个点的数据情况展示到饼图上，这里记录一下，希望对大家有帮助实现的效果：实现步骤：首先先实现折线图的部分：option = { color: ['#c6e8ad', '#00DDFF', '#37A2FF', '#FFBF00', '#f3a19e'], legend: {}, tooltip: { trigger: 'axis', showContent:
2022-05-03 23:59:14
5766
5
原创 在原react项目中集成使用Redux（使用步骤总结）
文章目录前言安装Redux新建使用Redux的相关文件全局使用Redux在导航页面进行使用，完成功能最后前言之前写的一个react项目，需要在里面使用Redux，记录一下实现的步骤安装Redux要在项目中使用，所以先来安装一下redux 和 react-reduxcnpm i -D redux react-r这里是使用redux完成这个项目中菜单的一些功能，下面列举的新建文件相关的功能在之前文章有说明，这里就不叙述了新建使用Redux的相关文件在 src 目录下新建 store 文件夹用作
2022-04-08 07:30:00
1457
原创 JS基础对异步的理解，什么是异步，异步的使用场景（面试必考）
关于异步这一块的内容，基本是前端的必考知识，这篇文章来讲讲基础的异步理解，从js单线程的特性理解异步的出现以及promise基础的使用方法，希望能对大家有所帮助
2022-04-06 22:11:28
2114
原创 在react项目实战中使用Redux（案例讲解）
前言上篇文章讲解了redux的基本使用方法，这篇文章通过小案例教大家如何在实际的react的项目中实现redux，加深对redux的理解和掌握，基础内容不清楚的可以看看上篇文章——》 Redux的基础用法详解（纯函数的概念）项目中使用Redux这里就新建项目然后使用redux完成一个小案例首先新建项目然后删除掉冗余代码，之后在src文件夹下新建一个pages文件夹,在文件夹下新建一个alipay.js和wxpay.js,然后我们来实现一个这样的需求:比如我们的微信和支付宝都绑定了同一张银行卡,当我
2022-04-05 18:43:36
2319
原创 Redux的基础用法详解（纯函数的概念）
前言和vue中的vuex一样，react也有进行状态管理的工具，最近自己在学习这一块的内容所以在此记录一下什么是ReduxRedux是JS的状态容器,提供了可预测的状态管理。JavsScript的状态容器就是装状态的容器,React中,状态就是state。因此我们所谓的JS的状态容器就是去存储状态state的容器。通常在大型项目中使用Redux进行状态管理为什么需要ReduxReact管理不断变化的state是非常困难的,需要通过constructor去定义state,要通过this.setSt
2022-04-04 08:00:00
1333
原创 react-antd中表格的使用(数据的请求，带删除功能的表格)
最近在学习react-antd框架，表格这一块在项目中的使用频率很高，最近在学习这一块的内容，所以记录一下
2022-04-03 07:30:00
5351
原创 搞懂JS中作用域和闭包的使用（下）（讲讲面试题）
前言上篇文章讲了作用域，闭包还有this使用的一些基础知识，不太清楚的朋友可以点下面链接查看：搞懂JS中作用域和闭包的使用（上）（基本定义）本篇文章就继续围绕这些知识点，来讲讲面试真题，帮助大家更好的去理解真题举例：this有哪些不同的运用场景，如何取值？普通函数中调用，this是windowcall，apply，bind会改变this指向，绑定谁，this就指向谁作为对象方法调用，this就是当前对象class里的this是，class实例本身箭头函数 => ，this是上一级
2022-04-02 08:00:00
344
原创 react-antd中使用Upload实现图片裁剪-上传-预览的功能
前言使用react中antd实现图片的上传裁剪和预览，记录一下实现过程，希望能对大家有帮助实现我们这里用到的是antd框架，实现图片上传的功能我们需要安装一个插件antd-img-cropyarn add antd-img-crop然后就可以进行使用：import React, { memo, useState } from 'react'import { Upload } from 'antd'import ImgCrop from ' 'export default memo(
2022-04-01 07:30:00
2857
1
原创 react-Ant Design框架中基础对话框和信息确认框的使用
前言在项目中，对话框和确认框是使用频率很高的组件，这里记录一下react-Ant Design框架中它们的基础用法基础对话框首先要按需引入我们需要使用到的组件：import {Card, Button, Modal} from 'antd'定义两个按钮，控制基础对话框的弹出：<Card title="基础对话框"> <Button type="primary" onClick={() => this.handleOpen('showModal')}>Open&
2022-03-31 08:30:00
3197
1
原创 creat-react-app项目修改webpack的配置项，通过配置自动实现antd的按需加载
craco对于creat-react-app创建的项目，我们想要修改其webpack的配置就需要用到craco，这里先进行安装：npm install @craco/craco --save目前建议6.2.0版本，我使用的是6.2.0比较文定，没有出啥问题配置文件安装好craco之后，我们需要设置配置文件来修改webpack这里我写一个例子：项目中全局加载antd的css，通过修改webpack能让它自动读取，而不需要手动进行引入新建craco.config.js文件首先在项目根目录创建c
2022-03-30 22:59:33
960
原创 react-Ant Design框架项目中文字轮播与图片轮播的实现
前言在react-Ant Design框架项目中实现文字轮播和图片轮播，在这里记录一下，实现过程有一点小坑需要注意文字轮播图实现在Ant Design里面使用轮播图就需要使用Carousel组件首先要把用到的组件进行按需引入import {Card, Carousel} from 'antd'然后写内容：使用Carousel标签包裹轮播的内容，标签上autoplay作用是设置自动播放export class Index extends Component { render() {
2022-03-30 22:37:14
2332
原创 搞懂JS中作用域和闭包的使用（上）（基本定义）
文章目录前言作用域和自由变量闭包this的赋值情况最后前言什么是作用域？什么是闭包？这些都是前端面试中常考的问题，今天就来总结一下作用域和闭包的内容作用域和自由变量作用域：作用域可以理解为某个变量合法的使用范围 ，如下图的函数，我给他加上了一层层的红框，每层定义的变量都有它自己的使用范围作用域分为以下三种：全局作用域代码中直接写一个变量，变量没有受到约束，在全局可以使用函数作用域在函数中定义的变量，只能在函数中使用块级作用域（ES6新增）在 if(true)中定义的x变量，只能
2022-03-29 23:11:21
393
vue中如何使用loading加载动画
2022-05-05
TA创建的收藏夹 TA关注的收藏夹
TA关注的人