入门级前后端

admin管理员组

文章数量:1574959

一、准备必要的软件

下载前后端软件以及配置环境变量前端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软件的帮助，希望大家可以多多利用这些工具，可解决大部分问题，提升自学纠错能力。

感谢大家的阅读！！！

本文标签： 入门级后端