首页 > 其他分享> 文章详细

Springboot+vue常见问题

2022-02-06 09:03:39 阅读：261 来源： 互联网

标签：常见问题里面 Springboot vue plus 版本 Layout 图标

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

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

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

去除main.js里面旧的配置

方案一（推荐）：

全局配置：

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:

方案二：

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

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

3. 405问题

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

4.sessionStorage为null问题

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

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

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

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

5.接口代理问题

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

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

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

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

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

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

怎么看Jdk的版本？

7.vue控制台报错

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

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

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

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

这是header.vue:

这是Layout.vue:

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

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

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

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

Layout.vue:

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

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

9.Element 图标不显示的问题

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

方案一：

先卸载 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

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

方案二：

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

安装：

npm install @element-plus/icons

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

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

在全局 main.js 引入；
在单独的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'

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

如果遇到下面的错误：

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

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

标签：常见问题,里面,Springboot,vue,plus,版本,Layout,图标
来源： https://blog.csdn.net/weixin_46565024/article/details/122795624

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9