- 博客(59)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 使用vue实现自己音乐播放器仿网易云 移动端 （audio、播放、暂停、上一首、下一首、展示评论、音量控制、进度条拖拽）
最终实现成果展示1.播放 暂停功能的实现这是audio标签<audio @timeupdate="updateTime" @canplay="getDuration" @ended="ended" :src="musicUrl" ref="audio"></audio>这是播放和暂停图标<div class="pause" v-show="isPlaying" @click="pauseSong"><i class="fa fa-pause">&
2020-07-08 17:06:24
9361
6
原创 将Nodejs和Vue全栈项目部署到阿里云Centos服务器
1.购买一个服务器（1核2G及以上配置）阿里云对学生的优惠很大。1核2G ECS云服务器一年只要115左右。一定要配置安全组规则。打开80端口，443端口（如果后续要配置ssl证书实现https访问），21端口（进行ftp连接）。 同时还可以打开后端代码监听的端口，这样当代码放上去运行之后输入域名加端口就可以进行访问2.购买一个域名第一次购买有优惠。如果不是顶级域名几块就能搞定~。顶级...
2020-03-01 12:48:07
2519
2
原创 Ant Design Form表单组件手动清楚校验信息（提示文字及红框）
当我们的表单项是按条件验证的情况，或者该表单项是不可编辑然后是关联赋值（比如选择某个下拉框，赋上关联值），并且你还先点击了按钮进行验证，那么即使赋上了值也不能触发该表单二次验证。所以就需要我们进行手动取消校验信息。
2023-10-19 14:19:16
1303
原创 解决Antd 二次封装表格的可编辑功能(editable table)不生效的问题
使用了Antd Table组件，因为需要自定义的筛选功能，进行了二次封装。之后加上了可编辑行功能，当点击编辑图标，发现表格并不会有任何变化。代码：</
2023-10-18 16:03:07
611
原创 React项目使用husky lint-staged 进行代码提交前的检查
如果遇到多个.git文件夹不在项目根目录的情况，那么只需要执行一下路径即可官网示例。
2023-05-07 12:52:26
354
1
原创 React项目配置https启动（Windows）
在开发工程中会有需要https的情况，比如登录使用okta，并且使用本地ip打开项目，那这个时候点击okta登录会提示必须使用https的方式虽然提供的有，但是不够完善。没有教我们如何生成SSL证书下面就跟着本片文章来一起实现https启动项目吧~
2023-05-07 12:25:55
668
原创 React使用Jest + React Testing Library进行单元测试时配置路径别名
如果你在测试文件里用的路径别名的方式去引入组件或者函数，那么。配置以下路径别名，让它也能识别到。会直接说找不到该模块。里添加以下配置即可解决。
2023-03-31 11:41:12
186
原创 使用React + Antd4.x + React Router 6.x 封装菜单(多级菜单)和动态面包屑
使用React + Antd4.x + React Router 6.x 封装菜单(多级菜单)和动态面包屑
2023-03-31 10:41:12
2517
2
原创 修改nginx的默认访问页面
造成这个的原因是nginx有一个默认访问的配置，只需要改一下就好了。通过ip访问页面时可能会遇到如下情况，无法正常显示网页。
2023-03-20 12:05:55
2627
1
原创 解决antd form组件给input赋初始值为空的问题。
开始我用的属性，但是当这个属性遇到异步数据时就不起作用了，因为他取值在之前。所以解决办法就是在多加一个属性，并且值要时默认值。这样就能在接口返回数据后重新了，就能展示最新的数据了。...
2022-06-14 15:55:48
1540
原创 React 监听Redux的数据变化时，重新发起请求
当项目语言切换时，对有些接口是需要进行重新请求的，里面的属性发生了变化，接口就会依照lang属性返回不同语言的结果。为我们提供了订阅事件，能够让我们在数据发生变化时在它的回调函数里进行操作，然后再配合我们的钩子即可实现该功能。：...
2022-06-08 09:54:14
2308
原创 解决typescript报错：不能调用可能是未定义的对象
背景：当我们在react中封装组件并复用时，会传不同的props，那么自然有些props是不需要传的，所以在定义interface的时候需要加个问号。但这也就引来了标题的报错！模拟一下报错代码：// 父组件const handleVisible () => {}export default function Father(props: IProps) { return ( <Child/> <Child handleVisible={handleVisibl
2022-05-25 18:29:05
6597
3
原创 React项目里全局使用SCSS
我们要实现的目标是，定义的scss变量能在所有scss文件里自动引入，而无需手动引入。首先我们需要安装craco-sass-resources-loader sass sass-loader这些依赖 npm i craco-sass-resources-loader sass sass-loader之后在craco.config.js文件里进行配置const cracoSassResourcesLoader = require('craco-sass-resources-loader')con
2022-05-19 13:22:53
2491
原创 React Router V6实现嵌套路由重定向
react router在v6版本取消了<Redirect/>，并使用<Navigate to=''/>实现重定向功能。一级路由重定向比如访问localhost:3000/ 重定向到 localhost:3000/homepage，我们得这样写：const routerMap = [ { path: 'homepage', element: <Homepage/> }, { path: '/', element: <N
2022-05-18 12:01:43
5221
5
原创 React学习记录（二） - state的用法以及类组件中this执向
我们可以用一个实际案例去开启本节：页面有一个标签，内容为 今天天气很炎热，当点击标签时切换为凉爽在Vue中我们直接使用@click=‘isHot ? "炎热"’ : "凉爽"实现切换，isHot要在data里面去定义。但在React中我们如何去实现呢？直接上代码，然后解析吧<body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@17/umd/rea
2021-12-07 11:49:32
270
原创 Reac学习记录（一） - 函数式组件与类组件
函数式组件直接以函数的方式声明，并且返回的组件内容（JSX语法）]以下代码拷贝可直接运行：<body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom
2021-12-06 17:19:47
105
原创 Nuxt搭建项目 - 在vue单文件中不引入scss文件直接使用scss变量的方法
为什么使用日常开发时，当我们想在vue单文件中使用全局的scss变量，我们通常会将整个文件通过@import的方式引入进来，这非常繁琐。在vue cli创建的项目汇总，我们通常使用style-resources-loader来解决。但我们使用Nuxt创建的项目并不支持这样做。所以nuxt-community给我们提供了一个工具：@nuxtjs/style-resources。它的出现就是项目no @import needed具体使用方法安装:npm i @nuxtjs/style-reso
2021-11-30 14:41:28
610
原创 如何在vue-cli创建的uniapp项目中使用scss
官网是这样说的：cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。所有我们只需安装node-sass和sass-loader即可正常使用scss执行以下命令：npm i [email protected] sass-loader@7 -D...
2021-11-29 15:03:50
1598
1
原创 git代码只合并部分分支的方法
在开发分支develop上git log，打印出每次提交日志，以及提交的commitID。然后切换到要合并的master分支，git checkout master。使用git cherry-pick commitId命令即可单条合并
2021-11-04 14:35:49
863
1
原创 一个电脑同时使用github与gitlab
需求：个人用Github，公司用Gitlab1. 生成sshkey使用ssh-keygen -t rsa -C "公司邮箱地址" -f ~/.ssh/公钥名字建议github的私钥文件名为id_rsa_github，gitlab的私钥文件名为id_rsa_gitlab。这样方便区分。2. 添加sshkey这一步直接进设置页面，找到SSH Keys，进行添加即可3. 添加config配置文件在.ssh文件夹下新建 config文件填入一下内容：注意xxx的地方！# 自己的github账号配
2021-10-26 22:19:19
179
原创 CentOS 8.0 64位安装Docker 以及 Docker Compose
1. 安装Docker执行sudo curl -sSL https://get.daocloud.io/docker | sh执行完之后输入docker -v 查看是否有对应的版本号，有的话则表明安装成功2. 安装Docker Compose官方文档执行sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/l
2021-05-19 10:15:33
240
2
原创 项目解决问题记录：兼容win7下IE7，页面缩放后，整个页面保持不变
1.需求公司是做的汽车检测整套软硬件设备。检测过程中的视频要和车管所进行对接，所以专门有个检测视频管理系统。现在浙江那边的车管所要求页面在125%、150%比例下，整个页面保持不变，仅仅是左侧菜单的文字跟随缩放比进行变化。页面如下：页面结构如下：2. 解决思路拿到页面的缩放比，在window.onresize事件里监听页面缩放变化。获取页面能看到的所有dom，让它的宽、高、字体大小都按照 正常缩放比下的大小 / 当前页面缩放比例。左侧区域宽度默认是280px。整个右侧区域是定位到右边的le
2021-05-17 11:31:21
406
原创 echarts v5版本新特性。让图表进行自适应/响应式排列。
最近在做公司项目时，UI图要求饼图在大屏幕2X2排列，在小屏幕1X4排列。最开始想到的方法是用一个变量判断是否是小屏幕，在resize事件里改变它的值，这种方法实现有个弊端就是要刷新才起的了效果。于是我想去 官方文档 看看有没有解决方案，还真让我找到了。echarts版本必须在 5.0.0 以上，否则会报错！主要实现配置的配置项：在options里面设置media。第一项里设置query: { minAspectRatio: 1}minAspectRatio表示最小纵横比，也就是屏幕的宽高比。.
2021-04-26 16:03:05
614
原创 最详细的Vue实现日历组件Calendar（日期点击多选，滑动多选）
1. 成果演示1.1 日期的切换1.2 点击多选1.3 滑动多选2. 实现基本的日期渲染2.1 思路2.1.1 要用到的Date对象方法new Date(2020, 4, 1).getDay() 计算传入的日期是星期几，返回值0表示星期天，1表示星期一，以此类推…new Date(2020, 4, 0).getDate()计算传入月份的该月总天数，第三个参数为0才是计算总天数！！2.1.2 剖析日历日期结构一个日期表格六行七列，共42个日期，这个是固定的（重要！）一般情况
2021-04-01 15:28:58
12887
20
原创 Vue3+TypeScript实现网易云音乐WebApp(解析歌词，并实现自行匹配滚动)
前言最终实现效果gif：这篇文章实现了gif里的其他功能1. 实现思路解析歌词 拿到歌词数组 ->lyricArr = [ {time: 0, lyric: '给我你的爱'， uid: 111222}, {time: 1.2, lyric: '可以不可以'， uid: 222333}, {time: 4.45, lyric: '啊WDNMD'， uid: 333444},]渲染歌词dom -><span class='' data-ind
2021-03-26 11:00:43
1488
原创 Vue3+TypeScript实现网易云音乐WebApp（播放界面：播放、暂停、音量控制、播放进度控制(点击/拖拽进度条)、上一首、下一首）
1. 成果展示真实接口地址 本项目使用的是真实线上的网易云API线上演示地址 目前只做了每日推荐（需登录）以及排行榜功能，点个star吧大佬们！项目GitHub地址 new分支是Vue3+TypeScript， master分支是去年用Vue2写的页面功能简单分析（具体实现往下滑）头部 - 路由跳转以及歌曲信息旋转图片部分 - 用歌曲是否播放控制图片的旋转（添加css类名即可）歌词部分 - 控制包裹歌词的div的transform: translateY(0px)属性。audio标
2021-03-26 10:58:58
2374
1
原创 Vue3获取组件实例getCurrentInstance()打包上线报错的解决方案， u.ctx._debounce is not a function
Vue3里常规挂载方法/属性以及调用在Vue3的开发过程中，难免会在全局挂载方法或者属性。挂载：// main.tsimport App from './App.vue'import _ from 'lodash'const app = Vue.createApp(App)app.config.globalProperties._debounce = _.debounce使用：// App.vuesetup({ const instance = getCurrentInstance(
2021-03-18 14:40:03
5650
5
原创 Vue3+TypeScript项目构建之实现自定义指令v-loading， axios请求时的加载动画
最终实现效果可以实现提示文字和背景颜色的自定义xzw-loading-text=‘别急嘛~’ // 默认为加载中xzw-loading-background=‘rgba(0, 0, 0, .4)’ // 默认背景色为rgba(255,255,255,.8)创建自定义指令函数路径：/src/directives/loading/index.tsVue3与Vue2的自定义指令钩子有了很大的改变改变，详情戳链接Vue3自定义指令钩子created - 新的！在元素的 attribute
2021-03-12 10:59:40
1700
1
原创 解决在typescript里获取axios返回值报错的问题，Property ‘profile‘ does not exist on type ‘AxiosResponse＜any＞‘
如果你是用的vuecli创建的项目，那么请在res文件夹下新建axios.d.ts文件，添加以下内容：/* eslint-disable no-undef *//* eslint-disable no-unused-vars */import * as axios from 'axios'declare module 'axios' { interface AxiosInstance { (config: AxiosRequestConfig): Promise<any>
2021-02-23 11:34:19
9293
1
原创 Vue3+Typescript项目构建之封装axios并防止重复请求
1. 封装axios请求在utils文件夹下新建request.ts文件，专用于封装axios，对于使用vue2+js的开发者，封装axios并不难，看代码都看得懂。这里我主要想展示一下如何防止重复请求。2. 防止重复请求思路：把每次请求的url存到一个数组，循环判断当前url是否已经存在，如果存在就取消当前请求，如果不存在就存进去并正常执行请求。并且正常之后要把这次请求的url从数组里删除掉。要不然之后都无法再次请求该地址。所以我们需要定义一个数组存放请求类别const reqList: a
2021-02-22 14:10:58
1257
原创 Vue3+Typescript项目构建之Vuex模块化搭建（vuex-module-decorators）
相比起Vue2项目构建Vuex模块化，Vue3 + Typescript构建Vuex模块化有着很大的不同。安装vuex-module-decorators这是一个帮助我们快速安全高效构建Vuex模块的npm包，官方文档。npm install vuex-module-decorators# oryarn add vuex-module-decorators在Vue CLI创建的项目中，记得在vue.config.js配置里添加转译配置(ES6 to ES5),并且兼容IE11。// vue.
2021-01-30 15:55:39
1871
1
原创 Vue3 + TypeScript项目构建之VantUI（V3版本）按需引入
1、安装所需插件1.1 ts-import-pluginnpm i ts-import-plugin -D因为使用的是typescript，所有就不用babel-plugin-import插件了1.2 webpack-mergenpm i webpack-merge --save-dev2、在vue.config.js里进行配置const tsImportPluginFactory = require('ts-import-plugin')const { merge } = require(
2021-01-29 15:40:21
1357
1
原创 ElementUI的el-talbe表格组件checkbox列回显接口数据（默认选中,并有高亮颜色），点击行实现勾选checkbox，隐藏表头的全选checkbox。
表格绑定的方法和全局数据一览<el-table ref="table" class='myTable' :data="tableData" border style="width: 100%" :row-style="rowStyle" :cell-style="rowStyle" :header-cell-class-name="handleHiddenCheckbox" @row-click="handleClickRow" @selection-chan
2020-12-16 14:56:57
1190
原创 Vue3 文档学习笔记
vue3学习笔记setup()生命周期的与vue2的不同点在：beforeCreated、created都在setup()里进行默认调用，其他的都要写在setup()里面，算做compositionAPI。props由父组件传过来的值会自动被响应式，不用再去reactive包一层（注意不能在子组件里直接修改props的值）。setup()的第一个参数是props(不可进行解构，否则会丢失双向绑定)，第二个参数是context,有3个值 attrs,slots,emit,(可进行解构)props:
2020-12-15 10:36:14
615
原创 使用Github jsdelivr以及PicGo搭建私人免费快速图床
0. 安利：jsdelivr真滴快最近把公司项目里的cdn源换成了jsdelivr的，那是真滴快，他说第二没人敢说第一嗷。1. 创建图床仓库在GitHub里创建一个存放图床的仓库，并建一个imgs文件夹。（这步应该都会吧）2. 生成Access TokenGitHub点开个人头像并点击，然后依次操作 Settings --> Developer settings --> Personal access tokens，点击生成一个token（应该是蓝色文字）。进去之后添加note（
2020-09-02 14:51:50
190
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人