通过搭建SpringBoot+Vue框架实现对SmartAdmin账号的登录

2301_79890264

已于 2024-04-02 22:30:38 修改

阅读量898

点赞数 16

文章标签： spring boot 后端 java

于 2024-03-31 23:19:10 首次发布

本文链接：https://blog.csdn.net/2301_79890264/article/details/137202806

版权

前言

（一）环境配置

（1）需要下载的软件

1.4 idea（专业版）的安装：idea可以进行学生认证免费使用，学校有edu邮箱的可以快速验证，没有edu邮箱的可以通过官方验证的方式下载学信网的认证文件辅助验证；详细可以参考http://t.csdnimg.cn/at9KA）（有学生邮箱），http://t.csdnimg.cn/sEJBJ（无学生邮箱）

3.2 在运行npm install命令时报错

3.3 运行npm install命令后的丢包

3.4 SmartAdmin账号登陆界面验证码没有刷新出来

（四）认识

（五）总结

前言

使用老师提供的文件，下载并配置需要用到的前后端软件并通过idear运行代码实现项目

（一）环境配置

（1）需要下载的软件

1.1 jdk的安装：推荐下载jdk1.8版本；如何安装以及对应的环境配置可以参考http://t.csdnimg.cn/7hTCi

1.2 node.js安装：推荐下载14到16之间的版本；如何安装以及对应的环境配置可以参考http://t.csdnimg.cn/tF0vz

1.3 MySQL数据库的安装：推荐下载MYSQL8.2.0版本：如何下载以及对应的环境配置可以参考http://t.csdnimg.cn/E5Svm

1.4 idea（专业版）的安装：idea可以进行学生认证免费使用，学校有edu邮箱的可以快速验证，没有edu邮箱的可以通过官方验证的方式下载学信网的认证文件辅助验证；详细可以参考http://t.csdnimg.cn/at9KA）（有学生邮箱），http://t.csdnimg.cn/sEJBJ（无学生邮箱）

（2）后端的配置

2.1 idea中的maven配置：

点击File中的Settings

在搜索框中搜索maven

点击搜索出来后的maven后进行如图所示的配置(前者为idea自带路径，后者在D盘新建一个maven文件夹并导入repository文件夹；选中Override后可修改路径)后点击OK

2.2 简单的idea配置：

为了防止乱码点击File中的Settings后点击Editor再点击File Encodings在进行如图所示的编码格式配置

点击File中的Project Structure并选择你的jdk版本（SDK中选择）；Language level中选择下图格式

2.3 sql的配置

点击idea右边的数据库图标后点击+号并在Data Source右边的搜索框中选择MYSQL并点击

在出来的窗口中写入你的mysql的用户名与密码后点击Test Connecting ,如果失败可以将URL修改为如图所属的URL进行尝试（注意中英文格式，用英文）

配置数据库连接信息，点击sa-common.yaml并在datasource上填入自己数据库的账号密码

通过sql语句创建smart_admin_v2数据库

通过sql建表语句向smart_admin_v2数据库中引入数据表和数据

点击+选择数据库

点击Run数据库就设置好了

（二）运行代码

运行主函数SmartAdminApplication.java,下图为运行结果

点击Terminal进入终端找到smart-admin-master\smart-admin-web\javascript-ant-design-vue3后使用npm install下载需要用到的数据，然后再用npm run dev 运行它，得到

点击链接进入到local网页

验证码若是没有刷新就下载并配置redis，然后输入账号密码验证码后点击登录就能够成功登录了

（三）遇到的问题

3.1 jdk版本过高

问题描述

最初在运行主函数SmartAdminApplication.java的时候报错了诸如Illegal reflective access by com.alibaba.fastjson2.util.JDKUtils (file:/D:/m、 Use --illegal-access=warn to enable warnings of further illegal reflective、An illegal reflective access operation has occurred等错误

问题分析
通过查询百度资料后我发现在JDK 9（jdk1.9）之前，Java允许通过反射机制访问所有的成员，这些成员的类型包括私有(private)，公共(public)，包(< package >)和受保护(protected)。JDK9新增的功能之一 —— 模块系统对反射的行为做出了一定的限制。

从JDK9开始，对于非公有的成员、成员方法和构造方法，模块不能通过反射直接去访问，但是JDK9提供了一个可选的修饰符open来声明一个开放模块，可以从一个开放模块中导出所有的包，以便在运行时对该模块中的所有包中的所有类型进行深层反射来访问。

在JDK9中，Java运行时由一个一个的模块组成。基于旧版本JDK开发的第三方jar包在迁移到JDK9时无法被转换成为模块，但是可以将其放在类路径下，被加载成为一个unnamed标识的模块，如果该模块存在被使用的需求，则会被放置在模块路径上，被加载后用作自动模块，进而被系统依赖使用。

问题解决
从上面的分析可以知道可以通过将JDK切换成旧版本的方式来解决报错。(我这里使用的是JDK11出现了这个问题，将JDK11降级成JDK8（jdk1.8）之后警告就消失了)

3.2 在运行npm install命令时报错

问题描述

运行npm install时报错ERERM:operation not permitted等错误

问题分析

通过百度分析报错代码并查询相关资料后了解了可能是权限不足或者缓存出错的原因

问题解决

从权限不足的角度出发可以将node_cache文件夹权限改为完全控制，在运行代码即可

从缓存出错的角度可以删除C:\USERS{账户}\下的.npmrc文件也可以解决问题

3.3 运行npm install命令后的丢包

问题描述

在成功执行npm install命令后报错了显示丢包的代码

问题分析

查询资料后了解在执行 npm install 命令时可能会遇到网络掉包以及程序出错等情况导致的掉包

问题解决

如果是因为网络问题导致的掉包可以设置npm的淘宝镜像源：在命令行下运行install -g cnpm -- registry=http://registry.,npm.taobao.org程序也可以试试在文件夹中删除node_moudules,然后重新执行npm install也可能成功；如果是程序出错导致的掉包可以在命令行下运行 npm audit dix --force进行自动修复后再重新执行npm install命令解决丢包问题

3.4 SmartAdmin账号登陆界面验证码没有刷新出来

问题描述

登录界面验证码没有刷新

问题分析

电脑的缓存差，查询效率低

问题解决

通过下载redis用以减轻数据库压力，提高查询效率

（四）认识

对前后端的认识:在我的理解里前端是用户能看到的（网页页面）而后端是用户看不到的（网页背后的数据）。

前端通过网页上的内容与用户进行交互，内容是用户能从页面所获得的图片文字以及视频内容而交互则是用户通过点击页面按钮以及输入文字数据等操作而前端对用户的操作做出相应的响应。在前端开发当中主要会用到HTML、CSS和JavaScript等技术来控制网页中的内容以及网页与用户间交互的功能。

后端是网站的后台部分，运行在服务器上，是存储和检索数据的系统。后端通过提供数据访问服务保障前端能够完成对用户请求的响应。后端开发涉及数据库（如MySQL、MonggoDB、Redis等）、编程语言（如C、C++、JAVA、Python等）以及框架、API等技术，注重功能的实现与逻辑的处理。

（五）总结

通过这一次项目的学习我接触到了如何利用SpringBoot+Vue框架通过链接访问资源的并初步了解或是进一步运用了idea、nodejs、mysql、jdk、redis，maven等开发工具与环境，认识到了idea开发工具再开发效率上的高效以及redis数据库对减轻数据库压力，提高查询效率的作用。在代码编写时学到了dir是查看该磁盘的文件、cd.是当前目录、cd..是回到上一级目录、cd/是回到根目录，cd../是回到上两级目录的关于cd命令以及dir命令的用法。又因为这一次的项目实现需要下载好软件，在下载这些软件的前后出现很多版本过高导致的项目不能运行的情况，我认识到了要根据项目实际需求选择最稳定的软件版本可以避免很多语法错误。总的来说这一次项目学习让我收获良多，期待接下来的学习。