javascript
关注
分享
扫一扫
oopsWeb!
Frank个人博客www.miss-you.top
展开
-
React、Vue、Angular 实现SSR 预渲染 SEO优化
React、Vue、Angular 实现SSR 预渲染 SEO优化原创 2022-12-16 19:00:49 · 838 阅读 · 1 评论 -
前端简易配置自动化部署
前端自动化部署前端简易配置自动化部署前端简单实现自动化部署原创 2022-12-16 18:37:09 · 325 阅读 · 0 评论 -
服务器安装NodeJS
Linux服务器安装Nodejs原创 2022-12-12 15:28:03 · 706 阅读 · 0 评论 -
前端linux环境使用nginx部署项目并开启gzip压缩
前端在linux环境中使用nginx部署项目vue和react部署项目使用compression-webpack-plugin开启gzipvue和react使用gzip打包前端项目webpack打包优化原创 2022-06-21 20:07:06 · 2723 阅读 · 1 评论 -
create-react-app中引入less的相关配置以及CSS Modules使用
react引入lessless每次保存都会自动生成csscreate-react-app为什么不能用less？React中css会被共享，全局污染原创 2022-06-15 17:57:48 · 2041 阅读 · 1 评论 -
前端将table导出excel表
通过前端将table数据导出excel表，js-export-excel插件原创 2022-06-14 13:55:27 · 2737 阅读 · 2 评论 -
react和vue配置proxy跨域请求并且查看测试proxy是否生效
前端查看测试proxy代理是否生效原创 2022-06-09 16:44:39 · 4001 阅读 · 0 评论 -
react使用i18next实现国际化
react使用i18next实现国际化原创 2022-06-08 17:34:42 · 608 阅读 · 3 评论 -
js实现复制粘贴板功能方法
js实现复制粘贴板功能原理：利用input中框选，以及利用document.excCommand实现复制。const copyIpt = document.createElement('input'); // 创建dom用于存储需要复制的值document.body.appendChild(copyIpt); // 插入在页面中copyIpt.setAttribute('value', data); // 为生成的dom添加value，以便框选copyIpt.select(); // 选中i原创 2022-04-15 14:40:21 · 770 阅读 · 0 评论 -
本地nginx代理配置跨域请求
本地nginx下载地址一、下载本地nginx后解压并修改核心文件cong/nginx.conf cong/nginx.conf server { listen 8099; // 本地设置访问端口号,可自行配置，以免出现端口占用的情况 root E:\\MFA\\selfhelp-login\\login; // 需要配置代理的项目根路径 index login.html; // 根文件，一般为index原创 2022-03-28 11:17:30 · 1579 阅读 · 0 评论 -
js随机字符a-zA-Z0-9
随机（a-z，0-9）Array(length) 创建length长度的空数组，用作循环指定个数的随机数Math.random() 返回0-1之间的浮点数 // 0.8055606175539534Number.toString(radix)radix为进制数，默认是10进制，支持[2,36]之间的整数，2代表二进制，8则为八进制，16位十六进制，按照进制数算，radix为16的话则会使用a-f来代表10-15之间的数，相同，36则会返回0-9a-z之间的数const原创 2021-12-11 09:45:14 · 1967 阅读 · 0 评论 -
git 版本回退基本使用方法
git版本回退分为两种方式，一种是回退commit记录，一种是commit加内容都回退git rever原创 2021-10-27 20:18:21 · 1536 阅读 · 0 评论 -
js封装监听滚动条触底加载事件
js在vue中封装监听滚动条触底加载事件此方法在原生JS以及React中同理使用，如果不用ref也可修改方法中的获取事件对象的方式即可在监听滚动条触底事件时会有一个问题 ： 滚动条一触底 ，事件不只触发一次，而是多次，这样会一下发多次请求，导致达不到预期效果还影响性能，所以此处我做了一个简易的节流来解决此问题。最后通过scrollFoot(event)调用，ref的事件对象为实参传入当已滚动的距离加上dom元素可视区的距离 等于 滚动条总高度时代表触底了 // 滚动条触底事件 data(原创 2021-10-20 09:10:03 · 1778 阅读 · 0 评论 -
只遍历一次求第二大的值
不使用sort，只遍历一次怎么拿到第二大值？可以通过遍历数组，初始拿到前两个的值，每遍历一个元素就判断大小交换变量，保证每次遍历，a始终比b大，b也始终比后面遍历的值要大，如果不是则交换 let arr = [4, 5, 6, 2, 10] let a = arr[0] let b = arr[1]// 之所以加1 就是为了让它多循环一次，不然最后一个为最大值的话，那么b将会是最大值，所以我要让它多判断一次 a 是否大于 b for (let i = 2; i < arr.lengt原创 2021-10-05 17:34:34 · 808 阅读 · 0 评论 -
js中抛出异常中断forEach
怎么中断forEach？forEach一旦执行，只用过return的话，它是只会跳过本次遍历，还是会走完全部，所以想要中断forEach的话，可以通过在其中手动抛出异常的方法去中断forEach let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] try { arr.forEach(item => { if (item > 4) { throw 'error' } console.log(1);原创 2021-10-05 17:24:41 · 1244 阅读 · 0 评论 -
js实现图片上传预览功能
js实现图片上传预览功能很多业务场景下，我们需要在用户上传图片前，先预览待上传的图片<body> <input type="file"> <img src="" alt=""></body></html><script> const ipt = document.querySelector('input') const img = document.querySelector('img') ipt.ad原创 2021-09-17 16:04:57 · 532 阅读 · 0 评论 -
axios基本封装、请求拦截和响应拦截配置
我们可以在此配置请求拦截，响应拦截等大部分请求都需要携带token，我们可以在请求拦截中进行配置，让页面每次发起请求时都被拦截下来加上token再通过。import axios from 'axios'// 在此可判断当前是什么环境 开发环境、生产环境const isDev = process.env.NODE_ENV;// 基础配置const ins = axios.create({ // 根路径 根据上方判断的环境 切换不能请求根地址 baseURL: isDev ? 'http://原创 2021-09-16 10:09:59 · 722 阅读 · 0 评论 -
过滤存在嵌套的数组，并将符合的返回，原格式不变
根据搜索 过滤出存在嵌套的数组，并将符合的返回，格式不变 利用JSON将原数组拷贝一份，这样可以避免原数组被改变，再每个元素中遍历元素中嵌套的数组，将符合条件的返回给当前的数组，这样可以保证数据格式不变，遍历完嵌套数组后 判断data中是否有数据，有则返回，防止出现返回一个空数组的情况newList = JSON.parse(JSON.stringify(List)).filter(item => { item.data = item.data.filter(ite原创 2021-08-20 19:42:45 · 622 阅读 · 0 评论 -
根据数组中嵌套的对象属性进行去重
根据数组中对象属性进行去重先遍历循环原数组，声明一个计数器，用于记录新数组的遍历次数，在新数组的循环遍历中判断，新数组中每个对象的name属性是否等于原数组对象中的name属性,新数组每循环一次就判断新数组中对象属性是否都不存在都不存在则num会和新数组长度相等，有一次属性存在，num就会少加1，当前对象就不会被push到新数组中list.forEach((item) => { let num = 0; this.newList.forEach((items) =>原创 2021-08-20 19:25:03 · 404 阅读 · 0 评论 -
jQuery使用总结
入口函数$(document).ready(function(){ });语法糖可简化为$(function () { })$的另一种别名jQuery，也可以自定义别名const $j = jQuery.noConflict() DOMjQuery核心功能用来快速查找节点 - queryjq中的节点查询 仿照了css选择器的规则，因此我们把jq的dom称为选择器元素选择$("#box"); //ID选择$(".box"); //类选择$("div"); //标签选择$(原创 2021-07-31 09:40:17 · 365 阅读 · 0 评论 -
javascript常用字符串方法
字符串常用方法str.charAt(idx); 查找idx索引的字符，返回布尔值str.indexOf(val); 返回val在字符串中第一次出现的位置，返回索引str.lastIndexOf(val); val在字符串中最后出现的位置，返回索引str.search(exp); 和indexOf一样，但该方法可支持正则查找str.substr(start,length); 从start截取length个字符str.substring(start,end); 从start截取到end原创 2021-07-17 17:33:21 · 181 阅读 · 0 评论 -
javascript常用数组方法
数组方法 查询索引arr.indexOf('b'); // 找到返回元素索引位置，找不到返回-1查询索引arr.lastindexOf('b'); // 查找在数组中最后出现的位置，返回索引检测元素arr.includes('b'); // 检测数组中是否存在该元素，返回布尔值截取数组元素arr.slice(1,3); // 截取从索引1开始到索引3之前的元素，返回截取的新数组删除数组元素arr.splice(1,3); // 从索引1开始，删除3个，返回被删除的元原创 2021-07-17 16:59:13 · 194 阅读 · 0 评论 -
javascript高阶函数
高阶函数 forEachforEach用于遍历数组中所有元素，用法非常广泛，例如用在循环绑定事件arr.forEach(function(item,index){ //item为当前循环的元素，index为当前元素的索引}) map用于遍历数组，和forEach使用基本一致，只不过map有返回值,会返回一个新数组，原数组不变。// 形参中item表示遍历的当前元素，index表示当前元素索引，arr表示原数组;const newArr = arr.map(func原创 2021-07-17 16:32:20 · 147 阅读 · 0 评论 -
javascript笔记总结
JavaScript基础JS是支持面向对象编程的跨平台脚本弱类型的语言面向对象是一种思想跨平台：ios、Android、windows、Linux脚本：依赖其他才能解析弱类型：变量在声明后还可以改变js组成DOM：文档对象BOM：浏览器对象ECMAScript：规范js的变量是用来储存数据的容器js的输出方式alert（） /浏览器弹窗、用户提示document.write（） //可在浏览器的显示区域显示文本console.log（） /控制台日志confir原创 2021-06-25 21:39:12 · 5515 阅读 · 0 评论 -
培养编程逻辑思维，javascript经典算法
1、输入一个三位数，判断是否为水仙花数。所谓水仙花数是值，每一位数的立方之和等于这位数本身 例如153 = 1 ^ 3 + 5 ^ 3 + 3 ^3var num = parseInt(prompt('请输入三位数'))var a = parseInt(num / 100) //提取第一位数var b = parseInt(num / 10) % 10 //提取第二位数var c = num % 10 //提取第三位数if(num == a*a*a + b*b*b + c*c*c) { con原创 2021-06-19 21:29:35 · 654 阅读 · 0 评论