本人最近学了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
现象：前端按钮点击无效，控制台报错
原因：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连接远程客户端，远程再进行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)进行位置调换
使用页面诀窍
1.错误看浏览器控制台和Webstorm控制台
2.逐行书写查看效果，否则bug都找不到
axios适配
bug1
现象：
且代码已经有配置过
@Configuration
public class Config {
@Bean
public 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时候会调用到这个机制
@Nullable
public 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协议
@Nullable
public 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;
}
}
解决方案：
@Override
public 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
声明
这是一篇纯描述博客，没有任何UI图形和具体代码，因为这是本人之前为公司写的小系统，不属于本人的
