- 博客(85)
- 收藏
- 关注
RSS订阅原创 Vue 前端项目部署涉及多个文件和配置
执行或yarn build命令后，会在指定的输出目录（默认是dist）生成一系列文件，这些文件是部署到服务器上供用户访问的最终文件。HTML 文件：通常是index.html，它是项目的入口文件。在部署时，需要将该文件部署到服务器的合适位置，确保用户访问时能够正确加载。JavaScript 文件：打包后的 JavaScript 文件包含了项目的业务逻辑代码，通常会进行压缩和分割，以提高加载性能。例如，可能会有app.js等文件。CSS 文件。
2025-04-28 11:03:50
606
原创 ts添加类型
在 TypeScript 中，变量声明、函数参数和返回值、类的属性和方法、接口和类型别名、泛型以及解构赋值等场景都需要添加类型注解。添加类型注解可以帮助开发者在编译阶段发现类型相关的错误，提高代码的质量和可维护性。
2025-04-27 09:21:56
304
原创 在Vue3中，如何在父组件中使用v-model与子组件进行双向绑定？
通过以上步骤，你可以在 Vue 3 中实现父组件与子组件的双向绑定。使用v-model可以让代码更加简洁和易于维护。
2025-04-24 12:21:49
839
原创 57、在 Vue 3 项目中引入 js-cookie 库
你可以依据项目需求选择合适的引入方式。全局引入适合在多个组件频繁使用的场景，而局部引入则适用于仅在特定组件使用的情况。上述两种方式都能在 Vue 3 项目中使用。，这样在所有组件里都能使用。
2025-04-18 15:48:02
317
原创 56、如何快速让⼀个盒⼦⽔平垂直居中
flex布局+外边距（margin）实现：给⽗级设置为display: flex；绝对定位+外边距（margin）+C3的转换transform 中的translate实现：：绝对定位元素，利⽤。绝对定位+外边距（margin）实现：：绝对定位的元素将上下左右都设置为O，再设置margin:auto 即。纯flex布局实现：：给元素设置flex布局，添加flex的alignltems:center垂直居。中,justifycontent:center⽔平居中，实现居中效果；就可以实现⽔平垂直居中显⽰；
2025-04-18 11:39:51
475
原创 55、⾸屏加载⽩屏怎么进⾏优化
html、js、css ⽂件甚⾄json数据都可以⽤它压缩，可以减⼩60%以上的体积。(5) 开启 GZIP压缩；（是⼀种 http 请求优化⽅式，通过减少⽂件体积来提⾼加载速度。(2)SSR通过服务端把所有数据全部渲染完成再返回给客⼾端；(3) 路由懒加载，当⽤⼾访问的时候，再加载相应模块；(7)使⽤⻣架屏 在⾸⻚加载时，显⽰⻚⾯结构轮廓；（1）使⽤CDN 减⼩代码体积，加快请求速度；(6) 项⽬打包不⽣成.map ⽂件；(4) 使⽤外链CSS，JS⽂件；
2025-04-18 11:38:50
217
原创 54、路由传参 query与 params区别
答：query类似 get，跳转之后在地址栏中显⽰拼接参数，类似？params类似 post，跳转之后。注意点：（params 在进⾏路由传参时，要在路由中配置占位。如果不在路由中配置占位，跳转过去以。不在 url 中显⽰参数；相对于query⽐较安全；后刷新⻚⾯会数据丢失，query参数数据不会丢失）；
2025-04-18 11:38:17
94
原创 53、对 $nextTick异步渲染的理解
答：Vue 采⽤了数据驱动视图的思想，但是在⼀些情况下，仍然需要操作DOM。有时候，DOM1的数。据发⽣了变化，⽽DOM2需要从DOM1中获取数据，那这时就会发现DOM2的视图并没有更新，这时就。些操作时，要在nextTick指定的回调函数中执⾏）。如果不采⽤异步更新，在每次数据的更新后，都。作⽤：在下⼀次 DOM更新结束后执⾏其指定的回调；（当数据更新后，要基于更新后的新DOM进⾏某。会对当前组件进⾏重新渲染。所以为了性能考虑，vue 会在本轮数据更新后，再去异步更新视图；需要⽤到了nextTick。
2025-04-18 11:36:58
155
原创 52、⽤⼾token 失效你是怎么处理的
求，在有user信息的逻辑基础上，去if判断这个变量，为true表⽰正在进⾏刷新token的请求，另那么。token,然后重新发送失败的请求(使⽤forEach遍历请求存储列表，进⾏⾃调⽤)，然后就清空数组，将。答：当⽤⼾登陆的时候，接⼝的响应信息中是有三个和token相关的信息的，1.当前使⽤的token，⽤。token，正常情况下接⼝返回的状态码是200，我们会在响应拦截器中，⾛成功的回调把接⼝中data数。过期时间字段，2.需要过期时间与本地时间进⾏判断，如果计算机时间被篡改时，拦截就会失败的；
2025-04-18 11:35:19
262
原创 51、项⽬中的权限管理怎么实现的
(1)当⽤⼾登录后，后端会把⽤⼾token和相应的⽤⼾信息(⽤⼾名/菜单权限),返回给前端，前端会先把。计算函数同时调⽤递归函数传递参数(参数⼀是异步路由，参数⼆是⽤⼾的权限信息)进⾏递归过滤，留。注册为新的路由，实现根据不同的⽤⼾展⽰不同的菜单侧边栏；(3)权限模块：⽤于管理系统中的权限接⼝，为⻆⾊提供对应的权限。(2)⻆⾊模块：可以授于⽤⼾不同的⻆⾊，不同的⻆⾊有不同权限。根据⽤⼾管理中给⽤⼾分配⻆⾊的不同，就有对应的菜单权限。(1)⽤⼾模块：可以给⽤⼾分配不同的⻆⾊。下当前⽤⼾有权限访问的路由。
2025-04-18 11:34:54
193
原创 48、iframeWindow.contentWindow.postMessage
iframeWindow.contentWindow.postMessage 是 JavaScript 里用于实现跨窗口通信的重要方法，常被用于解决不同窗口或 iframe 之间的通信问题，特别是在跨域场景下。postMessage 方法允许一个窗口安全地向另一个不同源的窗口发送消息。在你的代码里，iframeWindow.contentWindow 代表 iframe 元素的 window 对象，借助调用该对象的 postMessage 方法，就能向 iframe 内部的页面发送消息。
2025-04-15 00:27:01
310
原创 47、 RSA 加密解密
RSA 是一种非对称加密算法，使用公钥加密数据，私钥解密数据，安全性较高，常用于前端和后端之间的数据安全传输。以下分别从前端和后端的角度介绍 RSA 加密解密的实现，前端使用 JavaScript 结合jsencrypt库，后端以 Python 结合库为例。首先，安装jsencrypt。
2025-04-15 00:22:40
368
原创 Could not retrieve https://npm.taobao.org/mirrors/node/index.json.
4、到回cmd.exe 输入nvm ls available 可显示node可安装的版本（注：并不是只能安装显示出来的版本，有的版本未显示出来。需要某个具体的node版本，可以在官网查询，然后输入nvm install +(具体的版本号）即可安装。npm使用时报错：Could not retrieve https://npm.taobao.org/mirrors/node/index.json.解决办法：修改镜像地址。打开nvm的安装地址 -->settings.txt文件 -->配置下载源。
2025-04-07 14:09:10
376
原创 46、项⽬登陆是怎么实现的
（1）在⽤⼾选择登陆的时候，会收集⽤⼾输⼊的信息，进⾏⼀个form的校验(正则或者Element-U⽅。session中，公钥则返回给前端)前端拿到公钥后，再通过JS加密库中的⽅法对⽤⼾输⼊的密码进⾏加。⾥还要对⼿机号进⾏校验，不合法就提⽰⽤⼾输⼊正确⼿机号，然后return退出，合法就发送登陆请。(3)在点击登录的回调中，为了防⽌在输⼊验证码后⼿机号更换了或者删除了，发送⽆效请求，所以这。（2）当⽤⼾点击获取验证码按钮的时候，发送获取验证码请求，后端会发验证码⾄⽤⼾⼿机，并对验。
2025-04-02 17:40:00
119
原创 44、打包好⽂件给后端更新的时候，⽤⼾⼿机上总会留下，上次版本的信息，⽽且每次都得清下缓存，才会显⽰最新版本的数据
为index.html注入版本号可以有效解决入口文件的缓存问题。前端主动检查版本更新能实现灵活的版本控制。优化 Nginx 配置可在一定程度上解决缓存问题，但需谨慎操作。Service Worker 可以实现对缓存的精细控制，但需要一定的学习成本。你可以根据实际情况选择合适的解决方案。
2025-03-31 17:58:05
552
原创 43、接口请求需要时间，导致页面初始加载时会出现空白，影响用户体验
如果接口数据在短时间内不会发生变化，可以将数据缓存起来，下次进入页面时直接使用缓存数据，减少接口请求时间。骨架屏是一种在数据加载过程中显示的占位布局，它模拟了页面的基本结构，让用户对页面内容有一个初步的了解。通过以上方法，可以有效改善页面初始加载时的空白问题，提升用户体验。你可以根据实际需求选择合适的方法。在接口请求数据的过程中，显示一个加载状态提示，让用户知道页面正在加载数据。在页面加载之前，提前加载一些常用的组件，减少组件加载的时间。
2025-03-31 17:14:30
263
原创 41、当你在 index.html 中引用了一个公共文件（比如 common.js），修改这个文件后，用户访问页面时仍然看到旧内容，因为浏览器缓存了旧版本
由于浏览器缓存导致公共文件无法更新。当用户修改了公共文件（如 JavaScript 或 CSS），但 index.html 中引用的文件名没有变化，浏览器会认为文件没有更新，继续使用缓存的旧版本。因此，需要通过某种方式让浏览器知道文件已经更新，从而获取最新版本。
2025-03-31 16:28:40
492
原创 39、渐进增强和优雅降级
优雅降级是指先构建一个功能完整、体验丰富的网站，然后针对那些不支持某些高级特性的浏览器和设备，逐步降低功能和体验的标准，但仍然保证基本的可用性。它更侧重于在高级浏览器中提供最佳的用户体验，然后处理低版本浏览器的兼容性问题。渐进增强是一种从最基础的功能开始构建网站，然后逐步为支持更高级特性的浏览器和设备添加额外功能和样式的设计理念。它强调先确保所有用户都能访问到核心内容和基本功能，然后再针对具备更强大能力的设备和浏览器提供增强的体验。
2025-03-31 16:11:49
639
原创 mapState 函数的用法
mapState是 Vuex 提供的一个辅助函数，其主要作用是将 Vuex 仓库中的状态映射到组件的计算属性中，这样在组件里就能像访问本地计算属性一样访问 Vuex 仓库中的状态。以下为你详细介绍mapState函数的不同用法。
2025-03-31 11:48:12
558
原创 You may have an infinite update loop in a component render function.
改变数组顺序，进而再次触发计算属性重新计算，如此反复，就形成了无限更新循环。，数组顺序改变后会触发计算属性重新计算，而重新计算又会再次调用。都会修改原数组的顺序。表明组件渲染函数里存在无限更新循环。计算属性中，每次调用。
2025-03-31 11:34:47
503
原创 37、⼀个⻚⾯上有⼤量的图⽚（⼤型电商⽹站），加载很慢，你有哪些⽅法优化这些图⽚的加载，给⽤⼾更好的体验。
4，如果图⽚过⼤，可以使⽤特殊编码的图⽚，加载时会先加载⼀张压缩的特别厉害的缩略图，以提⾼ ⽤⼾体验。3， 果图⽚为 css 图⽚，⽐如⼀些⼩图⽚，logo，⼆维码可以整合到⼀起，使⽤精灵图技术。2，如果为幻灯⽚、相册等，可以使⽤图⽚预加载技术，将当前展⽰图⽚的前⼀张和后⼀张优先下载。图⽚懒加载，在⻚⾯上的未可视区域可以添加⼀个滚动条事件，判断图⽚位置与浏览器顶。1，如果⼀个⻚⾯图⽚很多，并超出了浏览器窗⼝的可视区域，我会采⽤图⽚懒加载。端的距离与⻚⾯的距离，如果前者⼩于后者，优先加载。
2025-03-26 17:08:32
204
原创 36、⼀个⻚⾯从输⼊ URL 到⻚⾯加载显⽰完成，这个过程中都发⽣了什么？
【代码】36、⼀个⻚⾯从输⼊ URL 到⻚⾯加载显⽰完成，这个过程中都发⽣了什么？
2025-03-26 17:04:58
486
原创 35、前端如何进⾏登录⾝份的判断
前台发送登录请求 后台返回 token，前台得到后台返回的 token，将其写⼊到 localStorage 中，后续 请求中都携带 token 后台判断 token 是否过期，如果过期就对前台的请求响应过期标识或者状态码 前 台得到过期标识后，清除 localStorage 中的 token，然后重定向到 login 路由。
2025-03-26 16:52:57
81
原创 33、class
旧js中每定义一种类型，都要定义两部分: 构造函数+原型对象。但是，旧js中，构造函数和原型对象在写法上是分离的。不符合封装的要求。
2025-03-18 10:08:16
457
原创 34、19 个 ES6常用的简写技巧
关于箭头函数，我最初这样理解的， 箭头=>前面的并紧挨着是es5函数写法的形参，木有的话用()占位置，多参数都写在这个括号里；代码精炼是每个有追求的程序所向往的，本文总结了19个JavaScript的简写技术，其中包括三元操作符、短路求值简写方式、声明变量简写方法等等，还有些自己的理解加上去；经常使用return语句来返回函数最终结果，一个单独语句的箭头函数能隐式返回其值（函数必须省略{}为了省略return关键字）传统函数编写方法很容易让人理解和编写，但是当嵌套在另一个函数中，则这些优势就荡然无存。
2025-03-18 09:36:19
354
原创 31、实践题
啥，如果是 CPU 密集型计算（应该不会），看看CPU和内存满没满，没满就多开⼀些worker，满了就。⾸先，502错误，意思是worker忙不过来，参与测评学校的学⽣上午8点集中开测，在短时间内访问。SSR服务端渲染，这个⽅案可以让⻚⾯直接在服务端渲染，但是不利于前后端分离，开发的效率也⽐。经过⼆个⽉“测评项⽬“开发，测试，上线，”测评项⽬“服务于学校实施的第⼀站，参与测评学校。度耦合，⻚⾯复杂度变⾼的问题。对于这种情况，我以前⼯作的做法就是设置蒙版层，不管你怎么点，只要你点提交，我就给你弹出。
2025-03-13 17:03:32
271
原创 29、解决关键词⾼亮问题
出来⾼亮不就⾏了吗？但是，⼀开始，⽤⼾的词不多，我确实使⽤的是遍历，时间复杂度为n2。后来 ⽤⼾会配置100w量级的词，使⽤遍历就会使⻚⾯卡死崩溃。解决的⽅法就是：优化性能，⾼亮分三步，⽣成字典树，遍历⻚⾯⽂字，取出⽂字进⾏匹配。使⽤字典树代替遍历，整个⻚⾯100w量级的词 绘制可以实现在1秒以内。⽤⼾配置⼀堆关键词，在⻚⾯上将这些关键词⾼亮，也许你会觉得这有什么难度？
2025-03-13 17:00:41
115
原创 28、针对多官网项目的 SEO 优化需求
用户之前尝试过在 index.html 里写死 meta 标签，但这样所有官网都用同样的标签，显然不行。现在需要动态区分不同官网的 SEO 配置。对于打包时区分，用户需要为每个官网创建不同的环境文件使用 vue-meta 插件接下来，用户还需要其他 SEO 优化措施，比如语义化标签、sitemap 生成、图片和链接优化。这些都需要给出具体的例子，比如使用 header、main、article 等标签，生成 sitemap.xml 的结构，以及如何优化图片的 alt 属性和链接结构。
2025-03-13 15:51:15
585
原创 27、SEO 标签是什么
SEO（Search Engine Optimization）标签是放在网页 HTML 代码中的特殊标记，它们能够帮助搜索引擎更好地理解网页的内容和目的，从而提高网页在搜索引擎结果页面（SERP）中的排名和可见性。
2025-03-13 15:21:39
418
转载 26、后台管理系统的权限实现，根据权限展示不同的页面
后台管理系统的权限实现，根据权限展示不同的页面_根据登录用户的权限不同展示不同的页面-优快云博客
2025-03-13 14:22:40
31
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人