简易登录注册;测试类;postman测试;

项目是如何创建的,最简易的登陆注册功能是怎么实现的,数据库不能明文存放密码,密码经过了怎么样的处理存入数据库

前端使用nodejs18
后端项目需要等待maven加载完相关依赖,后端使用java17

1后端

1.1 创建项目所需要的数据库
内容比较详细,有基础的直接在本地创建【login_project】数据库,【users】表,表的创建直接找下面加大标红的SQL创建表语句,不会的请按照流程一步步来
首先打开Navicat然后连接上本地的MySQL数据库
在这里插入图片描述
在这里插入图片描述

连接上本地MySQL后创建相对应的数据库
在这里插入图片描述

然后创建数据库中的表,以下有两种方式进行表的创建,推荐使用第二种,可以保证你的表创建的和本教程一模一样
①可以直接在【表】菜单右键,选择【新建表】选项进行创建,然后编辑相应的数据库表字段,如下图所示
在这里插入图片描述

②使用命令行的方式,运行代码新建数据库表,按照如下教程顺序操作
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

将下面这部分命令复制黏贴到指定位置,如下图所示,然后再确保命令作用的数据库正确的情况下点击【运行】

CREATE TABLE user (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(255) NULL,gender ENUM('male', 'female') NULL,password VARCHAR(255) NULL,age INT NULL,phone_number VARCHAR(20) NULL,email VARCHAR(255) NULL
);

在这里插入图片描述

然后刷新一下数据库就可以看到新建的数据库表【user】了
在这里插入图片描述

至此,最基本的数据库及表的创建完成了

1.2 创建sprinboot项目
首先点击下图所示的敌方创建项目
在这里插入图片描述

按照如下图所示选择填写信息并点击下一步
在这里插入图片描述

选取如下图所示的依赖及spring boot版本,然后点击创建
在这里插入图片描述

Spring Boot DevTools:用于项目重启,热更新等的依赖。
Lombok:简化JavaBean的编写。比如在编写实体类时,在类上添加@Data注解,可以不用写get和set方法。
Spring Configuration Processor:spring默认读取yml配置。但是有时候需要读取传统的xml和properties文件,这时候就需要Spring Configuration Processor依赖了。
Spring Web:创建web项目,包括restful,用Spring MVC创建应用。默认用tomcat作为内嵌的web容器。
Spring Session:提供一组api和实现来管理用户session,比如同域名下不同项目的session共享等。
在这里插入图片描述

MyBatis Framework:支持自定义SQL、存储过程和高级映射。MyBatis 使用 XML 描述符或注解将对象与存储过程或 SQL 语句耦合。
MyBatis是一个优秀的基于 java 的持久层框架,它内部封装了 jdbc,使开发者只需要关注 sql语句本身, 而不需要花费精力去处理加载驱动、创建连接、创建 statement 等繁杂的过程,它使用了ORM思想实现了结果集的封装。
MySQL Driver:用于连接MySQL数据库的JDBC驱动程序。

成功初始化创建的项目如下图所示
在这里插入图片描述

在配置文件中配置本地数据库连接地址、用户名、密码
在这里插入图片描述

新建如下图所示的几个文件夹用于
Controller文件夹:存放控制层
Entity文件夹:这个包通常包含实体(或模型)类,它们映射到数据库的表。
Mapper文件夹:用于存放持久层,主要与数据库交互,包含数据访问对象(DAO)或者MyBatis的Mapper接口,这些接口定义了与数据库交互所需的操作,如查询、插入、更新和删除记录。对于每一个实体类,通常会有一个相应的Mapper接口。
Service文件夹:用于存放服务层,其包含业务逻辑,它作为控制器和数据访问层(如DAO或repository)之间的桥梁。服务类会处理应用程序的业务规则和逻辑,通常会调用由mapper或repository层提供的方法来访问和修改数据。
Mapper文件夹:MyBatis用于定义SQL语句和指令的配置文件
在这里插入图片描述
在这里插入图片描述

如下图所示,在entity文件夹中创建用于映射数据库表的实体类,现在数据库中只有一张userbiao1,所以只创建一个User类

在这里插入图片描述

如下图所示,在mapper文件夹中创建对应数据库【user】表的Mapper接口用于对【user】表进行增删改查操作。
这个接口使用了MyBatis的注解来直接在接口方法上定义SQL语句。这种做法适合简单的SQL操作。对于更复杂的SQL或者希望SQL和Java代码分离的情况,应该使用XML映射文件来定义SQL语句。

在这里插入图片描述

创建测试方法测试接口是否能够正常使用,操作步骤如下图所示
在这里插入图片描述

如下图所示,在service文件夹中创建UserService接口及其实现类UserServiceImpl的。这个服务层将封装对UserMapper的调用,提供更高级别的业务逻辑操作
因为我们要实现的是登录功能,所以我们实现login登录功能的相关业务逻辑
这里的逻辑是【查询所有用户,然后循环比对是否有复合的用户名和密码】
当然这个逻辑是不合理的,更合理的逻辑应该是根据用户名查询符合的用户,然后比对密码是否正确
更进一步,这里的密码采用的都是明文,实际项目中密码都是经过加密码的,不会以明文存放
再进一步,spring有相应的安全框架,整个登录功能会在大的安全框架下验证实现,附带登陆之后的权限验证等,这里只是做一个最简单的demo实现,所以采用最简单的方式实现
在这里插入图片描述
在这里插入图片描述

如下图所示,在controller文件夹中创建UserController用于责处理来自客户端的请求,执行相应的业务逻辑,并返回响应。
由于我们要实现的是登录功能,所以这里实现了一个login接口
在这里插入图片描述

然后启动项目

在这里插入图片描述

完善数据库数据库,特别注意name字段和password字段不能为空,不然因为代码相应部分没做处理,会报错

在这里插入图片描述

然后使用postman或别的发送请求的工具进行测试,如下图所示是测试成功的结果
在这里插入图片描述

至此,一个最简单的包含一个登录接口的后端项目完成了,接下来创建前端项目

2前端
2.1 创建vue项目
如图所示新建项目
在这里插入图片描述

项目创建完成后安装相关依赖
①Vue-router
命令:npm install vue-router@4
在这里插入图片描述

安装完Vue Router后,需要在项目中创建和配置路由
(1)创建自己的页面,如Logi.vue登录页,并修改App.vue页面

在这里插入图片描述

(2)创建一个路由配置文件,通常命名为router/index.ts

在这里插入图片描述

(3)在Vue应用中使用Router
在Vue应用入口文件中,导入并使用路由。
在这里插入图片描述

②Element-plus
如图所示安装element-plus UI库
命令:npm install element-plus
在这里插入图片描述

安装完成之后,在Vue应用的入口文件中(对于TypeScript项目,通常是src/main.ts),导入Element Plus库和它的样式文件,并使用app.use()方法来全局注册Element Plus组件。
在这里插入图片描述

③Axios
如图所示安装axios
命令:npm install axios
在这里插入图片描述

进入配置文件完善相关设置
在这里插入图片描述

初始化完前端项目安装完相关以来之后完善Login.vue登陆页面
在这里插入图片描述

在此过程中新建一个HomePage.vue页面作为成功登录之后跳转的页面,完善该页面的路由信息

在这里插入图片描述
在这里插入图片描述

登录页面的完整代码请自行查看,完整的项目我也会打包发出

登陆页面粗略的代码解释如下:
这段代码定义了一个Vue组件,用于实现一个登录页面。它使用了Vue 3的

更加详细的解释可以使用ChatGPT寻求帮助
这句话非常重要,ChatGPT真的非常好用,有能力的话还是使用官网的正版,国内的某些镜像可能没这么好用
https://chat.openai.com

这只是一个最简单的登录功能的代码示例,实际的应用中登录结果不会像这里这么简单只返回一个Boolean,而是会返回很多其它信息,例如之后用于权限验证的token,用户的信息等

参考:
https://blog.csdn.net/y2010081134/article/details/129111565
https://chat.openai.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1559005.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Sentinel最全笔记,详细使用步骤教程清单

一、Sentinel的基本功能 1、流量控制 流量控制在网络传输中是一个常用的概念,它用于调整网络包的发送数据。然而,从系统稳定性角度考虑,在处理请求的速度上,也有非常多的讲究。任意时间到来的请求往往是随机不可控的,…

Unity转Unreal5之从入门到精通 Spline(样条曲线)组件的使用

前言 Spline 组件 能编辑 样条曲线,定义一条路径,路径上的点可以通过距离起点的长度获取,因此可以实现 物体沿路径连续移动 的效果或者 物体沿路径分布 的效果。 今天我们就来实现一个简单的Spline样条曲线的Demo 实现一个沿路径运动的功能 1.新建一个基于 Actor 的蓝图…

ICE/TURN/STUN/Coturn服务器搭建

ICE 当我们想要实现在公网环境下的语音/视频通话功能时,就需要用到ICE交互式连接建立。ICE不是一种协议,整合了 STUN 和 TURN 两种协议(用于 NAT 穿透)的框架。 ICE的主要目标是解决NAT(网络地址转换)穿越…

[ C++ ] C++ 类和对象 -- 类的六个默认成员函数

目录 1.构造函数 2.析构函数 3.拷贝构造函数 4.赋值操作符重载 5.两个取地址操作符的重载 在C中当你创建一个空类,那这个空类是什么都没有吗?不是的,编译器会默认帮你生成六个成员函数 1.构造函数 构造函数是特殊的成员函数,…

leetcode 10.9 94.二叉树的中序遍历

94. 二叉树的中序遍历 已解答 简单 相关标签 相关企业 给定一个二叉树的根节点 root ,返回 它的 中序 遍历 。 示例 1: 输入:root [1,null,2,3] 输出:[1,3,2]示例 2: 输入:root [] 输出&#xff1a…

makefile的基本练习

假设有如下目录结构:(目录结构图) 完成以下操作: 1、通过纯命令编写Makefile文件,并发现使用纯命令的不足; 2、在Makefile中,添加变量,简化参数的重复书写; 3、尝试在多目…

『网络游戏』客户端使用PESorket发送消息到服务器【14】

上一章服务器已经完成使用PESorket 现在我们将其导出在客户端中使用 生成成功后复制 粘贴到Unity项目中 进入Assets文件夹 粘贴两个.dll 创建脚本:ClientSession.cs 编写脚本: ClientSession.cs 编写脚本:GameStart.cs 将GameStart.cs脚本绑定在摄像机上 运行服务器 运行客户端…

Linux网络驱动实验

直接参考【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.81 本文仅作为个人笔记使用,方便进一步记录自己的实践总结。 网络驱动是 linux 里面驱动三巨头之一,linux 下的网络功能非常强大,嵌入式 linux 中也常常用到网络功能。前面我们已经讲过…

8.12 矢量图层面要素单一符号使用十三(插值线渲染边界)

8.12 矢量图层面要素单一符号使用十三(插值线渲染边界)-CSDN博客 目录 前言 插值线渲染边界(Outline: Interpolated Line) QGis设置面符号为插值线渲染边界(Outline: Interpolated Line) 二次开发代码实现插值线渲染边界&…

Base64字符串转图片在线工具

版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 基本原理 Base64编码,作为一种将二进制数据转换为文本格式的方法,其核心在于利用64个可打印字符来表征任意的二进制信息。这一编码方式的出现&#…

erlang学习:Linux命令学习11

crontab命令 crontab命令是用于管理定时任务的命令行工具。它提供了多种选项和参数,可以用来创建、编辑、查看和删除用户的定时任务。 常用命令 以下是一些常用的crontab命令: crontab -e:编辑当前用户的定时任务列表。该命令会在默认编辑…

PostgreSQL学习笔记三:数据类型和运算符

数据类型和运算符 PostgreSQL 支持多种数据类型和运算符,以下是一些常见的数据类型和运算符的概述: 数据类型 基本数据类型 整数类型: SMALLINT:2 字节,范围 -32,768 到 32,767。INTEGER:4 字节&#xff0…

minio简单使用

文章目录 简介官方地址Linux下载安装安装服务启动关闭帮助命令 java开发minio依赖包新建项目pom配置文件配置类Service测试类运行测试 Api使用前言针对桶的操作查看某个桶是否存在创建一个桶返回桶列表删除一个桶 针对文件的操作上传文件到桶中(本地文件上传)上传文件到桶中(基…

C++标准模板库STL之容器--string

STL简介 STL(standard template libaray - 标准模板库)是C标准库的重要组成部分,不仅是一个可复用的组件库,还是一个包罗了数据结构与算法的软件框架。 STL的六大组件及相关函数 仿函数greater、less……算法find、swap、reverse、…

2020年华为杯数学建模竞赛D题论文和代码

无人机集群协同对抗 摘 要: 本文针对非线性约束条件下红蓝双方无人机集群协同对抗的最优规划问题,结合贪婪队形、非线性规划、内点法、蒙特卡洛方法和全联立正交配置有限元法,构建了无人机集群协同对抗推演模型。 针对问题一&#…

OBOO鸥柏全户外液晶广告机室外触控一体机技术标参数公布

整机参数技术公布: OBOO鸥柏智能43寸/49寸/55寸/65寸/75寸/86寸/98寸/110寸全户外LCD液晶安卓系统网络广告屏/室外触摸屏查询一体机投标参数投标标准款。 1、液晶屏具工业级液晶面板,亮度为2000cd/㎡,并且具备自动感光亮度调节,…

工业网关的主要功能-天拓四方

引言: 在当今工业自动化的浪潮中,工业网关作为一种重要的网络连接设备,扮演着不可或缺的角色。其强大的功能使得工业设备能够无缝接入网络,实现远程监控、控制、数据采集和协议转换等,极大地提升了工业生产的效率和智…

算法专题五: 位运算

目录 常见位运算总结1. 位1的个数2. 比特位计数3. 汉明距离4. 只出现一次的数字5. 只出现一次的数字Ⅲ6. 判定字符是否唯一7. 丢失的数字8. 两正数之和9. 只出现一次的数字Ⅲ10. 消失的两个数字 常见位运算总结 重点 : 1. 位1的个数 算法思路: 这道题就用到了我们总结的那个第…

图解 微信开发者工具 小程序源码 调试、断点标记方法 , 微信小程序调试器,真机调试断点调试方法,小程序网络API请求调试方法 总结

在我们使用微信开发者工具进行微信小程序开发的时候,在这个微信开发者工具的代码编辑框里面我们是无法像使用vscode, idea等IDE工具时那样直接对代码打断点进行调试, 原因是小程序实际上他就是一个web浏览器应用的包装, 在其内部使用的还是类似chrome的…

C/C++程序员为什么要了解汇编?了解汇编有哪些好处?如何学习汇编?

目录 1、概述 2、从汇编的角度去理解问题的若干实例说明 2.1、使用空指针去访问类的数据成员或调用类的虚函数为什么会引发崩溃? 2.2、从汇编代码的角度去理解多线程的执行细节,去理解多线程在访问共享资源时为什么要加锁 2.3、使用Windbg静态分析d…