html改写vue日志

本人最近学了vue,想着练手的方法就是改写之前在公司开发的小系统前端,将前端的AJAX+JS+Thymeleaf改为axios+vue。

改写html

<html>中的<head><body>结构移除,将css部分移入<style>
重新定义了全局的<script>

<script setup src="/src/assets/global.js">
import {ref} from 'vue';
import {reactive} from 'vue';
</script>

id选择器.click完成调用改为@onclick直接回调方法

bug1 函数失误

现象:页面没有出现红色异常,但前端页面空白
原因:渲染失败,js出现语法错误,但没有提示

import './assets/main.css'import { createApp } from 'vue'
import axios from 'axios';
import App from "@/App.vue";const app = createApp(App);
app.globalProperties.$axios = axios;
app.mount('#app');

解决方案:发现app.globalProperties有虚线标注,于是查看gpt并更改为

app.config.globalProperties.$axios = axios;

bug2

现象:app.vue无法百分百显示
解决方案:放弃,反正无伤大雅,主要是前后端调用正常,跳转正常即可

bug3 表单替代

现象:按钮无法显现
原因:vue不接受form表单
解决方案:删除form表单,并根据规范将<table>包装一层<tbody>,采用<v-model>来替代表单,并且以v-model翻出

bug4 DOM更改

现象:前端按钮点击无效,控制台报错
原因:vue存在虚拟DOM和实际DOM,会导致函数无法认知初始化时认定的DOM,伪代码如下

let content = document.getElementsByClassName('view_div')[0];
function check() {content.html = content.html + '执行';
}

解决方案:将let提到函数内,保证content完成了document.getElementsByClassName(‘view_div’)[0];的过程

bug5 websocket连接

现象:websocket连接不通
在这里插入图片描述
原因:太久没看代码,忘了真实逻辑,实际上是websocket连接远程客户端,远程再进行sftp调用tail -f,所以网页端address应填127.0.0.1
解决方案:改为网页连接127.0.0.1在这里插入图片描述
完美解决

路由改写

路由由Thymeleaf改为了vue-router

bug1 版本问题

现象:页面突然失效
原因:通过一步步删减代码,最后得出是引用出了问题,一开始就错了
引入了以下代码

import Vue from ‘vue’;
import VueRouter from ‘vue-router’;

解决方案:根据尚硅谷学习一下router配置
有效配置如下

import {createRouter,createWebHistory} from "vue-router";
import Hello from "@/components/Hello.vue";
import Log from "@/components/Log.vue";
const router = createRouter({history:createWebHistory(),routes:[{path: '/home',component: Hello},{path: '/log',component: Log}]
})
export default router;

然后将其导入main.js

import router from '/src/components/router';
........
app.use(router);

继续操作

原版设计页面之间都通过一个不确定位置的按钮+href跳转
由于Vue路由,后期需要使用<RouterView>,所以还需要额外设计导航栏

bug2 挂载顺序

现象:加上routerLink或者routerView的标签之后,全页面失效,但是不加上的时候就不会
原因:app要先完成其它配置最后再完成mount操作
解决方案:试了半天没有结果,通过Vue官网查询和重新适配,最后看到官网提示app要先完成其它配置最后再完成mount操作,于是将app.mount("#app")app.use(router)进行位置调换

axios适配

bug1 跨域解决

现象:在这里插入图片描述

且代码已经有配置过

@Configuration
public class Config {@Beanpublic CorsWebFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();//所有方法config.addAllowedMethod("*");//所有请求域config.addAllowedOrigin("*");//所有请求头config.addAllowedHeader("*");config.setAllowCredentials(true);UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());//管理的路径source.registerCorsConfiguration("/**", config);return new CorsWebFilter(source);}
}

原因:
查看在这里插入图片描述
很明显过滤器没有生效,原因是Webflux才可以,当前boot版本过低,那我们换一种思路,直接使用Handler里面的跨域机制,从HandlerMapping寻找Handler时候会调用到这个机制

@Nullablepublic final HandlerExecutionChain getHandler(HttpServletRequest request) throws Exception {Object handler = this.getHandlerInternal(request);.......//开始跨域访问if (this.hasCorsConfigurationSource(handler) || CorsUtils.isPreFlightRequest(request)) {CorsConfiguration config = this.getCorsConfiguration(handler, request);if (this.getCorsConfigurationSource() != null) {CorsConfiguration globalConfig = this.getCorsConfigurationSource().getCorsConfiguration(request);config = globalConfig != null ? globalConfig.combine(config) : config;}if (config != null) {config.validateAllowCredentials();}executionChain = this.getCorsHandlerExecutionChain(request, executionChain, config);}return executionChain;}}

真正比较的逻辑位于CorsConfiguration的checkOrigin,切记加上http协议

    @Nullablepublic String checkOrigin(@Nullable String origin) {if (!StringUtils.hasText(origin)) {return null;} else {String originToCheck = this.trimTrailingSlash(origin);Iterator var3;if (!ObjectUtils.isEmpty(this.allowedOrigins)) {if (this.allowedOrigins.contains("*")) {this.validateAllowCredentials();return "*";}var3 = this.allowedOrigins.iterator();while(var3.hasNext()) {String allowedOrigin = (String)var3.next();if (originToCheck.equalsIgnoreCase(allowedOrigin)) {return origin;}}}if (!ObjectUtils.isEmpty(this.allowedOriginPatterns)) {var3 = this.allowedOriginPatterns.iterator();while(var3.hasNext()) {OriginPattern p = (OriginPattern)var3.next();if (p.getDeclaredPattern().equals("*") || p.getPattern().matcher(originToCheck).matches()) {return origin;}}}return null;}}

解决方案:

    @Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:5173","http://localhost:5174","http://localhost:5176").allowedMethods("*").allowedHeaders("*").allowCredentials(true);}

bug2 返回问题

返回报错
原因:axios和ajax返回的数据结构长得不一样
解决方案:取出返回的response.data,而非直接操作response

使用页面诀窍

1.错误看浏览器控制台和Webstorm控制台
2.逐行书写查看效果,否则bug都找不到
3.记得禁用缓存

声明

这是一篇纯描述博客,没有任何UI图形和具体代码,因为这是本人之前为公司写的小系统,不属于本人的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/48574.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视频汇聚,GB28181,rtsp,rtmp,sip,webrtc,视频点播等多元异构视频融合,视频通话,视频会议交互方案

现在视频汇聚&#xff0c;视频融合和视频互动&#xff0c;是视频技术的应用方向&#xff0c;目前客户一般有很多视频的业务系统&#xff0c;如已有GB28181的监控&#xff08;GB现在是国内主流&#xff0c;大量开源接入和商用方案&#xff09;&#xff0c;rtsp设备&#xff0c;音…

x264、x265、libaom 编码对比实验

介绍 x264 是一个开源的高性能 H.264/MPEG-4 AVC 编码器,它以其优秀的压缩比和广泛的适用性而闻名。x265 是一种用于将视频流编码成 H.265/MPEG-H HEVC 压缩格式的免费软件库和应用程序,以其下一代压缩能力和卓越的质量而闻名 。作为 x264 的继任者,x265 支持 HEVC 的 Main、…

科研绘图系列:R语言单细胞聚类气泡图(single cell bubble)

介绍 单细胞的标记基因气泡图是一种用于展示单细胞数据中特定基因表达情况的可视化方法。它通常用于展示细胞亚群中标记基因的表达水平,帮助研究者识别和区分不同的细胞类型。在这种图表中,每个细胞亚群用不同的颜色表示,而基因表达水平则通过气泡的大小来表示,从而直观地…

前端算法入门【栈】

在JavaScript中是不存在栈这个数据结构的&#xff0c;但是我们可以通过数组来模拟栈。 1、基本实现 栈是一种“后进先后”的数据结构&#xff0c;数据在内存中是连续存储的&#xff0c;可以通过数组的 push 来模拟茹栈&#xff0c;pop 来模拟入栈。 // 栈 后进先出 const stac…

Android笔试面试题AI答之Intent(1)

答案仅供参考&#xff0c;来自文心一言 目录 1.请描述一下Intent 和 Intent Filter。IntentIntent Filter总结 2.Intent可以传递哪些类型数据&#xff1f;3.Serializable 和 Parcelable 的区别1. 效率2. 使用方式3. 适用场景4. 其他差异 4.请写出直接拨号、将电话号码传入拨号…

【IEEE出版,会议历史良好、论文录用检索快】第四届计算机科学与区块链国际学术会议 (CCSB 2024,9月6-8)

CCSB 2024会议由深圳大学主办&#xff0c;旨在探讨计算机科学的最新发展如何与区块链技术相结合&#xff0c;以及这一结合如何推动金融、供应链管理、数据安全和其他多个行业的革新&#xff0c; 本次会议将提供一个多学科交流的平台&#xff0c;汇集来自相关领域学者的研究和思…

最优化理论与方法-第十讲-对偶理论的基本性质和割平面法

文章目录 1. 向量化拉格朗日对偶函数2. 对偶问题是凹函数3. 对偶问题转换4. 外逼近法4.1 步骤4.2 注意事项 1. 向量化拉格朗日对偶函数 ( D ) max ⁡ d ( λ , μ ) s t . λ i ≥ 0 , i 1 , ⋯ , m , d ( λ , μ ) min ⁡ x ∈ X { f ( x ) ∑ i 1 m λ i g i ( x ) ∑ …

【AI那些事】YOLO算法在香橙派AIpro上跑起来的初体验

一、本文概述 在之前推出的Yolo算法后&#xff0c;我在windows电脑上使用python语言运行将其跑通了&#xff0c;觉的这个识别算法很是有意思&#xff0c;就一直想着这个算法能不能跑在硬件的开发板上那就太好了。我就开始寻找市面上可行的开发板&#xff0c;一直期盼的事情真的…

【学术研究、研究热点、最新前沿】如何跟踪最新的论文

1.跟踪arxiv 使用https://www.arxivdaily.com/接收每天的推送。 2.跟踪热点文章的引用 使用semantic scholar。 3.跟踪某个学术大佬或者主题 3.1 使用web of science。 3.2 使用文献鸟 4.跟踪某个期刊

迭代学习笔记

一、迭代学习定义和分类 1、直观理解 迭代学习一般应用于重复性的场景。比如控制一个单自由度的小车以特定的速度曲线移动到指定位置&#xff0c;整个时间是10s&#xff0c;控制频率是0.01&#xff0c;那么整个控制序列就会有1000个点。这1000个点在10s内依次发出&#xff0c…

小白快速入门量化交易的自学路径

今年已然过去一半了&#xff0c;年初立的flag都实现了吗&#xff1f; 据我多年来的观察&#xff0c;很多小白萌新开始学习量化&#xff0c;特别是年初的时候立下“宏图大志”&#xff0c;但有相当一部分最终没能"上岸"&#xff0c;从入门到放弃&#xff0c;从然后到没…

数据结构2—顺序表(附源码)

1.线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串... 线性表在逻辑上是线性结构&#xff0c;也就是说连续的一条直线…

抽象java入门1.5.2

前言&#xff1a; 坑留下来是为了补的 正片&#xff1a; 一、面向对象特性 二、面向对象编程详细展开 这些没有加粗的方法究竟来源哪&#xff1f; 在上一期的提示中&#xff0c;我们说了这些方法来源于面向对象编程的一个特性 验证&#xff1a; 第一步&#xff1a;我们先…

区块链空投之空投合约

关于 solidity、空投、智能合约 空投作为区块链行业最大的惊喜之一,很多人都是通过空投才接触到了这一领域。 甚至有很多专业薅空投羊毛的专业玩家。行业内有句话,小薅养活妻儿、大薅… 文章目录 前言空投到底是什么空投什么?空投合约代码空投步骤代码解析代码详解前言 今…

代码随想录算法训练营第23天|39. 组合总和、40.组合总和II、131.分割回文串

打卡Day23 1.39. 组合总和2.40.组合总和II3.131.分割回文串 1.39. 组合总和 题目链接&#xff1a;39. 组合总和 文档讲解&#xff1a; 代码随想录 这道题和昨天做的组合之和由两个区别&#xff1a;被选的元素没有数量限制&#xff0c;同时被选的元素可以无限重复&#xff0c;…

【嵌入式开发之标准I/O】流的刷新、定位以及格式化输出、输入

流的刷新 int fflush(FILE *fp); 成功时返回0&#xff1b;出错时返回EOF。 将流缓冲区中的数据写入实际的文件。 Linux下只能刷新输出缓冲区,输入缓冲区丢弃。 如果输出到屏幕使用fflush(stdout)。 流的定位 流的定位&#xff1a;ftell()函数 long ftell(FILE *stream)…

JavaScript:节流与防抖

目录 一、前言 二、节流&#xff08;Throttle&#xff09; 1、定义 2、使用场景 3、实现原理 4、代码示例 5、封装节流函数 三、防抖&#xff08;Debounce&#xff09; 1、定义 2、使用场景 3、实现原理 4、代码示例 5、封装防抖函数 四、异同点总结 一、前言 …

信息检索(39):Condenser: a Pre-training Architecture for Dense Retrieval

Condenser: a Pre-training Architecture for Dense Retrieval 摘要1 引言2 相关工作3 方法3.1 前提3.2 Transformer 编码器的问题3.3 Condenser3.4 Transformer 编码器的 Condenser 4 实验4.1 预训练4.2 句子相似度4.3 开放域问答检索4.4 Web search 检索 5 注意力分析6 结论 …

Adobe Premiere Pro(Pr)安装包软件下载

一、简介 Adobe Premiere Pro&#xff08;简称Pr&#xff09;是由Adobe公司开发的一款功能强大的视频编辑软件。它支持多平台使用&#xff0c;包括Windows和Mac系统&#xff0c;并且拥有良好的兼容性和高效的性能。Premiere Pro不仅提供了视频剪辑、特效添加、音频处理等基本功…

《从C/C++到Java入门指南》- 9.字符和字符串

字符和字符串 字符类型 Java 中一个字符保存一个Unicode字符&#xff0c;所以一个中文和一个英文字母都占用两个字节。 // 计算1 .. 100 public class Hello {public static void main(String[] args) {char a A;char b 中;System.out.println(a);System.out.println(b)…