霸霸最棒-CSDN博客

原创前端超好用的web调试抓包工具——whistle的安装及pc端和移动端真机使用

前端日常移动端开发过程中，对于真机问题经常需要抓包解决，但是我自己手机是安卓手机，android 7.0后，对于https的请求，最近发现了另一个好用的工具（whistle），简单介绍一下使用步骤。代理设置为手动，服务主机名为你主机的ip地址，可以在终端中运行ipconfig查看，然后将端口设置为8899，就可以捕获手机的网络请求了。首先打开浏览器扫描扫描HTTPS 里面的二维码下载CA证书安装后再信任，进入wifi设置，长按你所连的wifi，点击修改网络。

2022-09-28 11:18:22 2930 1

原创常用scss函数基本使用及操作（mixin）

scss自出来之后，广受欢迎，如何能快速写出想要的css呢，可自定义一些scss方法，本人罗列了一些最近用到的scss函数，其实包括文本超出范围的格式化、弹性盒子居中、左浮动、右浮动、iPhone适配、细边框、图标、背景、伪类样式改变等。在scss中除了可以定义变量，具有@extend和@mixins等特性之外，还自备了一系列的函数功能。

2022-09-22 12:02:24 2952

原创 css3中的scroll-behavior属性让滚动条可以平滑滚动动画

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，当用户通过鼠标滑轮滚动或者手机触屏滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。: 表示允许滚动时采用平滑过渡，而不知直接滚动到相应位置，最常见的比如回到顶部按钮和锚点。: 默认值，表示滚动框立即滚动到指定位置。

2022-08-23 18:43:13 4047

原创如何访问vue打包后的dist文件在本地启动并运行起来

本地测试运行vue打包后dist文件

2022-07-11 14:24:32 4490

原创构建vue3+typescript+eslint+prettier项目

安装vue-cli3（需要安装3.x以上版本）npm install -g @vue/cli vue -Vvue create 【项目名】【我们选择第三个自定义安装】【（*号代表选中）根据自己项目需求空格选中，选中完回车确认】【选择vue版本，选择3.x】到此为止，安装就完成了，可以等待安装成功。............

2022-07-01 18:00:03 388

原创 css快速解决方案，微信小程序和H5底部栏 iPhoneX安全区域(Safe Area)底部小黑条在的屏幕适配

使用苹果官方推出适配方案css函数env()、constant()来适配苹果官方推荐使用env()，constant()来适配，建议使用该方案，不需要管数值具体是多少。这2个方法是什么呢？env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：safe-area-inset-left：安全区域距离左边边界的距离safe-area-inset-right：安全区域距离右边边界的距离safe-area-inset-top：安全区

2021-12-24 14:26:17 2984

原创地图名片：百度地图高德地图 pc 移动端快速实现地图生成、标记以及标注获取链接及代码（霸霸看了都说好）

概述我们在一些企业网站或移动网页中，都会发现有一个在线地图之类的按钮，点击之后就会出现该企业在百度地图中的位置，而且地图还能放大缩小，甚至还会显现相关的周边信息，比如公车地铁路线等，其实这个就是所谓的地图名片高德地图链接地址：https://lbs.amap.com/tools/card百度地图链接地址：http://api.map.baidu.com/mapCard/setInformation.html...

2021-09-10 14:49:03 891

原创全网git最全相关常用基本用法命令大全及分支操作指南命令（霸霸看了都说好）

Git 基本操作Git 的工作就是创建和保存你项目的快照及与之后的快照进行对比。Git 常用的是以下 6 个命令：git clone、git push、git add 、git commit、git checkout、git pull说明：workspace：工作区staging area：暂存区/缓存区local repository：版本库或本地仓库remoterepository：远程仓库简单的操作步骤$ git init //初始化仓库。$ git add . // 添加

2021-09-08 15:26:05 2955 1

原创全网最新最全的Postman中文汉化版下载地址，持续更新（霸霸看了都说好）

存储库地址：Github：https://github.com/hlmd/Postman-cn码云：https://gitee.com/hlmd/PostmanCn下载地址：Github：https://github.com/hlmd/Postman-cn/releases码云：https://gitee.com/hlmd/PostmanCn/releasesCSDN：https://so.csdn.net/so/search?t=doc&u=weixin_42403306&q=

2021-09-01 18:08:18 13073

原创 Python爬虫+夜神模拟器+Fiddler抓取手机APP数据接口 -- 图文教程（霸霸看了都说好）

Fiddler的抓包原理Fiddler是强大的抓包工具，它的原理是以web代理服务器的形式进行工作的，使用的代理地址是：127.0.0.1，端口默认为8888，我们也可以通过设置进行修改。代理就是在客户端和服务器之间设置一道关卡，客户端先将请求数据发送出去后，代理服务器会将数据包进行拦截，代理服务器再冒充客户端发送数据到服务器；同理，服务器将响应数据返回，代理服务器也会将数据拦截，再返回给客户端。Fiddler可以抓取支持http代理的任意程序的数据包，如果要抓取https会话，要先安装证书。工具

2021-08-30 14:35:58 1567

原创 python中连接mysql数据库，创建数据库和表，实现数据库增删改查操作示例代码（霸霸看了都说好）

python中连接mysql数据库，创建数据库和表，实现数据库增删改查操作示例代码

2021-08-27 18:11:33 1327

原创 python3实现爬取豆瓣首页导航的数据存入mysql数据库源代码操作示例（霸霸看了都说好）

最近做了一个爬虫爬取豆瓣首页的数据并存入数据库的基础案例功能，现在把完整功能供大家参考。首先，我们需要下载一个新的python套件，pymysql , 网上有很多的安装教程，可以使用pip install pymysql，也可以使用安装包。import requestsfrom bs4 import BeautifulSoupimport pymysqlprint('连接到mysql服务器……')db = pymysql.connect(host='localhost',

2021-08-26 17:23:37 464

原创超详细 MySQL8.0的下载、安装配置教程、连接数据可视图形化界面和卸载及MySQL基本使用教程（霸霸看了都说好）

文章目录MySQL8.0下载安装MySQL卸载常见问题解决方式MySQL基本使用教程（使用MySQLworkbench）1、创建数据库2、创建表、删除表3、修改表的名字4、为数据表增加、修改、删除字段5、关于修改数据库名字6、拓展：pycharm操作MySQL首先，去数据库的官网链接: http://www.mysql.com下载MySQL。MySQL8.0下载点击进入后的首页如下：然后点击downloads，community，选择MySQL Community Downloads。如下图

2021-08-25 16:51:16 46945 4

原创 js多条件判断语句简化用es6中map简化复杂条件判断（霸霸看了都说好）

这样的的代码过于臃肿，不容易理解，后期维护难度大const isDel = (op, o) => { let fal = false; if (op.is_show_lock && op.is_show_sf && op.is_show_bz) { if (o.is_lock && o.is_sf && o.is_bz) { fal = false; } else

2021-08-24 18:08:32 1678

原创 python3-xlwt-Excel设置表格基础(字体颜色背景颜色设置边框边框颜色冻结窗口字体大小字体高度字体加粗下划线斜体字单元格对齐方式自动换行删除线超链接插入公式)

文章目录引入xlwt和创建workboos对象初始化样式和创建设置字体，赋值给style保存文件自定义样式字体颜色背景颜色设置边框边框颜色冻结窗口字体大小字体高度字体加粗下划线斜体字设置单元格对齐方式设置自动换行设置删除线超链接worksheet.write_formula插入公式引入xlwt和创建workboos对象# 写入Excel文件的扩展工具import xlwt# 创建workboos对象book = xlwt.Workbook(encoding="utf-8", style_comp

2021-08-24 15:19:06 4743

原创 python3爬虫最全基础知识实例练习，数据列表，抓取图片链接，获取HTML解析，获取下一页的URL和网页内容，数据写入excel（霸霸看了都说好）

代码展示用到最基本的操作知识，请求，html解析，抓取图片链接，获取下一页，数据写入excel，基本爬取网页的流程都有所涉猎# 请求import requests# html解析from bs4 import BeautifulSoup# 正则import re# 写入Excel文件的扩展工具import xlwt# 图片链接itemImg = re.compile(r'src="https://pic4.ajkimg.com/display/58ajk/(.*).jpg"')#

2021-08-23 17:39:45 197

原创 js javaScript object对象属性和所有方法及es6对象的新增方法（霸霸看了都说好）

ES6 Object对象的新增方法Object.is()它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。Object.is('foo', 'foo')// trueObject.is({}, {})// falseObject.assign()Object.assign()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。const target = { a: 1 };const source1 = { b: 2 }

2021-08-18 15:27:09 1069

原创 es6之三个点（...）扩展运算符数组和对象的使用场景及最常见的用法（霸霸看了都说好）

概念es6之扩展运算符 (…) 简称三个点数组的扩展运算符应用复制数组扩展运算符提供了复制数组的简便写法。const a1 = [1, 2];// 写法一const a2 = [...a1];// 写法二const [...a2] = a1;合并数组扩展运算符提供了数组合并的新写法。const arr1 = ['a', 'b'];const arr2 = ['c'];const arr3 = ['d', 'e'];// ES5 的合并数组arr1.concat(arr2,

2021-08-18 11:32:35 1379

原创 es6 运算符的扩展：||= &&= ??= || ?. ??、指数、链判断、 Null 判断、逻辑赋值运算符应用场景及使用（霸霸看了都说好）

指数运算符ES2016 新增了一个指数运算符（**）2 ** 2 // 42 ** 3 // 8这个运算符的一个特点是右结合，而不是常见的左结合。多个指数运算符连用时，是从最右边开始计算的。// 相当于 2 ** (3 ** 2)2 ** 3 ** 2// 512上面代码中，首先计算的是第二个指数运算符，而不是第一个。指数运算符可以与等号结合，形成一个新的赋值运算符（**=）。let a = 1.5;a **= 2;// 等同于 a = a * a;let b = 4;b

2021-08-17 18:07:49 1163 2

原创 es6解构赋值以及常见的使用场景和应用（霸霸看了都说好）

什么是解构赋值解构赋值是对赋值运算符的扩展。es6允许按照一定的模式，从数组或对象中提取值，给变量进行赋值，称为解构赋值。数组的解构赋值基本用法下面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。let [a, b, c] = [1, 2, 3];// a = 1 , b = 2, b = 2默认值解构赋值允许指定默认值。let [foo = true] = [];// foo = truelet [x, y = 'b'] = ['a']; // x='a', y='b

2021-08-17 17:30:42 689

原创微信小程序 icon图标 SVG代码转码为Base64编码格式并使用（霸霸看了都说好）

文章目录SVG 简介什么是SVGSVG有哪些优势SVG在小程序中的使用获取SVG资源获取对应SVG代码将SVG代码转码为Base64编码格式在具体代码中引用SVG展示效果SVG 简介什么是SVGSVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML 格式定义图像。它是可以用于描述静态图、动画，以及用户界面的一种图形格式。1999年由万维网联盟发布。于2013年成为W3C推荐标准。SVG有哪些优势SVG 可被非常多的工具读取和修改SVG 与JPE

2021-08-17 15:23:30 4218

原创 vue3 require.context 实现基础组件的自动化全局注册模块自动化加载（霸霸看了都说好）

vue3 基础组件的自动化全局注册在日常开发中，有一些组件是比较常用，但是为了避免在开发过程中不停地引入，或者在main.js中注册，，或者每添加一个组件就需要手动注册一次。则直接进行自动化全局注册。由于全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。在 Vue 3.0 项目的 main.js中，无法使用 Vue.omponent 进行组件注册, 取而代之的是 createApp() 返回的实例//main.jsimport { createApp } from

2021-08-13 14:54:56 1573 1

原创 vsCode Beautify插件，可格式化css,js,less代码（霸霸看了都说好）

1.vscode拓展商店搜索插件名2.安装完插件，需要重启vscode生效。3.ctrl + s：保存的文件的时候，自动格式化

2021-08-13 11:17:17 4812

原创 vue运行报错 ./src/main.js in multi (webpack)-dev-server/client?...（霸霸看了都说好）

报错内容如下图：ERROR Failed to compile with 1 error 9:49:18This relative module was not found:./src/m

2021-08-13 09:58:15 18009 3

原创 vscode vue settings.json 代码格式化配置！自定义设置 VSCode代码颜色设置（霸霸看了都说好）

配置VS Code 文件 -> 首选项 -> 设置 -> 用户设置栏 -> 扩展 -> Vetur打开文件加入如下配置：{ // tab 大小为2个空格 "editor.tabSize": 2, // 字體大小 "editor.fontSize": 16, // 設置行高 "editor.lineHeight": 25, // 保存时格式化 "editor.formatOnSave": true,

2021-08-11 11:55:53 3928 1

原创 vscode 设置代码片段 Vue设置代码模板（霸霸看了都说好）

1、经常用到的 vue代码模板可以通过设置 vscode 进行设置2、找到vue配置文件3、替换模板格式代码{ "Print to console": { "prefix": "vue", "body": [ "", "<template>", "<div class=\"\">", "", "</div>", "</template&g.

2021-08-10 17:53:44 363

原创已解决 js浮点数(小数)加减乘除丢失精度问题（霸霸看了都说好）

在 JavaScript 中整数和浮点数都属于Number数据类型，所有数字(包括整数)都是以 64 位浮点数形式储存。JavaScript 里的数字是采用IEEE 754标准的 64 位双精度浮点数，计算机进行计算的时候，会把数字转换为二进制，进行运算之后再转换为十进制，但是运算过程中小数部分最多支持52位，就会出现运算精度问题。javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这些函数返回较为精确的加减乘除结果。加法函数加法函数，用来得到精确的加法结果调用：accAdd(

2021-08-10 14:34:02 2340 1

原创已解决 vue ，uniapp，微信小程序实时监听input只能输入为数字和小数点（霸霸看了都说好）

解决方案<input class="number_box_input" type="number" v-model="val" @input="checkNum($event)"/>// 方法checkNum(e) { let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "") console.log(val); if (!val) { this.val = ''; return } var reg = /[^\d.]/

2021-08-10 11:34:38 1788

原创基于Vue-Cli 4+Vue 创建、发布自己的 UI、 H5组件库打包并发布到 npm（霸霸看了都说好）

文章目录1、创建项目1.1调整目录1.2.创建测试组件3、配置项目以支持新的目录结构4、根目录新增vue.config.js5、修改package.json6、发布到 npm，方便直接在项目中引用6.1在根目录添加 .npmignore 文件，设置忽略发布文件6.2登录到 npm6.3发布到 npm6.4发布成功7、使用新发布的组件库7.1安装组件库依赖全局注册7.1在组件中使用1、创建项目在指定目录中使用命令创建一个默认的项目，或者根据自己需要自己选择。vue create add-ui1.1调

2021-08-09 18:05:41 957

原创 ES6 js JavaScript Array数组方法大全（霸霸看了都说好）

ES6 Array数组方法大全#数组浅拷贝和深拷贝的区别浅拷贝如果数组元素是基本类型，就会拷贝一份，互不影响，而如果数组元素是数组或者对象，就会拷贝对象的和数组的引用，我们无论在新旧数组进行修改，两者都会发生变化。深拷贝深拷贝就是完全的拷贝一个对象，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个concat() 合并两个或多个数组，返回一个新的数组const...

2019-03-20 11:18:50 3785

霸霸的博客