华为纯血鸿蒙OS NEXT星河版APP开发(ArkTs)(二)–主页

华为纯血鸿蒙OS NEXT星河版APP开发(ArkTs)(二)–主页

关键字：ArkTS，http，cookie， json解析， 记住密码，ForEach
IDE版本：DevEco Studio NEXT Developer Beta3
项目背景：视频会议管理系统移动端APP。管理员通过移动端APP登录视频会议管理系统，登录后，主页显示会议列表，通过点击对应的视频会议号，延长视频会议号时间。PS：有需要适配鸿蒙的可以找我，此为原创文章，转发请注明出处，谢谢。：)

功能介绍
通过http登录服务器端，解析cookie，提取token，通过token保存登录信息，获取其他数据，解析所需数据将其显示在主页。

主页

项目结构

MinePage.ets源代码
arkts

import router from '@ohos.router';
import { CommonConstants } from '../common/constants/CommonConstants';
// import web_webview from '@ohos.web.webview';
import http from '@ohos.net.http';
import { promptAction } from '@kit.ArkUI';
// import hilog from '@ohos.hilog';


let url_list = 'https://*******************findMeetingByOrgPlus?orgId=1&status=1'; // 获取会议列表API。gmlan20240808
let url_delay1 = 'https://**********/meeting/'; // 获取会议列表API。gmlan20240808
let url_delay2 = '/delayed/120'; // 延长视频会议号2小时的API。gmlan20240808

let srcCookie = router.getParams(); // 获取登录页面传递至主页的数据gmlan20240806
console.info('srcCookie_minepage=======:' + srcCookie);
console.info('srcCookie_minepage.JSON=======:' + JSON.stringify(srcCookie));
console.info('srcCookie_minepage.JSON.parse======:' + JSON.parse(JSON.stringify(srcCookie)).src[0]);
// web_webview.WebCookieManager.setCookie(url_list,'srcCookie');


/**
 * Personal Center page, displaying personal information and app-related settings.
 */
@Entry // 装饰器
@Component // 被装饰器@entry装饰的入口组件，为父组件。


struct MinePage {//struct自定义组件
  @State httpDataResult_name:string[] = ['name'];
  @State httpDataResult_uuid:string[] = ['uuid'];
  @State url_delay:string = '';

  HttpDataResult(){
    let httpRequest = http.createHttp();

    console.debug('url_list-------:',url_list);

    httpRequest.request(
      // 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
      url_list,
      {
        method: http.RequestMethod.GET, // 可选，默认为http.RequestMethod.GET
        // 开发者根据自身业务需要添加header字段
        header: {
          'Content-Type': 'application/json',
          //要加[0]才识别出JSESSIONID字符，添加token：JSESSIONID到header的cookie。gmlan20240808
          'Cookie': JSON.parse(JSON.stringify(srcCookie)).src[0] 
          // 'Cookie': 'JSESSIONID=447f45d2-57cc-449a-b923-*******'
        },

        connectTimeout: 6000, // 可选，默认为60000ms
        readTimeout: 6000, // 可选，默认为60000ms
      }, (err, data) => {

      if (!err) {
        // data.result为HTTP响应内容，可根据业务需要进行解析
        if (data.responseCode == 200) {
          console.info("传递成功")
          // console.info("从服务器返回接口返回数据成功，传递参数" + data.result)
        }

        console.info('Result========:' + data.result.toString());
        console.info('Result.data.parse========:' + JSON.parse(data.result.toString()).data[0].name); //将字符串转换为json对象后再提取信息
        console.info('Result.data.length========:' + JSON.parse(data.result.toString()).data.length);

        let length:number = JSON.parse(data.result.toString()).data.length; // 数组长度

        for(let i=0;i<length;i++){
          this.httpDataResult_name[i] = JSON.parse(data.result.toString()).data[i].name; // 会议名称
          this.httpDataResult_uuid[i] = JSON.parse(data.result.toString()).data[i].uuid; // 对应会议的uuid，延长视频会议号时需要用到
        };


        console.info('code=========:' + data.responseCode);
        // data.header为HTTP响应头，可根据业务需要进行解析
        console.info('header.JSON===========:' + JSON.stringify(data.header));
        // hilog.info(100,'data.result.JSON.hilog========:',JSON.stringify(data.result['data']));
        console.info('cookies=========:' + data.cookies);

      } else {
        console.info('error=======:' + JSON.stringify(err));
        // 当该请求使用完毕时，调用destroy方法主动销毁。
        httpRequest.destroy();
      }
    }
    );

  }

  // 延长视频会议号用gmlan20240808
  httpGet(url:string){
    let httpRequestGet = http.createHttp();
    httpRequestGet.request(url,{
      method: http.RequestMethod.GET, // 可选，默认为http.RequestMethod.GET
      // 开发者根据自身业务需要添加header字段
      header: {
        'Content-Type': 'application/json',
        //要加[0]才识别出JSESSIONID字符，添加token：JSESSIONID到header的cookie。gmlan20240808
        'Cookie': JSON.parse(JSON.stringify(srcCookie)).src[0]
        // 'Cookie': 'JSESSIONID=447f45d2-57cc-449a-b923-cb*****'
      }
    },(err, data) => {
      // if (!err) {
        console.info('========httpGetResult:' + data.result.toString());
        promptAction.showToast({ message: data.result.toString() })
      // }
      // else{
      //   console.info('error=======:' + JSON.stringify(err));
        // 当该请求使用完毕时，调用destroy方法主动销毁。
        // httpRequestGet.destroy();
      // }
    });
    console.info('=============httpGet:' + url);
  }

  aboutToAppear(): void {
    this.HttpDataResult();
    console.info('=========httpDataResult_name1:' + this.httpDataResult_name);
  }

  onPageShow(): void {
    console.info('=========httpDataResult_name2:' + this.httpDataResult_name);
  }

  build() {//build属于UI描述
    Column() {//column竖向排列

      this.Title()

      Scroll(){
        GridRow({
          columns: {
            sm: CommonConstants.GRID_ROW_SM,
            md: CommonConstants.GRID_ROW_MD,
            lg: CommonConstants.GRID_ROW_LG
          },
          gutter: { x: CommonConstants.GUTTER_X },
          breakpoints: { value: CommonConstants.BREAK_POINT }
        }) {
          GridCol({
            span: {
              sm: CommonConstants.MINE_SPAN_SM,
              md: CommonConstants.MINE_SPAN_MD,
              lg: CommonConstants.MINE_SPAN_LG
            },
            offset: {
              lg: CommonConstants.OFFSET_LG
            }
          }) {
            Column(){

              // Text($r('app.string.user_nickname'))
              Text('会议列表')
                .textAlign(TextAlign.Center)
                .fontWeight(CommonConstants.NICKNAME_FONT_WEIGHT)
                .fontSize($r('app.float.nickname_font_size'))
                .margin({ top: $r('app.float.nickname_margin_top') })

              // MinePageContentComponent()
              // 用ForEach展示视频会议列表gmlan20240808
              ForEach(this.httpDataResult_name,(item:string,index:number)=>{
                Button(item)
                  .fontSize(10)//字体大小
                  // .fontColor(Color.Black)
                  .buttonStyle(ButtonStyleMode.TEXTUAL)//按钮风格无背景色
                  .stateEffect(true)
                  .controlSize(ControlSize.NORMAL)
                  .type(ButtonType.Normal)
                  // .margin(2)//间隔距离
                  .onClick(() => {
                    this.url_delay = url_delay1 + this.httpDataResult_uuid[index] + url_delay2
                    this.httpGet(this.url_delay);
                    console.info('================延长会议url:' + this.url_delay);
                    promptAction.showToast({ message: '已延长2小时' })

                  })
              },(item:string)=>JSON.stringify(item))

            }
            .width(CommonConstants.MINE_PAGE_WIDTH_PERCENT)
            .height(CommonConstants.MINE_PAGE_HEIGHT_PERCENT)
          }
        }
        .margin({
          left: $r('app.float.user_grid_row_margin'),
          right: $r('app.float.user_grid_row_margin')
        })
      }
      .margin({ top: $r('app.float.profile_image_margin_top') })
    }
    .alignItems(HorizontalAlign.Center)
    .backgroundColor($r('app.color.login_page_background'))
  }

   @Builder Title() {
    Row() {//row横向排列
      Image($r('app.media.ic_back'))
        .width($r('app.float.image_size'))
        .height($r('app.float.image_size'))
        .margin({
          left: $r('app.float.image_margin_left'),
          right: $r('app.float.image_margin_right')
        })
        .onClick(() => {
          router.back();
        })

      Text('返回登录页')
        .fontSize($r('app.float.title_text_size'))
        .fontColor($r('app.color.title'))
        .fontWeight(CommonConstants.TITLE_FONT_WEIGHT)
    }
    .width(CommonConstants.FULL_WIDTH_PERCENT)
    .height($r('app.float.title_height'))
  }
}