weixin_45822952的博客

原创 前端h5上拉加载下拉刷新分页vant

【代码】前端h5上拉加载下拉刷新分页vant。

原创 前端花里胡哨时刻

原创 Vue3+Typescript+Axios封装网络请求

3、在src/utils 目录下新建https.ts文件。1、执行 npm i axios 命令安装Axios;4、在src/utils 目录下新建api.ts文件。2、在src目录下新建utils文件夹;

原创 ios从第三方页面返回不刷新问题

从A页面跳转B页面、B页面自动会跳转第三方页面C，当从第三方页面返回的时候，一直卡在B页面。部分ios机型有问题，android正常。加上代码👇即可解决。

原创 CSS那些厉害的布局方法

3.固定的header和footer，中间的内容自适应。1.超级居中（水平和垂直都居中）只需要给外层父级元素加上下面代码。2.经典的sidebar布局。一些brankproint。

原创 解决Flex布局设置换行后最后一个元素不对齐

当使用flex布局时经常会有一个问题困扰我，当使用以下代码设置超出换行的时候会出现这种情况。如果想变成👇这种效果，可以使用grid布局。

原创 用Vite从零到一创建React+ts项目

这里可以自行选择适合自己的框架类似于antd、Material UI...等。ps:如果失败的话尝试（1：使用管理员身份执行命令（2：切换镜像重试。在vite.config.ts 引入path加上下面的代码片段。同时在tsconfig.json 让IDE能识别这个别名。然后在router文件夹下创建index.tsx文件。这里我选的是移动端Material UI 官方文档。然后在vite.config.ts中进行相关配置。接下来就是一些配置、路由、网络封装什么的。选择自己想要的一些框架和配置。

原创 计算机上突然找不到mysql服务？

找到电脑上的mysql安装目录 找到bin目录以管理员的身份打开命令窗口 将目录切换至mysql安装目录的bin目录。然后执行 命令mysqld.exe install出现这个信息即可 这时打开服务管理就可以看见mysql的服务了。...

原创 vue项目后端设置了允许跨域 使用axios 还是会出现跨域问题？

解决问题的方法根目录写入以下vue.config.js// vue.config.jsmodule.exports = { devServer: { proxy: { // 配置跨域 '/api': { target: 'http://iwenwiki.com', ws: true, changOrigin: true, pathRewrite: { '^/api':...

原创 vue 项目报错

修改.eslintrc.js 文件中的配置参数module.exports = { "env": { "browser": true, "es6": true }, "extends": [ "eslint:recommended", "plugin:react/recommended" ], "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly" ..

原创 2021-05-14

开发遇到的奇葩bug问：同一条sql语句在程序里面执行查出来的数据和在数据库里查询出来的数据不一致？解决：是因为连接查询的表中的字段和主表的字段重复了 所以看不到结果 只需要在sql的时候把会重复的字段起一个别名就可以了。...

原创 前端开发规范（W3C标准）

1.结构、行为、样式相分离2.统一注释HTML区块注释：<!@name:Drop Down Menu@description:Style of top bar down menu@author:Alphagirl!>CSS注释：组件块和子组件块以及声明块之间用一行空格分隔 子组件之间三空行分隔。Javascript注释：1)函数/方法注释必须包含函数说明，有参数和返回值必须使用注释标识。参数和返回值注释必须包含类型信息和说明，当函数是内部函数、外部函数不

原创 碰到安装express 全局安装不了的问题

碰到安装express 全局安装不了的问题：解决方法：以管理员的身份打开cmd然后再进行安装安装 express-generator 包管理器之后可以直接进行 express hello进行文件夹的创建创建完成之后的目录...

原创 分界线----------

分界线-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

原创 集训第十天--移动端判断向上还是向下滑动

主要用到了移动端的三个事件touchstarttouchmovetouchend当用户的手指触碰到该屏幕时，获取到用户触碰到该点的pageY的位置 （要通过e.touches[0].pageY来获取）当用户移动点的时候 再一次获取 y轴的偏移位置 减去第一次 就等于用户滑动屏幕的差值然后再判断这个值 如果为正数则下滑动如果为负数则是向上滑动详细代码见下 var startY = 0,moveY = 0 function pages(obj1, obj2) ..

原创 集训第十一天--javascript的那些高级用法

symbolsymbol 的描述可以通过symbol.description来获取symbol的描述-------------------------------------------------------------------------------------------------------------------------------------------------------------------------学到一半 发现symbol是es6的知识 ..

原创 集训第九天 - - 查漏知识点-canvas实现画布（画笔颜色，样式，导出为图片等）

数组循环的方法 （3种）1.普通的for循环2.for (var k in arr) 循环 k指的是数组的下标3. arr1.forEach(function(val,key,arr){}) val 是循环出来的是被循环数组的值 key 是下标 arr是当前被循环的数组新增的那些好用的h5标签1.progress 进度条标签 样式好看 可以通过js的定时器来控制他的value值 从而实现进度条2.canvas 画布 可以实现画板3....

原创 集训第八天--移动端的事件

移动端和pc端的事件有些不一样是因为click事件会有200-300毫秒之间的时间延迟touch事件touchstarttouchmovetouchend 手指抬起的时候会触发touchcancel 接电话touchevente.type是获取当前作用对象的事件e.target 是获取当前事件的作用对象无论是touchstart事件，还是touchmove事件，还是touchend事件，所获得的结果都是一样的e.t...

原创 集训第七天--事件

事件的绑定方式（IE9以下不兼容）addEventListener(’事件类型‘，函数，)打印的都是4解决方法？使用立即执行函数即可普通方法绑定this指的是 dom元素的本身使用addEventListener绑定事件this指的是window怎么解决this的指向问题呢？解除事件普通事件绑定 直接 事件=nulladdEventListener 事件绑定使用removeEventListener事件的执行顺序 是先捕获 后冒...

原创 集训第六天---canvas的学习上

Canvas是H5新增的一些标签声明的标签 是属于H5的一部分 画布是一个矩形区域，您可以控制每一像素。canvas拥有多种绘制路径，矩形，字符以及添加图像的方法。体验canvas绘图1.准备画布<canvas id='mycanvas' width='400'heigth='600'></canvas> 白色，有默认大小 ，不建议在css文件中设置尺寸，在元素行内设置即可。2.准备绘制工具 3.利用工具绘图js中设置 va...

原创 集训第五天--移动端的一些知识

rem是什么？rem是相对于根元素html的大小 rem等于 实际字体的大小=根元素的字体大小*元素的rem实现原理rem的计算rem=(设计稿中元素大小/设计稿的宽度)*105rem=（375px/750px）*105rem表示5/10=0.5 一半的大小简单的css制作小三角形高度和宽度必须为0鼠标的几种不同的样式css3的那些属性linear 动画从头到尾的速度是相同的，匀速ease 默认 动画以低速开始，然后加快，在结束前变慢eas

原创 集训第四天--复习JavaScript--(拖拽，键盘，移动端事件）

完成拖拽事件：如何让鼠标位于被拖拽元素的中心（完美的一种方式）当我们拖拽网页中的内容时，浏览器会默认去搜索引擎中搜索内容此时会导致拖拽功能的异常，这个时浏览器提供的默认行为如果不希望发生这个行为，那么可以使用 return false 来取消默认行为但是这一招对IE8不管用对于IE8 设置鼠标所有的捕获事件 使用 作用对象.setCapture()方法(只有IE支持，用火狐不报错，但是在chrome中会包错，从而阻断后面的代码执行) 但是当鼠标抬起的时候 div还..

原创 集训第三天--复习JavaScript--事件的操作

读取一个元素的当前样式currentStyle （只在IE中支持）在其他浏览器中可以使用getComputedStyle()这个方法用来获取当前元素的样式这个是window的方法，可以直接使用需要两个参数第一个要获取样式的元素第二个可以传递一个伪元素（一般都传递null）该方法返回一个对象，对象中封装了当前元素对应的样式alert（getComputedStyle(box1,null)).width如果获取样式没有设置，则会获取到真实值，而不是默认值比如没有设

原创 集训第二天--复习JavaScript--原型对象笔记

break和continue的区别终止循环和switch if不能使用break 但是for循环里面的if可以使用breakcontinue结束当前循环break结束本次循环对象JS的数据类型string boolean number null undefined （基本数据类型）object（复合数据类型）基本数据类型都是单一的值 创建的变量都是独立的，不能成为一个整体在JS中表示一个人的信息对象分为 三类1.内置对象由ES标准中定义，在仍和的ES的实现中都可以使.

原创 集训第一天--JavaScript-视图属性和方法

window视图属性innerHeight和innerWidthouterHeight和outerWidthpageXOffset和pageYOffsetscreenX和screenYinnerHeight 和innerWidth 获取window浏览器内部的大小也就是视口的（viewport）大小outerHeight 和 outerWidth 表示整个浏览器窗体的大小pageXOffset和pageYOffset表示整个页面滚动的像素值（水平方向和垂直方向）screenX

原创 区分event对象中的clientX,offsetX,screenX,pageX

1.clientX和clientY指的是客户端的窗口就是指浏览器的显示页面内容的窗口大小。（不包括浏览器的工具栏，导航栏等）2.offsetX和offsetY被点击的元素距离左上角为参考原点的长度，而IE,FF和Chrome的参考点有所差异在谷歌浏览器下 offsetX offsetY是包含边框3.screenX和screenY是用来获取鼠标点击位置到屏幕显示器的距离，距离的最大值要根据屏幕分辨率的尺寸来计算4.pageX和pageY页面的高度一般情况client浏览器显示区

原创 有趣且实用的css小技巧

1.根据视窗高度无线延伸background-repeat:round;2.检测用户是否将主题色设置为亮色还是浅色@media(perfers-color-scheme:dark){在浅色模式下的样式}@media(prefers-color-scheme:light){在亮色模式下的颜色}3.除after before的伪类：：selection改变字体被选中时的样式：：first-letter{}放大首行第一个字的字体大小4.text - Gr..

原创 ajax解决跨域问题有效！

原创 前端常见的浏览器兼容问题以及解决方法（1）

不同的浏览器兼容性也是不同的，所以各个浏览器对网页的解析就存在一定的差异性。浏览器的内核主要分为两种：一种是渲染引擎，一种是js引擎，而浏览器内核还是比较偏向于内核。不同浏览器的默认样式存在差异，这里可以使用 Normalize.css 抹平这些差异。1.不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 *{margin:0;padding:0;}备注：这个是最常见

原创 在使用template模板引擎的时候怎么把html数据追加到一个元素的后，而不是全部替换

function cartPay(pay) { ajax({ type: 'get', url: 'http://localhost:3000/cart_list', data: { cartId: pay, }, success: function (data) { var html.

原创 ajax node 解决跨域问题

var express = require('express');var app = express();//设置跨域访问app.all('*', function(req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "X-Requested-With");res.header("Access-Control-Allow-Methods

原创 art-template模板下载地址

https://github.com/aui/art-template

原创 AJAX学习笔记（全）

传统网站的应用问题1.若想看到最新的数据，就只有再次从客户端发送http请求给服务端然后，再由服务端响应数据回来给客户端。2.表单页面的验证，时间太长，用户体验不好。3.页面的跳转，每次跳转一次，都要重新加载一次页面，造成资源的浪费。ajax的定义它是浏览器提供的一套方法 布局更新页面的数据应用场景1.页面向上拉加载更多2.列表数据无刷新更新3.表单项离开焦点数据的验证4.搜索框提示文字下拉列表运行环境ajax技术需要运行网站环境中才能生效，用node启动一个服务器。运行原理AJ

原创 node启用服务器遇到events.js:287错误时如何解决

node服务器启用时出现下面错误这主要是因为80端口已经被其他程序所占用 所以下面我们只需要打开命令行工具，找到这个80端口的应用程序，然后结束进程即可（可直接输入命令行taskkill /f /im node.exe(后面加上所占用的应用程序即可)...

原创 当npm安装好express-session之后遇到的问题

当安装好以后，发现使用的时候会遇到命令行报错遇到这种问题的解决方法先查看一下原来出现错误的代码是怎么写的其实错误信息已经告诉我们要怎么去做了，我们在这个session这个对象里加上这些属性就可以了，如上图下面那一串代码。...

原创 当使用bcrypt进行密码比对的时候发生总是返回false的情况

明明密码都是对的，但是验证的时候还是返回false 这就很让人疑惑与不解，然后就开始寻找错误根源，百度上面找了找，发现没有，后来，突然恍然大悟，后来发现是我数据库中前面还有一条数据，那个数据是未经过bcrypt加密的，而恰巧我两次设置的密码又都是一样的，所以才出现了这样的错误后来把前面那条用户信息删除以后，问题就解决啦...

原创 当遇到bcrypt第三方模块安装不上的时候解决办法（有效）

当我们想对密码进行加密的时候我们就会想到使用bcrypt这个第三方模板，但是我们安装的时候会碰到一系列的报错信息，导致安装不上。解决方法使用bcryptjs这个第三方密码加密库，是对原有的bcrypt进行升级的。步骤一在命令行工具使用以下命令进行安装npm install bcryptjs使用方法在项目中引入const bcrypt = require('bcryptjs')然后使用异步函数async function run(){ const salt =await bcr

转载 css控制文字，超出部分显示省略号

单行文本溢出overflow: hidden;text-overflow:ellipsis;white-space: nowrap;多行文本溢出display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;适用范围因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；注：-webkit-line-clamp用来限制在一个块元素显示的文本的行数

原创 搭建个人博客项目的时候遇到80端口被占用的问题

第一步 按住win+R输入cmd回车打开命令行工具第二步输入命令netstat -aon|findstr 80 然后回车第三步查看是谁占用了80端口例子比如说图上的例子可以看到占用80端口对应的程序的PID号为1752第四步根据PID号找到对应的程序：继续输入命令“tasklist|findstr “1752””，按回车后显示如下，可以看出1752对应的程序为QQProtect.exe，这也说明该程序正在使用80端口然后找到该程序结束该程序的进程即可 按住shift ctrl esc 快

原创 node安装第三方模块nodemon报错的时候（errno-4048）

解决方法1.简单直接直接删除 npmrc文件tips: 不是nodejs安装目录npm模块下的那个npmrc文件而是在C:\Users{账户}\下的.npmrc文件.2.管理员权限进入直接用命令清理缓存就行，控制台输入：npm cache clean --force...