devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：羊村懒王 | 2024-03-16 07:13:12

赞

踩

鸿蒙开发权限配置

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

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

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

三、添加权限的方法:

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

  1.  "requestPermissions": [
  2.       {
  3.         "name": "ohos.permission.INTERNET"
  4.       }
  5.     ]

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

  1. {
  2.   "module": {
  3.     "name": "entry",
  4.     "type": "entry",
  5.     "description": "$string:module_desc",
  6.     "mainElement": "EntryAbility",
  7.     "deviceTypes": [
  8.       "phone",
  9.       "tablet"
  10.     ],
  11.     "deliveryWithInstall": true,
  12.     "installationFree": false,
  13.     "pages": "$profile:main_pages",
  14.     "abilities": [
  15.       {
  16.         "name": "EntryAbility",
  17.         "srcEntry": "./ets/entryability/EntryAbility.ts",
  18.         "description": "$string:EntryAbility_desc",
  19.         "icon": "$media:icon",
  20.         "label": "$string:EntryAbility_label",
  21.         "startWindowIcon": "$media:icon",
  22.         "startWindowBackground": "$color:start_window_background",
  23.         "exported": true,
  24.         "skills": [
  25.           {
  26.             "entities": [
  27.               "entity.system.home"
  28.             ],
  29.             "actions": [
  30.               "action.system.home"
  31.             ]
  32.           }
  33.         ]
  34.       }
  35.     ],
  36.     "requestPermissions": [
  37.       {
  38.         "name": "ohos.permission.INTERNET"
  39.       }
  40.     ]
  41.   }
  42. }

四、创建httpPost请求组件类

    4.1在头部导入http请求模块

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

      4.2  创建http连接

 let request = http.createHttp();

      4.3 封装请求体和请求参数

  1.  let options = {
  2.     method: http.RequestMethod.POST,
  3.     header: { 'Content-Type': 'application/json','charset':'utf-8'},
  4.     extraData:{
  5.       "username":username,
  6.       "password":password
  7.     },
  8.     readTimeout: 72000,
  9.     connectTimeout: 72000
  10.   } as http.HttpRequestOptions;

        4.4 异步发起http请求

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

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

     

  1. /*
  2.  * Copyright (c) 2023 Huawei Device Co., Ltd.
  3.  * Licensed under the Apache License, Version 2.0 (the "License");
  4.  * you may not use this file except in compliance with the License.
  5.  * You may obtain a copy of the License at
  6.  *
  7.  *     http://www.apache.org/licenses/LICENSE-2.0
  8.  *
  9.  * Unless required by applicable law or agreed to in writing, software
  10.  * distributed under the License is distributed on an "AS IS" BASIS,
  11.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12.  * See the License for the specific language governing permissions and
  13.  * limitations under the License.
  14.  */
  16. import http from '@ohos.net.http';
  17.  
  18.  
  19. // @ts-ignore
  20. export default async function postReqeust(url: string,username:string,password:string) {
  21.   if (!url) {
  22.     return undefined;
  23.   }
  24.   let request = http.createHttp();
  25.   let options = {
  26.     method: http.RequestMethod.POST,
  27.     header: { 'Content-Type': 'application/json','charset':'utf-8'},
  28.     extraData:{
  29.       "username":username,
  30.       "password":password
  31.     },
  32.     readTimeout: 72000,
  33.     connectTimeout: 72000
  34.   } as http.HttpRequestOptions;
  35.   let result = await request.request(url, options);
  36.   return result;
  37. }

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

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

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

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

  1. /*
  2.  
  3.  
  4.  
  5.  
  6. @Entry
  7. @Component
  8. struct Index {
  9.   @State message: string = 'Hello Worlczxcxzd'
  10.  
  11.   build() {
  12.     Row() {
  13.       Column() {
  14.         Text(this.message)
  15.           .fontSize(50)
  16.           .fontWeight(FontWeight.Bold)
  17.       }
  18.       .width('100%')
  19.     }
  20.     .height('100%')
  21.   }
  22. }*/
  23. import http from '@ohos.net.http';
  24. import httpPost from '../utils/HttpUtil';
  25. import  postReqeust from '../utils/HttpUtil';
  26. @Entry
  27. @Component
  28. struct  registePage{
  29.   //定义用户名
  30.   @State username:string ="";
  31.   //定义密码
  32.   @State password:string ="";
  33.   //定义重复用户名密码
  34.   @State repeatPwd:string ="";
  35.   //判断是否为空的标志
  36.   @State isBlank:boolean=false;
  37.   //提示语
  38.   @State message:string ="";
  39.   //全局URL
  40.   @State URL:string ="http://127.0.0.1:8083";
  41.   //定义颜色的值
  42.   // @ts-ignore
  43.   @State colorParm:Color = Color.Gray;
  44.   //判断输入的参数是否为空方法
  45.     isEmty(username:string,password:string,repeatPwd:string){
  46.      //判断用户名是否为空
  47.      if(username==null ||username==""){
  48.        console.debug("用户名为空----");
  49.        return true;
  50.      }
  51.      if(password==null ||password==""){
  52.        console.debug("密码为空----");
  53.        return true;
  54.      }
  55.  
  56.      if(repeatPwd==null ||repeatPwd==""){
  57.        console.debug("重复输入密码为空----");
  58.        return true;
  59.      }
  60.   }
  61.   //创建请求的方法
  62.  
  63.   postReq(){
  64.     //创建http请求
  65.       var  httpReq = http.createHttp();
  66.      console.info("发起请求----")
  67.       httpReq.request("http://ntek44b.nat.ipyingshe.com/login",{
  68.       //定义请求方法
  69.       method:http.RequestMethod.POST,
  70.       //添加请求头
  71.       header:{
  72.         'Content-Type':'application/json',
  73.         'charset':'utf-8'
  74.       },
  75.       //请求数据，用户名，密码
  76.       extraData:{
  77.         "username":this.username,
  78.         "password":this.password,
  79.       },
  80.       connectTimeout:60000,
  81.       readTimeout:72000,
  82.     },(msg,data)=>{
  83.       console.debug("data=={}",JSON.stringify(data))
  84.       console.debug("请求完成---")
  85.       //请求成功
  86.       if (msg.code==200){
  87.         this.colorParm = Color.Green;
  88.         this.message ="登录成功!";
  89.       }else {
  90.         // @ts-ignore
  91.         this.colorParm = Color.Red;
  92.         this.message ="登录失败,请检查用户名或密码";
  93.       }
  94.     }
  95.     );
  96.   }
  97.   build() {
  98.     //垂直的容器
  99.     Column({ space: 5 }) {
  100.       Image($r("app.media.app_icon"))
  101.         .width("100")
  102.         .height("100")
  103.         .margin(50)
  104.       Column({ space: 5 }) {
  105.         //输入框
  106.         TextInput({ placeholder: "请输入用户名" }).type(InputType.Normal)
  107.           .width("300").onChange((username: string) => {
  108.           //通过onChange事件获取用户名
  109.           this.username = username;
  110.           console.debug("username==={}", this.username);
  111.         });
  112.         //密码输入框
  113.         TextInput({ placeholder: "请输入密码" }).type(InputType.Password)
  114.           .width("300").onChange((password: string) => {
  115.           //通过onChange事件获取密码
  116.           this.password = password;
  117.           console.debug("password==={}", this.password);
  118.         });
  119.         //重新确认密码
  120.         TextInput({ placeholder: "请再次输入密码" }).type(InputType.Password)
  121.           .width("300").onChange((repeatPwd: string) => {
  122.           //通过onChange事件获取重复输入的密码
  123.           this.repeatPwd = repeatPwd;
  124.           console.debug("repeatPwd==={}", this.repeatPwd);
  125.         });
  126.         Row({ space: 5 }) {
  127.           Text("提示语:").fontColor(Color.Gray);
  128.           // @ts-ignore
  129.           Text(this.message).fontColor(this.colorParm);
  130.         }
  131.         //登录
  132.         Button("登录按钮").width("50%").onClick( async () => {
  133.           console.debug("登录")
  134.           //判断是否为空
  135.           this.isBlank = this.isEmty(this.username, this.password, this.repeatPwd);
  136.           if (this.isBlank) {
  137.             this.colorParm =Color.Red;
  138.             this.message = "请检查参数是否为空";
  139.             return;
  140.           } else {
  141.             //判断两次输入的密码是否正确
  142.             if (this.password != this.repeatPwd) {
  143.               this.colorParm =Color.Red;
  144.               this.message = "两次输入的密码不一致";
  145.             }
  146.           }
  147.           //网络请求数据库验证登录
  148.           //this.postReq();
  149.           //发送异步请求
  150.           let res = await postReqeust("http://ntek44b.nat.ipyingshe.com/login",this.username,this.password);
  151.           if(res.responseCode==200){
  152.             this.colorParm = Color.Green;
  153.             this.message ="登录成功";
  154.           }else {
  155.             this.colorParm = Color.Red;
  156.             this.message ="登录失败！";
  157.           }
  158.           console.log("res===",JSON.stringify(res));
  159.  
  160.         }).backgroundColor(Color.Green);
  161.  
  162.       }.height("100%")
  163.       .width("100%")
  164.       .alignItems(HorizontalAlign.Center)
  165.       .justifyContent(FlexAlign.Center)
  166.     }
  167.  
  168.   }
  169. }

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

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

  1. server:
  2.   port: 8083
  3.  
  4. spring:
  5.   datasource:
  6.     username: root
  7.     password: Root@123
  8.     url: jdbc:mysql://127.0.0.1:3306/harmony?useUnicode=true&serverTimezone=Asia/Shanghai&characterEncoding=utf-8
  9.     driver-class-name: com.mysql.cj.jdbc.Driver
  10. mybatis:
  11.   mapper-locations: classpath*:/mappers/*.xml

        6.2 下面是maven的相关依赖:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>2.2.6.RELEASE</version>
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.example</groupId>
  12.     <artifactId>harmonyreq</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>harmonyreq</name>
  15.     <description>Demo project for Spring Boot</description>
  16.     <properties>
  17.         <java.version>1.8</java.version>
  18.     </properties>
  19.     <dependencies>
  20.         <dependency>
  21.             <groupId>org.springframework.boot</groupId>
  22.             <artifactId>spring-boot-starter</artifactId>
  23.         </dependency>
  24.         <dependency>
  25.             <groupId>mysql</groupId>
  26.             <artifactId>mysql-connector-java</artifactId>
  27.             <version>8.0.19</version>
  28.         </dependency>
  29.         <dependency>
  30.             <groupId>org.mybatis.spring.boot</groupId>
  31.             <artifactId>mybatis-spring-boot-starter</artifactId>
  32.             <version>2.1.3</version>
  33.         </dependency>
  34.         <dependency>
  35.             <groupId>org.projectlombok</groupId>
  36.             <artifactId>lombok</artifactId>
  37.         </dependency>
  38.  
  39.         <dependency>
  40.             <groupId>org.springframework.boot</groupId>
  41.             <artifactId>spring-boot-starter-test</artifactId>
  42.             <scope>test</scope>
  43.         </dependency>
  44.  
  45.         <dependency>
  46.             <groupId>org.springframework.boot</groupId>
  47.             <artifactId>spring-boot-starter-web</artifactId>
  48.         </dependency>
  49.     </dependencies>
  50.  
  51.     <build>
  52.         <plugins>
  53.             <plugin>
  54.                 <groupId>org.springframework.boot</groupId>
  55.                 <artifactId>spring-boot-maven-plugin</artifactId>
  56.             </plugin>
  57.         </plugins>
  58.     </build>
  59.  
  60. </project>

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

  1. package com.example.harmonyreq.common;
  2.  
  3. import lombok.Data;
  4.  
  5. @Data
  6. public class Result {
  7.  
  8.     private String msg;
  9.     private Object data;
  10.     private Integer code;
  11.  
  12.     public Result(String msg,Object data,Integer code){
  13.         this.msg = msg;
  14.         this.data = data;
  15.         this.code =code;
  16.     }
  17.  
  18.     public Result(String msg,Object data){
  19.         this.msg = msg;
  20.         this.data = data;
  21.         this.code =code;
  22.     }
  23.     public Result(){
  24.  
  25.     }
  26.     public  void success(Object data,String msg){
  27.         this.data = data;
  28.         this.msg = msg;
  29.         this.code=200;
  30.     }
  31.     public  void success(){
  32.         this.code = 200;
  33.         this.msg = "成功！";
  34.     }
  35.  
  36.     public void  fail(){
  37.         this.msg ="请求失败!";
  38.         this.code = 500;
  39.     }
  40. }
  1. package com.example.harmonyreq.mapper;
  2.  
  3. import com.example.harmonyreq.model.User;
  4. import java.util.Map;
  5. public interface UserMapper {
  6.   User queryByUnamePwd(Map<String,Object> map);
  7. }
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper
  3.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  4.         "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
  5. <mapper namespace="com.example.harmonyreq.mapper.UserMapper">
  6.     <select id="queryByUnamePwd"   parameterType="java.util.Map" resultType="com.example.harmonyreq.model.User">
  7.      select <include refid="Base_Column_List"/>
  8.         from tb_user
  9.         <where>
  10.             username = #{username}
  11.             and
  12.             password = #{password}
  13.         </where>
  14.     </select>
  15.     
  16.     <sql id="Base_Column_List">
  17.     id,username,password
  18.     </sql>
  19.  
  20. </mapper>
  1. package com.example.harmonyreq.service;
  2.  
  3. import com.example.harmonyreq.common.Result;
  4.  
  5. import java.util.Map;
  6.  
  7. public interface IUserService {
  8.  
  9.    Result login(Map<String,Object> params);
  10. }
  1. package com.example.harmonyreq.service.impl;
  2.  
  3. import com.example.harmonyreq.common.Result;
  4. import com.example.harmonyreq.mapper.UserMapper;
  5. import com.example.harmonyreq.model.User;
  6. import com.example.harmonyreq.service.IUserService;
  7. import org.slf4j.Logger;
  8. import org.slf4j.LoggerFactory;
  9. import org.springframework.beans.factory.annotation.Autowired;
  10. import org.springframework.stereotype.Service;
  11.  
  12. import java.util.HashMap;
  13. import java.util.Map;
  14.  
  15. @Service
  16. public class UserServiceImpl implements IUserService {
  17.     private Logger logger = LoggerFactory.getLogger(UserServiceImpl.class);
  18.     @Autowired
  19.     private UserMapper userMapper;
  20.     @Override
  21.     public Result login(Map<String,Object>params) {
  22.         Result res = new Result();
  23.         try {
  24.             User user = userMapper.queryByUnamePwd(params);
  25.             if (null!=user){
  26.                 res.success(user,"成功！");
  27.                 logger.info("登录成功！");
  28.             }else {
  29.                 res.fail();
  30.  
  31.             }
  32.  
  33.         }catch (Exception e){
  34.             logger.error("登录失败！{}",e.getMessage());
  35.             res.fail();
  36.             return res;
  37.         }
  38.         return res;
  39.     }
  40. }
  1. package com.example.harmonyreq.controller;
  2.  
  3.  
  4. import com.example.harmonyreq.common.Result;
  5. import com.example.harmonyreq.service.IUserService;
  6. import org.slf4j.Logger;
  7. import org.slf4j.LoggerFactory;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.web.bind.annotation.PostMapping;
  10. import org.springframework.web.bind.annotation.RequestBody;
  11. import org.springframework.web.bind.annotation.RequestMapping;
  12. import org.springframework.web.bind.annotation.RestController;
  13.  
  14. import java.util.Map;
  15.  
  16. @RestController
  17. @RequestMapping("/")
  18. public class LoginController {
  19.     private Logger logger = LoggerFactory.getLogger(LoginController.class);
  20.     @Autowired
  21.     private IUserService userService;
  22.     @PostMapping("/login")
  23.     public Result login(@RequestBody Map<String,Object>params){
  24.         logger.info("请求过来的参数---{}",params);
  25.         return userService.login(params);
  26.     }
  27.  
  28. }

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

        7.1 后端请求成功的界面

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/247876
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号