- 通过button的onclick调用JS中的fetch实现连接,服务器访问数据库httpresponse(mysql表名,传递信息)
CSS页面编写很简单,目的是为了数据传输
一、需要配置config.json
设置默认访问权限:
"reqPermissions":[
{
"reason":"",
"name":"ohos.permission.INTERNET"
},
{
"name":"ohos.permission.GET_NETWORK_INFO"
},
{
"name":"ohos.permission.SET_NETWORK_INFO"
}
],
DevEco Studio 中默认是https,改为http
"network":[
"cleartextTraffic":true,
]
如下是DevEco Studio 中JS的代码
// @ts-nocheck
import router from '@system.router';//导入路由模块
import fetch from '@system.fetch';//导入fetch模块
import qs from 'querystring'
export default {
data: {
winfo:""//动态获取数据
},
goback(){
router.back();//返回手机主页
},
//当按钮按下时触发
onClick(){
//发起网络请求
fetch.fetch({
url:`http://119.3.166.66:8000/api/appdataRequest/`, //资源地址
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded',
// 'Accept': 'application/json, text/plain, */*'
// },
//设置data
data:qs.stringify({'name':'张三'}),
responseType:"json", //请求的参数类型
method: "POST",
//如果获取数据成功的话执行以下函数
success:(resp)=>
{
this.winfo = resp.data; //令获取到的数据赋给winfo
console.log("返回的数据:"+this.winfo)//打印出数据
},
//如果获取数据失败则执行以下函数
fail:(resp)=>
{
this.winfo = resp.data;
console.log("获取数据失败:"+this.winfo)
}
});
},
onInit() {
}
}
实现效果
注意:
http路径