零基础开始学习鸿蒙开发-登录界面获取参数的值，并且发送参数请求后台登录，经过后台校验即可登录成功

置顶 已于 2024-07-04 20:59:23 修改
阅读量2.3k 收藏 17
点赞数 15
分类专栏： 鸿蒙基础开发介绍专栏 文章标签： 学习
于 2023-11-26 17:01:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36973384/article/details/134629442
版权

上代码之前，我们需要注意两点：

一、首先要添加鸿蒙的网络权限，如果不添加权限，后面代码完成之后，可能请求失败。

二、鸿蒙模拟器不支持本地localhost 、127.0.01本地地址的请求，所有的请求只能通过公网发起请求。

三、添加权限的方法:

    1).找到项目的module.json5文件夹，在此文件夹添加如下代码:

 "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]

   2).以下是我的权限配置所有代码:

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ts",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:icon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

四、创建httpPost请求组件类

    4.1在头部导入http请求模块

import http from '@ohos.net.http';

      4.2  创建http连接

 let request = http.createHttp();

      4.3 封装请求体和请求参数

 let options = {
    method: http.RequestMethod.POST,
    header: { 'Content-Type': 'application/json','charset':'utf-8'},
    extraData:{
      "username":username,
      "password":password
    },
    readTimeout: 72000,
    connectTimeout: 72000
  } as http.HttpRequestOptions;

        4.4 异步发起http请求

let result = await request.request(url, options);

         4.5 下面是完整的请求组件代码，即HttpUtil.ets

     

/*
 * Copyright (c) 2023 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import http from '@ohos.net.http';


// @ts-ignore
export default async function postReqeust(url: string,username:string,password:string) {
  if (!url) {
    return undefined;
  }
  let request = http.createHttp();
  let options = {
    method: http.RequestMethod.POST,
    header: { 'Content-Type': 'application/json','charset':'utf-8'},
    extraData:{
      "username":username,
      "password":password
    },
    readTimeout: 72000,
    connectTimeout: 72000
  } as http.HttpRequestOptions;
  let result = await request.request(url, options);
  return result;
}

      五、登录页面点击登录后，把获取到的参数，请求到后台，后台进行校验。

   5.1下面是对之前封装的请求方法进行调用

 //发送异步请求
          let res = await postReqeust("http://ntek44b.nat.ipyingshe.com/login",this.username,this.password);
          if(res.responseCode==200){
            this.colorParm = Color.Green;
            this.message ="登录成功";
          }else {
            this.colorParm = Color.Red;
            this.message ="登录失败！";
          }

5.2 下面是补充完整之后的登录代码。

/*




@Entry
@Component
struct Index {
  @State message: string = 'Hello Worlczxcxzd'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}*/
import http from '@ohos.net.http';
import httpPost from '../utils/HttpUtil';
import  postReqeust from '../utils/HttpUtil';
@Entry
@Component
struct  registePage{
  //定义用户名
  @State username:string ="";
  //定义密码
  @State password:string ="";
  //定义重复用户名密码
  @State repeatPwd:string ="";
  //判断是否为空的标志
  @State isBlank:boolean=false;
  //提示语
  @State message:string ="";
  //全局URL
  @State URL:string ="http://127.0.0.1:8083";
  //定义颜色的值
  // @ts-ignore
  @State colorParm:Color = Color.Gray;
  //判断输入的参数是否为空方法
    isEmty(username:string,password:string,repeatPwd:string){
     //判断用户名是否为空
     if(username==null ||username==""){
       console.debug("用户名为空----");
       return true;
     }
     if(password==null ||password==""){
       console.debug("密码为空----");
       return true;
     }

     if(repeatPwd==null ||repeatPwd==""){
       console.debug("重复输入密码为空----");
       return true;
     }
  }
  //创建请求的方法

  postReq(){
    //创建http请求
      var  httpReq = http.createHttp();
     console.info("发起请求----")
      httpReq.request("http://ntek44b.nat.ipyingshe.com/login",{
      //定义请求方法
      method:http.RequestMethod.POST,
      //添加请求头
      header:{
        'Content-Type':'application/json',
        'charset':'utf-8'
      },
      //请求数据，用户名，密码
      extraData:{
        "username":this.username,
        "password":this.password,
      },
      connectTimeout:60000,
      readTimeout:72000,
    },(msg,data)=>{
      console.debug("data=={}",JSON.stringify(data))
      console.debug("请求完成---")
      //请求成功
      if (msg.code==200){
        this.colorParm = Color.Green;
        this.message ="登录成功!";
      }else {
        // @ts-ignore
        this.colorParm = Color.Red;
        this.message ="登录失败,请检查用户名或密码";
      }
    }
    );
  }
  build() {
    //垂直的容器
    Column({ space: 5 }) {
      Image($r("app.media.app_icon"))
        .width("100")
        .height("100")
        .margin(50)
      Column({ space: 5 }) {
        //输入框
        TextInput({ placeholder: "请输入用户名" }).type(InputType.Normal)
          .width("300").onChange((username: string) => {
          //通过onChange事件获取用户名
          this.username = username;
          console.debug("username==={}", this.username);
        });
        //密码输入框
        TextInput({ placeholder: "请输入密码" }).type(InputType.Password)
          .width("300").onChange((password: string) => {
          //通过onChange事件获取密码
          this.password = password;
          console.debug("password==={}", this.password);
        });
        //重新确认密码
        TextInput({ placeholder: "请再次输入密码" }).type(InputType.Password)
          .width("300").onChange((repeatPwd: string) => {
          //通过onChange事件获取重复输入的密码
          this.repeatPwd = repeatPwd;
          console.debug("repeatPwd==={}", this.repeatPwd);
        });
        Row({ space: 5 }) {
          Text("提示语:").fontColor(Color.Gray);
          // @ts-ignore
          Text(this.message).fontColor(this.colorParm);
        }
        //登录
        Button("登录按钮").width("50%").onClick( async () => {
          console.debug("登录")
          //判断是否为空
          this.isBlank = this.isEmty(this.username, this.password, this.repeatPwd);
          if (this.isBlank) {
            this.colorParm =Color.Red;
            this.message = "请检查参数是否为空";
            return;
          } else {
            //判断两次输入的密码是否正确
            if (this.password != this.repeatPwd) {
              this.colorParm =Color.Red;
              this.message = "两次输入的密码不一致";
            }
          }
          //网络请求数据库验证登录
          //this.postReq();
          //发送异步请求
          let res = await postReqeust("http://ntek44b.nat.ipyingshe.com/login",this.username,this.password);
          if(res.responseCode==200){
            this.colorParm = Color.Green;
            this.message ="登录成功";
          }else {
            this.colorParm = Color.Red;
            this.message ="登录失败！";
          }
          console.log("res===",JSON.stringify(res));

        }).backgroundColor(Color.Green);

      }.height("100%")
      .width("100%")
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
    }

  }
}

六、后端主要是用SpringBoot简单搭建的后台。

        6.1配置文件:主要包含了数据库的连接，以及端口号的设置。

server:
  port: 8083

spring:
  datasource:
    username: root
    password: Root@123
    url: jdbc:mysql://127.0.0.1:3306/harmony?useUnicode=true&serverTimezone=Asia/Shanghai&characterEncoding=utf-8
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  mapper-locations: classpath*:/mappers/*.xml

        6.2 下面是maven的相关依赖:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>harmonyreq</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>harmonyreq</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.19</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

6.3 下面的代码就不一一介绍了，有Java基础的应该都能看得懂。

package com.example.harmonyreq.common;

import lombok.Data;

@Data
public class Result {

    private String msg;
    private Object data;
    private Integer code;

    public Result(String msg,Object data,Integer code){
        this.msg = msg;
        this.data = data;
        this.code =code;
    }

    public Result(String msg,Object data){
        this.msg = msg;
        this.data = data;
        this.code =code;
    }
    public Result(){

    }
    public  void success(Object data,String msg){
        this.data = data;
        this.msg = msg;
        this.code=200;
    }
    public  void success(){
        this.code = 200;
        this.msg = "成功！";
    }

    public void  fail(){
        this.msg ="请求失败!";
        this.code = 500;
    }
}

package com.example.harmonyreq.mapper;

import com.example.harmonyreq.model.User;
import java.util.Map;
public interface UserMapper {
  User queryByUnamePwd(Map<String,Object> map);
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.harmonyreq.mapper.UserMapper">
    <select id="queryByUnamePwd"   parameterType="java.util.Map" resultType="com.example.harmonyreq.model.User">
     select <include refid="Base_Column_List"/>
        from tb_user
        <where>
            username = #{username}
            and
            password = #{password}
        </where>
    </select>
    
    <sql id="Base_Column_List">
    id,username,password
    </sql>

</mapper>

package com.example.harmonyreq.service;

import com.example.harmonyreq.common.Result;

import java.util.Map;

public interface IUserService {

   Result login(Map<String,Object> params);
}

package com.example.harmonyreq.service.impl;

import com.example.harmonyreq.common.Result;
import com.example.harmonyreq.mapper.UserMapper;
import com.example.harmonyreq.model.User;
import com.example.harmonyreq.service.IUserService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.Map;

@Service
public class UserServiceImpl implements IUserService {
    private Logger logger = LoggerFactory.getLogger(UserServiceImpl.class);
    @Autowired
    private UserMapper userMapper;
    @Override
    public Result login(Map<String,Object>params) {
        Result res = new Result();
        try {
            User user = userMapper.queryByUnamePwd(params);
            if (null!=user){
                res.success(user,"成功！");
                logger.info("登录成功！");
            }else {
                res.fail();

            }

        }catch (Exception e){
            logger.error("登录失败！{}",e.getMessage());
            res.fail();
            return res;
        }
        return res;
    }
}

package com.example.harmonyreq.controller;


import com.example.harmonyreq.common.Result;
import com.example.harmonyreq.service.IUserService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@RestController
@RequestMapping("/")
public class LoginController {
    private Logger logger = LoggerFactory.getLogger(LoginController.class);
    @Autowired
    private IUserService userService;
    @PostMapping("/login")
    public Result login(@RequestBody Map<String,Object>params){
        logger.info("请求过来的参数---{}",params);
        return userService.login(params);
    }

}

七、代码运行成功的界面如下图所示:

        7.1 后端请求成功的界面

        7.2 鸿蒙模拟器请求成功的界面

八、另外，简单说一下，我没有自己的服务器，我是通过内网穿透的方式请求到本地的，常用的内网穿透工具，大家可以去网上找找。此博文，我会另外绑定后端代码文件。

心之所想，行则将至
关注
专栏目录
订阅专栏
零基础开始学习鸿蒙开发-验证登录跳转读书app首页
qq_36973384的博客
08-03 99
5.1 在使用页面的时候需要在main_pages.json文件先注册，否则无法使用，即无法跳转。此项目的鸿蒙代码和Java的SpringBoot绑定资源分享在博客。
鸿蒙HarmonyOS(ArkTS)学习——登录界面的绘制（简易）
qq_47122495的博客
01-30 3198
鸿蒙HarmonyOS ArkTS 登录界面绘制简易
【HarmonyOS实战开发】鸿蒙中实现一款权限请求框架
最新发布
HarmonyOS_666的博客
08-02 969
●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
鸿蒙/Http数据请求
weixin_69253778的博客
04-21 473
应用可以通过HTTP发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。1，导入http请求2，使用http发送请求，处理响应。
如何使用鸿蒙代码去与后台连接请求！
xiaozhou4233的博客
01-18 887
自己拉的在线的接口，试一下吧！
【HarmonyOS NEXT】网络请求
weixin_71403100的博客
02-21 5767
场景：应用通过HTTP发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。日常开发中HTTP请求使用会比较多，主要对HTTP请求进行总结记录。
零基础开始学习鸿蒙开发-鸿蒙开发登录监听登录按钮并且获取文本框的值，登录校验。
qq_36973384的博客
11-26 1436
/判断输入的参数是否为空方法//判断用户名是否为空console.debug("用户名为空----");console.debug("密码为空----");console.debug("重复输入密码为空----");
【愚公系列】《微信小程序开发解析》002-小程序基础知识
热门推荐
时光隧道
07-07 2万+
小程序是一种轻量级应用程序，用户可以在不需要下载安装的情况下直接使用。小程序通常具有较小的体积，快速加载速度，提供类似原生应用的用户体验。
HarmonyOS Connect生态产品 FAQ 汇总（持续更新）
HarmonyOSDev的博客
12-21 1403
1，企业实名认证，是否一定需法人手持身份证进行申请？ 不需要。您可以选择对公银行打款认证的方式，完成实名认证。 2，企业实名认证，提示企业信息已注册帐号，如何找回？ 如果忘记登录帐号，可以申请找回。找回帐号需提供以下材料，并将相关材料邮件至devConnect@huawei.com或者在线提单（https://developer.huawei.com/consumer/cn/support/feedback/#/）反馈，将由相关工作人员进行处理。 人工审核认证方式认证的帐号需要提供：“三证合一的
【Java课设】开发如此轻松！基于开源神器Erupt框架及Amis框架开发的课设 [一起组队吧]
404name的博客
06-11 3284
前言 采用Erupt框架 + amis前台框架 快速搭建项目程序 【目前开放访问：前台链接】（没做完，但组队功能做完了） 首先吹爆Erupt框架！！这个框架简直是后台开发利器，你甚至不需要先建表，直接拿来跑就出现了后台管理页面，利用代码生成反向生成实体类，直接映射生成了数据库，配合jpa，熟悉的话1小时不用一个简单的系统包括后台包括全套api就实现了。让你把时间放到具体业务上！！ 其次就是Amis低代码前端框架！！这个前台我是配合semantic一起弄的，我前台只是仅限于改点别人页面，这次第
鸿蒙HarmonyOS学习手册_入门篇
特创数字
01-10 1978
应用软件所涉及的文件多种多样，开发者可通过HarmonyOS提供的集成开发工具将其开发的可执行代码、资源、三方库等文件整合到一起制作成HarmonyOS应用程序包，便于开发者对应用程序的部署。应用软件所涉及的设备类型多种多样，开发者可通过HarmonyOS提供的应用程序包配置文件指定其应用程序包的分发设备类型，便于应用市场对应用程序包的分发管理。
鸿蒙登录Demo
weixin_45559263的博客
07-21 647
1、XMl 1、登录页面 <?xml version="1.0" encoding="utf-8"?> <DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <Text ohos:id=
鸿蒙OS应用开发之——实现APP注册登录功能
qq_31391601的博客
03-21 9701
一、功能简介 注册登录页面作为基础模块，具体包括了注册、登录、登录后界面的策划设计。 1.1注册 注册包括用户名，密码，确认密码三个流程，密码现在是明码显示的方式。这个模块中设置了判断“确认密码”与“密码”是否一致的环节。 1.2登录 登录包括了用户名，密码两个流程，并且设置了密码错误提示和密码正确登录到一个指定的页面两种情况。 1.3登录跳转 当登录的用户名及密码对应正确时将正式进入应用服务页面，囿于篇幅问题这里的跳转只设置一个简单页面供大家参考，大家可以根据自己的业务需求设置页面。 二、实现注册登录页面
使用低代码实现一个登录页面 ------ XinBuilder
weixin_46726346的博客
09-26 523
如果你不是一个前端开发，但是想要实现出一个前端页面。那么就可以通过低代码的方式，拖拽和配置出你想要的页面。而XinBuilder就是简单的一套低代码平台，你可以在上面拖拽出自己想要使用的组件并进行配置。使用方式也很简单。这篇文章，就简单的实现出一个登录页面。通过低代码的方式，点击下面的链接。第一次访问时间可能会稍微长一点。XinBuilder低代码平台进入后你会看到一个登录页，放心，不需要注册，我来给你一个账号密码进行使用。账号：admin密码：666666。
手把手教你写一个鸿蒙APP登录功能项目
m0_70748458的博客
04-25 5395
本来最开始是想带着大家做鸿蒙官方的CodeLabs的，但是我看现在网上已经出了很多教程，尤其是机构，他们到时候应该会以视频教学的方式带着大家做，所以我就不做CodeLabs了，决定自己做一个单出的Demo，因为自己做的话需要设计等因素，所以拖了蛮长时间的。
【最新鸿蒙应用开发】——使用axios完成手机号注册业务
m0_68038853的博客
06-04 616
校验图形验证码，校验通过根据 手机号 + 短信验证码 实现登录。
【鸿蒙应用ArkTS开发系列】- 云开发入门实战一使用鸿蒙登录组件实现客户端登录
枫的专栏
11-20 2187
通过本次课程，我们将学习怎么使用云端一体化开发模板来创建云开发工程，以及如何使用鸿蒙登录组件SDK进行客户端登录功能的开发，那下面我们直接进入本次课程的学习。
HarmonyOS实战开发：@ohos.uri (URI字符串解析)
初一十五的博客
04-23 1416
本模块提供URI字符串解析的相关功能。
对html登录界面的参数进行校验
05-28
对于 HTML 登录界面的参数进行校验，可以采取以下几种方式： 1. 前端校验：在用户提交表单前，利用 JavaScript 对输入的用户名和密码进行校验。例如，检查用户名是否为空或是否符合要求（如长度、特殊字符等），密码是否为空或是否符合要求（如长度、包含数字和字母等）。这种方式可以提高用户体验，但不能保证数据的安全性，因为用户可以通过禁用 JavaScript 等方式绕过前端校验。 2. 后端校验：在服务器端对用户提交的参数进行校验。例如，检查用户名和密码是否为空、是否符合要求（如长度、特殊字符等）、是否存在于数据库中等。这种方式可以保证数据的安全性，但会增加服务器的负担，同时用户体验也不如前端校验。 3. 客户端与服务器端结合校验：在前端和后端都进行校验，前端校验可以提高用户体验，后端校验可以保证数据的安全性。例如，前端校验用户名和密码是否为空、是否符合要求，后端再校验是否存在于数据库中。这种方式可以综合利用前端和后端的优势，但也会增加开发成本和服务器负担。 无论采取哪种方式，都应该对用户输入的参数进行校验，以保证数据的安全性和程序的健壮性。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

心之所想，行则将至

创作不易，希望大家多多鼓励支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值