BrianGriffin的博客

原创 Vue3学习日记（day5）

接下来我们继续探讨文档。

原创 Vue3学习日记（day4）

可写计算属性；计算属性；防抖函数；对于DOM的更新详解；methods；响应式状态（Vue3）

原创 Vue3学习日记（day3）

vite创建的vue目录详解；应用配置与全局定义；插值表达式；V-HTML；XSS漏洞；V-BIND；JS注意事项；调用函数注意事项；受限的全局访问；V-ON

原创 Vue3学习日记（day2）

vite创建vue使用全教程；导入依赖全教程

原创 Vue3学习日记（day1）

Vue 2 已于停止维护。（学习基础：对vue2有一定基础和理解）

原创 报错（已解决）：无法加载文件 D:\code\NodeJs\pnpm.ps1，因为在此系统上禁止运行脚本。

2：安装完成，且成功显示版本后，使用管理员权限打开Windows。3：打开后选择y，更改执行策略，使不信任脚本可运行。

原创 UNIAPP文件目录结构解析

原创 XML OR MYsql 报错：Could not create connection to database server.

【代码】XML OR MYsql 报错：Could not create connection to database server.

原创 (已解决)pom.xml报错：Multiple markers at this line- cvc-elt.1.a: Cannot find the declaration of element ‘

原因：最新的schemaLocation地址已经是https协议了，原来的这个地址已不存在了。方法：将第一行后面的地址改为https就可以了。

原创 mybaits使用注解开发还是使用xml开发更好呢？

MyBatis 数据持久层框架支持 XML 映射文件配置以及基于注解的 SQL 开发两种方式。选择 XML 配置文件或直接使用注解来编写 SQL ，取决于项目的具体需求、团队偏好及长期维护性的考量。在实际开发中，许多团队会选择混合使用，即对简单的操作使用注解，而将复杂的映射和动态 SQL 保留在 XML 文件中。

原创 （已解决）Invalid prop: type check failed for prop “action“. Expected String, got Undefined

问题描述：在制作vue个人中心页面的时候点击打开修改信息窗口，总是会跳出报错：“action”期待值为string，但是没有找到action属性，使用// eslint-disable-next-line跳过eslint检测规则也无效。问题解决： 使用el-upload组件作上传时，需要添加action属性，随便赋值一个string类型即可。

原创 （已解决）如何将token存入本地localStorage，如何清除localStorage中的数据

我需要完成利用token进行页面拦截，涉及到了标题的知识，所以记录一下。将token存入本地localStorage。清除localStorage中的数据（所有）清除localStorage中的数据（单条）

原创 （已解决）Unicode高位码点emoji表情无法解析

我在制作游戏论坛项目，希望制作一个表情库，我参考了菜鸟的emoji手册，并且使fromCharCode函数来进行字符串转换，但是经过我的测试，对于超过5位数的高位码点，无法正常解析。

原创 （已解决）emoji及其特殊符号在vue中的使用

使用问题：在表情库中点击后无法展示对应的emoji表情，仅仅显示Unicode代码编号，按照vue eslint规则更改添加分号后，没有报错但是依旧无法正确渲染。

原创 （已解决）如何使用磁力链接，如何转换bt种子，如何解析torrent文件，qBittorrent如何使用，如何增加种子下载速度，如何使用trackers list

磁力链接可以转换为bt种子，bt种子作为一个中介，帮助参与下载的客户端之间建立联系，并确保通过P2P网络传输的数据正确无误。客户端利用种子文件中的信息与其他客户端直接交换数据块，共同完成整个文件的下载，可以简单理解为服务器密钥，通过他来去其他服务器下载数据。bt种子下载后格式为torrent文件，torrent需要解析，比如某雷等可以提供解析功能，并且下载。然后你就可以获得你需要的文件啦。

原创 （已解决）Vue routes的 children使用（小白来看，包会！）

使用了很多vue深层知识，简化并且做到自己的项目上面对小白很有帮助，因为我就是小白，才搞明白。最核心的就是routes的 children使用，所以先做一个例子再套用进去。

原创 （已解决）如何使用vue-router中的重定向

如上例：当访问/的时候会通过关键字redirect重定向至index，并由下面的目标路由表明重定向目标路由的具体信息。应用场景：如果访问其他页面，在未登录的情况下，跳转到登录页面。重定向作用：如果访问a地址将跳转到b地址。

原创 （已解决）什么是vue导航守卫

的路由时，导航守卫会先检查用户是否已经登录（通过检查localStorage中的token）。如果没有登录，它会阻止原本的跳转操作，并将用户重定向到登录页面。如果用户已登录，则放行，允许路由正常跳转。这就是Vue导航守卫在实际应用场景中起到的作用。vue导航守卫是是一种Vue Router内置的功能，它可以让我们在路由切换的过程中执行自定义的代码逻辑。在这个例子中，每当试图切换到一个设置了。

原创 （已解决）在vue路由配置中，export const constantRoutes和const routes有什么区别，

的命名更多是一种约定俗成的命名规范，表明这些路由在程序运行过程中不应发生改变。总结起来，两者主要区别在于变量是否可被外部文件导入使用，而。主要是关于变量的作用域和导出方式的不同。在 Vue Router 的配置中，

原创 （已解决）在vue路由中：Vue.use(VueRouter)和Vue.use(Router)；有什么区别？

是 Vue.js 提供的一个全局API，用于安装 Vue 插件。类，那么这段代码将不会正确注册 Vue Router 插件，并且在后续尝试使用路由功能时会导致错误或未定义的行为。在实际开发中，应确保始终正确引用。Vue.use(Router)是可以使用的，在特定情况下，但是通常来说Vue.use(VueRouter)才是最正确的写法。调用后，Vue Router 就会被注入到 Vue 的全局作用域中，使得每个 Vue 组件实例都能访问到。模块中导出的核心类，它提供了创建路由实例以及相关路由管理的方法。

原创 （已解决）vue+element-ui实现个人中心，仿照原神

差一个个人中心页面，看到了这个博主的个人中心，真的很不错。

原创 （已解决）vueQQ邮箱注册发送验证码前端设计，如何发送验证码设计倒计时

我们之前已经通过前端测试成功完成qq邮箱动态验证码发送（未使用redis，我准备自己了解完后，后期有时间补上）这段代码建设图形化界面。

原创 （已解决）（GET）POST http://localhost:8080/xxx/ 400(Bad Request)

传输数据有误，请检查你的传输，是否成功传输了正确的数组，和正确的数组格式，与数据个数。考虑cors源跨域问题。

原创 （已解决）spingboot项目如何做QQ邮箱注册功能，如何在邮箱注册中进行随机数添加作为动态验证码，并满足分层解耦

我测试了很多次，所以并未传输真正的QQ邮箱，不然邮件发太多懒得删除。使用注解@Component进行分层解耦加入ioc容器，方便调用。前面我们已经完成了发送静态验证码，现在用随机数作为动态验证码。在之前文章的接口中，注入并调用，生成且打印。控制台成功打印不同随机数。

原创 （已解决）Properties和Yaml格式互转

下载yaml插件，对需要转换的文件右键选择转换。推荐转换工具或者下载idea插件yamls。

原创 （已解决）spingboot 后端发送QQ邮箱验证码

前端测试：（请注意oken的路径拦截！如果没写token可以不用管，也不用请求头添加token）后期大家自己加随机数做动态验证码替换静态验证码就好了，可以使用存入数据库或者redius。：我使用的是自己静态验证码，就是为了一步一步来更加清晰，首先是要实现成功发送邮件，：需要yml的，推荐转换工具或者下载idea插件yamls。打开QQ邮箱pop3请求服务：（按照QQ邮箱引导操作）实体类：（不知道有没有用，忘记了，要是报错就加上）

原创 （已解决）vue中如何进行不同页面数据传输和token下发添加到其他页面，meta如何使用

使用query函数携带token传到router meta。但是我没学，可以使用query函数和meta路由跳转携带。在index页面使用es6语法接收数据，并打印token。路由接收到meta，并且赋值到token。推荐使用vuex状态管理。

原创 （已解决）vue中如何解析jwt令牌，vue中jwt-decode无法使用，报错缺少类jwt-decode，无法找到jwt-decode

jwt-decode经过了一次更新，jwt-decode中已没有jwt-decode模块，所以无法使用jwt-decode进行jwt令牌解析。通过查找模块，发现jwt-decode模块更新为jwtDecode模块。所以需要使用jwtDecode进行解析。使用es6语法进行导入。

原创 （已解决）vue中如何将token加入请求头

【代码】（已解决）vue中如何将token加入请求头。

原创 （已解决）springboot maven项目针对于jwt包导入后无法使用报错，前端测试响应为500

造成原因：JDk8以上缺少部分类，导致无法找到并进行构建。

原创 （已解决）sping boot maven构建项目 添加jwt令牌

需要工具：MySQL数据库（且默认已连接完成），idea，maven构建项目（其他的可以换方法下jar包）

原创 （已解决）VUE2+sping boot 非登录页面拦截，个人中心页面详解

首先明确任务。一是需要个人中心页面，在个人中心中每个不同的用户需要展示不同的信息。所以我们需要在登陆时抓取登陆信息，并且在显示个人中心时进行查询个人信息并展示到页面上。对此，我们可以使用简单的算法，但是由于安全性并不高，我们可以使用cookie或者session或者jwt令牌对信息进行beta64加密后传输，但是又因为cookie和session不能进行跨域传输，所以我们选择jwt令牌进行验证和传输。

原创 （已解决）VUE数据传输注意事项，踩坑！

今天写项目的时候发现整个页面都没有数据，原因是一个小小的单词错了，但是其他页面的数据应该显示的阿，在vue中编写，但凡有一点数据出错，就会影响所有模块，数据一定要注意传输正确！

原创 (已解决)VUE页面图片显示不出来

通过vue-cil构建的脚手架项目，图片路径的显示需要使用require进行渲染。

原创 （已解决）VUE img标签的路径动态绑定，require为什么不直接使用变量接收地址

当你数据库中传输的为地址，在vue的img标签中会被解析为字符串，所以地址不会起作用，自然无法渲染出来（可能产生的其他问题：由于地址为你的数据，所以一个模块无法渲染，有可能使其他的模块渲染失败）使用字符串拼接，前面为你的资源的固定路径，后面传输的数据改为最前面图正确传输的数据，从而避免问题产生。问题：红框图片无法显示（图片为已解决，所以显示了）后端传输到前端的数据：（img数据原本为地址）建议把底下所有回答看完，后面的回答有详细解释。

原创 （已解决）前后端联动多数组数据接收

真花了两天时间，基础太差了，也没什么算法基础，虽然也不需要什么算法...顺道记录一下得了，小白太难了...

原创 （已解决）IOC控制反转，分层解耦复习详解

首先是控制层，来接收请求，我们接收了/login的post请求，并且使用@Autowired注入了UserService接口，RequestBody转化json格式，存有user对象，使用USer调用UserService的方法login。总结：mapper操作sql语句，UserServiceimpl类通过接通UserService的声明以及注入mapper，来完成操作，控制层再注入UserService。高内聚指的是：一个模块中各个元素之间的联系的紧密程度，如果各个元素。来进行bean对象的声明。

原创 （已解决）src=“{{searchForm.icon}}“: Removed interpolation inside the property. Use V-bind vue中img src值踩坑

解决办法：把路径改到assets下，并使用require包裹路径，成功显示。vue中图标显示不出来。

原创 (已解决)do not use empty rulesets

不要使用空规则集（意思就是里面没填，填上就解决了）

原创 （已解决）element-ui怎么修改element.style 内联样式

vue中element.style 内联样式是js中写死的，所以用!important，把权重拉过来就可以强制生效。important把200px越过element.style 内联样式60px，直接生效了。