一、准备必要的软件
下载前后端软件以及配置环境变量前端node.js，后端idea，MySQL，jdk。需要自行看视频进行环境变量的配置。
安装node.js（下载 | Node.js 中文网 (nodejs)）
配置文件教程（【环境配置】Node.js安装教程与环境遍历配置_哔哩哔哩_bilibili）
这里选择自己电脑的系统，我这里选择Windows。下载完成后打开安装包根据视频步骤配置即可。
命令提示符查看配置完成和下载node.js用的包
安装JDK（Java 存档 |Oracle 中国）点击进入，选择合适的jdk安装
安装教程（java jdk的下载与安装 环境变量配置_哔哩哔哩_bilibili）
（我这里选择的是Java1.8.0_281版本，按照完成后进入命令提示符通过java -version 指令查看）
安装idea（IntelliJ IDEA – 领先的 Java 和 Kotlin IDE (jetbrains)）由于idea专业版需要付费，参考以下破解教程
（【2024最新】详解idea安装、配置、汉化，一键激活与破解，（附安装包&激活文件）亲测有效，永久使用_哔哩哔哩_bilibili）
最后，安装MySQL数据库（MySQL数据库下载及安装教程（最最新版）_mysql下载安装-CSDN博客）
同时可以参考B站教学（MySQL 8.0保姆级下载、安装及配置教程（我妈看了都能学会）_哔哩哔哩_bilibili）
！！！注意：安装前确保是电脑首次安装或者电脑之前安装的数据库删除干净了，否则会出现问题
二、连接数据库并运行后端
1、配置idea
将代码放到idea中，先不要运行。注意字符集（保证字符集是统一的），jdk的正确
SDK:选择1.8版本的JDK
（这我尝试了最新版本的jdk，发现运行出错，最后换回原来的Java 1.8.0_281的jdk版本）
选择字符集：UTF-8
选择Language level：8-Lambdas
使用idea的Maven工具下载包，然后连接数据库(注意更改数据库账号和密码)，如果连接不成功可是数据库有问题，找不出来的话建议重新安装数据库
Maven下载：idea右上部分maven功能区域(图示蓝色)，点击图片最左边刷新，左边第三个下载maven会自动下载你需要的包
2、连接数据库
选择MySQL
输入数据库账号和密码，并尝试连接
点击右下角的Test Connection ，这里会有两种提示（1）：连接成功，代表着数据库正常（2）：尝试连接失败，则说明你的数据库有问题。
尝试连接成功
如果遇到数据库有问题，你先检查你的数据库在电脑上是否正在运行（wen+R输入services.msc,打开服务，找到MySQL，查看是否正在运行）。
如果数据库在运行但还是连接失败，我建议你删除现有的数据库，然后重新安装数据库。这也是我一开始的问题，由于我电脑数据库之前有问题连接不上，于是我重新安装了数据库
！！！注意：需要彻底删除干净，附带教程（04-2 4分钟彻底完全卸载MySQL，亲测有效_哔哩哔哩_bilibili）删除后再重装数据库。
连接数据库
MySQL语句创建数据库，并运行MySQL代码
右侧选择Open Default Console，然后再左侧框里运行create database smart_admin_v2 完成数据库的创建
再运行提供的MySQL语句表
点击左上角加号
选择下图数据库
完成MySQL语句运行
4、运行后端代码
以下路径找到主函数，右键，运行。
运行出下图，说明后端代码运行成功
以上就是后端的操作，接下来是运行前端。
三、运行前端代码，生产网页连接
1、进入前端
通过idea控制台进入前端代码，注意目前前后端在同一级目录下，需要退回上级目录(使用cd..指令退回上级目录)
进入前端代码文件
2、npm install下载前端的包
下载运行需要的全部包，指令npm install
注意：第一次下载可能会比较慢，属于正常现象，稍稍等待即可。
如果出现下载报错，可能是由于网络问题和下载地址的问题影响了正常下载。这里提供一种设置淘宝镜像下载地址，提升下载速度。
设置淘宝镜像 ： npm config set registry https://registry.npmmirror
如果下载失败，则手动删除node_modules文件，再重新运行指令npm install 下载。
(我这里出现下载出错，通过手动删除smart-admin-web下的node_modules文件，然后重新下载npm install)
3、运行npm run dev，生成连接
下载完再运行npm run dev就可以了。完成后出现两个链接，第一个是登录界面，第二个直接进入
4、下载安装Redis
如图登录界面可能会出现网络连接失败，这样验证码会刷新不出来。
这个时候我们需要win+r，打开服务界面，查看是否有Redis在运行。
如果没有Redis则需要自己去网站下载Redis，下载安装包直接安装完成即可，若是下载的是解压包，完成解压安装还需要手动配置环境变量
教程链接：5分钟在windows上安装redis_哔哩哔哩_bilibili
参考如下Redis安装包
5、完成登录
安装好Redis后，需要关闭之前的登录界面和idea，然后打开idea，重新运行前端代码，就可以联网登陆了
四、总结
前后端相互独立，前端工作人员需要精通js，css，HTML等，运用工具进行交互效果的开发；后端工作人员则需要写Java代码,MySQL语句，会做数据库设计等。
内容有所区别
前端：是做网页或应用程序能够看到的内容，是用户所见的产物，常用框架HTML，样式CSS，数据的收集js；
后端：是看不到的代码，是提供数据的平台
前端与后端的交互： 通过HTTP协议，后端程序编写api接口
本项目后端通过代码将各种功能写好并连接到数据库，在后端编程软件的控制台上通过命令来运行前端代码，运行结果通过网页形式展现出来。
问题一：数据库连接失败
小编通过删除之前的数据库，再重新安装MySQL
问题二：idea配置出错，JDK配置和maven工具不匹配
因为代码不兼容JDK的原因和maven工具与JDK不兼容的问题，通过配置配对的JDK解决
问题三：npm下载出错
因为一些网络或其他原因导致下载出错，手动删除指令npm install下载的文件node_modules，然后重新下载
问题四：前端页面无法连接网络
电脑没有下载Redis软件，下载安装完成后，重新打开idea运行前端就OK了
以上问题均是通过B站，博客，百度，以及一些AI软件的帮助，希望大家可以多多利用这些工具，可解决大部分问题，提升自学纠错能力。
感谢大家的阅读！！！
一、准备必要的软件
下载前后端软件以及配置环境变量前端node.js，后端idea，MySQL，jdk。需要自行看视频进行环境变量的配置。
安装node.js（下载 | Node.js 中文网 (nodejs)）
配置文件教程（【环境配置】Node.js安装教程与环境遍历配置_哔哩哔哩_bilibili）
这里选择自己电脑的系统，我这里选择Windows。下载完成后打开安装包根据视频步骤配置即可。
命令提示符查看配置完成和下载node.js用的包
安装JDK（Java 存档 |Oracle 中国）点击进入，选择合适的jdk安装
安装教程（java jdk的下载与安装 环境变量配置_哔哩哔哩_bilibili）
（我这里选择的是Java1.8.0_281版本，按照完成后进入命令提示符通过java -version 指令查看）
安装idea（IntelliJ IDEA – 领先的 Java 和 Kotlin IDE (jetbrains)）由于idea专业版需要付费，参考以下破解教程
（【2024最新】详解idea安装、配置、汉化，一键激活与破解，（附安装包&激活文件）亲测有效，永久使用_哔哩哔哩_bilibili）
最后，安装MySQL数据库（MySQL数据库下载及安装教程（最最新版）_mysql下载安装-CSDN博客）
同时可以参考B站教学（MySQL 8.0保姆级下载、安装及配置教程（我妈看了都能学会）_哔哩哔哩_bilibili）
！！！注意：安装前确保是电脑首次安装或者电脑之前安装的数据库删除干净了，否则会出现问题
二、连接数据库并运行后端
1、配置idea
将代码放到idea中，先不要运行。注意字符集（保证字符集是统一的），jdk的正确
SDK:选择1.8版本的JDK
（这我尝试了最新版本的jdk，发现运行出错，最后换回原来的Java 1.8.0_281的jdk版本）
选择字符集：UTF-8
选择Language level：8-Lambdas
使用idea的Maven工具下载包，然后连接数据库(注意更改数据库账号和密码)，如果连接不成功可是数据库有问题，找不出来的话建议重新安装数据库
Maven下载：idea右上部分maven功能区域(图示蓝色)，点击图片最左边刷新，左边第三个下载maven会自动下载你需要的包
2、连接数据库
选择MySQL
输入数据库账号和密码，并尝试连接
点击右下角的Test Connection ，这里会有两种提示（1）：连接成功，代表着数据库正常（2）：尝试连接失败，则说明你的数据库有问题。
尝试连接成功
如果遇到数据库有问题，你先检查你的数据库在电脑上是否正在运行（wen+R输入services.msc,打开服务，找到MySQL，查看是否正在运行）。
如果数据库在运行但还是连接失败，我建议你删除现有的数据库，然后重新安装数据库。这也是我一开始的问题，由于我电脑数据库之前有问题连接不上，于是我重新安装了数据库
！！！注意：需要彻底删除干净，附带教程（04-2 4分钟彻底完全卸载MySQL，亲测有效_哔哩哔哩_bilibili）删除后再重装数据库。
连接数据库
MySQL语句创建数据库，并运行MySQL代码
右侧选择Open Default Console，然后再左侧框里运行create database smart_admin_v2 完成数据库的创建
再运行提供的MySQL语句表
点击左上角加号
选择下图数据库
完成MySQL语句运行
4、运行后端代码
以下路径找到主函数，右键，运行。
运行出下图，说明后端代码运行成功
以上就是后端的操作，接下来是运行前端。
三、运行前端代码，生产网页连接
1、进入前端
通过idea控制台进入前端代码，注意目前前后端在同一级目录下，需要退回上级目录(使用cd..指令退回上级目录)
进入前端代码文件
2、npm install下载前端的包
下载运行需要的全部包，指令npm install
注意：第一次下载可能会比较慢，属于正常现象，稍稍等待即可。
如果出现下载报错，可能是由于网络问题和下载地址的问题影响了正常下载。这里提供一种设置淘宝镜像下载地址，提升下载速度。
设置淘宝镜像 ： npm config set registry https://registry.npmmirror
如果下载失败，则手动删除node_modules文件，再重新运行指令npm install 下载。
(我这里出现下载出错，通过手动删除smart-admin-web下的node_modules文件，然后重新下载npm install)
3、运行npm run dev，生成连接
下载完再运行npm run dev就可以了。完成后出现两个链接，第一个是登录界面，第二个直接进入
4、下载安装Redis
如图登录界面可能会出现网络连接失败，这样验证码会刷新不出来。
这个时候我们需要win+r，打开服务界面，查看是否有Redis在运行。
如果没有Redis则需要自己去网站下载Redis，下载安装包直接安装完成即可，若是下载的是解压包，完成解压安装还需要手动配置环境变量
教程链接：5分钟在windows上安装redis_哔哩哔哩_bilibili
参考如下Redis安装包
5、完成登录
安装好Redis后，需要关闭之前的登录界面和idea，然后打开idea，重新运行前端代码，就可以联网登陆了
四、总结
前后端相互独立，前端工作人员需要精通js，css，HTML等，运用工具进行交互效果的开发；后端工作人员则需要写Java代码,MySQL语句，会做数据库设计等。
内容有所区别
前端：是做网页或应用程序能够看到的内容，是用户所见的产物，常用框架HTML，样式CSS，数据的收集js；
后端：是看不到的代码，是提供数据的平台
前端与后端的交互： 通过HTTP协议，后端程序编写api接口
本项目后端通过代码将各种功能写好并连接到数据库，在后端编程软件的控制台上通过命令来运行前端代码，运行结果通过网页形式展现出来。
问题一：数据库连接失败
小编通过删除之前的数据库，再重新安装MySQL
问题二：idea配置出错，JDK配置和maven工具不匹配
因为代码不兼容JDK的原因和maven工具与JDK不兼容的问题，通过配置配对的JDK解决
问题三：npm下载出错
因为一些网络或其他原因导致下载出错，手动删除指令npm install下载的文件node_modules，然后重新下载
问题四：前端页面无法连接网络
电脑没有下载Redis软件，下载安装完成后，重新打开idea运行前端就OK了
以上问题均是通过B站，博客，百度，以及一些AI软件的帮助，希望大家可以多多利用这些工具，可解决大部分问题，提升自学纠错能力。
感谢大家的阅读！！！