- 博客(53)
- 收藏
- 关注
RSS订阅原创 初识Scrapy和使用
Scrapy是一个为了爬取网站数据，提取结构性数据而编写的应用框架。可以应用在包括数据挖掘，信息处理 或存储历史数据等一系列的程序中。
2024-06-21 16:10:15
370
原创 Docker的安装和使用
Docker 是一个开源的应用容器引擎，基于 Go 语言 并遵从 Apache2.0 协议开源。Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app）,更重要的是容器性能开销极低。在阅读本教程前，你需要掌握 Linux 的常用命令。
2024-06-05 21:27:48
486
1
原创 聊聊干入职前端电脑都有什么秘密
对于热爱于前端的人来说，入职岗位后拿到电脑就会想着着手于做准备工作，需要安装什么，搭建什么环境，安装什么软件，还是在寻找自己备份的资料地址吗？还是记不起某些自己经常使用却忘记的软件？ 这篇文章来聊聊关于一开始的准备工作，方便自己方便他人，快速找到很不错，合适的软件、环境，分享一下万金油的开发环境、软件、网站。
2023-04-14 15:32:55
12676
1
原创 解决页面切换出现滚动条而导致的抖动问题
在页面开发的时候，我们使用路由等方法使页面进行跳转的时候，可能有些页面需要纵向的滚动条，可能有些页面不需要滚动条，由于在浏览器中滚动条也是有默认的样式占据着一点的范围，就会导致切换页面就会有抖动页面的效果，体验十分差通过对body的宽度使用vw来设定，再设置html的样式解决问题设置好css后切换页面就不会出现抖动了，或者我们也可以采取很绝的方法，直接去修改滚动条的样式在该代码片段的第四行和第五行修改滚动条的宽度，这样浏览器就不会出现滚动条，页面也不会有抖动了，当然这种方法意味着斩草除根其他零碎的方法就
2022-12-07 17:28:22
17652
原创 图片懒加载
在项目的后期性能优化的过程中，对于部分图片的加载需要使用懒加载来实现，当然，对于图片也可以使用精灵图（雪碧图）来减少请求来优化。对于网站的性能优化来说，使用图片的懒加载可以很好的提高体验效果。
2022-11-18 16:22:54
4654
原创 uniapp的路由守卫
在我们使用uniapp开发h5的时候，如果项目模块较少的情况下使用小程序原生的路由可以很方便的便于我们开发，在一些特定的需求或者模块功能较多的时候，这时候我们需要使用路由来对我们的页面进行一定的管理，这样方便我们开发，一些请求代码和判定逻辑可以写到前置守卫方便管理和维护。
2022-10-24 21:04:40
47774
7
原创 Flip技术
在我们使用做一些卡片移动效果的动画时候，可能会想到使用来实现，这样就不会显得生硬，但是在一些项目里面需要去操作样式，这时针对的可能做起来会很困难，改变的不是，而是元素的结构，这时候就很困难了Flip是 、、和 四个单词首字母的缩写字面意思：First：这也是我们首先做的，这里我们需要使用这个 来处理（ 和 也是可以的），这里主要是记录我们元素出现的位置使用一个值来记录，方便后续改变之后的值现成对比Last：代码执行完毕之后，让元素发生相应的变化，并记录元素在动画最后状态的位置和尺寸，即动画结束之后那一刻收集
2022-08-01 16:05:34
248
原创 在vue2.x里面简单使用socketio
启动服务端，启动客户端页面会出现两个按钮，按下第一个就会开始连接，这时候服务器就会打印有人连接了，点击发送消息就会触发'data'})这时候服务端触发第一个参数就是给到客户端的名称，第二个就是上一个函数收到的结果，这里是原封不动返回出去，到了客户端里面再sockets这个对象里面就可以写上'new'的函数来接收，参数就是服务器给我们的数据，这里直接打印在控制台。...
2022-07-29 17:38:39
1029
1
原创 vue.draggable拖动插件的使用
在Vue的一些项目里面需要对元素进行拖动的处理，可以使用之前的SortableJs来实现，这里介绍一些的实现以及一些配置。
2022-07-29 17:38:10
1428
原创 SortableJS的简单使用
SortableJshttp里面也介绍了该库的一些特性，中文网的页面十分简约方便阅读，有着满足我们需要的示例介绍，只有几个页面，在配置项一栏列举了很多的方法，下面就在html里面实现一下简单的demo。...
2022-07-24 10:30:00
2436
原创 toLocaleTimeString() 方法
方法可以根据本地时间把Date对象的时间部分转换为字符串，我们需要传入一个时间戳作为参数来解析，以本地时间区表示，并根据本地规则格式化，这样就会得到一个由小时分钟秒的组合返回给我们，这样一来我们就可以做一个小的demo，也就是默认的屏保效果。...
2022-07-24 05:00:00
1836
原创 Element.scrollIntoView()的使用
MDNElement接口的方法会滚动元素的父容器，使被调用的元素对用户可见。简单的来说就是调用这个方法的元素会出现在可视区域，也就是我们应该看到的区域。//等同于element.scrollIntoView(true)element.scrollIntoView(alignToTop);//Boolean型参数element.scrollIntoView(scrollIntoViewOptions);//Object型参数我们如果不传值的话，括号的内容默认是true的顶部与。...
2022-07-24 00:24:22
989
原创 关于URL需要传递地址的解决方法
在项目开发的时候，可能需要把整个URL地址通过路由的方式传递到其他的组件去使用，或者是前后端的交互，但往往传递URL地址的时候会导致发生错误，这时候就需要对URL地址进行编码处理。
2022-07-19 18:29:21
739
原创 CSS的学习
CSS的学习介绍一下BFC及应用BFC特性:内部box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。在BFC中，每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说，则触碰到右边缘)形成了BFC的区域不会与float box重叠计算BFC高度时，浮动元素也参与计算生成BFC的还有:行内块元素、网格布局、contain值为layout、cont
2022-05-31 00:07:09
117
原创 常用的正则
常用正则去除字符串空格var str = ' qdleader like u';console.log(str.replace(/\s/ig,''))身份证号码 var Card = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;手机号 let phone
2022-05-31 00:06:35
72
原创 用户在url输入内容到页面展示发生了什么？
用户在url输入内容到页面展示发生了什么？域名解析发起tcp三次握手建立tcp连接后发起http请求服务器响应http请求，浏览器得到html代码浏览器解析html代码，并请求html代码中的资源浏览器对页面进行渲染呈现给用户详细解释：地址栏输入url，要通过dns解析（浏览器是不能识别url地址的，需解析成ip地址），返回相对应的IP地址，建立tcp连接，（tcp三次握手）发送Http请求，服务器进行处理并返回Http报文，浏览器渲染页面，断开连接（tcp四次挥手）
2022-05-31 00:06:04
107
原创 Vue后台项目的学习
Vue后台项目的学习一、项目的创建该项目的创建采用可视化的创建方式，创建好文件夹，在该文件的url地址输入cmd：打开好窗口后输入：vue ui会收到一个地址，将该地址在浏览器打开，就可以看到可视化的面板：选择好自己的存放路径，点击底部的在此创建项目，填写好自己的项目名称，选择好相应的包管理器，或者默认也行，按需打开填写git，点击下一步，选择好相应的预设，这里包含了vue2的和vue3两个预设，这里介绍手动配置预设：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(
2022-05-24 22:49:07
277
原创 移动端复习
移动端复习rem 实际开发适配方案移动端的适配方案一般是根据设计稿来实现的，假设设计稿是750px，项目使用normalize.css来清除默认的样式，使用flexible.js来检测屏幕，将屏幕划分为10等分，在VScode使用插件px to rem & rpx & vw (cssrem)，首先设置好设计稿的的尺寸除以10作为插件的默认字体大小，方便后续的计算实例新建文件夹，在文件夹下创建images用于保存图片，js用于保存js文件，css用于保存样式，新建一个ndex.html
2022-05-16 16:18:10
112
原创 vue路由跳转tabBar图片和文字的高亮效果
vue路由跳转tabBar图片和文字的高亮效果前言在pc端和移动端的项目里面会遇见导航栏或者tabBar的点击跳转，图片和文字的高亮效果，对于小程序来说可以直接创建和修改图片和文字的高亮效果，也可以使用相应的组件库去自定义一些效果，而在pc端和移动端的来说需要对导航栏或者tabBar进行一定的封装，使其成为全局组件的使用，结合组件间的数据传递可以实现不同页面的不同信息的展示，本篇文章介绍路由跳转的时候，使图片和文字的高亮效果的方法定义基本的组件在demo的初期，我们需要在项目的components文
2022-05-16 01:09:49
955
原创 微信小程序学习（加深）
微信小程序学习（加深）一、wx:if 与 hidden 的对比wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏所以需要 频繁切换时，建议使用 hidden 如果条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换，可以理解为vue的v-if和v-show二、wx:for通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构：<vi
2022-05-11 20:56:31
465
原创 微信小程序的学习（微信开发者工具）
微信小程序的学习（微信开发者工具）缓存优化如果我们返回的数据量过于大了，可以使用微信的缓存来优化首先在我们定义请求的函数getList，在函数内部调用wx.setStorageSync来将数据存储本地，存储的数据要携带时间信息：//把接口的数据存起来wx.setStorageSync(<要存储的数据名称>, { time: Date.now(), data: <需要存储的数据> })//例如：wx.setStorageSync('listData', { time: D
2022-05-11 01:08:39
694
原创 vue3的学习
vue3的学习了解响应式的原理vue2的响应式原理实现的原理是通过 Object.defineProperty() 对属性的读取、修改进行拦截（数据劫持）// 定义数据let person = { name: '张三', age: 18 }// 基于 person 创建响应式对象 dataconst data = {};Object.keys(person).forEach(key => { Object.defineProperty(data, key, { con
2022-05-08 21:56:16
271
原创 报错‘＜template v-for＞‘ cannot be keyed. Place the key on real elements instead
报错’<template v-for>’ cannot be keyed. Place the key on real elements instead报错的使用场景在vue3的项目中，不免会遇到v-if和v-for一起使用，但我们知道，这两个是不可以一起使用的，v-for 具有比 v-if 更高的优先级，所以我们需要把v-for写到template中，但是控制台会提示：'<template v-for>' cannot be keyed. Place the key on r
2022-05-08 21:55:46
20177
3
原创 vue3输入框生成的时候自动获取焦点
vue3输入框生成的时候自动获取焦点前言当我们在做vue3的项目的时候，在对一些信息的修改的时候，需要双击或者点击按钮来进行操作，让数据变成输入框来进行修改数据，当输入框失去焦点的时候就进行保存，然而不方便的是，输入框出现的时候不能获取焦点导致用户的体验不好。创建实例演示（创建文件，可忽略）首先我们需要一个vue3的项目，如何创建一个vue3的项目，新建一个空的文件夹，cmd打开，输入1. vue create 项目的名称举例：vue create demo我们选择自定义，即2. Manua
2022-05-06 22:31:17
4313
原创 Vue路由跳转定位顶部（自动/手动）
Vue路由跳转定位顶部（自动/手动）背景了解当我们在做vue项目的时候，使用编程式或者声明式导航跳转的时候，如果页面过长，定位的地方就不是顶部，我们需要拉到顶部去预览，这样就显得十分麻烦。解决方案1、自动我们可以在路由的前置守卫哪里添加代码router.beforeEach((to, from, next) => { // 兼容chrome document.body.scrollTop = 0 // 兼容firefox document.docum
2022-05-05 16:43:36
2006
1
原创 canvas和svg基本使用
abbrlink: 25title: canvas和svg基本使用date: 2022-05-04 20:29:19mathjax: truetoc: trueauthor: 信tags:canvassvgEchartscategories:Echartscanvas和svg基本使用一、了解canvas和svgcanvas是HTML5提供的一种新标签，用于图形的绘制，通过JS来操作画面的绘制，<canvas>标签只是图形容器，必须使用脚本来绘制图形。SVG.
2022-05-04 20:43:04
1090
原创 MongoDB的学习
MongoDB的学习一、准备新建一个文件夹，在控制台输入npm init -y来创建package.json的包，新建index.js作为我们的入口文件，再新建好tools、models、controller三个文件夹，其中，tools是用于连接数据库的，controller用于书写接口的，而models用于创建数据库的一些模式对象函数二、安装所需的包在我们demo的终端输入:npm i express --savenpm i mongoose --save第一个用于创建服务器，第二个用于连
2022-05-04 02:38:43
68
原创 apidoc生成文档时报错
问题描述在书写完接口的时候，使用apidoc来生成我们所需要的接口文档的时候，输入apidoc.cmd -i ./constroller -o ./doc，其中constroller 指定读取源文件的目录，doc是我们要生成的目录，输入完的时候控制台报错：D:\nodejs\node_modules\apidoc\lib\writer.js:129 const title = projectInfo.title ?? projectInfo.name ?? 'Loading...';Syn
2022-05-03 22:54:53
3759
2
原创 node-sass@4.14.1的报错的最终解决方案
问题描述起因我在逛一些项目的时候，输入npm i全安装文件所需的依赖的时候，博主是使用sass去书写的，使用的是node-sass@4.14.1和sass-loader@7.3.1的版本的，安装的时候老是出现错误gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.gyp ERR! stack at PythonFinder.failNoPython (C
2022-04-29 23:40:06
59092
14
原创 Refusing to install package with name “koa“ under a package
问题描述在使用koa去写接口的时候，在引入包的时候，控制台会报出错误 Refusing to install package with name "koa" under a package also called "koa". Did you name your project the same原因分析：文件夹的命名问题，或者就是使用npm init -y的时候，生成的package.json中的name名字不对{ "name": "koa", "version": "1.0.0",
2022-04-28 17:01:38
180
原创 WebSocket connection to ‘ws://localhost:8081/ws‘ failed: Invalid frame header
问题描述在启动vue项目的时候，控制台每隔几秒就会报错WebSocket connection to 'ws://localhost:8081/ws' failed: Invalid frame header解决方案：项目解决方式是修改代理中ws:true改为falsemodule.exports = { publicPath: './', lintOnSave: false, // 关闭语法检查 devServer: { proxy: { '/': {
2022-04-25 23:44:39
21957
6
原创 git的简单使用
git的简单使用文章目录一、git是什么？二、使用步骤1.创建并连接库2.编写内容一、git是什么？Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。二、使用步骤1.创建并连接库在这之前需要去下载git，配置git使用git官网下载地址配置：git config --global user.name "xx"git config --global user.email "318xxxxx73@qq.com"已gitee为例，创建一个项目，会获得一个h.
2022-04-25 17:03:08
68
原创 前后端的身份认证
身份认证文章目录前言一、Session 认证机制1、了解Cookie2、使用二、JWT 认证机制1. JWT 的组成部分2. JWT 的使用方式3. 使用前言身份认证（Authentication）又称“身份验证”、“鉴权”，是指通过一定的手段，完成对用户身份的确认，主要用于校验身份信息。对于服务端渲染和前后端分离这两种开发模式来说，分别有着不同的身份认证方案：1、服务端渲染推荐使用 Session 认证机制2、前后端分离推荐使用 JWT 认证机制一、Session 认证机制1.
2022-04-24 05:22:22
534
原创 解决接口的跨域问题
解决接口的跨域问题文章目录前言一、CORS 跨域资源共享1、引入相关的中间件2、使用中间件3、配置中间件4、了解cors二、使用JSONP解决1、了解2、使用前言在我们使用express去写接口的时候，存在一个很严重的问题：不支持跨域请求。目前解决接口跨域问题的方案主要分两种：1、CORS（主流的解决方案，推荐使用）2、JSONP（程序员使用漏洞解决，缺陷是只支持 GET 请求）一、CORS 跨域资源共享1、引入相关的中间件我们需要下载相关的包npm install cors2.
2022-04-23 23:35:18
5346
原创 vue命名驼峰问题
项目场景：vue2创建好项目的时候，在给路由组件取名字的时候，ESLint会爆出错误，需要使用驼峰命名问题描述比如书我们在src下创建一个Home.vue作为我们的一个路由组件vscode提出报错：Parsing error: No Babel config file detected for C:\Users\Admin\Desktop\back\vue-back\src\view\login.vue. Either disable config file checking with requ
2022-04-20 21:49:45
6102
原创 了解深拷贝
深拷贝文章目录深拷贝的几种方式1. 通过JSON的拷贝方式2. 定义函数深拷贝的几种方式1. 通过JSON的拷贝方式代码如下（示例）： // 定义简单的对象 let objC = { a: 'zs', age: 18, arr: [1, 2, 3, 4], obj: { str: 'ls', age: 18 } } // 拷贝 let objA = JSON.parse(JSON.stringify(objC)) console.log(.
2022-04-19 22:00:00
546
原创 放大镜效果(vue)
放大镜效果(vue)文章目录使用步骤1.引入相应的包2.样式使用步骤1.引入相应的包因为使用了less所以这一步不是必须的npm i less --savenpm i less-loader --save2.样式代码如下（示例）：<template> <div class="spec-preview"> <img :src="myImg.imgUrl" /> <div class="event" @mouse.
2022-04-19 17:19:33
98
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人