(一)从零搭建通用管理系统后台SpringBoot+Vue详细流程——开发环境搭建

最新推荐文章于 2024-03-30 22:31:54 发布

小马马冲冲冲

最新推荐文章于 2024-03-30 22:31:54 发布

阅读量1.2k

点赞数 29

分类专栏： Java 文章标签： spring boot vue.js 后端

本文链接：https://blog.csdn.net/weixin_44149917/article/details/135072013

版权

Java 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

前言

大家好，我是小马，最近由于生活压力比较大吧，突如起其来的国企降薪，让自己的计划全乱了，孩子、房贷、生活费让人压力山大呀！！！在国企就一点挺好，时间很富裕，所以也借此机会，根据自己的工作开发经验，写一篇较为通用的管理系统后台，一呢主要是记录巩固下自己近三年学到的知识，二呢也想通过写一个完整的后台管理来学习一些当下比较火热的技术，如果薪资还这么降下去，也好另找他家，技多不压身嘛。三嘛还是想在这样一个赛道中获取一些流量，小赚点宝宝的零花钱，如果你觉得文章对你有用，请点一个免费的赞，小马在此谢过了。如果你有什么疑问也欢迎留言共同探讨！

对即将开发的系统做一个简单的介绍，系统采用前后端分离的方式开发，因为是一个人，所以教程也将按功能前后端交替开发，后端采用springboot3，前端采用Vue3。整体包括部门、人员、角色、权限、字典等基础模块，功能方面包括文件导入导出、定时任务等。

其实和现在非常火的若依框架类似，我自己也是一直在通过若依的代码学习，所以该系列文章有很多地方都有若依的影子。当初若依的作者说要给自己的孩子起名叫若依，不知道他结婚了没，反正我家公主名字叫若汐，所以给该项目也起一个名字就叫若汐吧。

工欲善其事，必先利其器！！！想要代码写的好，0 warning 、0 error 一次过，就离不开趁手的开发环境，本篇文章就带大家搭建前后端开发环境，如有不当或不解之处请留言。

后端开发环境准备

JDK安装

由于springboot3不支持jdk8，这里推荐使用jdk17。jdk官网下载地址：Java Downloads | Oracle 中国建议选择压缩包格式安装包，灵活度高且干净，不会产生额外的文件配置之类的。官网下载速度可能会比较慢，这里我上传到了网盘供下载。

百度网盘：

链接：https://pan.baidu.com/s/19TK4JBXOWlcNfFZBSL12DQ

提取码：w7x3

下载完成后，创建文件夹D:\Program Files\Java，将压缩包移动到该位置下解压。

解压后jdk的文件路径 D:\Program Files\Java\jdk-17.0.9，打开系统环境变量设置窗口，如图：

在点击系统变量下的新建，输入变量名JAVA_HOME ，变量值：D:\Program Files\Java\jdk-17.0.9（就是刚才我们解压的jdk路径），然后确定。

再找到系统环境变量中的Path变量，双击编辑，再新建，输入 %JAVA_HOME%\bin。一定记得两个窗口都要确定，否则下一步没有效果。

最后去验证一下jdk是否安装成功，快捷键按 win(键)+r，输入cmd并回车，会弹出命令窗口，输入 java -version就会出现jdk的版本啦，如果是其它提示说明中间操作有问题。

Maven安装

既然要web程序开发，就一定要有依赖管理器，否则项目的诸多依赖手动下载导入可不是一件轻松的事儿，这里推荐用maven，比较大众，有问题好找资料。如果你不知道什么是maven，就按照教程走吧，保证会用能用，如果想更深一步了解，可以找找相关课程。

第一步当然还是下载安装包啦，官方下载地址：https://maven.apache.org/download.cgi选择 bin.zip结尾的安装包点击下载。如果下载速度很慢，可以使用国内镜像网站：https://iso.mirrors.ustc.edu.cn/apache/maven/maven-3/3.9.6/binaries/apache-maven-3.9.6-bin.zip 几秒中就下好了。

下载完成后，创建文件夹D:\Program Files\Maven，将压缩包移动到该位置下解压。

解压后maven文件路径 D:\Program Files\Maven\apache-maven-3.9.6。打开系统环境变量设置窗口，如图：

在点击系统变量下的新建，输入变量名MAVEN_HOME ，变量值：D:\Program Files\Maven\apache-maven-3.9.6，然后确定。

再找到系统环境变量中的Path变量，双击编辑，再新建，输入 %MAVEN_HOME%\bin。一定记得两个窗口都要确定，否则下一步没有效果。

最后去验证一下Maven是否安装成功，快捷键按 win(键)+r，输入cmd并回车，会弹出命令窗口，输入 mvn -v就会出现maven的版本啦，如果是其它提示说明中间操作有问题。

为了之后在开发中有更好的体验，建议修改maven的远程仓库和本地仓库的设置。编辑D:\Program Files\Maven\apache-maven-3.9.6\conf\settings.xml文件：

首先设置本地仓库路径，由于开发过程中会下载大量依赖，所以建议不要使用默认路径，配置一个除C盘之外的路径。在文件的开头部分找到下图这段内容：

添加内容：<localRepository>D:\Program Files\Maven\apache-maven-3.9.6\repository</localRepository>

修改后长这样：

然后是远程仓库的路径，也就是你的依赖下载地址，maven默认是国外的仓库地址，下载很慢，所以要修改该成阿里的仓库，速度飞起。找到<mirrors></mirrors>这对标签，删除中间的内容，并插入下面的内容：

<id>alimaven</id>

<name>aliyun maven</name>

<url>http://maven.aliyun.com/nexus/content/groups/public/</url>

<mirrorOf>central</mirrorOf>

</mirror>

修改后长这样：

最后保存关闭文件就可以啦。

IDE安装

Java开发中比较火的IDE有eclipse 、idea、vscode，但个人感觉idea用来开发java项目是最舒服的。Idea 下载地址：

https://www.jetbrains.com/zh-cn/idea/download/?section=windows

下载即可。当然这是付费软件，可以免费使用30天，之后需要购买激活码。微信关注“小马马冲冲冲”发送消息“idea”可白嫖。安装时的勾选情况可以参考下图。

安装好后，需要进行一些配置，如汉化、jdk、maven等，下面来逐一讲解。

Idea中文化：在起始面板的plugins中（或在settings的plugins中）搜索关键字chinese，安装对应插件并重启idea即可。

Jdk配置：一般idea会自动读取环境变量加载jdk，但是也会存在未配置jdk的报错情况，这里建议用idea打开任意文件夹进入idea编辑页面，按照下图进行jdk配置

Maven配置：idea有捆绑的maven，但是还是建议使用我们自己的maven，毕竟可控嘛。按照下图配置即可。强调一点，选中我们自己安装的maven后，一定要去把用户设置文件也要改正对应maven目录下的settings文件，否则我们前面配置的内容就无效啦。然后观察本地仓库是否与之前修改的配置路径<localRepository>D:\Program Files\Maven\apache-maven-3.9.6\repository</localRepository>一致。

最后一定别忘记应用并确定哈。

前端开发环境准备

Nodejs安装

Nodejs下载地址：https://cdn.npmmirror.com/binaries/node/v18.18.0/node-v18.18.0-win-x64.7z。下载完成后创建文件夹D:\Program Files\Node，将压缩包解压至该目录下。

解压后文件路径 D:\Program Files\Node\node-v18.18.0-win-x64。再到D:\Program Files\Node路径下创建两个文件夹，分别是全局插件目录node_module和全局缓存目录node_cache。

设置系统变量，打开系统环境变量设置窗口，如图：

在点击系统变量下的新建，输入变量名NODE_HOME ，变量值：D:\Program Files\Node\node-v18.18.0-win-x64，然后确定。同昂再添加变量NODE_MODULE，变量值为D:\Program Files\Node\node_module，最后确定。

再找到系统环境变量中的Path变量，双击编辑，再新建，分别添加 %NODE_HOME%及%NODE_MODULE%。一定记得两个窗口都要确定。

最后去验证一下Nodejs是否安装成功，快捷键按 win(键)+r，输入cmd并回车，会弹出命令窗口，输入 node -v就会出现maven的版本，输入npm -v就会出现npm版本，如果是其它提示说明中间操作有问题。

此时还需要最后一步，就是设置全局插件路径，刚才我们已经创建了node_module和node_cache目录，这时就要告诉node我们创建这两个目录的路径，如果步设置，后面下载全局插件时就会下载到C盘中。在CMD窗口中执行两条命令（建议一条一条执行）：

npm config set prefix "D:\Program Files\Node\node_module"

npm config set cache "D:\Program Files\Node\node_cache"

然后验证是否安装成功，执行 npm config list,就会出现npm设置信息，只需核对cache和prefix是否是上面配置中的路径即可。

VSCode安装

个人认为免费的前端开发软件里面，vscode应该最牛逼的神奇之一了，HbuildX也不错。这里就以vscode为例，之后前端开发也都使用vscode。首先就是去下载vscode了，官网地址：Visual Studio Code - Code Editing. Redefined ，直接点击下载即可。