[其他]记录1次本地前后端联调,遇到的各种问题和解决

A.前置情景

电脑不久前重装过,大部分配置失效,现在需要重新打开前后端项目进行开发,前端使用vscode开发后端使用idea开发,目的是成功启动后端并连接数据库,前端可以成功发送请求请求数据,

该文章是属于事后记录文章,记录时所有问题均已解决,前后端数据库成功接通,因此部分问题截图无法百分百复现,可能会找网上图片代替

B.遇到问题和解决过程(开始流水账描述)

1.首先打开前端项目,点击vscode左上角查看,再点击终端,运行npm run serve命令 , 启动前端项目

直接报错:不认识npm命令

2.百度准备下载npm和node.js(这里再贴一下node.js和npm的gpt的解释)

3.开始安装npm和node.js,步骤如下,直接全贴图了

然后点击install等待安装完毕,再点击Finnish结束安装程序

4.验证npm和node环境变量,注意了哈,如果是安装上面步骤安装的,此时环境变量应该是自动配置好了

我们点击win+r 输入cmd , 进入dos命令行窗口 , 再分别输入npm -v 和 node -v 查验环境变量

5.重新启动前端项目 npm run serve, 注意了哈 , 如果此时vscode依然报错无法启动, 那么需要重启一下vscode,因为他内置的dos命令窗口有缓存,重启清除即可,最终前端项目启动成功

6.打开前端页面,发现前端页面报错network error 网络错误,

我这我这个前端项目启动后会默认调用后端一个接口加载初始数据列表,因此怀疑是接口调用产生的这个报错,那么复制整个报错,然后百度找到这个文章

解决AxiosError:Network Error跨域问题_got error while downloading config: axioserror: ne-CSDN博客阅读文章发现可能是跨域问题,但我记得跨域设置我在后端做过,那么再次观察跨域配置, 发现前端接口变了,我之前设置前端是8081,但是现在前端是8080,那么修改一下后端配置

7.还遇到了前端axios包找不到问题,原因是axios包安装路径变过,重新指定新的即可

8.还遇到了前后端接口冲突导致后端服务启不起来,重新设置后端接口即可,但记得和前端做同步

9.此时前端成功进入页面,但过1秒后,前端再次报错500,500是后端服务器报错,说明前端页面在使用钩子函数请求后端初始列表接口时,后端报错了,那么观察后端报错日志,发现是找不到MySQL数据源,我又想起来,上次电脑重装的时候,MySQL服务也被我搞没了,ok,再参考下面这个文章重新安装MySQL

教你彻底卸载MySQL 并重装（保姆级教程 ）

10,然后换MySQL驱动依赖版本,可以通过一些命令在MySQL客户端查看MySQL服务器版本,又遇到了MySQL5和8配置不同导致报错

11又遇到了镜像仓库设置错误,导致idea内置的视图化MySQL客户端所需要的驱动下载很慢很卡,那么重新设置一个镜像即可,设置阿里的

12.以下是一些解决过程问gpt的问题,也贴出来

13.成功打通前后端数据库,执行了查询了查询

C.总结

1.解决过程花费3小时

2.善用gpt

3.善用百度

4.想好了再操作,不要急,不要出错