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

news2024/10/10 17:43:23

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

前端使用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.coloradmin.cn/o/2202627.html

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

相关文章

安宝特方案 | AR技术在轨交行业的应用优势

随着轨道交通行业不断向智能化和数字化转型,传统巡检方式的局限性日益凸显。而安宝特AR眼镜以其独特的佩戴方式和轻便设计,为轨道交通巡检领域注入了创新活力,提供了全新的解决方案。 01 多样化佩戴方法,完美适应户外环境 安宝特…

骨传导耳机哪个牌子最好?五大爆品骨传导耳机全维度拆解推荐!

随着科技的不断进步,消费者对电子产品的需求也在日益增长,特别是在音频领域,骨传导耳机作为一项革新性的技术,正逐渐成为市场的新宠。不同于传统的空气传导耳机,骨传导耳机通过振动颅骨直接将声音传递至内耳&#xff0…

vivo全新AI战略“蓝心智能”发布 原系统5亮相开发者大会

​10月10日,2024 vivo开发者大会在深圳国际会展中心举办,大会主题为“同心同行”。会上,vivo正式发布全新AI战略——“蓝心智能”,同时带来全面升级的自研蓝心大模型矩阵、原系统5(OriginOS 5)、蓝河操作系…

开发环境搭建之JAVA多个JDK版本安装

由于项目需要安装多个版本JDK、所以在此记录一下安装过程: 下载JDK1.8 11 17 等多个版本 简单粗暴一看就会、直接从官网下载exe安装包、然后配置环境变量即可 JDK1.8 JDK11 JDK17 安装完成之后如下图: 环境变量配置 右击“我的电脑”属性、找到…

计算机网络实验一:组建对等网络

实验一 组建对等网络 实验要求: 1. 组建对等网络,会在命令行使用ipconfig,两网络能够相互ping通,尝试netstat 命令 2. 建立局域网共享文件夹 3. 安装packet tracer,模拟组建对等网并测试对等网 1、组建对等网络 连…

RandLA-Net PB 模型 测试

tensorflow ckpt 模型 转换 pb 模型, 测试模型是否正确, 后续实现 c++ 部署。 Code: https://github.com/QingyongHu/RandLA-Net 测试PB 模型 RandLANetConvert.py import tensorflow.compat.v1 as tf tf.disable_v2_behavior

第十三章 Redis短信登录实战(基于Redis)

目录 一、概述 1.1. Session复制 1.2. 使用Redis 二、基于Redis实现共享Session登录 2.1. 实现思路 2.2. 功能实现的主要代码 2.2.1. 用户业务接口 2.2.2. 用户业务接口实现类 2.2.3. 用户控制层 2.2.4. 登录拦截器 2.2.5. 拦截器配置类 2.3. 优化登录拦截器 完…

JVM系列(一) -浅谈虚拟机的成长史

一、摘要 众所周知,Java 经过多年的发展,已经从一门单纯的计算机编程语言,发展成了一套成熟的软件解决方案。从互联网到企业平台,Java 是目前使用最广泛的编程语言。 以下这段内容是来自 Java 的官方介绍! 从笔记本电…

程序设计基础I-实验7 函数(函数题)

6-1 sdut-C语言实验-计算组合数 计算组合数。C(n,m),表示从n个数中选择m个的组合数。 计算公式如下: 若:m0,C(n,m)1 否则, 若 n1,C(n,m)1 否则,若mn,C(n,m)1 否则 C(n,m) C(n-1,m-1) C(n-1,m…

linux下新增加一块sata硬盘并使用

1)确认新硬盘能被正确识别到 2)对新硬盘进行分区 说明:fdisk指令中输入“m”,可以看到详细的指令含义。 3)确认新创建的分区 5)格式化新创建的分区 6)挂载新分区并使用

网优学习干货:王者荣耀游戏用户体验洞察及质差识别(2)

王者荣耀卡顿特点 影响时延的因素 手游定界定位解决方案 基于“9段法”进行卡顿问题分解 通过数据关联->体验定标->优化提升,改善手游卡顿 无线侧通过“面”和“点”优化改善空口时延 参数及互操作策略优化提升业务感知 传输优化准确定位管道问题——无TWAM…

kafka快速入门系统学习示例

1.主要名词 Broker:消息中间件处理节点,⼀个Kafka节点就是⼀个broker,⼀个或者多个 Broker可以组成⼀个Kafka集群。 partition:通过partition将⼀个topic中的消息分区来存储。这样的好处有多个:分区存储&#xff0…

ArgoWorkflow教程(六)---无缝实现步骤间参数传递

之前我们分析了,Workflow、WorkflowTemplate 、template 3 者之间如何传递参数。 本文主要分析同一个 Workflow 中的不同 step 之间实现参数传递,比如将上一个步骤的输出作为下一个步骤的结果进行使用(而非以文件方式传递)。 1. …

引领零售未来:年销售额500亿的运动品牌如何实现多渠道会员管理?

通过技术创新和全渠道整合,提升运动品牌影响力、用户粘性和市场竞争力。 运动热情高涨持续释放消费潜力,全球知名运动品牌2024财年营收超500亿美元,保持七个季度连续增长。 而随着电商的崛起和消费习惯的变化,会员数量激增且分布…

Android实现ViewPager剧中放大效果

效果图 实现方式核心思想是自定义PageTransformer继承ViewPager.PageTransformer,精确控制每一个page的动效。 PageTransformer的transformPage方法并不会区分当前的page是哪一个,所以需要我们自己去识别,我的方法是每个page添加一个text显…

Nuxt.js 应用中的 page:transition:finish 钩子详解

title: Nuxt.js 应用中的 page:transition:finish 钩子详解 date: 2024/10/10 updated: 2024/10/10 author: cmdragon excerpt: page:transition:finish 是 Nuxt.js 中的一个事件钩子,专门用于处理页面过渡效果结束后的逻辑。这一钩子在页面过渡的 onAfterLeave 事件之后…

qt+opengl 实现纹理贴图,平移旋转,绘制三角形,方形

1 首先qt 已经封装了opengl,那么我们就可以直接用了,这里面有三个函数需要继承 virtual void initializeGL() override; virtual void resizeGL(int w,int h) override; virtual void paintGL() override; 这三个函数是实现opengl的重要函数。 2 我们…

【NLP自然语言处理】03 - 使用Anaconda创建新的环境/pycharm切换环境

NLP基础阶段:创建新的虚拟环境 第一步:查看有多少个虚拟环境 conda env list 第二步:创建一个新的虚拟环境,起个名字:nlpbase 打开anconda prompt终端,输入命令: conda create -n nlpbase python3.10 第三步…

基于xml配置文件的Spring事务

在项目中对事务属性通常传播属性,回滚属性,隔离级别,超时属性都取默认值,只有只读属性会如下的配置: 什么意思:Service层你的类里的方法,以get,find,select等开头的方法是…

如何进行数据中心负载测试的自动化?

数据中心负载测试的自动化是一种通过使用软件工具和脚本来模拟大量用户访问数据中心的过程,以评估其性能、稳定性和可扩展性的方法。以下是进行数据中心负载测试自动化的一些建议: 市场上有许多负载测试工具可供选择,如LoadRunner、JMeter、…