- 博客(28)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 小程序按钮防抖和节流
js实现防抖和节流网上写法大都雷同，踩坑之处都不带重样的，这里为了后来人方便记录一下，在面试题中，一般将防抖 说到 闭包写法 函数嵌套函数 加个定时器就可以实现起来也是这么回事，防抖使用场景：按钮点击、输入框搜索、滚动事件节流场景：DOM元素拖拽、运动事件// util.js里封装方法// 防抖函数function debounce(fn, wait) { var timer = null; return function () { var context = this
2022-05-18 13:43:29
935
原创 vue简易列表分页
采用elementUI分页器实现1、在标签里<el-table ref="listAllData" v-loading="crud.loading" :data="listAllData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%;"></el-table>2、分页器<!--分页组件--> <div class="block"
2022-04-19 11:24:31
904
原创 Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘validate‘)“
elementUI表单组件常见bug记录很简单的表单输入框非空验证 死活报这个错误 一行一行排查最终定位在标签里的ref和方法里面的this.refs这两个东西名称要一致然后this.$refs.[formname] 可以转成
2022-04-18 10:37:11
4612
4
原创 js字符串转数组
开发中遇到接口返回的数组被一层引号包裹着 成了一个字符串开发中遇到接口返回的数组被一层引号包裹着 成了一个字符串开发中遇到接口返回的数组被一层引号包裹着 成了一个字符串开发中遇到接口返回的数组被一层引号包裹着 成了一个字符串开发中遇到接口返回的数组被一层引号包裹着 成了一个字符串找了相当多的方法 最终找到了一个比较完美的 const Arr={ obj:"[1,2,3,14,15,16]" } JSON.parse("[" + Arr.obj +
2022-04-07 20:19:50
258
原创 微信小程序上传功能
踩坑篇最近在搞微信小程序的视频上传功能，很简单的一个问题却折腾许久，甚至反复怀疑后端功能性错误唠一唠小程序端和PC端上传组件不一样的地方其实之前有做过 PC端的上传功能，当时是在表单中上传一个压缩包，直接采用elementUI中的upload组件<el-upload class="upload-demo" action="上传地址" :file-list="fileList"></el-upload>直接填一个上传地址即可，也不用约定什么上传请求头，组件一
2022-03-21 13:24:25
1570
原创 微信小程序登录注册流程（获取手机号）
手机号这是采用微信小程序 静默登陆 无需用户手动输入 信息 只需点击按钮进行授权，便可获取到相关信息 进行一个用户的注册和登录其实在这些登录流程中，前端能做的是比较少的，提供一个按钮去触发获取手机号 和用户信息 这里要分 两步授权如果想要获取到用户手机号 和用户信息 这里是隔离操作 相当于 不能一个按钮就完成业务需求是这样的：小程序点进来之后，需要获取手机号，发送到后台，再通过授权获取用户信息（头像和昵称），保存登录态其实对登录态尚存在一些不理解之处 后面再补充// 获取
2022-03-15 12:28:10
2224
原创 sort二次排序
js数组sort排序规则实现一个数组排序函数对数组[ “A华北”, “A华南”,“B华南”,“A华东”,“B华东”,“A华西”, “C华北”,“A华东” ];排序为[‘A华东’, ‘A华东’, ‘A华南’, ‘A华西’, ‘A华北’, ‘B华东’, ‘B华南’, ‘C华北’]排序规则为相同字母A-C开头的A在前面，B、C次之；A相同的情况下按照东南西北排序function sort(arr) { const ABCarr = ["A", "B", "C"]; con
2022-02-23 16:27:58
669
原创 vuex复习篇
先来个极简版本的按钮计数器如官网所述，状态更改方法写在store里import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);const store= new Vuex.Store({ state: { count:0 }, mutations: { increment(state){ state.count++ }, decrement(state){ state.
2022-01-02 13:49:08
312
原创 redux版本的todolist
list.jsx部分import React, { Component } from "react";import { connect } from "react-redux";const mapStateToProps = (state) => { return { list: state.list, };};class List extends Component { handleDelete = (index) => { this.props.list
2021-07-25 19:05:57
71
原创 react-redux
简单实现了react-redux发现了connect中的两个类似辅助函数的家伙mapStateToPropsmapDispatchToProps改写第一步index.js部分import store from "./todolist/store";import App from './todolist/App1';import { Provider } from "react-redux"ReactDOM.render( // 注入依赖 <Provider store={s
2021-07-25 10:38:29
51
原创 react状态提升
父子组件中的状态状态提升不是子组件交给父组件东西，再由父组件集中分发而是子组件不管了，直接上交状态但是父组件管理该状态后，给那个投降的组件一个允许改变状态的方法这样投降组件明面上接受父组件的管理，但是自家的军队可以控制，而且父组件也可以获取投降组件的更改状态后的值，就可以分发给其他部父组件部分;import React, { Component } from "react";import Child from "./child";import Child2 from "./child
2021-07-24 20:14:50
59
原创 初步认识Redux
父组件部分// 一个炒鸡简易的redux状态管理// 由于这里只引用了createStore,所以下面暂时只引入它import React, { Component } from "react";import { createStore } from "redux";// 定义两个按钮之间的默认值const defaultState = { num: 10,};// ### 下面是状态管理部分 主要的也就是下面的写法了const reducer = (state = defaultS
2021-07-23 19:50:24
60
原创 React弹出框(简易版)
没有用到Portal 这里亮点1、在使用了style样式样式化成标签包裹2、函数式子组件里写点击事件3、函数与方法import React, { Component } from "react";import { Wrap, Center } from "./style";// 弹框子组件const Portal = () => { // 函数组件里创建方法要加const 另外使用不用加this const wrap = (ev) => { ev.stopPro
2021-07-23 10:18:38
3920
1
原创 React中的购物车加减按钮(简易版)
主要是createContext 中的Provider Consumer两个参数import React, { Component, createContext } from "react";{ /* 这严格来说是在页面分了组件 就是少了import步骤 */}// 按理说这只是一个分组件传参的东东 一个页面上用不上吧// 这关键之处在把三个东西绑定在一个大的盒子里，这个盒子就是上面的createContextconst { Provider, Consumer } = createC
2021-07-22 21:25:10
797
原创 react手写简易todolist
import React, { Component } from "react";class to extends Component { constructor() { super(); this.state = { textValue: "", add: ["点击我可以删除", "删除我是删除了我的索引值index", "3"], }; } // 输入框的值改变，拉出它的值 change = (e) => { this.s
2021-07-21 18:28:10
156
原创 从零开始学webpack
新建一个文件夹webpack该文件夹用vsCode打开，1、新建文件夹webpack(易于辨识)，2、在webpack下创建src文件夹3、再创建main.js文件4、main.js文件中console.log(“123”)5、此时在控制台安装webpack (这回先全局安装，方便操作,安装务必全部加c，怕后面版本错误)cnpm install webpack webpack-cli -g在控制台运行wenback$ webpack此时main.js文件会被打包成dist文件夹下的m
2021-07-19 10:33:30
58
原创 2021-07-19
webpack初次配置环境一些小问题在一个新的文件夹里搭建webpack环境 全局安装好webpack环境后初次运行webpack,会报警告$ webpack./src/index.js 17 bytes [built] [code generated]WARNING in configurationThe 'mode' option has not been set, webpack will fallback to 'production' for this value. Set
2021-07-19 09:45:49
79
原创 2021-05-25
js基础script负责执行js 代码script 是成对标签一个页面中允许出现多个script元素第一条js 语句alert();弹出一个警告框 所有带有圆括号的语法 叫做函数写在圆括号里面的内容 叫做参数默认从上到下执行当script元素用于引入外部文件时script内的js代码会被忽略要不然新建一对script标签js调试alert(‘第一个警告框’)；ctrl+shift+j 打开js控制台js是一个解释型语言一般代码出现错误后，解释性（js引擎）会停止
2021-05-25 20:34:57
126
原创 2021-03-09
css背景一张大图固定页面 html,body{ height: 100%; } body{ background: url(img/2.jpg) no-repeat; background-size:100% 100% ; }
2021-03-09 19:02:01
62
原创 2021-02-16
老eclipse的STS(spring tool suite) 版本离线安装本文内容摘自–吴小破大佬的文章（奇技淫巧：在spring官网上下载历史版本的spring插件，springsource-tool-suite）为防大佬链接失效，故而在自己小空间转载一下，如有侵权，请速联系我删除。链接：https://pan.baidu.com/s/1GbSe-Om89d5oK8M7OPpGoA提取码：omuvsts-3.5.1(based on eclipse 4.3.2)的下载地址：http://do
2021-02-16 19:32:50
72
2
原创 2020-12-24
数据库笔记首先查询一个语句是select — 选择数据库 这里和from直接连接要用*from----选择表where----选择具体的字段 //这里针对的是局部查询查询全部学生的信息select * from stu查询全部学生学号和姓名select sno,sname from stu查询全部学生的姓名和出生年select sname,2020-age from stu//这里出生年是直接用当前年份减去年龄得出在这里出生年没有列名可以加一个select sname,202
2020-12-24 15:32:43
115
1
原创 2020-12-22
css问题篇css中 样式前面的# . 这些东西有什么区别吗post请求 提交数据 发送数据，用户不可见get请求 通常表示获取数据 不能提交大量数据，post可以 发送数据写在地址栏上，用户可见选择器的权重：CSS优先级行内样式1000 > ID选择器100 > 类选择器10 > 标签选择器1 > 通用选择器0<style=""> #box{} .con{} div{} *{}
2020-12-22 17:33:06
41
原创 2020-12-22
js 学习笔记（入门）js 依赖的就是html html 超文本标记语言（基础语言） CSS 层叠样式表(不是语言) js 脚本语言define 定义not define 未定义js 是在做什么 + 通过我们的语法，来控制页面上标签（DOM）出现一些改变 + 通过我们的语法，来控制浏览器发生一些改变js 的三大核心 + ECMAScripy +DOM + 拥有一套成熟的API，用来操作页面中的标签的 +BOM +
2020-12-22 17:31:47
59
原创 2020-12-20
在B站上看了一个小姐姐的鼠标悬停效果，花了一会时间实现了出来，贴上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <
2020-12-20 15:18:58
56
1
原创 2020-12-20
html学习img标签四要素：srcheight//这里设定了宽高有助于百度爬虫自动等比压缩图片，以防失真weightalt //作用一：如果图片因为以外没有加载，就显示其后面的文字//搜索抓取关键词（主要是增加百度SEO），假设你的文章有图片，然后图片被百度图库收录，这就是根据alt后面跟的文字抓取的链接...
2020-12-20 13:46:40
42
原创 2020-11-30
一个很粗糙的登录页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录页面</title> <style> .father{ width: 900px; height: 500px; margin-top:2cm; border: 3px solid pink; margin-
2020-11-30 14:28:10
41
原创 微信小程序踩坑记录
微信小程序踩坑记录竖直滑动的scroll-view竖直滑动的scroll-view,需要给scroll-view一个固定的高度，设置属性scroll-y,并且设置样式white-space:nowrap;（三个条件缺一不可）可能微信开发版本的问题，导致...
2020-10-30 15:48:23
198
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人