Springboot+vue常见问题

1.JDK版本:1.8,Mysql版本:5.7或8.0,node版本:14+,运行代码之前一定要检查版本!

Springboot+vue常见问题

2.最新版本国际化失效问题

由于Element-plus版本更新,视频里面演示的国际化配置方式不适用于 Element-plus 1.0.2-beta.59 之后的版本,大家注意对照下面的方式进行修改。

去除main.js里面旧的配置

Springboot+vue常见问题

方案一(推荐):

全局配置:

import App from './App.vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'  
​
const app = createApp(App)
app.use(ElementPlus, { locale: zhCn })
main.js:

Springboot+vue常见问题

方案二:

在App.vue里面添加新的配置:

Springboot+vue常见问题

完成上面的配置,重启项目即可实现最新的国际化。

3. 405问题

405这个状态码的意思是请求的Http类型和你实际返回的Http类型不一致。比如你后台写了个POST接口,但是你前端使用GET请求访问,那就是驴头不对马嘴,服务器就会返回405的错误。所以要解决这个问题,只需要检查一下请求的方法类型是否和自己定义的方法返回类型一致即可。 注意:http接口分成3部分,接口类型:例如GET,接口路径:例如 /user,接口参数:例如 ?name=xxx或者 /xxx

4.sessionStorage为null问题

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

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

Springboot+vue常见问题

\2. vue里面的登录方法没设置 sessionStorage:

Springboot+vue常见问题

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

5.接口代理问题

Springboot+vue常见问题

当你配置了上面的vue.config.js里面的内容,在浏览器 network里面还是没看到请求的后台接口,莫着急,你可以使用debug模式启动后台,然后在接口里面打个断点,进行验证。

Springboot+vue常见问题

Springboot+vue常见问题

设置完断点,再次请求,如果没到断点里面来说明你的前端路径写错了,这时候是404,或者传的参数不对(400)。如果断点进来了,但是浏览器报500错误,很大的可能是你的数据库出现问题了,需要检查是否开启主键自增,以及数据库字段和Java代码里的字段映射是否正确,数据库是下划线分割,java代码里的字段是小驼峰命名。

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

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

Springboot+vue常见问题

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

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

怎么看Jdk的版本?

Springboot+vue常见问题

Springboot+vue常见问题

7.vue控制台报错

Springboot+vue常见问题

这种情况非常简单,就是后台没起,或者后台启动失败了,启动一下 SpringBoot就可以了。

8.Header.vue里面nickName报错的问题

这种情况,就是没获取到用户信息报的错

Springboot+vue常见问题

Header里面的 user 数据来自于 Layout.vue,也就是说 user 是从外面的Layout传进来的,

这是header.vue:

Springboot+vue常见问题

这是Layout.vue:

Springboot+vue常见问题

在Layout里面是通过这个refreshUser() 方法获取 user数据的:

Springboot+vue常见问题

所以说,只要你的Layout.vue里传入了 user的属性值, <Header :user="user"/>

在Header.vue里面就能获取到 user 的username,就不会报错。

另外,你需要注意,在Layout.vue里面的这个refreshUser方法,是在Person.vue里面去触发的,通过这样的方式可以触发:

Layout.vue:

Springboot+vue常见问题

Person.vue 点击保存按钮的时候触发Layout的 refreshUser 方法更新User数据:

Springboot+vue常见问题

只有这样,你才能在修改个人信息的时候,同步更新头部的头像和昵称!切记!

9.Element 图标不显示的问题

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

方案一:

先卸载 element-plus:

npm uninstall element-plus

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

Springboot+vue常见问题

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

npm install

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

Element - The world's most popular Vue UI framework

Springboot+vue常见问题

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

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

方案二:

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

安装:

npm install @element-plus/icons

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

Springboot+vue常见问题

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

  1. 在全局 main.js 引入;

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

例如想使用 Apple

Springboot+vue常见问题

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

// 在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'
​

10.富文本 wangedit 无法加载问题

如果遇到下面的错误:

Springboot+vue常见问题

是因为在初始化wangedit编辑器的时候,没有判断实例是否存在,而重复初始化导致的,需要在代码里加下面的判断:

在 add() 和 handleEdit() 方法里面都加一下这个判断!

Springboot+vue常见问题

Springboot+vue常见问题

上一篇:笨鸟先飞之ASP.NET MVC系列之过滤器(02授权过滤器)


下一篇:SSM常用注解