js
南城夏季
一路浅行
展开
-
wujie微前端接入笔记
微前端是一种软件架构模式,旨在将前端应用程序拆分为更小、更独立的部分,这些部分可以独立开发、部署和维护。每个微前端部分代表着一个小型的前端应用,可以由不同的团队独立开发,并且可以独立部署到生产环境中。这种模式使得团队可以更灵活地构建和扩展前端应用,同时降低了应用的复杂性和维护成本。通过微前端,不同团队可以在不同的技术栈下开发各自的前端功能,并将它们组合成一个完整的前端应用。原创 2024-04-19 11:36:12 · 935 阅读 · 0 评论 -
前端开发常用网站
1.2.1.2.原创 2023-05-11 09:33:36 · 78 阅读 · 0 评论 -
element table合并表头后乱序了
这块代码看似没有什么问题,但是实际上渲染的时候会乱序,这里有个小技巧,直接加一列空白列,让空白列乱序,而其它列保持正常。这里封装了一个通用表格,所有列配置通过父组件传入。例如:本来应该排在第一列的表头跑到最后一列了。原创 2023-04-14 11:01:15 · 297 阅读 · 0 评论 -
scale 缩放后还是满屏怎么解决(如何满屏缩放)
需要网站等比例进行缩放,且缩放后还是可以保持满屏,一开始使用了scale,但是无论怎么设置还是会留有空隙,所以觉得采用js来控制,直接获取所有节点,缩小他们的字体大小。原创 2023-04-04 16:37:49 · 369 阅读 · 0 评论 -
前端小技巧
自定义指令是用来操作DOM的,尽管vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和拓展,不仅可用于定义DOM操作,而且是可复用的。参数说明:dire指令名称el当前绑定的dom元素bindings指令解析后的结果,包括指令名称、参数、表达式等,bindings.value返回的是表达式vnode对应的虚拟dom//对象注册形式示例: Vue . directive('dire' , {原创 2023-03-14 16:55:50 · 2043 阅读 · 2 评论 -
js关闭其他标签页
场景: 你自己是a网站,你要新开一个tab页跳转到外部b网站,在b网站操作完成后,关闭b网站。原创 2023-03-14 15:58:10 · 600 阅读 · 0 评论 -
js查找数组的重复项和对应的下标
处理逻辑,每一项都跟后面的每一项进行对比,所以是要遍历2次的。原创 2023-01-13 10:16:16 · 1373 阅读 · 0 评论 -
3D three.js(1)怎么写一个3D旋转的正方体
效果如图所示:本篇暂未用到three.js,但是能学到一些基础的3D知识!先记住xyz轴的展示和画法:rotate:左手法则___伸出左手,大拇指指向正轴方向,四个手指的指向即是旋转正向,但务必记住是左手!原创 2022-10-31 16:04:17 · 801 阅读 · 0 评论 -
在vue的jsx中使用图片预览插件v-viewer
vue v-viewer组件在jsx的使用原创 2022-06-23 09:45:52 · 389 阅读 · 0 评论 -
Warning: Received `false` for a non-boolean attribute `selectable`.
完整报错如下://收到非布尔属性' selectable '的' false '。//如果你想把它写入DOM,传递一个字符串:selectable="false"或selectable={value.toString()}。//如果您以前使用selectable={condition && value}有条件地忽略它,那么传递selectable={condition ?值:undefined}。devScripts.js:6523 Warning: Received `fa原创 2022-05-13 08:56:43 · 1187 阅读 · 2 评论 -
react自定义右键事件
右键显示弹窗 const handleContextMenu = (e) => { e.preventDefault() // 此条件下才展示弹窗 if (e.target.nodeName === "DIV" && e.target.innerText !== "首页") { const x = e.clientX const y = e.clientY // 弹窗节点 const rightMenu = d原创 2022-05-12 17:44:22 · 2559 阅读 · 0 评论 -
umi-plugin-keep-alive发版后,详情返回列表 proTable内容全部显示为...
问题很诡异,在本地运行的时候不会出现这个情况,发版后就出现了。百度的时候,发现没有人遇到这个情况。一开始我以为是不是线上的package.json文件和本地的不一致导致的,拉下来后发现完全一致的。排查了很久,拉了ant 和 antPro的源码下来,没有找到相关的设置列为…的代码。后来还是对比了本地和线上的dom结构,发现是表格列在详情返回列表的时候,会把width这个属性变成max-width。那就好解决了,在表格渲染的时候强制再添加一个width属性。由于多个表格都会出现这个问题,所以直接在公共文.原创 2022-05-10 16:58:32 · 729 阅读 · 1 评论 -
react+umi 部署后有些页面一直loading
1.背景本次开发分为2期,其中2期和3期是单独部署的,二期的环境一直没有问题,所以页面正常访问,3期的代码发布后有些页面(设置页面)一直loading,一直没进入页面。2.分析尝试1 :是不是发版因为网络等问题,漏了文件?重新打包构建—发现没用尝试2 :是不是部署缓存的问题? 登录Jenkins,清理【工作空间—发现没用尝试3 :是不是浏览器缓存的问题? 清空缓存并重新加载,清空本地缓存—发现没用尝试4 :是不是不加载的那个文件本身有问题? 发现经过前几次尝试后,仍然只有那个设置页不加载,o原创 2022-04-20 10:01:01 · 2535 阅读 · 0 评论 -
控制台接口有数据返回不显示
接口过多,且接口返回数据过大,比如大于10M。接口数据格式复杂。解决:可以只保留一个接口,然后查看返回结果。然后将接口改成异步的或者减少数据的传递原创 2022-03-28 09:40:29 · 533 阅读 · 0 评论 -
前端知识体系1:【css/js/vue/es6/手写/安全/优化】
vue 2升级vue31.升级依赖cnpm install vue@next vue-loader@next @vue/compiler-sfc vue-style-loader -S2.修改不兼容代码原创 2022-01-03 12:38:39 · 755 阅读 · 0 评论 -
页面间同步状态一般都有哪些方案,跨页面通信
页面间同步状态一般都有哪些方案,分别的应用场景都是哪些1. 通过storage事件:(同源)不同tab的js执行环境是不同的,因此变量不会共享,watcher也不会互相影响。可以利用 storage事件监控localstorge的变化 ,storege事件只能注册在window上只有当存储的值改变时才会触发storage事件,即新值与旧值不同触发写入操作的页面下的storage listener不会被触发即使页面不再同一个浏览器窗口(比如打开两个Chrome浏览器实例),storage也能够触原创 2021-12-23 16:33:29 · 984 阅读 · 0 评论 -
Github Actions 自动构建前端项目并部署到服务器
参考文章在开始操作之前,需要先在项目仓库建立page站点。1. 创建yml文件在你需要部署到 Github Page 的项目下,建立一个 yml 文件,放在 .github/workflow 目录下。你可以命名为 ci.yml,它类似于 Jenkins 的 Jenkinsfile 文件,里面包含的是要自动执行的脚本代码。文件内容为name: A TO A:GH_PAGESon: # 监听 master 分支上的 push 事件 push: branches: - ma原创 2021-12-16 12:20:23 · 1684 阅读 · 0 评论 -
iview table里面的输入框值不更新
vm.table.data[params.index].charge = val //修改输入值 data() { return { table: { data: [], cols: [ { title: '添加时间', key: 'addTime', minWidth: 120, align: 'center',原创 2021-12-07 15:34:01 · 454 阅读 · 0 评论 -
input[type=“file“] change事件第二次不触发
问题:用input上传图片时,如果第二次传递的跟第一次是一样的图片,那么此时会出现:change事件不再触发。代码:<input type="file" ref="upload" id="imgUrl" @change="uploadChange" accept="image/jpg, image/jpeg, image/png" />解析:首先这种情况是正常的,不是bug,我们可以看到,每次上传的时候input右侧都有一个文件名。那么change事件会根据这个文件名val原创 2021-11-15 17:12:23 · 3486 阅读 · 0 评论 -
vue定义全局方法,全局组件,全局指令,全局过滤器
1.全局方法1-1.创建全局方法文件global.jsexports.install = function(Vue, options) { // 当前时间前7天到今天的时间的【全局方法】 Vue.prototype.$frontDate7 = function() { // $frontDate7就是这个方法的全局方法名--【下面的方法内容可以忽略】 let dateFormat = timestamp => { var date = new Date(timest原创 2021-09-24 18:29:44 · 736 阅读 · 0 评论 -
async,await简单用例
async a(){ const result = await this.b(); // async 返回值会封装成一个promise return result }, async b() { return 1 }, async test() { console.log(this.a()) //async 返回的是一个promise,打印:Promise {<pending>} thi.原创 2021-09-13 10:40:13 · 158 阅读 · 0 评论 -
gz面试笔记
字节一面1. 什么是协商缓存与强缓存;详情>2. 讲讲客户端存储的方式有哪些;详情>3. 如何防止脚本获取cookie;详情>4. 讲讲状态码301/302/307的区别;详情>5. 讲讲csrf、xss网络攻击;详情>Content Security Policy>6. 如何解决前端跨域;详情>7. js 事件循环模型;详情>8. 实现模板字符串; function parseString(str, obj) { O原创 2021-09-10 22:59:39 · 1132 阅读 · 0 评论 -
vue源码分析【1】-new Vue之前
以下代码和分析过程需要结合vue.js源码查看,通过打断点逐一比对。一. 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script></head><body> <div.原创 2021-07-05 17:19:02 · 415 阅读 · 1 评论 -
前端知识体系(2)-vue篇
1. 简单说下vuevue是渐变式框架,根据自己的需求添加功能vue数据驱动采用mvvm模式,m是数据层,v是视图层,vm是调度者SPA单页面应用,只有一个页面,加载速率快组件化,复用性强那么,它有什么缺点?vue2底层基于Object.defineProperty实现响应式,这个api本身不支持IE8及以下浏览器csr的先天不足,首屏性能问题(白屏)由于百度等搜索引擎爬虫无法爬取js中的内容,故spa先天就对seo优化心有余力不足(谷歌的puppeteer就挺牛逼的,实现预渲染底层也原创 2021-06-11 18:22:38 · 1372 阅读 · 6 评论 -
前端知识体系(1)-js篇
1 声明1-1 「js函数声明三种方式:」(1) Function()构造器var f =new Function()(2) 函数声明function f (){ console.log(2);}(3) 函数表达式var f = function() { console.log(1); }1-2「js变量声明:」var声明的变量会挂载在window上,而let和const声明的变量不会var声明变量存在变量提升,let和const不存在变量提升(原创 2021-05-28 16:55:25 · 284 阅读 · 2 评论 -
前端知识体系(6)-css篇
以下内容为 css 基础篇(1)1. 如何解决 a 标点击后 hover 事件失效的问题?改变 a 标签 CSS 属性的排列顺序:(爱恨原则)link -> visited -> hover -> activea:link:未访问的样式a:visited:已经访问的样式a:hover:鼠标移上去时的样式a:active:鼠标按下的样式按照这样书写:可以解决 a:link 样式被 a:visited 样式覆盖问题。在 CSS 中,如果对于相同元素针对不同条件的定义原创 2021-05-19 10:39:14 · 353 阅读 · 1 评论 -
css 画半圆按钮
方式1:半圆的颜色和主内容的颜色一样css: 这是小程序的样式,在网页上把rpx换成px.nav-top{ text-align: center; background: #FFE6E6; width:530rpx; margin: 0 auto; border-radius: 30rpx; .btn-nav { width: 170rpx; text-align: center; height: 60rpx;原创 2020-12-05 13:46:13 · 1664 阅读 · 0 评论 -
vue路由跳转总是跳转到首页,路由匹配不上
1.先看路由配置文件: { path: 'detail/:No', name: 'waybill-declaration-detail', component: () => import('@/views/wayb/Detail'), meta: { redirect: true, title: '运单' } }2.编写跳转事件click: () => {原创 2020-11-23 12:27:00 · 4566 阅读 · 0 评论 -
iview tab 组件设置当点击对应tab时才渲染和调用对应接口
tabs标签页,默认一开始就加载所有tab页中的内容,但有时候tab较多,而我们只关注其中一两个tab,这样就造成了性能浪费。所以,我们想当点击对应tab时才渲染和调用对应接口我们可以通过tab提供的事件,拿到当前点击tab的name,然后根据name来用v-if设置显示;<template> <Tabs @on-click="getTabName" value="generalSetup" name="setTab"> ...原创 2020-10-15 18:37:06 · 1600 阅读 · 0 评论 -
vue-cli3创建项目的正常流程(确保有路由)
1.安装脚手架如果有安装过vue-cli 2.0 需要先卸载:npm uninstall vue-cli -g 然后安装脚手架3.0:npm install -g @vue/cli测试是否安装成功:vue -V2.创建项目先执行:vue create test2然后将光标放到vue3这一行这里(通过按键上下键),回车:然后选择是否需要路由:进入当前项目,npm install 后,运行npm run serve...原创 2020-09-28 11:16:32 · 529 阅读 · 0 评论 -
console.log 控制台怎么打印有颜色的特殊的字
先看效果:使用:console.log('%c 1','color:red')console.log('%c 1','color:green')console.log('%c 1','color:green;font-size:30px;background:#ddd')打印的时候,%c 后面加打印的内容, 后面直接写css样式就可以...原创 2020-09-25 14:53:26 · 2064 阅读 · 0 评论 -
css 如何让图片铺满整个容器,比例不变,且不被裁剪
.first-screen-modal{ //父容器 position: absolute; left: 0; top: 0; right:0; height: 800px; width: 600px; z-index: 100; margin: 100px 75px 306px 75px; .photo-bg{ //背景图对应的div background-image: url(images/rest.png); border-radius: 1.原创 2020-09-18 17:20:33 · 7717 阅读 · 0 评论 -
js Number()会改变值的大小
记录个bug问题:由于调用接口,后台需要传递一个数值,为120531784730937088,并且是integer类型,但是前端获取的值为字符串:"120531784730937088"所以要将"120531784730937088"转换为number类型var a = Number("120531784730937088")打印a发现失去精度了,值为120531784730937090原因:js的number类型有个最大值(安全值)。即2的53次方,为9007199..原创 2020-09-04 11:41:24 · 680 阅读 · 0 评论 -
前端知识体系(4)-js手写函数篇
毕业4年了,今年5月20号跟谈了7年的女朋友回老家领了结婚证。谈得确实久了,领证的时候两人都很平淡。结婚证拿到手,我们相视而笑,是的,我们结婚了,7年,幸好没有遇上人们常说的七年之痒。同年毕业的很多对情侣,如今大多各奔东西了。那些说好要走一辈子的人,大多在毕业的时候已经忘记彼此的承若,而那些平平淡淡的反而在一起更长久。15年10月份,我们来到了深圳龙华的一家房地产公司实习,那时候学校来了40多个人,如今还剩下3个,剩者为王,可能说的就是他们。如果他们都在深圳买了房子,是的,毕业4年就在深圳买了房..原创 2020-07-13 00:05:29 · 2113 阅读 · 5 评论 -
vue响应式详解(重学前端-vue篇1)
1 什么是Vue响应式呢数据发生变化后,会重新对页面渲染,这就是Vue响应式2 想完成这个过程,我们需要做些什么侦测数据的变化收集视图依赖了哪些数据数据变化时,自动“通知”需要更新的视图部分,并进行更新它们对应专业俗语分别是:数据劫持 / 数据代理依赖收集发布订阅模式3 如何侦测数据的变化有两种办法可以侦测到变化:使用Object.defineProperty和ES6的Proxy,这就是进行数据劫持或数据代理。3.1 Object.defineProperty实现原创 2020-07-13 00:04:44 · 614 阅读 · 1 评论 -
a标签跳转地址会在前边自动加上当前域名
原因是要跳转的域名没有写完整,需要加上协议,如要跳转到百度就是:正确写法:href="http://www.baidu.com"错误写法:href="www.baidu.com"原创 2020-04-12 18:32:44 · 7628 阅读 · 1 评论 -
vue 使用swiper获取数据后,图片拖不动
加下面2个属性就行了observer: true, //修改swiper自己或子元素时,自动初始化swiperobserveParents: true //修改swiper的父元素时,自动初始化swiper完整如下: mounted() { var mySwiper = new Swiper(".swiper-container", { autoplay...原创 2020-04-12 18:27:58 · 438 阅读 · 0 评论 -
vue阻止a标签的默认跳转
<a @click="gotoContent" class="page-img"></a>直接删除href属性,加上自定义的点击事件原创 2020-04-06 15:44:25 · 5769 阅读 · 0 评论 -
this.$route.params 为空
组件传递 this.$router.push({ name: 'EditArticle', params: { articleContent: row.content } });组件接收this.$route.par...原创 2020-04-06 13:49:47 · 4410 阅读 · 2 评论 -
(未解决问题1)node中直接给查询的doc新增加属性会加不上
doc1为查询到的集合malls,是一个数组,结构如下:在深克隆的对象上添加属性是生效的。 //注意: 这里发现直接给doc1加上collectText属性,加不上。所以,深克隆一份,给新对象挂在属性 var doc1b = JSON.parse(JSON.stringify(doc1)) doc1b.forEac...原创 2020-03-26 22:23:04 · 182 阅读 · 0 评论