a4867-优快云博客

原创详细的Whistle代理工具解决前端跨域问题

主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种。(读音[ˈwɪsəl]，拼音[wēisǒu])基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的。如果需要抓https的包，需要安装一下证书。最后一定要记得应用选项！，且可以通过Node模块。

2025-04-15 14:51:08 382

原创 Prism行数不生效/错乱问题

最后发现是因为pre和code没有写在一行(中间存在空格/回车)导致的。今天使用Prism代码高亮工具，发现样式错乱，或者不生效。

2025-03-03 17:06:28 161

原创 Echart--legend不生效问题

最近项目要用到echart，但在配置过程中发现echart开启了也不生效。排除后发现，是series每个线要有一个name与之对应。legend是echart中用于提示的属性，如下图。然后再修改修改样式就可以正常显示了。

2024-10-25 16:57:19 672

原创 vue3使用element-plus手动更改url后is-active和菜单的focus颜色不同步问题

接着将is-active的activeIndex值和传过来的path判断，判断它们是否相等，如果相等就给focus。虽然可以直接让el-menu-item:focus为白色能解决这个问题，但是我就是想要有颜色哈哈哈，有些执着。首先，先给menu-item设置一个v-bind:class方法，来动态改变颜色。如下，手动修改url时，is-active和focus颜色不同步。在实习，给了个需求做个新的ui界面，遇到了一个非常烦人的问题。important，否则是不生效的！研究了很久之后找到了解决办法。

2024-10-18 11:02:01 402

原创 Vue3使用element plus时el-menu导航选中后刷新页面及修改URL无法保持当前选中状态问题

因为刷新页面后el-menu的:default-active="activeIndex"被刷新，无法记录所以导致高亮部分无法保持选择状态。在使用element plus的el-menu菜单导航时，发现选中后刷新高亮部分无法保持当前选择状态。然后在onMouted 或者 created构造获取一次即可（注意 vue3的语法糖setup）我用了页面监听 watch，当监听到route.path改变时，activeIndex改变。localStorage或者sessionStorage来持久化储存。

2024-10-16 21:04:22 728

原创前端常见算法题集

很久没练算法了，打算接下来一段时间每天坚持写题和写题解这是一篇前端常用算法题集，题目从从简到难，编程语言主要为JavaScript，顺便练习和熟记js的各种方法...

2024-09-26 23:58:40 629 1

原创 Uniapp的alertDialog返回值+async/await处理确定/取消问题

方法可能并没有返回一个 Promise，或者即使它返回了一个 Promise，这个 Promise 可能是在对话框关闭而不是打开时才 resolve。所以需要设置一个confirmed来接收alertDialog.value.open()的返回值。发现alertDialog和下面的处理同步进行了，没有等待alaertDialog处理完才进行。今天在使用uniui的alertDialog时，想添加一个确定/取消的警告框时。函数中的其他逻辑在对话框打开的同时就继续执行了。关键字虽然被用来等待。

2024-09-13 17:42:38 633

原创 Vue3使用Uni-ui的popup弹出层组件

除了文档中要求的aleterDialog外，还得利用v-if设置一个isDialog判断。由于uni-ui中有些组件文档的基于vue2编写的，比如popup组件。下面是vue3的写法。

2024-09-08 16:21:31 969 3

原创 Uniapp基于uni拦截器+Promise的请求函数封装

最近在学Uniapp，到封装请求的时候本来还想用axios，但是看到一些教学视频有更简单的方法，最后附上TS的写法，感觉其实差不多，只是用TS语法进行了一下泛型的判断。但是他们是用TS写的，还没学到TS，我就把JS写了，最终也是请求成功。基于uni的拦截器和Promise封装的请求函数。组件引入http方法进行请求。

2024-09-07 21:53:10 648

原创 Vue3中cookie的操作方法

设置cookies时，传递的值不能是一个对象，必须将对象转换为字符串(JSON.stringify），但是获取cookies时，返回的是一个对象，可以直接调用对象的属性值。返回的是boolean(true or false)先npm下载vue3-cookie组件。再引入到main.js中。判断cookie是否存在。如:设置cookie。

2024-09-01 23:33:40 1164

原创【已解决】Request failed with status code 500，Node接收json中间件，request entity too large问题...

可以给提高文件大小的限制，不仅仅可以提高application/x-www-form-urlencoded的，还可以提高json的，由于我一般就这里图片上传需要的较大，于是我就提高了json形式的。然后我就觉得剩下的应该是后端的问题了，它一直提示avatar is required，那么肯定是这个参数没接收到-->说明后端还是以x-www-form-urlencoded形式接收的参数。请求头确实是json形式的了，而且状态码还为200，麻了。又又又又来个问题....这个应该是数据库的。

2024-08-26 03:51:29 690

原创 vue|Node 上传图片图片无法正常显示(关于文件上传req.file的问题)

所以将req.file.fieldname改为filename即可。做了一个页面，涉及上传图片的功能，但是发现上传后图片无法正常显示。因为图片地址，所以想问题应该是在后端和数据库连接这块有问题。fieldname是文件名，filename才是图片名！检查后端相关部分代码，发现是这里字符串拼接的问题。打印的图片信息和数据库中的对不上。打印以下req.file这个对象。

2024-08-25 20:07:28 227

原创 Nodejs非响应return问题导致的Cannot set headers after they are sent to the client。

今天学习Nodejs写接口时遇到一个问题，在写用户注册接口模块时如果插入相同的username后(数据库表中设置username为unique），逻辑应该是提示存在相同用户名，但实现该操作后node服务器直接挂了。在网上找该问题的方法，基本都是说:服务器要在每次响应后添加return，避免多余响应。看了看和调试了会儿代码，发现是两个db.query没写到一起导致的错误。吧下面注册用户的db.query要写入查找相同用户名的中。但是我每个响应都是加了return的，百思不得其解。

2024-08-11 15:43:34 313 1

原创 Vant4组件库样式不生效问题

import 'vant/es/toast/style'，其他组件不生效也是同理，import 'vant/es/***/style'查询后得知再按需导入一下对应组件的样式即可。今天使用vant4组件库发现样式不生效。

2024-08-08 15:46:21 483

原创加入购物车-数组框组件封装(v-model父传子，子传父$emit的使用，e.target.value，isNAN方法)

利用e.target.value获取输入框的值，然后声明一个num，利用+转为number型。首先，在父组件中声明变量count（初始值），如何利用v-model传值给子组件。减和加的点击事件逻辑差不多，需要注意的就是减到1的时候要return无法继续减了。要注意的是，父组件中的v-model不要写成动态传参了！input框的change事件要考虑两个，一个是非数字，一个是小于1。如果满足以上任一条件，吧输入框的值恢复到原来的value即可。分别问减事件，input框内的change事件，加事件。

2024-06-05 00:33:33 223

原创商品详情页（computed和methods调用的区别）

2.如果有多个请求方法，可以分别在methods中写，然后在created中统一调用。3.computed的调用不需要()，methods中的是方法，需要（）！1.computed中如果要写方法的话，要return。其他的就是要注意头像如果没有的话给个默认图像。

2024-06-05 00:32:21 208

原创继上篇学习的“对象的可选链操作符”

省流:这里的问号是一个叫可选链操作符的东西，简单来说就是如果对象中有?后的参数就传，没有就不传，不会报错。百度错误，发现这个是条件语句，作用是访问属性是否存在于该对象上。往下翻发现确实有的有children，有的没有。不过我不太懂框出来的？的作用，为什么不能直接.访问呢。我将问号删掉后发生以下报错，但是服务还是正常的。继上篇获取到数据后的渲染。

2024-06-05 00:31:45 131

原创搜索页列表（跳转传参和动态传参接收query,params）

最后渲染到页面即可，在value中可以动态渲染一下，没值的时候渲染“搜索商品”，而那边是多参数，传的是对象过来，这边也一定要用对象来接收！需要注意的是，注意传值的形式，如果（{}）接收的是对象，传值也要是对象。跳转传参的查询方法是 this.$route.query.参数名。动态传参的查询方法是this.$route.params.参数名。首先在api下新建个produce.js，封装一下请求方法。比如下列错误案例中，传值为非对象，在views中。接下来就是分类页，还是先写api接口。

2024-06-05 00:27:59 194

原创搜索历史管理(相关css的过长省略方法，数组方法indexof，splice，unshift）

做完了历史记录添加和清除后，接下来要做的是将历史记录保存在本地存储localStorage中。存储和清除可以归在一起--->设置如果要清除直接传空数组过来，如果要设置传一个数组来即可。不存在会返回-1，如果不等于-1也就是存在的意思，存在需要用。goSearch最后还需要添加一个带参跳转，跳转到搜索商品页。，而且要判断是否存在，不存在给空（为后面初始化赋值做准备）goSearch是需要传参的，根据要找的值，利用。需要了解的是当搜索记录的字数过多要记得隐藏！（不存在的话也是直接添加即可）

2024-06-05 00:23:30 238

原创首页-静态结构准备和动态渲染(父组件使用子组件三步骤，请求参数和父组件与子组件的通信）

这里比较有意思的是flex: 1，当我们设置好图片后，我们可以用flex: 1 将剩下的空间分配给信息盒子。父组件中用子组件有三步 1.导入子组件 2.在script中声明component 3.使用组件。太久没写过css了，复习一下，要记得在组件的样式中写上lang=”less“和scoped。还是一样，把接口封装到api --> 然后父组件请求数据 -->接着子传父传递数据即可。盒子可以看为左右两部分，左边放图片，右边放产品相关的信息。有需要参数，在方法中额外写params。最后就是父传子，组件通信。

2024-06-05 00:21:10 222

原创页面访问拦截--全局前置导航守卫（includes方法

1.非权限页面最后的return非常重要！否则会继续走下面的逻辑。是: 是否有token？有-->放行没有-->跳转到登录页面。3.进行判断是否去的是需要权限的页面？2.数组判断存在方法 includes()也可以对获取token方法进行封装。1.创建一个需要权限的页面的数组。2.利用全局前置守卫，官网直接找。接着在路由可以这样调用。

2024-06-05 00:19:28 245

原创添加请求loading效果(响应拦截器）

可能因为网络原因导致请求延时，如果用户点击多次就会发送多次登录请求，导致以下错误。不用担心Toast会重复，toast只会存在一个，下一个会把上一个覆盖。forbidClick: true 表示背景无法点击，起到节流的效果。当res.status === 200时清除掉toast即可。很多地方需要用到请求，所以我们还是在拦截器中统一设置。在请求拦截器中添加toast的loading效果。duration: 0 表示toast不会消失。导航跳转重复，禁止重复导航到...↓。

2024-06-05 00:17:07 270

原创登录权证信息存储/vuex持久化处理(本地存储，vuex)

接着在state中创建一个对象用于接收用户的userId和token，在mutations中请求更改state中的数据。2.存储个人信息是将用户登录的信息保存到localStorage，需要从vuex中获取值，所以需要一个对象参数用于传值。在获取个人信息时由于数据存储在localStorage是字符串形式，所以我们需要转为。1.获取个人信息是从localStorage中获取，所以需要先获取值在return。所以我们在模块中也利用三目表达式进行验证，如果有的话就存，没有的话就给个初始值。在组件的登录方法中，

2024-06-05 00:08:42 295

原创短信倒计时，正则验证和获取短信验证码---＞登录功能(失败？响应拦截器)

获取到手机号是否通过验证的状态值后，我们找到发送验证码（openCountdown）方法，添加一个逻辑，也就是如果 phoneStatus === false 或（!要设置一个timer来记录计时器的id是否开启（timer: null），如果已经存在timer（即开启计时器）了，就不再调用了。我们这里用到三目表达式，判断当前秒数和总秒数是否相同，相同则显示”获取验证码“否则显示**秒后重新获取。接下来，我们就要考虑，如果填入错误的手机号的格式应该是无法请求发送验证码的，method2();

2024-06-05 00:05:57 517

原创智慧商城项目--登录页静态布局和图形验证码功能（通用默认样式，axios封装，api接口模块）

最后一个的添加导航的通用样式，因为我们要确保页面颜色统一，在其他页面的箭头是同个颜色，还是在通用css中修改，利用浏览器获取属性名。要注意的是当数据还没有访问到的时候，图片无法正常显示，所以我们要添加一个v-if 有数据了再渲染。接下来在组件中导入request，调用图形验证码接口，并且在created钩子函数中调用即可。获取到的data下的base64就是url地址，key则是后期做验证用的，我们接下来需要做的。注意我们创建的实例是instance，所以后面的拦截器也要将axios改为instance。

2024-05-28 11:59:29 493

a4867的博客