- 博客(34)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 axios的二次封装及使用
一、为什么要进行封装通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加。api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护。举个例子，当axios发生问题存在重大bug时,我们只需要修改封装部分代码即可修改全部接口（当然我们再次封装的请求需要使用现有参数格式）。二、封装具体实现import axios from 'axios'/** * @Author：Mr. Zhao * @Date：2021.1.20 * @Description: axios配
2021-01-20 21:47:14
3294
原创 Vuex最全使用总结(state、mutations、actions、getters、modules模块化)
一、Vuex各部分介绍安装npm install vuex --save1、store中代码import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { // 此处存储数据 }, mutations: { // 此处用于处理state中数据，存放方法类似vue中的methods }, actions: { /
2020-05-20 20:32:40
3833
原创 修改git历史提交记录邮箱
git修改历史记录邮箱一、在项目根目录新建modify_author.sh替换其中文字“旧的邮箱”、“新的用户名”，“新的邮箱”注意：执行脚本前需要提交所有代码#!/bin/shgit filter-branch --env-filter 'an="$GIT_AUTHOR_NAME"am="$GIT_AUTHOR_EMAIL"cn="$GIT_COMMITTER_NAME"cm="$GIT_COMMITTER_EMAIL"if [ "$GIT_COMMITTER_EMAIL"
2021-12-14 19:26:03
2709
原创 React+TypeScript如何使用Redux
记录一下React+TypeScript如何使用redux一、截至本篇文章发布依赖均为最新版本，版本号如下"@types/react": "^17.0.37","@types/react-dom": "^17.0.11","@types/react-redux": "^7.1.20","react": "^17.0.2","react-dom": "^17.0.2","react-redux": "^7.2.6","react-router-dom": "^6.0.2","react-sc
2021-12-04 20:05:41
911
原创 TypeScript数据类型
一、stringlet str:string = "这是一个字符串"二、numberlet num:number = 123三、booleanlet bool:boolean = true四、undefinedlet un:undefined = undefined五、nulllet n:null = null六、symbolconst key:symbol = Symbol()const obj = { [key]: "value",}七、bigintlet
2021-11-16 22:15:10
268
原创 js常用工具函数总结
/** * 精确类型判断 * @param {String} value 需要判断类型的数据 * @return {String} null undefined number string boolean function array date regexp object symbol */export function checkType(value) { return Object.prototype.toString.call(value).slice(8, -1).toLowerC
2021-11-08 20:12:31
121
原创 git可视化工具sourcetree解决中文乱码问题
sourcetree解决中文乱码一、在终端中输入以下命令git config --global gui.encoding utf-8git config --global i18n.logoutputencoding utf-8输入完成后重启软件即可解决。软件使用教程下载地址
2021-08-13 15:34:32
758
原创 时间复杂度和空间复杂度
一、简单一句概括时间复杂度和空间复杂度时间复杂度指的是程序执行所需时间长短空间复杂度指的是程序执行消耗内存的大小为了避免人们随意使用 a、b、c 等字符来表示运行时间规定用大 O 记法进行表示附:几种常用的时间复杂度，以及它们之间的大小关系O(1)常数阶 < O(logn)对数阶 < O(n)线性阶 < O(n2)平方阶 < O(n3)(立方阶) < O(2n) (指数阶)在多数场景中，一个好的算法往往更注重的是时间复杂度的比较，而空间复杂度只要在一个合理的范
2021-05-12 21:30:38
80
原创 使用customRef自定义ref，解决setup中处理异步问题。
setup中不允许使用async、await使用customRef可以让请求到的数据自动获取响应式状态详见下方demo<template> <div>{{ num }}</div> <button @click="change">change</button></template><script>/* customRef用于自定义ref，setup不允许使用async和await */import .
2021-03-10 20:25:25
928
1
原创 vue3中ref、toRef、toRefs的区别
ref—>原有数据的复制，修改响应式数据不会影响原数据但UI界面会更新。toRef—>原有数据的引用，修改响应式数据影响原数据但UI界面不更新<template> <div>{{ name }}{{ age }}</div> <button @click="change">change</button></template><script>import { toRefs, toRef } .
2021-03-09 20:55:24
1489
原创 vue3中shallowReactive对比reactive、shallowRef对比ref以及triggerRef作用
一、shallowReactive对比reactive使用reactive声明的变量为递归监听，使用shallowReactive声明的变量为非递归监听（通俗的讲就是reactive创建的对象将会被vue内部进行递归监听，可以监听到对象中的对象是否发生了改变从而更新视图，而shallowReactive创建的对象只能监听到首层对象的变化）。<template> <!-- reactive --> <div>{{ reactiveState }}</d
2021-03-08 20:25:46
4680
原创 vue滚动触底触发事件容器封装
容器内内容足够多时才会显示滚动条，发生滚动且到达距离底部指定距离后将会触发onReachBottom事件。容器高度由height控制。距离底部距离由distance控制。其他需求请自行修改相关代码。一、封装组件代码<template> <div class="z-scoll-view-wrapper" :style="{ height: height + 'px' }"> <div class="z-scoll-view-content" :style.
2021-03-08 16:37:43
1422
原创 js判断浏览器版本及种类
/** *@Date:2021/01/08 *@Description:获取判断浏览器版本信息 *@return {object} or @return {number} */function browserVersion () { var userAgent = navigator.userAgent // 取得浏览器的userAgent字符串 var isIE = userAgent.indexOf('compatible') > -1 && userAg
2021-01-12 14:00:27
339
原创 vue3.x之Vite初体验
vite 使用一、项目搭建<project-name>为项目名$ npm init vite-app <project-name>$ cd <project-name> //进入项目目录$ npm install //安装项目所需依赖$ npm run dev //启动项目二、附项目结构三、附项目启动成功图Vite启动极快，体验很好，与vue CLI相比目录结构变化不大，使用vue CLI的同学很快就能上手，期待正式发布。...
2020-09-09 17:40:29
770
原创 vue根据链接生成二维码（二维码中间可增加logo）
一、安装依赖npm install vue-qr --save二、封装组件1、参数说明appSrc 被生成二维码连接（必填）logoSrc 二维码中间logo图片（选填）默认无size 二维码尺寸（选填）默认1502、组件代码<template> <vue-qr :logo-src="logoSrc" :size="size" :margin="0" :auto-color="true" :dot-scale="
2020-08-21 14:03:04
3123
3
原创 js计算两个日期时间相差的年数、月数、天数、小时数、分钟数、秒数（考虑每月天数不同做出特殊处理）
计算两个日期时间相差的年数、月数、天数、小时数、分钟数、秒数如有错误不妥之处劳您指正/** * 计算两个日期时间相差的年数、月数、天数、小时数、分钟数、秒数 * DIFFTIME(开始时间,结束时间,[单位])，单位可以是 "y" 、"M"、"d"、"h"、"m"、"s"' * console.log(DIFFTIME('2019-6-30 13:20:00', '2020-10-01 11:20:32', 's')) */ export const DIFFTIME= function
2020-07-23 19:56:08
3778
原创 防抖debounce和节流throttle函数
一、防抖（debounce）防抖：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。/** * 节流 * @param func 执行函数 * @param delay 节流时间,毫秒 */export const throttle = function(func, delay) { let timer = null return function() { if (!timer) { timer = setTi
2020-07-21 20:11:53
224
原创 解决AntD Vue自定义上传报错reqs[uid].abort is not a function
使用Antd自定义上传文件时报错reqs[uid].abort is not a function解决办法添加以下代码const prom = new Promise((resolve, reject) => {})prom.abort = () => {}return prom
2020-07-20 20:44:22
2568
原创 Vue自定义子组件与父组件数据双向绑定
Vue自定义子组件利用model与父组件进行数据双向绑定官方教程传送门父组件代码父组件直接使用v-model对需要双向绑定的数据进行绑定<template> <div> 父组件内容：{{faData}} <hr /> <components-a v-model="faData"></components-a> </div></template><script>i
2020-07-16 22:40:04
992
原创 AntD Select 选择器设置默认选中项
没什么可说的直接放代码:default-value="{ key: defaultSheet }"<template> <div class="wrapper"> <a-select :default-value="{ key: defaultSheet }" class="new-from-preview-title-item" label-in-value style="width: 120px"
2020-07-16 21:49:09
8125
2
原创 正则表达式总结（各符号含义，如何验证、替换、及相关拓展）
正则表达式总结一、正则表达式符号及含义符号含义^以什么开头$以什么结尾[a-z]出现a~z小写任何都可以---------[]内^为取反*出现0次或多次+出现1次或多次?出现0次或1次{3}出现3次{3,}出现3次以上{3，5}出现3-5次reg.text(); //检验表单是否符合正则表达式二、预定义类符号含义\d[0-9]\D[^0-9]\w[A-Za-z0-9
2020-06-28 15:48:47
374
原创 Vue按需引入Ant Design报错“error in ./node_modules/ant-design-vue/es/empty/style/index.less”解决办法
一、报错如下： error in ./node_modules/ant-design-vue/es/empty/style/index.less @ ./node_modules/ant-design-vue/es/select/style/index.less 4:14-207 14:3-18:5 15:22-215 @ ./node_modules/ant-design-vue/es/select/style/index.js @ ./node_modules/ant-design-vue
2020-06-17 15:35:10
21403
原创 uniapp下拉刷新和上拉请求
一、uniapp下拉刷新在pages.json中为需要下拉刷新的页面添加enablePullDownRefresh为true使用生命周期函数onPullDownRefresh配合request请求完成数据刷新{ "path": "pages/goods/goods", "style": { "enablePullDownRefresh": true }}二、uniapp上拉请求使用生命周期函数onReachBottom监听页面触底，并配合request请求完成数据刷新三、
2020-06-08 22:15:21
1189
原创 uniapp选择图片及图片预览的实现
一、uniapp选择图片及图片预览的实现uni.chooseImage(OBJECT) 选择图片uni.previewImage(OBJECT) 图片预览1、具体实现代码如下getImg事件选择图片lookImg事件预览图片<template> <view> <button type="default" @click="getImg">选择图片</button> <view v-for="(item,index) i
2020-06-08 14:54:49
9643
2
原创 uniapp封装request请求（使用Promise封装）
一、uniapp封装request请求BASE_URL为服务器请求地址uni.request(OBJECT) 发起网络请求uni.showToast(OBJECT) 显示消息提示框1、具体代码如下const BASE_URL = 'http://47.95.12.147:8082'export const myRequest = (options) => { return new Promise((reslove, reject) => { uni.request(
2020-06-08 13:49:47
7492
6
原创 vue插槽v-slot总结
简单的说插槽就是在组件中预留代码空间，其中显示内容由父组件进行控制。Vue插槽可分为以下三种：匿名插槽（匿名代码空间）具名插槽（命名的代码空间）作用域插槽（实际上就是包含数据的代码空间）slot 和 slot-scope 这两个目前已被废弃，尚未移除，推荐使用v-slot。具体使用如下父组件中<template> <div> <component-b> <!-- 对应子组件<slot name="heade
2020-05-20 14:45:51
357
原创 Vue组件传参---兄弟组件传参（非父子组件传参）
方案一（最简单兄弟组件传参解决方案）：原理：使用一个空的 Vue 实例作为“中转站”，进行发送和接收数据。1、在main.js中添加new一个空的Vue实例，并将其挂载在原型上Vue.prototype.bus=new Vue();2、ComponentA组件中<template> <div class="wrapper"> <h3>这里是组件A</h3> <button @click="sendData">
2020-05-16 17:12:48
584
原创 Vue组件传参---父子组件传参
一、父组件向子组件传参1、父组件代码：注意：因为html对大小写不敏感，所以componentA组件注册后使用时采用component-a这种写法。<template> <div class="wrapper"> <h3>这里是父组件</h3> //使用子组件并在子组件中自定义数据FaData，此行为核心代码 <component-a :FaData="msg"></component-a>
2020-05-16 15:21:31
270
原创 chrome浏览器“请停用以开发者模式运行的扩展程序”（最简单取消方法）
chrome浏览器请停用以开发者模式运行的扩展程序（最简单取消方法）一、下载附件将压缩包内的程序放置在如下目录：windows10目录（即chrome.dll文件所在目录）C:\Program Files (x86)\Google\Chrome\Application\81.0.4044.138二、右键以管理员运行程序**注意：**需要关闭浏览器情况下使用此程序至此请停用以开发者模式运行的扩展程序弹窗已取消成功。...
2020-05-13 16:24:52
1226
原创 vscode自定义代码片段，自定义注释片段（动态时间）
vscode如何自定义代码片段一、打开vscode，点击左下角设置图标。下载vscode传送门二、点击用户代码片段三、点击新建全局代码片段文件四、输入自定义代码片段配置文件名，例如:vue.json五、进行代码片段配置示例如下{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div class=\"wrapper\">$0</div>",
2020-05-13 14:51:00
2999
原创 Element-ui中Token的使用---Vue实现完整的系统登录退出功能
Element-ui中如何使用Token一、技术提要涉及element-ui中的validate方法二、具体实现1、表单部分代码 <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"> <!-- 用户名 --> <el-form-item prop="username"&
2020-05-12 11:30:35
2218
原创 版本控制工具Git---常用命令总结
版本控制工具Git常用命令总结一、查看版本信息git --version二、配置提交人姓名邮箱git config --global user.name "youname"git config --global user.email "*********@163.com"查看git配置信息git config --list三、初始化git、提交代码初始化git仓库git init查看文件状态git status追踪文件git add向仓库提交代码g
2020-05-11 17:43:15
308
ChromeDLLpatch75-77.rar
2020-05-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人