引言:
我们上一章实现了简单的登录注册页面,今天小编来带着大家实现完整的登录注册功能。
一、后端的搭建
Spring Boot介绍:Spring Boot是一个用于简化Spring应用程序开发的开源框架。它通过自动配置、内置服务器和预设的最佳实践,极大地减少了配置和开发的复杂性。Spring Boot允许开发者快速创建独立的、生产级的Spring应用,而无需手动配置大量的设置。它内置了各种工具和组件,支持自动化的依赖管理、容器配置,并提供了广泛的生产监控功能。
1. 创建项目
在这里,小编使用的是Springboot搭建的后端,利用的是 IDEA(java编程语言的集成开发环境)
我们先将后端项目创建好,点击File->New->Project:
接着我们给项目命名,选择Maven的包管理器,JDK的版本要和java对应,最后点击下一步:
紧接着勾选如图的依赖项,最后点击创建:
创建项目完成后,项目的目录结构如下:
打开如图所示的配置文件进行配置:
代码如下:
# 指定服务器监听的端口号
server.port=8080
# 设置应用的上下文路径
server.servlet.context-path=/springboot
# 配置静态资源的位置,支持类路径和本地文件系统路径
spring.web.resources.static-locations=classpath:/templates,file:D:/java/data/
# MySQL数据库驱动类名
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# 数据库连接URL,包括数据库地址、端口、数据库名及额外参数
spring.datasource.url=jdbc:mysql://localhost:3309/class1?characterEncoding=utf8&serverTimezone=UTC
# 数据库用户名
spring.datasource.username=root
# 数据库密码
spring.datasource.password=123456
# 数据源名称
spring.datasource.name=defaultDataSource
# MyBatis实体别名包位置
mybatis.type-aliases-package=com.example.sports.pojo
# MyBatis映射文件位置
mybatis.mapper-locations=classpath:mappers/*.xml
# 设置日志级别
logging.level.com.hnucm.springboot1=debug
之后我们导入依赖包,打开pom.xml文件,将以下代码导入:
代码如下:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.20</version>
</dependency>
导入后重新加载依赖:
2. 代码实现
让我们正式开始搭建接口:
2.1 pojo层
首先,我们在pojo层创建用户的实体类,右键pojo->New->java类:
实体类的属性为(id,name,password)注意,在上方加注解@Data,代码如下:
//我的测试类
package com.example.login.pojo;
import lombok.Data;
@Data
public class User {
private int id;
private String name;
private String password;
}
2.2 dao层
之后我们来写mapper层(mapper层是用来与数据库进行交互),右键dao->New->java类,选择接口类:
mapper代码如下:
package com.example.login.dao;
import com.example.login.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface UserMapper {
//查找所有用户
List<User> findAllUsers();
}
接下来我们写xml配置文件来进行sql语句的查询,右键resources->New->新建文件夹(包名为mappers,与配置文件中的名称一致):
xml文件代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<!-- XML文档声明,指定XML文档的版本(1.0)和字符编码(UTF-8) -->
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- 文档类型定义(DTD),指定了当前XML文件遵循的DTD规范。这里指定的是MyBatis 3.0的DTD规范 -->
<mapper namespace="com.example.login.dao.UserMapper">
<!-- 映射器(Mapper)的开始,定义了一个映射器。namespace属性指定了这个映射器的唯一命名空间,通常与对应的Java接口的全限定名一致 -->
<select id="findAllUsers" resultType="com.example.login.pojo.User">
<!-- SQL查询语句,用于获取所有用户信息 -->
select * from users
</select>
</mapper>
<!-- 映射器(Mapper)的结束 -->
2.3 service层
service层用于处理从mapper拿到的数据:
package com.example.login.service;
import com.example.login.pojo.User;
import java.util.List;
//接口层
public interface UsersService {
//查找所有用户
List<User> findAllUsers();
}
impl:
package com.example.login.service.impl;
import com.example.login.dao.UserMapper;
import com.example.login.pojo.User;
import com.example.login.service.UsersService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
//实现类
@Service
public class UsersServiceImpl implements UsersService {
@Autowired
UserMapper userMapper;
@Override
public List<User> findAllUsers(){
return userMapper.findAllUsers();
}
}
2.4 controller层
package com.example.login.service.impl;
import com.example.login.dao.UserMapper;
import com.example.login.pojo.User;
import com.example.login.service.UsersService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
// 使用 @Service 注解标记这是一个服务层组件,Spring 会自动将其作为一个 Bean 进行管理
public class UsersServiceImpl implements UsersService {
// 用户映射器接口的实例
@Autowired
// 使用 @Autowired 注解自动注入 UserMapper 的实例
private UserMapper userMapper;
@Override
// 实现 UsersService 接口中的 findAllUsers 方法
public List<User> findAllUsers() {
// 调用 UserMapper 中的 findAllUsers 方法获取所有用户信息
return userMapper.findAllUsers();
}
}
至此,我们的后端架构基本构建完成,项目目录结构图如下:
我们打开数据库,运行LoginApplication主文件:
数据库如图所示:
3. 接口测试
我们利用postman进行接口测试:
GET方法,输入localhost:8080/springboot/usersList
或者打开浏览器,输入localhost:8080/springboot/usersList
接口测试通过,拿到Json数据。
这样的话,我们后端基本构建完成了。
二、前端完善
1. 网络权限的添加
1.1 网络权限
接着上次做的项目来做,我们先添加网络请求权限 ,打开module.json5文件,加入网络权限 :
"requestPermissions": [
{
"name": 'ohos.permission.INTERNET'
}
],
位置如图所示:
1.2 打开终端下载axiso并导入
(具体axios参考
OpenHarmony三方库中心仓)
输入:
ohpm install @ohos/axios
下载axios对应的三方库,如果这条命令失败,可能就是配置ohpm的环境变量。
ohpm install @ohos/axios
在首页导入axios
import axios from '@ohos/axios'
打开index.ets文件:
加入网路请求的代码:
await axios.get<UsersModel,AxiosResponse<UsersModel[]>,null>('http://192.168.214.180:8080/springboot/usersList')
.then((response: AxiosResponse<UsersModel[]>) => {
// 获取到的数据赋值给users数组
this.users=response.data;
console.info('获取到的数据:'+JSON.stringify(this.users));
})
.catch((error: AxiosError) => {
console.info('捕获到异常:',JSON.stringify(error));
promptAction.showToast({
message: '未连接到网络',
duration: 3000,
})
})
.then(()=> {
// 总是会执行
});
注意:http://xxxx:8080需要查看自己的IP地址:
方法:win+r,输入cmd:
输入ipconfig,查看IPv4地址:
2. 登录功能
接下来进行登录验证,将获取到的用户数据与输入框中的数据进行对比:
具体代码如下:
//用户名输入框的获取数据
@State private inputName: string = ''
//密码输入框的获取数据
@State private inputPassword: string = ''
@State private users: UsersModel[] = [];
//获取后端用户数据,进行登录验证
async loginCommit() {
//使用axios读取用户列表 http://xxxx:8080/springboot/userslist'
await axios.get<UsersModel,AxiosResponse<UsersModel[]>,null>('http://192.168.214.180:8080/springboot/usersList')
.then((response: AxiosResponse<UsersModel[]>) => {
// 获取到的数据赋值给users数组
this.users=response.data;
console.info('获取到的数据:'+JSON.stringify(this.users));
})
.catch((error: AxiosError) => {
console.info('捕获到异常:',JSON.stringify(error));
promptAction.showToast({
message: '未连接到网络',
duration: 3000,
})
})
.then(()=> {
// 总是会执行
});
//登录验证
for (let i=0;i<this.users.length;i++){
if (this.users[i].name==this.inputName&&this.users[i].password==this.inputPassword){
promptAction.showToast({
message: '登陆成功',
duration: 3000,
})
router.pushUrl({
url:"pages/Success"
})
}else {
console.log("登录失败")
}
}
}
在登录按钮.oncilck()中调用loginCommit()方法
这样我们的登录功能就完成了。
Harmonyos登录演示
3. 注册功能
注册功能与登录功能类似,我就不具体的描述了,如果有不懂的小伙伴,可以私信小编哦。