万迹-CSDN博客

原创 vite移动端项目的移动端适配

第一步下载flexible插件npm i amfe-flexible postcss-pxtorem -D第二步在配置文件中vite.config.ts输入const postCssPxToRem = require("postcss-pxtorem")export default defineConfig({ plugins: [react()], css: { postcss: { plugins: [ postCssPxToRem({

2021-11-27 14:56:06 1225

原创 react常用生命周期的理解

第一阶段：装载阶段3个常用constructor() render() componentDidMount()constructor生命周期： (1)当react组件实例化时，是第一个运行的生命周期； (2)在这个生命周期中，不能使用this.setState()； (3)在这个生命周期中，不能使用副作用(调接口、dom操作、定时器、长连接等)； (4)不能把props和state交叉赋值；componentDidMount生命周期： (1)相当于是vue中的

2021-11-25 08:51:01 708

原创 vue和react配置反向代理

第一步下载插件npm install http-proxy-middleware --save-dev第二步在配置文件里面加入vue的配置文件是vue.config.jsreact的配置文件为setupProxy.jsconst { createProxyMiddleware } = require("http-proxy-middleware");module.exports=function(app){ app.use(createProxyMiddleware(`/api`,

2021-11-20 11:57:47 769

原创 vue的vant组件中sku使用

<template> <div class="info"> <van-button type="primary" @click="show=true">显示商品</van-button> <van-button type="warning" @click="callBackMainPage">返回主页</van-button> <van-sku v-model="show" :s

2021-11-05 20:15:07 2698 4

原创 css实现内容宽度超出界限左右滑动且不显示滑动条

<ul> <li></li> <li></li> <li></li></ul>ul{ width: auto; overflow-x: auto; white-space: nowrap; } ul::-webkit-scrollbar { display: none; }

2021-11-02 10:02:27 1590

原创 js中节流和防抖

防抖：//scroll方法中的do somthing至少间隔500毫秒执行一次 window.addEventListener('scroll',function(){ var timer;//使用闭包，缓存变量 return function(){ if(timer) clearTimeout(timer); timer = setTimeout(function(){ console

2021-10-27 19:14:17 71

原创 vue的路由实现原理

主要通过监听地址栏的hash变化结合动态组件来实现对应页面的切换<template> <div id="app"> <h1>APP根组件</h1> <hr /> <a href="#/Home">Home</a> <a href="#/Movie">Movie</a> <a href="#/About">About</a>

2021-10-25 15:05:44 98

原创 vue组件通讯之依赖注入（祖先直接传后代）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

2021-10-25 11:31:46 160

原创闭包的使用

闭包的作用就不做赘述了，百度一下有很多。下面演示一下作用//css样式/*<style> .textColorA { color: aqua; } .textColorB { color: red; } </style>*/<body> <button id="showA">显示A</button>

2021-10-12 12:03:36 90

原创闭包中的柯里化理解

闭包的作用就不多做赘述了，百度一下就知道了。柯里化的作用就是调用了数据后立马释放 function fn() { let num = 0; return function () { num++; console.log(num); } } let result = fn(); result(); result(); console.log("-----------

2021-10-12 11:43:20 67

原创 js中的数据驱动（基础）

利用数据驱动将数据之间的操作放到内存中，可以减少对页面元素的获取操作对创建的对象进行监听其数据变化，每次有变化时更改页面元素的内容<body> <input type="text" id="price"> <input type="text" id="number"> <span id="showData"></span></body><script> // let showData

2021-10-12 11:28:48 774

原创 js面向对象继承_构造函数继承与es6中的extends继承

作用主要作用是实现方法和属性的复用方法一父类构造函数法通过调用父类的构造函数来使得子类继承父类的属性和方法缺点 => 只继承了父类实例的相关属性和方法原型对象上的属性和方法没有继承function Cat(name, age) { this.name = name; this.age = age;}Cat.prototype.say = function () { console.log("喵喵喵");}function blueCat(name, age

2021-09-23 16:59:39 292

原创简易jsonp建立介绍和利用允许跨域调用京东的某些商品接口

jsonp使用原理原理:引入资源不受同源策略的限制.因为script标签支持跨域访问，所以我们可以创建script标签，src指向一个跨域文件。那么，该跨域文件的响应内容，就变成script标签内的内容了。所以，该内容也可以被理解成是正在被执行的js代码。如果该代码中有一个正在被执行的函数，该函数中又有参数。我们就可以把这个参数理解成服务器传给客户端的数据 (函数的调用)。客户端去定义这个函数，我们就能够对参数做任意处理了举个例子：先建立一个js文件，此文件里面只写一个函数

2021-09-17 20:41:22 221

原创 event.loop主线程、宏任务、微任务的执行流程

主线程：同步代码微任务：promise的then和catch方法宏任务：计时器、延时器等异步代码然后一直循环判断是否主线程执行完毕 -> 微任务 -> （判断是否还有新的微任务，有的话加入到后面） ->宏任务 -> 微任务 -> （判断是否还有新的微任务，有的话加入到后面）-> 后续一直循环查看是否存在宏任务和微任务 console.log("我是主线程1"); let pm = new Promise(function (re.

2021-09-16 20:39:08 253

原创 es6的async函数的作用与用法

作用async的作用就是将promise和生成器的效果融合了一下，promise主要用于解决回调地狱，也就是将异步代码同步封装。所以async同样能达到这个效果，而它达成效果依赖的则是生成器的特性。创建async函数创建async函数的方法很简单，在function前面加上async即可 async function fn() { } var fn = async function () { } document.onclick = async funct

2021-09-16 20:23:30 1591

原创 promise解决回调函数噩梦以及封装异步操作

存在由来回调函数噩梦(恐怖回调)，也被称为恶魔金字塔，指如ajax依赖调用时，回调函数会层层嵌套，而这种层层嵌套的写法，往往会让人难以理解，所以称之为噩梦。例如：服务器中有3个txt文件，我们需要在html上，通过js中的异步的ajax，分别获取这3个文件的内容，假设这3个文件分别存储的数据为1、2、3，那么我希望在js中，能够求出1+2+3，把6输出。解决此类问题，首先想到的就是回调嵌套 var str = ""; $.ajax({ type: "get",

2021-09-15 21:03:47 680

原创原生js的ajax封装

let $ = { get: function ({ url, data = "", async = true, dataType = "text", success }) { let xhr = new XMLHttpRequest(); if (typeof (data) == Object) { let str = ""; for (const key in data) { st

2021-09-15 19:03:14 75

原创 ajax、php实现前后端交互的主要代码

ajax向php（接口）发送请求post请求let xhr = new XMLHttpRequest();xhr.open("post", "../php/register.php", true);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send(`userName=${userName}&password=${psdValue}&phoneNumber=${phon

2021-09-14 19:24:27 414

原创操作cookie（增、删、改、查）以及其常用属性

Cookie需要依赖服务器环境，所以应先搭建服务器环境。1. 创建cookie的语法：a. cookie 的存取都依赖于 document.cookieb. cookie是以键值对(key=value)形式存在的字符串c. cookie 存储的时候是一条一条的的存的 (每条数据之前用"; " 分隔)document.cookie = "名称=值";2.获取cookie的语法：a. cookie 的获取也依赖于 document.cookieb. 获取cookie数据时需要进行数据分割(字符

2021-09-07 19:58:54 695

原创 es6生成器与keys、values、entries遍历方法

作用可以在一个函数中定义多个返回值，通过next()依次获取返回值。//定义生成器时，与普通函数的区别就是function后面的*function* generation() { yield "第一次调用"; yield "第二次调用"; return "最后一次调用"; } let test = generation(); console.log(test.next().value

2021-09-07 10:10:56 546

原创事件监听、事件流、事件委托、阻止冒泡随手记

事件监听：1、addEventListener(‘事件类型’，回调函数，捕捉（true）/冒泡（false）)事件监听可以给一个元素绑定多个事件2、在使用时，最好是绑定命名函数，因为removeEventListener清除匿名函数3、ie低版本兼容时，事件监听函数为：attachEvent(“on”+type,callback,capture);4、ie低版本兼容时，清除事件监听为：detachEvent("on"type,callback)事件流执行顺序：1、事件捕捉执行2、元素原本绑定的

2021-09-07 09:04:21 154

原创弹性盒子布局的兼容性写法

display:-webkit-box; //兼容性弹性盒子写法。等同于display:flex-webkit-box-orient:vertical; //文本排列方向-webkit-line-clamp:3; //限制文本显示行数overflow:hidden; //隐藏超出盒子大小的文本text-overflow:ellipsis; //超出界限时显示省略号...

2021-09-07 08:57:00 169

原创 js中获取某个月份有多少天

方法1：new Date()第3个参数默认为1，就是每个月的1号，把它设置为0时， new Date()会返回上一个月的最后一天，然后通过getDate()方法得到天数function getMonthDay(year, month) { let days = new Date(year, month + 1, 0).getDate() return days}方法二可以把每月的天数写在数组中再判断时闰年还是平年确定2月分的天数闰年条件：…function getDays(yea

2021-08-29 20:34:39 2221 1

原创给炫龙笔记本重装系统（其他牌子的大致相同）

一、下载操作系统准备一个U盘（内存至少8G），百度搜索win10下载操作系统。注意：进微软的官网下载点击立即下载工具下载后，点开执行程序。按操作将系统下载到u盘。版本推荐win10专业版，64位和32位选择时，两者都选。二、关闭快速开机如果电脑无法正常进入桌面，则跳过这一步三、重启/启动电脑时狂按F2（不同牌子电脑进入bios的按键不同，可以先百度看自己的电脑按什么键）进入BIOS后按方向键进入boot模块四、改变boot优先级可以看到我的闪迪U盘是次级，通过↑方向键回车选中Bo

2021-08-28 10:21:27 4122

原创 js中的日期（date）对象的不同参数和拓展方法

1、字符串为参数优点: 传什么时间就是什么时间缺点: 如果超出有效范围会返回无效日期有效日期： var date = new Date("2021-10-1 12:12:12:001"); var date = new Date("2021/10/1 12:12:12:001"); var date = new Date("2021.10.1 12:12:12:001"); var date = new Date("2021.10.1"); cons

2021-08-26 09:31:21 1135

原创 html中实现元素居中的几种方法

第一种使用到的重要样式属性display,vertical-align vertical-align:middle这个属性是对table元素垂直居中起作用，如果想使用在img元素上，就注意下面的display设置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type=

2021-08-15 09:05:37 2827

原创 line-height和vertical-align：middle的作用对象与参照对象区别

vertical—align：middle这个属性常用于与图片垂直对齐的文字。它作用于行内标签，使得行内标签里面的文字垂直对齐。注意只能作用于行内元素，放在块级元素里面会失效//css代码 #decation{ display: inline-block; width: 100px; height: 100px; vertical-align: middle; }//html

2021-08-15 08:24:50 309

原创 node中利用sequelize模块mysql数据库交互

首先把官网放上来把：sequelize中文文档准备操作在用sequelize的时候，首先需要下载mysql2和sequelize驱动程序控制台输入：npm i mysql2npm i sequelize （也可以是 yarn i sequelize）拓展：因为我们现在展现的是与mysql数据库所以上面下载的是mysql2驱动程序。其实sequelize还能与其他数据库进行交互：# 选择以下之一:$ npm install --save pg pg-hstore # Postgre

2020-11-28 20:14:34 318

原创 node中利用mysql2插件与数据库进行交互

准备操作先下载mysql2插件。在控制台中输入安装成功的样子例：// 导入模块const mysql = require('mysql2'); // 创建与mysql的连接 const connection = mysql.createConnection({ host: 'localhost', user: 'root', password:'123456', database: 'test', multipleStatements:true

2020-11-26 20:27:17 617

原创利用node搭建服务器

作用：我们知道传统的HTPP服务器会由Aphche、Nginx、IIS之类的软件来担任，但是nodejs并不需要，nodejs提供了http模块，自身就可以用来构建服务器，而且http模块是由C++实现的，性能可靠。我们在nodejs中的教程或者书籍中常常会通过一个简易的http服务器来作为开头的学习。let http = require('http')const request = http.request( "http://www.baidu.com", //请求地址 {

2020-11-23 20:39:20 1051

原创 mysql简单的增删改查

增（insert）直接插入单行数据：insert into "表名" values (值1、值2、值3。。。)这中方法是当需要给全部列都插入数据时使用对应列名插入单行数据：insert into book(列名1、列名2、列名3。。。) values(值1、值2、值3。。。)这种发放用于只给对应列添加数据，没有给出的字段系统将用默认值代替set子句插入单行数据：insert into book set 列名1='值1' 列名2='值2' 列名3='值3'。。。效果和上面的方法一

2020-11-22 18:25:55 255

原创 node的文件流的读取和写入

作用nodeJS中的流最大的作用是：读取大文件的过程中，不会一次性的读入到内存中。每次只会读取数据源的一个数据块。然后后续过程中可以立即处理该数据块(数据处理完成后会进入垃圾回收机制)。而不用等待所有的数据。这么做的原因：因为浏览器的运行内存一般情况下只有1~3g，倘若我们将一个4g的视频放到浏览器播放，此时浏览器的运行内存便无法去解析了，所以就需要文件流技术了。每次只读取一部分视频，然后运行完成后再销毁，再读取另一段视频，这样便可以完美播放视频了创建文件流创建文件流需要利用到require中的fs

2020-11-19 18:23:20 3209

空空如也

空空如也