Springboot+vue项目在IDEA上运行的一些心得

Springboot+vue项目在IDEA上运行的一些问题

准备工作：tomcat，maven，vue，Redis，Mysql

示例项目：智慧园区管理系统

1.导入项目

下载好开源项目后，进入IDEA，File->open->项目根目录中的pom.xml->open as project

2.设置maven地址和jdk

设置本地maven地址

设置jdk

3.配置环境

设置好后IDEA会自动帮你配置环境，maven环境配置好后会自动下载依赖（地址为上面自定义的地址）

注意：该项目采用阿里云镜像下载maven配置，如果不出意外的话应该是可以下载完整的依赖的。但是我在下载的时候spring-boot-starter-web始终无法正常下载，此时可以把标红项目的pom.xml文件的dependency中的spring-boot-starter-web中添加版本，如下图

到此处应该所有的依赖都下载好了（如上上上图没有标红），IDEA已经配置好Springboot的环境并且能运行了（指能点按钮，实际跑起来还会报错，如下图）

4.配置Mysql数据库

先确保已经安装好了Mysql数据库（此处就不提供教程），并下载Navicat for Mysql，教程：Navicat for MySQL免费版安装配置教程（超级详细、保姆级）并连接到Mysql数据库。之后导入项目中的数据库，如图：

打开Navicat：

注：最新的sql文件没有创建数据库的语句，需要手动新建数据库再在该数据库中运行语句（数据库名称要一样！！！数据库名称要一样！！！数据库名称要一样！！！）名称为ry_ics

之后在项目文件中进行配置：

此时IDEA应该就可以运行这个项目了（后端就能够运行了）

5.配置Vue前端

首先要下载node（我这里使用的是14版本）
下载地址：node下载
注：安装时选择全部文件，中途会提示是否要帮助配置记得勾选，安装结束之后为弹出控制台等待他下载依赖，结束后即成功

之后可以配置该项目的文件（此项目中为ui文件夹）如图：

参考教程：如何运行一个Vue项目
注：
运行时的命令为npm run serve而不是npm run dev
如果下载时出现错误，请删除该文件夹下的node_modules文件夹重新下载
如果运行时报错：

请参考这个文章的方法2：vue 启动报错：TypeError: Cannot read property ‘range‘ of null

到这里，该项目就可以初步地运行出界面了（先运行Springboot，再运行Vue，Vue运行后地控制台中显示的就是主页面地址）

6.配置Redis

在完成上面的步骤后，该程序已经可以显示出界面了，但是在登录账号的时候会报错，这是因为我们还没有配置Redis缓存数据库
Redis下载（GitHub）：Redis下载
Redis的安装和配置可以参考这篇文章：SpringBoot使用redis详尽教程

Redis配置好后，该程序就可以正常运行了！（运行方法同上）

一点感想

这是我第一次跑Springboot+Vue的项目，也是第一次跑开源的项目，过程中遇到的问题看起来很好解决，但是仍然给我造成了巨大的困扰。在网上找解决办法各种各样，但就是不起作用；在技术支持群里发问也是没有人回复，实在是非常无助。这也让我发现解决问题只能靠自己，继续加油吧。

文章如有侵权，请联系我进行删除。