解决Vscode提示code安装似乎损坏
最近打开vscode,老是有这样一句提示原因是我安装了一个叫background的拓展,并且编辑器的标题栏会显示不受支持四个字那么如何解决1.下载一个叫Fix VSCode Checksums的拓展2.ctrl+shift+P打开命令面板3.输入Fix Checksums: Apply4.重启vscode即可
解决微信小程序引入Iconfont,彩色图标变纯色
刚接触小程序,发现在引入iconfont图标,原来是彩色的图标变成了纯色这是引入小程序内的显示这是在iconfont上的图标我引用的方法是在iconfont上在线生成css,将里面的css复制直接粘贴到wxss就会出现这样的情况
原来小程序对应font-class不支持多色
引用方法名
支持多色
兼容性
unicode
×
好
font-class
×
良好
symbol
√
差
mini-program-iconfont-cli(微信小程序解决方案)把iconfont图标批量转换成多个平台小程序的组件。不依赖字体,支持多色彩。
在工作的根目录打开cmd,输入
1npm install mini-program-iconfont-cli --save-dev
2.输入命令,生成iconfont.json文件
1npx iconfont-init
3.打开json文件,将symbol_url替换成iconfont项目生成的js
4.输入命令生成icon文件夹
1npx iconfont-wechat
5.app.json中引入iconfont组件在你需要用到 ...
解决跨域的方法
title: 解决跨域的方法date: 2020-11-16 13:11:11tags: - 前端 - 笔记categories: 前端## 解决跨域的方法
在讲跨域之前,应该先了解一下浏览器的同源策略
同源策略是浏览器之间的一种约定,是浏览器最基本和最核心的安全策略,如果没有同源策略,网站很容易受到XSS和CSRF等攻击。
同源策略就是指网站:协议+域名+端口号三者相同
在同源策略下限制的内容:cookie,localStorage,sessionStorage,ajax请求
有三个标签允许跨域加载资源
<img>
<link>
<srript>
常见跨域场景当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。
注意:
如果是因为协议造成的跨域(http和https),前端是解决不了的,愉快的丢给后端人员解决
在跨域问题上,仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配”
解决跨域的方式
J ...
计算机网络思维导图
思维导图链接
typora+PicGo+腾讯云COS实现图片一键上传
typora+PicGo+腾讯云COS实现图片一键上传typora应该是很多人都会使用的一个记笔记软件,支持markdown,体验感极佳
但是在分享md文件时,往往出现md内的图片裂开,这是因为引用的是md作者电脑的本地文件,所以别人无法查看到图片
所以可以使用PicGo+腾讯云COS实现图片上传功能
PicGo下载picGo下载地址 https://github.com/Molunerfinn/PicGo/releases
图床配置
目前要选择V5版本(2021-12-18)
创建存储桶
一定要选公有读私有写
存储桶的名称对应存储空间名,地域英文对应确认存储区域
设置访问管理
新建秘钥
APPID和SecretId、SecretKey都有,对应填上去
保存、设置为默认地址
typora设置
现在上传图片就会自动上传到图床,图片地址也变成图床地址
Axios见解+源码浅析
Axios见解+源码浅析 在前后端项目开发过程中,从前台获取后台数据是一个很基本的操作,在我最开始学习的时候,是用XMLHttpRequest用于发送数据,到后面用JQuery封装好的ajax,开始接触前端VUE框架后,用axios来请求数据
为什么使用axios而不是ajax其实一开始我也有这样的想法,既然已经有了ajax,为什么我们在VUE项目中还是推荐使用axios呢,参考一些文章得出以下结论
主要从以下几个方面来看
大小
axios的体积比ajax要小的多,因为使用ajax要使用JQuery库(性能即王道)
针对方向
axios 符合前端MVVM的浪潮
ajax 本身是针对MVC的编程
实现方法与返回值
axios 用promise技术实现对ajax技术的封装 返回值是 promise(通过then可以进行链式调用,有效避免了回调地狱的问题)
ajax 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
安全
axios支持防止CSRF(跨站请求伪造)
在axios源码中有防止CSRF的字段,可以在配置的时候设置该字段起到防止 ...
Vue-cli4.5创建Vue3.x引入element-Ui
在Vue项目中常使用的一个UI库就是element-ui了
注意目前element-ui只支持Vue2.6以下的版本,如果想在Vue3.0使用这个组件库,就要使用element-pluselement-plus官网
步骤在Vue3项目根目录下
12vue add element-plusnpm install vue-cli-plugin-element-plus
全局引用src/plugins/element.js
12345import ElementPlus from 'element-plus'import 'element-plus/lib/theme-chalk/index.css'export default (app) => { app.use(ElementPlus)}
就可以使用组件了
按需引入在下载element-plus后,会自动帮我们创建一个配置文件,放在/src/plugins/element.js,全局引入的时候代码放在这里,更能体现模块独立的思想但是按需引入需要使用 ...
Vue3项目搭建
此文将介绍如何搭建一个Vue3项目基于官方文档
条件
Node 8+;
vue-cli 4+
npm 6.1+
可以再cmd中输入以下指令查看当前版本
123node -vvue -Vnpm -v
对于 Vue 3,你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。要升级,你应该需要全局重新安装最新版本的 @vue/cli:
1234// 卸载npm uninstall vue-cli -g// 安装npm install @vue/cli -g
也可以使用cnpm下载,这样速度会快很多
创建项目CLI创建项目把项目创建在myproject目录下
1vue create myproject
创建完成后可以在8080端口访问
vite创建项目尤大在vue3发布的时候着重说vite,所以也可以用vite+vue3来构建项目官网讲的很详细
1234npm init vite-app <project-name>cd <project-name>npm installnpm run dev
可以再3000端口启动项目亲测证明vite启 ...
vue报错之this.$router Is Undefine
vue报错之this.$router is undefine最近写项目遇到这个报错,特此记录一下
123456axios.get('/person/ticket').then(response => { this.$router.push('/ground') })
原因很简单,因为我使用的是箭头函数,改变了this指向,所以vue在这里找不到$router,从而报错
解决很简单,保留this即可
1234567const that = this;axios.get('/person/ticket').then(response => { that.$router.push('/ground') })
事件循环机制
事件循环机制首先,JavaScript是一门单线程语言,在一个时间上只能做一件事情
那么我们我们可能有很多个事情(任务)需要去完成,这时候,JavaScript就把我们要完成的任务放在了任务队列,并且分为了同步任务和异步任务
任务队列所有任务都可以分为同步任务和异步任务。同步任务就是我们要立即执行的任务,一般会直接进入主线程执行。异步任务,就是可以异步执行的任务,比如网络资源请求,setTimeout这些,会通过任务队列( Event Queue )的机制来进行协调
同步任务进入主线程,异步任务进入任务队列。当主线程内的所有任务执行完毕后,会去任务队列里读取相应的任务推入主线程执行,这就是我们常说的Event Loop(事件循环)
每次事件循环关键步骤如下图所示:
首先判断JS是同步还是异步,同步就进入主线程,异步就进入event table
异步任务在event table中注册函数,当满足触发条件后,被推入event queue
同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主线程中
宏任务主要包含:s ...