blog
blog copied to clipboard
CatsAndMice
📖 凌览的博客
## 前言 早期CSS布局依赖display属性+position属性+float属性。它对特殊的布局非常不方便，如，垂直居中。 于是，W3C在2009年提出了一种新的方案——Flex方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，我们可以大胆地使用它。  浏览器兼容性链接： ## Flex布局是什么 Flex 是 Flexible Box 的缩写，意为"弹性布局" 任何元素都能设置display:flex，如，给div此类块级元素设置display:flex或给span行级元素设置display:inline-flex。 flex、inline-flex两者区别在于：inline-flex容器为inline特性，因此可以和图片文字一行显示；flex容器保持块级元素特性，宽度默认100%，不和行级元素一行显示。 Flex布局相关属性分为两类，一类作用于flex容器本身上，另一类作用于flex子元素上。 | 作用于flex容器上 | 作用于flex子元素上 | | --------------- | ----------- | | flex-direction | order...
 思维导图在线链接： 《影响力》是一本风靡全球二十载，史上最强大、最诡谲、最震慑人心的心理学畅销书!《财富》杂志鼎力推荐的75本商业必读书之一! 作者罗伯特·西奥迪尼全球知名的说服术与影响力研究权威。他分别于北卡罗来纳大学、哥伦比亚大学取得博士与博士学位，投入说服与顺从行为研究逾3年。如今是亚利桑那州立大学心理学系教授。 书籍中包含了六个原则，它们分别是互惠、承诺和一致、社会证据、喜好、权威和稀缺性。这些原则可以用来解释人们是如何被影响和说服的，并且可以帮助人们更好地运用影响力。 - 互惠原则： - 在餐厅中，服务员免费提供小甜点或一杯饮料，以期望顾客在店内用餐时回报这些好处。类似地，在购物中心或商场中，免费提供小礼品或优惠券，以期望顾客在店内购物时回报这些好处。这种策略可以增加顾客的满意度和忠诚度，并且可以提高销售额。 - 承诺和一致原则： - 在销售中，可以使用承诺和一致原则来建立客户的忠诚度。例如，向客户提供一份合同或协议，并要求他们在签署前确认同意，以期望在未来的交易中获得更多的信任和合作。同样，在网上营销中，可以要求客户填写调查问卷、订阅邮件或关注社交媒体账户，以期望获得更多忠实的客户。这种策略可以增加客户的参与度和忠诚度，并且可以提高品牌的知名度和认可度。 - 社会认同原则： - 在电商平台上，展示其他人对产品的评价和评论，以期望让更多的人购买该产品。类似地，在社交媒体上展示许多人喜欢某个品牌或产品，以期望吸引更多的追随者和客户。此外，有些公司会雇佣名人或微博红人来代言他们的产品，以期望吸引更多的客户。这种策略可以增加客户的信任度和购买意愿，并且可以提高销售额和品牌价值。 - 喜好原则： - 在品牌建设中，可以使用喜好原则来吸引和保留客户。例如，通过与社交媒体上的名人或意见领袖合作，提高品牌的知名度和认可度。 - 另一个例子是一些公司会在产品中注入一些社会责任的元素，比如捐赠一部分收益给慈善机构或环保组织，以期望吸引更多关注社会责任的消费者。这种策略可以增加客户的喜好和认同感，并且可以提高品牌的忠诚度和声誉。 - 权威原则： - 在销售高端产品或服务时，可以使用权威原则来展示产品的专业性和品质。例如，在医疗领域，一家医院可以展示他们的专业医生和先进设备，以期望吸引更多的高端客户。在旅游业中，一家高端度假村可以展示他们的五星级服务和精致的餐饮，以期望吸引更多的高端客户。这种策略可以增加客户的信任度和购买意愿，并且可以提高销售额和品牌价值。 - 稀缺性原则： -...
## 什么是代理 A同学在Ai大时代背景下开启他的创业之路，目前他遇到的最大的一个问题就是启动资金，于是他决定去找马云爸爸借钱，可想而知，最后碰一鼻子灰回来了，情急之下，他想到一个办法，找关系开后门，经过一番消息打探，原来A同学的大学老师王老师是马云的同学，于是A同学找到王老师，托王老师帮忙去马云那借500万过来，当然最后事成了。不过马云并不知道这钱是A同学借的，马云是借给王老师的，最后由王老师转交给A同学。这里的王老师在这个过程中扮演了一个非常关键的角色，这就是**代理**，也可以说是正向代理，王老师代替A同学办这件事，这个过程中，真正借钱的人是谁，马云是不知道的，这点非常关键。 ## 正向代理 我们常用的VPN，一般为正向代理。 正向代理特点为隐藏真实的客户端，服务端不知道请求的客户端是谁，客户端请求的服务都是代理服务器代替请求。 举个例子，国内的用户想要访问 Google 时，会被阻挡。 于是我们可以在国外搭建一台代理服务器（可以访问 Google 的服务器），让代理帮我去请求google.com，代理把请求返回的相应结构再返回给我。  当出现多个客户端时，是这样的：  ### Nginx正向代理配置 通过proxy\_pass配置代理地址http://google.com。当我们请求www.example.com将会被转发至http://google.com。 ```shell server { server_name www.example.com; listen 80; location / { proxy_pass...
# 前端Vue+axios实现阿里云oss文件上传(服务端签名直传) ## 问题描述 项目需要上传图片至服务器，但因为上传带宽慢，所以需要使用阿里云对象存储OSS用于上传文件，然后将上传后的文件链接处理上传到自己项目的服务器 * 问题一 上传文件到服务器端规定请求头中的`Content-type`使用`multipart/form-data`形式，由于缺少经验自己并不清楚使用`multipart/form-data`要如何发送请求 * 问题二 服务器端签名直传，首先是后端会提供一个接口，前端请求该接口后会返回一些字段数据，在依据返回的数据处理后再发送请求上传文件  其中`callback`字段我请求的接口数据没有，查看官网服务端签名直传还是没有弄明白，该怎么将返回的数据整合在一个`FromDate`对象中，然后发送`post`请求将`FromDate`对象传递给阿里云端的服务器 * 问题三 将问题二中的数据整合后，使用axios发送`post`请求。由于发送请求的`url`是问题二中返回数据的`host`，出于浏览器的同源策略会出现`跨域报错`。登陆阿里云后台配置阿里云服务器的`CORS`允许跨域请求后，请求依然会出现`跨域报错`  ## 问题解决 * 问题一 使用`multipart/form-data`形式上传文件，需要使用到`FormData`对象 1. 创建一个空对象 ```js let fromData = new FormData();...
## 📖阅读本文，您将收获 - 工作中如何使用 Git回退到某一个历史提交记录 - `git reset`与`git revert`两者的区别 ## 预设场景 > 我们先假设一个理想的场景， - 某公司有A、B两位员工共同维护一个项目 - 现在A、B都向Git源仓库提交过代码，A、B提交的历史记录如下： - A员工提交：A员工: 您好！ 提交的内容变动: - 创建一个`index.js`文件，并且写入`console.log('A员工：您好！');`  - B员工提交：B员工:点赞 提交内容变动： - 删除了`index.js`文件中`console.log('A员工：您好！');`这一行代码，并且写入`console.log('B员工：点赞')` -...
[玩转nodeJs文件模块](https://juejin.cn/post/7072972877628178440) [50+行代码搞定一行命令更新Npm包](https://juejin.cn/post/7068969844607189029) 上列两篇文章介绍了作者在开发一个工具库中，拥抱NodeJs简化一些重复性工作的实践。 但还不够！！！还可以再简化。  上图，从`isNaN.ts` 转成`isNaN.md`,在`/*...*/`写好注释直接生成该方法的文档介绍，这是我想要的。 类似[jsDoc](https://www.shouce.ren/api/view/a/13232)工具提供的功能。 其实，学习编程的过程就是学习造轮子的过程，咱也不重新造轮子，仿写一个最简单的功能即可。 ## step1：前置构思 * JavaScript注释一般有两种方式：单行注释、多行注释 单行注释 ```javascript //单行注释 ``` 多行注释 ```javascript /** *多行注释 * */ ``` 使用的是TypeScript语言，它是JavaScript的超集，注释方式与JavaScript完全是一样的。 我们只考虑多行注释，忽略掉单行注释。 * 多行注释应该包含以下部分： * 方法的描述，具体做什么的...
`JavaScript`中一旦被定义就无法再被修改的变量，称之为常量。 ES6中通过`const`定义常量，常量通常用**大写字母**定义，多个单词之间用\_分隔。 `const`定义常量后，如果修改常量会报错： ```javascript const PI = Math.PI; PI = 100; ```  这是`const`定义常量的特点之一。 但当我们使用`const` 定义常量，而赋值的是一个引用类型值，再修改常量可不一定报错了！！！ ```javascript const SKILLS = { CSS: 1 , JS: 2, HTML: 3 WEB_GL: 4...
## 前言 上篇[50+行代码搞定一行命令更新Npm包 - 掘金 (juejin.cn)](https://juejin.cn/post/7068969844607189029)介绍了自动化push仓库&&自动化更新版本等功能的实现。这篇说说自动生成模板文件、[rollup](https://www.rollupjs.com/)按需加载打包配置以及自动生成目录文件，简单得不像话！ ## 按需加载打包配置 > 按需加载听起来高大上，但本质就是将不同的模块功能文件分开打包成多个文件，而不是全部打包成一个主文件。 首先创建一个`rollup.config.js` 文件，然后下载需要的插件，创建文件`pluginsCommon.js` 用于配置共同的插件，相关代码如下: ```JavaScript const { getBabelOutputPlugin } = require('@rollup/plugin-babel') //用于将typescript编译成javascript const typescript = require('rollup-plugin-typescript2') const resolve = require('rollup-plugin-node-resolve') const...
> 业务开发过程中，经常用到`日期格式化`、`url参数转对象`、`浏览器类型判断`、`节流函数`等常用函数，为避免不同项目多次复制粘贴的麻烦，我封闭了工具库[https://github.com/CatsAndMice/medash](https://github.com/CatsAndMice/medash)。如果你也有常用的代码，欢迎为本项目提交pr。 ## 前言 工作之余，我一直再扩展[https://github.com/CatsAndMice/medash](https://github.com/CatsAndMice/medash)工具库。仓库部署在Github，文档使用了Gitee Page，但每次 push代码或更新文档都需要手动将Github代码同步Gitee，并且需要人为点击更新按钮重新部署Gitee Page，有点蠢。Github Actions可以帮我自动化完成前述操作，本文记录我配置Github Actions的过程，希望能帮助到有类似需求的读者。 ## 配置Github Actions 首先需要知道Github Actions是什么，这里准备一篇阮一峰老师Github Actions介绍文章[GitHub Actions 入门教程 - 阮一峰的网络日志 (ruanyifeng.com)](https://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html)。 ### 创建Github工作区 在项目文件夹下面，创建`.github\workflows` 文件夹，然后创建一个`.yml` 类型的文件，这里我取名为`gitee-repos-mirror`。  #### 向 `gitee-repos-mirror.yml`文件添加配置...
### 起因 非科班自学前端，已就业将近一年。一年的工作中，经常性发觉自己在写重复性的业务代码，相似的的交互效果，在不同的页面因代码耦合不易拆分需要再次实现一遍，浪费宝贵的划水时间🚣🏻，总想将常用的交互或方法抽取出来，写一个自己组件库或工具库。日常逛掘金一次偶然的机会看到了DevUI官方正在招募开源爱好者，参与开源可以向大姥学习一波，又能美化简历。应对明年春招，百利而一害。于是果断地扫码加入DevUi核心群中。 ### 参与 DevUi开源者太活跃了，一点机会也不给我。差不多蹲了两周左右，终于有组件释放了🎢，快速评论领取  开工，看提交代码规则！！！ Popover组件提交过6次，其中有三次，因为提交检视各种各样的问题，时间线拖得非常的久，于是干脆直接关闭，重新再提了。  写写停停，大概花了一个多月，终于把Popover组件完成了 ### 感受 成为DevUi贡献者是一件非常开心的事，开发中遇到问题都会有大姥帮忙进行解答 ，自己可以学习大姥的编码规范。亲身经历一个组件从0到1的过程，更要学会写单元测试(小公司不要求写)，接触到小公司没有的东西。 另外，我认为开源是会上瘾的，公司业务使用了vant组件库，使用的过程中，发现了Cascader组件可以添加的扩展功能点。果断的提issue并要求自己pr   借开源的热情，自己现在准备写一个自己的工具库(不好用ts重构中)，汇总抽离出项目中常用的方法，节省点重复开发的时间。  最后，希望DevUi越做越好，我会持续关注它。有机会继续PR