
Vue
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 评论 -
前端将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 评论 -
本地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 评论 -
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 评论 -
根据数组中嵌套的对象属性进行去重
根据数组中对象属性进行去重先遍历循环原数组,声明一个计数器,用于记录新数组的遍历次数,在新数组的循环遍历中判断,新数组中每个对象的name属性是否等于原数组对象中的name属性,新数组每循环一次就判断新数组中对象属性是否都不存在都不存在则num会和新数组长度相等,有一次属性存在,num就会少加1,当前对象就不会被push到新数组中list.forEach((item) => { let num = 0; this.newList.forEach((items) =>原创 2021-08-20 19:25:03 · 404 阅读 · 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 评论 -
Vue中监听地址栏路由改变
Vue中监听地址栏(路由)改变有时在遇到需要跳转子路由时让当前父路由隐藏,子路由显示可使用 watch: { // 监听地址栏改变 // to 可获取到哪去的地址 // from 可获取到从哪来的地址 $route(to, from) { if (to.fullPath.includes("search")) { this.flag = true; } else { this.flag = fal原创 2021-08-14 11:07:20 · 678 阅读 · 0 评论