搭建Springboot和vue框架，登录管理界面

admin管理员组

文章数量:1531445

前言

在本次小项目实现的前提下，我们电脑应该有最基本的配置，还有相关软件。前端主要做用户界面的渲染，后端主要负责业务逻辑和数据的处理。本次项目也是通过前后端分离，通过相互交互的方式达到了最终的效果。

一、前端node.js安装配置

node.js是一款可以让javascript运行在服务端的开发平台。而npm是一款包管理器。首先，我们进行前端node.js安装配置，npm下载镜像配置。
1、我们可以进入node.js的官网，找到合适的版本，我建议可以选择14到16的版本，新版本在老项目中安装软件可能会出错。
2、找到合适的版本后，下载压缩包，压缩到合适的安装目录。找到位置后，我们需要在node的根目录创建两个文件夹，然后配置环境变量。

3、通过win+R键输入cmd进入命令提示符，接下来输入相关指令配置npm的缓存以及全原装路径和npm镜像（注：因为官方镜像下载较慢，我们可以设置为淘宝镜像）

二、后端jdk的配置
jdk是java程序开发的工具包。主要用于移动设备、嵌入式设备上的java应用程序。jdk是整个java开发的核心，它包含了java的运行环境，java工具和java基础的类库。
1、在浏览器搜索jdk安装包，下载并安装。安装好后进行环境配置。
2、环境变量配置：找到系统变量中的Path，选中并编辑，新建，把jdk安装的路径复制粘贴到其中，此时，要把java给我们自动创建的一个环境变量给删除，然后将新建的环境变量移至第一行。

4、为了检验是否成功，我们可以进行测试，找到jdk的安装路径，输入cmd，打开属于这个路径的命令提示符窗口。输入相关指令进行测试。

三、MySQL的删除、安装以及配置、

MySQL是一个小型的关系数据库管理系统，同时MySQL可以称的上是目前运行最快的数据库管理系统，具有很多特点，比如可移植性，可扩展性和灵活性等等。
1、在下载安装一个新的数据库之前，我们得保证电脑里面没有其他的数据库信息。如果数据库完整且可以连接，可以不用卸载。所以我先介绍怎么将数据库删除干净。首先进入控制面板。找到程序，点击卸载程序，翻阅看是否有数据库，有就可以进行卸载。

2、删除安装目录里的MySQL项目。默认情况下会在C:\Program Files或者C:\Program Files (x86)中。找到MySQL，就可以进行卸载。

3、删除MySQL的相关注册表，win+R键并输入regedit,r然后在以下注册表中卸载MySQL。
路径1：HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\services\eventlog\Application\MySQL
路径2：HKEY_LOCAL_MACHINE\SYSTEM\ControlSet002\services\eventlog\Application\MySQL
删除整个MySQL文件夹即可。

4、在C盘中找到隐藏的文件，点击查看，找到显示并点击，选择隐藏的项目，打开C:\ProgramData，卸载MySQL项目。最后进行重启，MySQL就完全卸载了。

5、在以前的数据库完全卸载的情况下，就可以进行新数据库的安装了。在浏览器中搜索MySQL，找到合适的版本，就可以下载MySQL的安装包了，最后安装。安装的过程中，会出现下面这个页面

后面就点next，出现密码的那个界面时，设置密码一定要记住，否则就是白装。如果遇到下面这种情况通常是因为上次安装的该软件未清除干净。

可以尝试按照以下步骤操作：
（1）、保持住这个页面，不用叉掉重装
（2）、计算机—>右键—>管理。找到mysql
（3）、右键—>属性—>登录
（4）、点击允许服务于桌面交互，回到这一界面再一次安装，最后就可以安装成功了。
6、环境变量配置：找到系统变量中的Path，选中并编辑，新建，把MySQL安装的路径中bin的根目录复制粘贴到其中，点击确定。
7、验证是否配置成功，win+R键并输入cmd,输入相关指令，输入mysql -u root -p后就需要输入你设置的密码。就可以验证是否配置成功。
四、安装编译软件idea
在浏览器搜索idea，找到合适的版本下载安装就可以了。当遇到maven项目时我们还需要给idea配置maven。这里我们可以查看博客
https://blog.csdn/qq_42057154/article/details/106114515
同时还需要给idea配置mysql这里可以查看博客
https://blog.csdn/qq_37374643/article/details/97623291

五、项目的运行
在运行之前，我们还要下载并安装redis。
将相关代码拉入编译软件idea，找到需要运行的后端代码。
运行后端后，进行前端的运行。因为本项目是前后端分离的。所以这里需要对前端进行单独的运行。在终端出进行相关操作，dir可以查看文件目录，因为前后端代码是同级目录，所以输入指令cd … / 进入上级目录，然后进入前端代码的文件目录。进行下一个指令cd javascript-ant-design-vue>,此时还不能运行，要使用npm命令，即npm install去下载相关的包。最后使用npm run dev就可以运行前端代码了。

最后的效果图如下：

本文标签： 框架界面SpringBootvue