html改写vue日志

好z

已于 2024-07-20 21:42:59 修改

阅读量871

点赞数 24

文章标签： html vue.js 前端

于 2024-07-20 19:09:48 首次发布

本文链接：https://blog.csdn.net/Liyizhi111/article/details/140470600

版权

本人最近学了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 {

    @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);
    }