- 博客(57)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 前端基础知识持续整理中。。
一、Css盒模型标准盒模型和IE盒模型在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式:width和height:内容的宽度、高度(不是盒子的宽度、高度)。padding:内边距。border:边框。margin:外边距。CSS盒模型和IE盒模型的区别:标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。IE盒子模型中,width 和 height 指的是内
2020-07-21 14:58:07
528
原创 node+socket-io长连接应用demo
目的: 建立socket-io 长连接, 客户端实现监听用户添加操作,添加后服务端返回最新的数据给客户端,取代了查询+添加接口,代码分为server和client端,如下所示:server端const express = require('express');// const cors = require('cors');const { db } = require('../../Server/mysql_main');const app = express();// app.use(co
2022-04-24 17:15:52
334
原创 mac下,node访问mysql数据库报错
错误信息:Client does not support authentication protocol requested by server; consider upgrading MySQL client解决方案打开DBeaver,运行以下sqlALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '要重置的密码'; 再次运行node.js, 成功连接上数据库const mySql = requi.
2022-04-22 11:24:22
1727
原创 mac终端:brew install mysql时报错
终端报错如下信息:Warning: You are using macOS 12.We do not provide support for this pre-release version.You will encounter build failures with some formulae.Please create pull requests instead of asking for help on Homebrew's GitHub,Twitter or any other off.
2022-04-21 17:18:07
1233
原创 2、JS_继承的几种方法
一、原型链基本构想:通过原型继承多个引用类型的属性和方法。构造函数、实例、原型三者之间的关系每个构造函数都有一个原型对象(prototype),原型对象有一个属性(constructor)指回构造函数,而实例对象有一个内部指针(proto 隐式原型) 指向原型对象。下面来看一个例子-> 从上面例子我们可以清楚原型搜索机制:在读取实例上的属性时,首先会在实例上搜索这个属性。如果没找到,则会继承搜索实例的原型。在通过原型链实现继承之后,搜索就可以继承向上,搜索原型的原型。默认情况下,
2022-04-11 11:29:10
853
原创 1、JS几种引用类型:map、weakMap、set、weakSet
集合引用类型一、Map常用APIMap 和 Object 的对比内存占用: 给定固定大小的内存,Map可以比Object多存储50%的键值对;插入性能: 若插入键值对数量不多,则消耗大致相对;但是当涉及到大量插入操作,Map的性能更佳;查找速度删除性能: Map的delete()操作性能更佳二、WeakMap概念: 称为弱映射,它是Map的兄弟类型,不同的是,weakMap的键只能是 Object 或者继承自 Object 的类型,尝试使用非对象设置键会抛
2022-04-06 11:38:53
1521
原创 9、recoil库的基本使用
1.配置安装npm install recoilapp.js全局配置import React, { Component } from "react";import { ConfigProvider } from 'antd';import { withRouter } from "react-router-dom";import { RecoilRoot } from 'recoil';import Routes from "./router";class App extends
2022-04-01 16:57:02
1169
原创 8、滑动删除组件_mobile端_react
jsx/** * 滑动删除 * * children props 里面传递的盒子 * onDelete 点击删除调用props方法 * id 当前点击的唯一值 */import React from 'react';import './index.less';class SlideDelete extends React.Component { constructor(props) { super(props); this.state .
2022-03-16 16:26:30
1323
原创 7、高德地图(定位、复位功能)
组件jsx文件import React, { useEffect, useRef, useState } from 'react';import './index.less';import { webMercator2LngLat, getCoordinateCommon } from '@/util/transformUtil';import icon_punch_locate from '@/asset/image/informationization/afterSalesPunch/i.
2022-03-07 09:49:54
1152
转载 7、判断处于PC/MOBILE的几种方法
navigator.userAgentif (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { // 当前设备是移动设备}// 另一种写法if ( navigator.userAgent.match(/Mobi/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i)) { // 当前设备是移动设备}..
2022-01-06 14:18:49
557
原创 6、react-useReducer初体验、useReducer和useContext结合使用
初次体验import React, { useState, useEffect, useReducer } from 'react';export const Demo = () => { const [conut, setCount] = useReducer((state, action) => { switch (action) { case 'increment': return state + 1 cas.
2022-01-05 16:15:37
442
原创 5、react-useContext简单应用
Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法 。主要应用场景:为不同层级的组件提供访问同样数据。创建一个共享的UserInfoContext文件userInfoContext.jsimport React from 'react'export const UserInfoContext = React.createContext(null)在顶层组件Parent.js中,传递需要共享的数据import React from 'reac
2022-01-05 11:11:38
677
原创 4、日期筛选组件
/** * @description: 日期筛选组件-完全不受控组件 * @param {Array} allOption 取timeUtils.js的值 * @param {String} defaultSelecType 默认选中的类型 * @param {String, String []} defaultSelectValue 日期组件默认值 * defaultSelecType为自定义时,可传; * 格式: 'YYYY-MM-DD' || ['YYYY-MM-DD', '
2022-01-04 10:08:46
562
原创 3、First-Hook-Demo
/* * @Date: 2021-12-16 09:47:02 * @LastEditTime: 2021-12-28 10:06:30 * @FilePath: /civ_pandawork/src/pages/pandaBigData/pandaWork/reportManagement/hourFill/hourFill.js * @Description: 工时填报 */import React, { useState, useEffect } from 'react'import s
2021-12-30 15:51:33
533
原创 2.react配置less
1、安装依赖库npm install less@3.9.0npm install less-loader@4.1.02、弹出配置文件以便自定义项目配置npm run eject3、修改config/webpack.config.js中的配置添加样式文件正则const lessRegex = /\.(scss|less)$/;const lessModuleRegex = /\.module\.(less)$/;修改getStyleLoaders函数a.增加less-loade
2021-12-30 15:49:07
318
原创 1.react配置react-router 4.x(粗略版,第一次配置,需优化)
安装4.x版本路由npm install react-router-dom@4.3.1 --save创建一个异步组件AsyncComponentimport React from 'react';export default function (componentFactory) { class AsyncComponent extends React.Component { constructor(props) { super(props); this.
2021-12-30 15:44:33
384
原创 6.日期函数(根据moment.js库获取时间段)
import moment from 'moment'const STANTFORMAT = "YYYY-MM-DD 00:00:00"const ENDFORMAT = "YYYY-MM-DD 23:59:59"/** * @description: * @param {String} type * ['前日','昨日', '今日', '明日', '上周', '本周', '下周', '上月', '本月', '下月', * '去年', '今年', '明年', '上季度', '本季度',
2021-12-30 15:39:18
563
原创 5. 滑块组件
组件结构<div role="slider" class="pd-slider"> <div class="pd-slider__runway"> <div class="pd-slider__bar" style="<%= `width: ${value}%;`%> left: 0%;"></div> <div class="pd-slider__button-wrapper" style=.
2021-09-19 17:34:54
201
原创 4.复选框组件封装(基于backbone)
html、css部分<!-- * @Author: RenXiaoDong * @Date: 2021-08-10 09:32:23 * @LastEditTime: 2021-08-29 15:49:21 * @LastEditors: RenXiaoDong * @Description: 复选框--><style> .pd-select-dropdown__wrap { display: inline-block; p.
2021-08-29 15:52:45
170
原创 基于backbone写一个tree结构的table
页面及样式<style> #proProgressRecord { display: flex; flex-direction: column; } #proProgressRecord .proRec-container { height: 100% !important; display: flex; flex-direction: column; } #proPr.
2021-08-29 15:44:18
149
原创 3、常用js函数(持续添加)
获取数据类型function getType(para) { return Object.prototype.toString.call(para)}数组去重//简单数组去重function unique1(arr) { return [...new Set(arr)]}function unique2(arr) { var result = []; arr.forEach(ele => { if (result.indexOf.
2021-08-22 15:21:28
92
原创 2、Js 常用数组方法总结(持续添加)
const arr = [1,2,3,4,5,6,7]filter:过滤器,返回符合条件的元素组成的新数组let result = arr.filter(item => item > 3) // [4, 5, 6, 7]console.log(result) // [4, 5, 6, 7]map:创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。let result1 = arr.map(item => item > 3) let re
2021-08-08 16:55:32
116
原创 1、交互优化(防抖与节流、MouseEnter 和 mouseLeave事件)
需求:二级菜单的显示与隐藏。鼠标移到一级菜单上,会显示二级菜单,移出元素时,二级菜单则会隐藏。有以下三种实现方法1、首先我们想到的是通过js的鼠标事件来进行处理,那么我们应该先明确一下几个事件的基本概念。mouseenter:当定点设备(通常指鼠标)移动到元素上时就会触发 mouseenter 事件mouseleave:指点设备(通常是鼠标)的指针移出某个元素时,会触发mouseleave事件。mouseout 和 mouseover和以上两个事件的作用相似,那么他们的区别在于什么地方
2021-07-25 16:01:50
2286
2
原创 有关日期的通用方法(获取日期/时间戳转日期格式)
获取日期//获取当前年月日Vue.prototype.getDate = function(item) { let date = new Date(); if(typeof item === 'string') { date = new Date(item); } else if (typeof item === 'object') { date = item } let seperator1 = "-"; let ye.
2021-07-17 21:59:58
111
原创 通用复选框
渲染复选框select = ` <div style="display: inline-block;" class="dictionary_check_box multipleChoiceBox"> <label>${this._dictionaryCheck[i]}:</label> <div style="position: relative;float: right;" class="_productTypeB.
2021-07-17 21:38:57
125
原创 table固定表头、固定列
最近在做一些报表,使用原生table画的,记录一下固定表头的一些方法。使用position:sticky来固定表头html:<div id="common-table"> <table id="table-container" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>1</th>
2021-07-17 21:09:53
8420
1
原创 js 统一封装 api 请求文件 ----window.fetch方法
export default async (url = "", data = {}, type = "GET", method = "fetch") => { let baseUrl = ""; type = type.toUpperCase(); url = baseUrl + url; if (type == "GET") { let dataStr = ""; //数据拼接字符串 Object.keys(data).forEach((key) => {
2020-12-21 10:15:48
567
转载 html5shiv.js 的作用
解析html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。...
2020-12-03 10:26:22
259
原创 ES6生成器函数,解决回调地狱问题
//想要实现的是: 成功获取商品数据后,获取订单数据,成功获取订单数据后,获取商品数据function getUsers() { setTimeout( () => { let data = '用户数据' iterator.next(data) },1000)}function getOrders() { setTimeout( () => { let data = '订单数据' iterator.next(data) },1000)}function
2020-11-30 13:48:18
167
原创 前端API接口
Vue 项目中基于axios封装接口及使用1.封装一个api.js文件import axios from "axios";var loginService = { /** * username: 用户名 * password:密码 * checkImage:验证码 */ login(username,password,checkImage) { var params = { "username": username, "passwo.
2020-11-30 13:47:40
645
原创 手动实现一个迭代器(使用iterator),自定义遍历数据
let obj = { name: 'IG', stus: ['Rookie','TheShy','Ning','Jk','Bao'], [Symbol.iterator]() { let index = 0; //定义一个索引下标 let that = this; return { next: function() { if(index < that.stus.length) { const
2020-11-23 11:20:55
249
转载 JS 表达式 简化写法
1、逻辑与 && 的运算方式var a = 1 && 2;console.log(a); //返回的结果为 2如果逻辑与运算符左边的值布尔转换后为true,那么返回右边的值(不管右边的值是真还是假)。var a = false && 2;console.log(a); //返回的结果为 false如果逻辑与运算符左边的值布尔转换后为false,那么返回左边的值,但是当逻辑与的左边为 null/NaN/undefined ,结果就会得到null/Na
2020-10-28 10:49:56
379
原创 vue中Axios的封装和API接口的管理
一、axios的封装在vue项目中,和后台交互获取数据这部分,通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。它有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。安装npm install axios; // 安装axios复制代码引入一般在项目的src目录中,新建一个request文件夹,然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios,api.js用来统一管理我
2020-09-24 10:40:00
192
原创 2020-09-15
事件冒泡或事件捕获?事件传递有两种方式:冒泡与捕获。事件传递定义了元素事件触发的顺序。 如果你将 元素插入到 元素中,用户点击 元素, 哪个元素的 “click” 事件先被触发呢?在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: 元素的点击事件先触发,然后会触发 元素的点击事件。在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: 元素的点击事件先触发 ,然后再触发 元素的点击事件。addEventListener() 方法可以指定 “useCapt
2020-09-16 15:53:58
182
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人