当前位置：首页 > news >正文

html改写vue日志

news 2025/7/7 18:01:09

本人最近学了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图形和具体代码，因为这是本人之前为公司写的小系统，不属于本人的