项目是如何创建的,最简易的登陆注册功能是怎么实现的,数据库不能明文存放密码,密码经过了怎么样的处理存入数据库
前端使用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