网页设计自学视频网站四川企业seo

软件：鸿蒙devceo3.1，springboot项目采用IDEA

目的：

1、结合springboot后端与鸿蒙的结合运用。

2、Log日志查看console语句的信息。

3、引入

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

4、调用springboot后端提供的链接发送post

5、TextInput的使用，onChange运算

devceo软件：

\src\main\ets\pages\FormPage.ets代码：

import http from '@ohos.net.http'
@Entry
@Component
// @Preview
struct FormPage {@State name: string = ''@State age: string = ''@State email: string = ''submitData() {const httpRequest = http.createHttp() // 创建请求实例httpRequest.request('http://localhost:8080/submitTableData',{method: http.RequestMethod.POST,header: {'Content-Type': 'application/json'},extraData: {name: this.name,age: Number(this.age),email: this.email},readTimeout: 60000}).then((res) => {console.info('请求成功，响应数据：', res.result)}).catch((err) => {console.error('请求失败：', err)})}build() {Column({ space: 10 }) {TextInput({ placeholder: '请输入姓名', text: this.name }).onChange(value => this.name = value)TextInput({ placeholder: '请输入年龄', text: this.age }).onChange(value => this.age = value)TextInput({ placeholder: '请输入邮箱', text: this.email }).onChange(value => this.email = value)Button('提交数据').onClick(() => this.submitData())}.padding(20)}
}

springboot后端：

新建项目maven的springboot：

\src\main\java\com\example\demo\controller\DataController.java

代码如下：

package com.example.demo.controller;// DataController.javaimport lombok.Data;
import org.springframework.web.bind.annotation.*;@RestController
public class DataController {@PostMapping("/submitTableData")public String submitData(@RequestBody FormData formData) {System.out.println("收到表单数据：" + formData);return "后端已收到数据：" + formData.getName();}@Datapublic static class FormData {private String name;private int age;private String email;}
}

运行结果：