SpringBoot + Vue 从零学习搭建SmartAdmin项目

前言

项目介绍：这是一个使用SpringBoot和Vue进行搭建的后台管理项目，前端使用了Vue，后端使用Java、MySQL以及Redis.该博客主要展现对于项目的理解，包括功能、运用技术、遇到的问题以及解决方案，在基础软件安装上不进行过多介绍，直接使用第三方资源.

一、环境准备

下载安装JDK 1.8、Node.js、MySQL 并配置环境变量

Java 官网：下载地址 (后端)

Node.js官网：下载地址 (前端)

MySQL官网：下载地址 (数据库)

Idea专业版官网：下载地址 (Java编译工具)

Redis (Github)：下载地址

---

二、配置Idea、Maven

①版本2024.2.3 配置如下图；

 ● 集成开发环境使用Idea自带的Maven版本，其中，Maven的安装路径选择了默认的Bundled(Maven 3)目录.

● 用户配置文件选择conf文件夹下的settings.xml文件.

● 为了方便，我在C盘里Idea软件的安装目录下新建了一个repository文件夹，用于存放一些常见的包.

②如上图，将编码格式都改为UTF-8，以防止编码出错出现乱码；

 

 ③接着如上图所示，配置相应版本的SDK和Language level；

④然后在打开的项目文件中，点击刷新将jar包都下载下来，保存到包的储存文件夹repository里.

---

此时发现以下报错： 

 解决办法：(参考博客)

1.在mvnrepository网站中下载到上面提示的未解析插件对应版本的jar包；

2.在该jar文件下载目录下cmd运行以下代码；

mvn install:install-file -DgroupId=[在此输入groupId] -DartifactId=[在此输入artifactId] -Dversion=[版本号] -Dpackaging=jar -Dfile=[文件名称].jar

3. 然后在该项目中父类下的pom.xml中添加以下坐标代码，其中version中输入jar包的版本号；

4.刷新，成功解决. 

---

三、配置MySQL运行数据库 

①登录MySQL并测试连接，显示连接成功；

②在下图的数据库中，数据库名称为'smart_admin_v2'，username(用户名)为'root'，password(密码)为'Zhuoda1024lab'，更改为自己的密码；

 ③打开console控制台，输入下图中的'create database smart_admin_v2'，意为创建一个名为'smart_admin_v2'的数据库，然后点击运行；

④运行完后发现数据库内的数据依旧是空的，此时就要为这个数据库运行脚本，

分别选择对应要运行的数据库，以及要为此数据库执行的脚本，并点击运行.此时我们就已经配置好了数据库.

⑤配置完后再次点击运行，等待控制台输出初始化提示，成功构建.

---

四、运行前端

①打开终端，发现我们当前为后端API文件目录，所以我们需要进入到前端WEB文件目录内；

输入"cd ../"返回到上一级目录；

接着输入"cd [文件夹名]"来进入当前目录下的文件夹；

进入到 smart-admin-web 文件夹后，输入"dir"就可以看到当前文件夹内的文件或者文件夹；

接着进入javascript-ant-design-vue3文件夹，输入"dir"即可看到vue前端代码；

②在终端输入以下代码，将package.json中的依赖包下载下来；

npm install

接着输入以下命令启动脚手架；命令介绍参考

npm run dev

③进入前端网页后，发现验证码无法显示，此时就需要配置Redis；Redis部署参考

④部署完成后，刷新前端页面，发现验证码能正常显示.

---

 总结

● 本次前后端搭建过程中，其实在刚开始搭建环境时，就出现了在cmd中使用的命令无法反馈的问题，经过多次思考，发现只是因为自己并未给除Java以外的软件搭建环境，导致刚开始学习就耗费了大量的时间。此后我会在环境配置以及软件设置等细节上更加注意，并提高排查问题的能力。