鱼与前端🐟

前言大家可能都有过这样的经历，把博客建立在类似github上面的外网上，然后国内正常的访问方式访问博客，静态资源的加载速度都非常的慢，解决这个问题的方法就是使用CDN，依赖市场上的CDN，可以实现博客的加速访问，接下来就来详细讲述CDN（内容分发网络）的原理。 Content Delivery NetworkCDN全称是Content Delivery Network，俗称内容分发网络，它是集中在世界各地的边缘服务器的集合。当你的服务器需要给来自世界各地的用户响应内容的时候，由于距离原因难免会有很大的网络延迟，所以就有人专门在世界各地设置了能帮你转发内容的服务器，并且有专门的人员进行维护。这些服务器叫做边缘服务器，意思就是接近用户的服务器，它们构建起来就是内容分发网络体系。CDN的这些服务器就是近距离给用户发送网页内容的。 分发内容CDN服务器分发的内容分为两个部分，一个是静态内容，一个是动态内容。简单的理解可以是长期不需要改变的内容为静态内容，经常需要改变的内容为动态内容，就好比网页中的标题，导航栏等，就是一开始设计好之后就基本不会更改的。而类似于echarts图表这种，可能会随某 ...

前言最近在了解性能优化的时候发现了vue的打包优化，其原理就是通过cdn的方式引入插件从而减小打包后的js和css体积。还有一个则是一款插件，可以让vue打包后以网页的形式显示js和css体积，更加直观。 webpack-bundle-analyzer效果预览安装方式使用教程鼠标移动到上面会显示相关的js大小项目地址：传送门1234# NPMnpm install --save-dev webpack-bundle-analyzer# Yarnyarn add -D webpack-bundle-analyzer 安装 打开package.json，修改script下面的build12345"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --report", "lint": "vue-cli-service lint"&# ...

前言记录一下牛客网的错题记录以及知识点，用于查漏补缺 基础不牢，地动山摇Day1 行内元素 行内元素典型代表 span ,a, ,strong , em, del, ins特点：在一行上显示不能直接设置宽高元素的宽和高就是内容撑开的宽高。行内块元素（内联元素）典型代表 input img特点：在一行上显示可以设置宽高块元素典型代表,div,h1-h6,p,ul,li特点: 独占一行可以设置宽高嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。行内元素不可以设置宽高，但是可以设置 左右padding、左右margin `link`和`import` link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件link属于html范畴 import属于css范畴1<link rel="icon" sizes="any&qu ...

前言记录用vue-cli打包vue项目之后上传静态资源到github的踩坑向 开始踩坑首先对于新版的vue-cli打包，指令是1npm run build这个是没有变的在打包之前 必须注意的一点是，新版的cli已经没有config文件夹了，需要自己新建vue.config.js然后配置参数1234//这个是为了防止服务端找不到地址module.exports = { publicPath: './'}必须注意的第二点：在.gitignore文件夹下面，把有关dist的行数删掉必须注意的第三点：如果你的路由是history模式，建议直接注释掉或者改hash模式接着执行npm run build 会生成一个dist文件夹，检查里面的index.html的css和js路径是否正确。如果完全是静态的可以live server打开，动态的需要用tomcat或者node进行测试下面贴一个用node测试的 node test 新建文件夹初始化 可以直接一直回车1npm init安装expres ...

前言最近博客没更新的原因是，emm在搞一个新的项目，完全的从0开始没有参考任何项目视频，然后现在也是项目大体功能要做完了，就在这里写一下本次项目踩过的坑以及一些经验，算是一期杂谈。源码地址：传送门1项目演示地址:传送门2 主体演示制作完毕~ 效果展示 构建工具+技术栈编译软件：vscode开发框架: vue2打包工具：vue-cliUI：vuetifyicon：阿里巴巴其他：vuex， vue-router，git插件：pubsub，nanoid，less-loader，vuex-persist 组件列表 项目难点本次项目综合了很多方面的问题，比如vuex模块化加数据持久化，对所有任务的时间排序，以及vuetify的栅格系统等等，各种方面的问题哈哈，但好在最后都能够解决出来 vuex模块化结合本地化存储vuex是一个很方便的官方提供的数据管理插件，但在使用的时候一遇到刷新就会导致数据丢失的问题。于是想到了localStorage结合本地存储的方式进行数据持久化。 方案一 localStorage方案2 vuex-presist原理很简单 对于自己设置的数据先使用JSON.par ...

前言本文主要用于记录vue3的使用，参考视频【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通】 Vue3主要介绍Vue3的提升 创建Vue3工程主要介绍vueclivite两种方法 一种是传统的vuecli 另外一种是vite使用vuecli创建该工程需要确保脚手架的版本在4.5以上使用指令可以查看123vue -Vorvue --version否则重新安装1npm install -g @vue/cli创建1vue create vue_test启动12cd vue_testnpm run serve先看一图流 分析工程解构主要介绍基本语法主要查看vue3和2有什么结构和写法上面的区别从mainjs上面看 引入和实例化app的方法不一样了 而且也不能用vue2的形式写了1234567// 引入的不再是vue构造函数了 而是一个精简版的createApp工厂函数import { createApp } from 'vue'import App from './App.vue'createApp(App).m ...

本文主要用于记录vue路由的使用，参考视频【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通】 vue-router主要介绍SPA是vue的一个插件库 专门用于实现spa应用全称single page web application整个应用只有一个完整的页面点击页面的xx链接不会刷新页面 只会做局部更新数据需要通过ajax请求获取 基本使用主要介绍基本语法注意事项下面以单页面多组件跳转为例子讲解router的基本使用安装vuerouter1npm i vue-router创建router文件夹 写入indexjs 并导入相关组件的地址和名字1234567891011121314151617181920// 导入vuerouterimport VueRouter from "vue-router";// 导入相关组件import JOJO from '../components/JOJO.vue'import DIO from '../components/DIO.vue'export default new ...

前言本文主要用于讲解以及记录js数组去重的八种方法 主要学习其中的编程思想 方法总览 第三方库下面推荐underscore和loadash，这两个库也是官网直接下载下来然后引入即可效果如下123456789<script src="./underscore-min.js"></script><script> var arr = [2,4,5,2,4,7,9,1,9,500]; function getUniqueArray(){ var result = _.uniq(arr); console.log(result); } getUniqueArray();</script> es6的set方法set方法里面的东西是独一无二的 利用这个特性去重123456789var arr = [2,4,5,2,4,7,9,1,9,500];function getUniqueArray(){ // 两种都可以 推荐上面的 // var re ...

前言本文介绍了落地页的内容，设计风格以及落地页对用户的吸引作用。 何为LandingPagelandingpage是一种网页设计风格制作的网页，中文名是落地页，像下面这几种它们都有非常鲜明的特点，就是非常集中式的引导用户进入某个选项。相比起传统的网页，落地页不需要用户去探索页面的各种内容，而是专于某种目的，比如推销产品，展现简历内容等。 LandingPage的制作其实landingpage的制作并不太需要很好的前端能力，甚至现在很多开发网页都可以使用框架生成或者软件生成，这样有助于设计者更专注于界面的设计而非功能的使用，并且因为落地页基本不需要后台的功能，所以落地页基本是静态的网站，也就加快了网页的访问速度，减少用户的等待时间，进一步留住用户提高访问量。另外，正常的网页中目标导向太多，导致用户不知道应该点哪个以进行下一步的选择，这样不仅会导致使用者的流失，也会导致设计者投资的广告费用白白浪费，所以一个正确的landingpage应该具有以下几点要求 精美的设计 收集信息的表格 详细的产品或服务描述 以往客户评价 关于实际制作landing page 需要使用到wordpress ...

前言本文主要用于记录前端面试常考题 前端基础HTTP/HTML/浏览器说一下http和https基本概念区别https的工作原理https协议的优缺点http 超文本传输协议 是互联网上应用最广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（tcp），用于从www服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少https 是以安全为目标的http通道，简单讲是http的安全版，即http下加入ssl层，https的安全基础是ssl，因此加密的详细内容就需要sslhttps协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性https协议需要ca证书 费用比较高http的信息是明文传输，https是经过ssl协议加密传输的端口不同 一般来讲http是80端口 https是443端口客户使用https url访问服务器，则要求web服务器建立ssl连接web服务器收到客户端的请求后，将网站的证书（里面包含公钥）返回or传输给客户端客户端和web服务器端开始协商ssl链接的安全等级客户端浏览器通过双方协商一致的安全等级，建立会话 ...