河北专业做网站,网页设计公司背景图,网站建设备案是什么意思,wordpress百度链接提交本人最近学了vue#xff0c;想着练手的方法就是改写之前在公司开发的小系统前端#xff0c;将前端的AJAXJSThymeleaf改为axiosvue。
改写html
将html中的head和body结构移除#xff0c;将css部分移入style#xff0c; 重新定义了全局的想着练手的方法就是改写之前在公司开发的小系统前端将前端的AJAXJSThymeleaf改为axiosvue。
改写html
将html中的head和body结构移除将css部分移入style 重新定义了全局的script
script setup src/src/assets/global.js
import {ref} from vue;
import {reactive} from vue;
/scriptid选择器.click完成调用改为onclick直接回调方法
bug1 函数失误
现象页面没有出现红色异常但前端页面空白 原因渲染失败js出现语法错误但没有提示
import ./assets/main.cssimport { 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图形和具体代码因为这是本人之前为公司写的小系统不属于本人的
