SpringBoot+Vue项目中遇到的常见问题及其解决方法汇总

目录

1. Spring Boot 类似 Error creating bean with name “XXX” 的错误

2. IDEA连接mysql报错:Server returns invalid timezone. Go to ‘Advanced‘ tab and set ‘serverTimezone‘ prope

3. 405问题

4. sessionStorage为null问题

5. jdk版本或者mysql版本的问题

6. vue控制台报错 Proxy error: Could not proxy request

7. Element 图标不显示的问题

8. vue代理问题

9. 403问题

=====持续更新中=====


1. Spring Boot 类似 Error creating bean with name “XXX” 的错误

(出现在SpringBoot配置yml配置文件时)

(1)错误:

org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'productHandler': Unsatisfied dependency expressed through field 'productMapper'; nested exception is 
 
org.springframework.beans.factory.UnsatisfiedDependencyException: 
Error creating bean with name 'xxxMapper' defined in file [xxxMapper.class]: 
Unsatisfied dependency expressed through bean property 'sqlSessionFactory'; 
nested exception is org.springframework.beans.factory.BeanCreationException: 
Error creating bean with name 'sqlSessionFactoryBean' defined in class path resource [xxxConfig.class]: Invocation of init method failed; nested exception is org.springframework.core.NestedIOException: Failed to parse mapping resource: 'file [xxx\mappers\testMapper.xml]'; 
 
nested exception is org.apache.ibatis.builder.BuilderException: Error creating document instance.  Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 文件提前结束。

大意如下:不满足依赖异常。创建名为’xxxMapper’的bean时出错:通过字段’sqlSessionFactory’表达的不满足的依赖项;

(2)解决方法:注意spring配置文件——yml配置文件注意空格和对齐形式

2. IDEA连接mysql报错:Server returns invalid timezone. Go to ‘Advanced‘ tab and set ‘serverTimezone‘ prope

(1) 错误界面

(出现在IDEA连接MySQL测试连接时)

IDEA连接mysql,地址,用户名,密码,数据库名,全都配置好了,点测试连接,不成功!

翻译过来就是:服务器返回无效时区。进入“高级”选项卡,手动设置“serverTimezone”属性。

(2)解决方法

a.方法1:在mysql命令执行窗口输入如下指令

show variables like ‘%time_zone%’;
set global time_zone=’+8:00’;

b.方法2:在url后面添加?serverTimezone=GMT,如图

3. 405问题

(出现在前后端,后端接口与前端请求访问不匹配时)

(1)错误:

405状态码的意思是:请求的http类型和实际返回的Http类型不一致。

比如后台写了个POST接口,但是前端使用GET请求访问,那就会不匹配,服务器就会返回405的错误。

(2)解决方法:

所以要解决这个问题,只需要检查一下请求的方法类型是否和自己定义的方法返回类型一致即可。

注意:http接口分成3部分,接口类型:例如GET,接口路径:例如 /user,接口参数:例如 ?name=xxx或者 /xxx

4. sessionStorage为null问题

(出现在后端与前端传输值的时候)

出现这个问题有几种可能:

(1) 在后台登录方法login()里面没有设置返回值:

(2) vue里面的登录方法没设置 sessionStorage:

如果还是没有,需要重新登录下,然后 console.log(res) 看下结果返回了没

5. jdk版本或者mysql版本的问题

如果你遇到了类似这种问题,或者什么ClassNotFound之类的问题,一般情况下都是JDK版本的问题。

(出现在项目配置环境时,jdk或mysql的版本太高或太低)

(1)错误:

(2)解决方法:

推荐使用的jdk版本是1.8,mysql版本是5.7。

如果Jdk版本过高,可能会无法启动,或者启动之后无法获取数据。

怎么看Jdk的版本?

6. vue控制台报错 Proxy error: Could not proxy request

(出现在项目启动时:启动前端时,没启动后端)

(1)错误:

大意是:代理错误:无法代理请求

出现原因:后端相应的被代理服务器没有开启

这种情况非常简单,就是后台没起,或者后台启动失败了,

(2)解决方法:

启动一下 SpringBoot就可以了。

7. Element 图标不显示的问题

(出现在前端页面)

(1)错误:

如果遇到下拉箭头不显示或者菜单图标不显示的问题,都可以参考下面的方案解决:

(原因:版本原因,重装指定版本即可)

(2)解决方法:

方案一:

先卸载 element-plus:

npm uninstall element-plus

然后在vue项目里找到package.json,指定element-plus的版本:^1.0.2-beta.71

修改完成之后,执行命令重新安装依赖:

npm install

然后参考这个网站修改图标即可:

Element - The world's most popular Vue UI framework

<i class="el-icon-edit"></i>

不同的icon替换 class里面的内容即可!

方案二:

新版本 ^1.2.0-beta.5 或以上的版本,需要安装插件库,并单独引入图标才可以用。

安装:

npm install @element-plus/icons

图标文档地址:Icon 图标 | Element Plus

如果你想使用这里面的图标,有2种方式。

        1.在全局 main.js 引入;

        2.在单独的vue文件里面引入。

例如想使用 Apple

这个图标,你需要这么做,就可以了:

// 在main.js或vue文件的<script>里导入图标
import { Apple } from '@element-plus/icons'
​
// 在vue文件中使用
<el-icon :size="20" color="#409EFC">
    <apple />
</el-icon>

PS:

如果想使用其他图标也需要一个一个导入:

import { Apple, Edit, Location } from '@element-plus/icons'

8. vue代理问题

(出现在前端,发起的请求每次的session内容不同)

(1)错误:

前端发起的请求全部交给了vue的proxy进行处理,在调试的时候,发现了一个很严重的问题,每次请求的session都不一样!坑啊,然后搜vue的代理机制,发现axios跨域访问默认不带cookie,导致每次请求都会生成新的session,

(2)解决方法:

翻阅文档,找到了解决方法,就是让axios跨域带cookie就行啦,很简单

import axios from 'axios';

axios.defaults.withCredentials = true;// 允许跨域携带cookie

加上这句话之后,经过测试,每次携带的sessionId已经一致
 

9. 403问题

(出现在用户登录、访问数据接口时)(后端加入一段代码即可)

(1)错误:

登录成功之后,访问数据接口,一直包403错误,但是get请求没问题

response一直返回这个无效的CORS请求,CORS 头缺少 'Access-Control-Allow-Origin,

(2)解决方法:

主要是后端的问题,在springboot中加入下面代码即可:

@Configuration  
public class MyWebMvcConfig implements WebMvcConfigurer {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() { 
            @Override
            public void addCorsMappings(CorsRegistry registry) {  
                registry.addMapping("/api/**"); //对应的接口
                }
            };
    }

=====持续更新中=====

  • 0
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值