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