梅克尔工作室-鸿蒙app相关语法鸿蒙app前后端流程实现:登录验证,注册信息,前端获取数据反馈,Django后端连接

推荐网址HarmonyOS开发从0到1-OpenHarmony技术社区-51CTO.COM

HML语法

页面结构

和html相同的标签嵌套,最外层是div

数据绑定

  • 与vue用法类似
  • hml:{{ 变量名 }},括号的意思就是取值
  • js:变量放在data中

export default{

    data:{

        变量名 value

    }

}

事件绑定

  • 类似v-on(在js中绑定的函数和data同级)
  • hml:<div οnclick="clickfunc"></div> 或 <div @click="clickfunc"></div>
  • js:放在data后:

export default{

    data:{

    },

    clickfunc: function(){

        ......

    }

}

列表渲染(for)

  • tid属性指定数组中每个元素的唯一标识,默认值为id,用于加速for循环的重渲染
  • 写法1(都不指定):<div for="{{array}}" tid='id'></div> ,$idx代表元素索引,$item代表数组元素,
  • 写法2(指定元素名称):<div for="{{value in array}}" tid='id'></div>,$idx代表元素索引,value代表数组元素
  • 写法3(指定索引和元素名称):<div for="{{(index,value) in array}}" tid='id'></div> ,index代表元素索引,value代表数组元素

条件渲染(if)

  • 同基本v-if
  • if / elif / else及show两种方式,区别同v-if和v-show,if不在vdom中构建,show则构建但不显示
  • 不能同时在一个元素上设置for和if属性

逻辑控制块

使用<block>标签进行循环渲染及条件渲染,bolck标签在构建时不会被当作真实的节点编译,bolck标签只支持if和for属性

模板引用

  • 通过element标签引入自定义的模板文件<element name='comp' src='../../common/component/comp.hml'></element>
  • name属性为引入的组件名称,默认值为hml文件名,大小写不敏感
  • 使用<comp>标签(comp为element中指定的name属性)使用组件 <comp prop1='xxxx' @child1="bindParentVmMethod"></comp>
  • 使用(on|@)child1语法绑定子组件事件,子组件使用this.$emit('child1', { params: '传递参数' })触发事件并进行传值
  • 子组件中使用驼峰命名法命名的事件,在父组件中绑定时需要使用短横线分隔命名形式,例如:@children-event表示绑定子组件的childrenEvent事件,如 @children-event="bindParentVmMethod"

与html的区别

input

<input>标签必须使用</input>标签进行闭合

text

文本内容放在<text>标签中才能呈现

鸿蒙app前后端流程实现:登录验证,注册信息,前端获取数据反馈

首先要理解django里面的文件

1.使用的是MySQL,这里需要在__init__.py导入pymysql,,注意是创建项目时生成的__init__.py文件(我用的MySQL和django都是在云服务器,因为鸿蒙app真机运行的时候用的远程模拟器,电脑本地地址访问不成功)

Setting.py文件:连接自己的MySQL和对应的数据库

下面实现登录验证:

鸿蒙app前端:

文本框输入信息,点击登录按钮实现监听,发送网络请求

Hml有关代码:

Js有关代码:

关于qs.stringify

qs.stringify把一个参数对象格式化为一个字符串,将对象 序列化成 URL 的形式(a=b&c=d),以&进行拼接
JSON.parse() 方法用来解析JSON字符串,JSON字符串转换为JSON对象(key=value连接字符串转成对象,如:name=hehe&ange=10==>{name:'hehe', ange:10}

Django后端:

方法一:不通过models.py建表,不使用表迁移,像python调用数据库实现增删改查方式一样操作数据库

此处在views.py里连接MySQL

方式二:使用表迁移,需要手动在models创建表

下面实现注册:

Hml有关代码:

Js:

django后端:(用第一种方式实现)

下面实现数据返回,前端获取数据反馈:

需要清楚数据类型,清楚列表、字典之间的关系

列表里存放字典

d=dict(a=1,b=2,c=3)

l=[d for in range(3)]

print l

>>>

[{'a': 1, 'c': 3, 'b': 2}, {'a': 1, 'c': 3, 'b': 2}, {'a': 1, 'c': 3, 'b': 2}]

[{"avg": 38.0, "stability": 20, "independence": 50, "balance": 40, "continuity": 60, "harmony": 20},{     }]

Hml相关代码:

Js相关代码:

 

Django后端相关代码:

django查询中模糊的知识点,filter(blog=blog),filter(username=username).first()--这两者只需一招让你分清QuerySet对象,和用户字典对象 - 大海一个人听 - 博客园 (cnblogs.com)

  • 4
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
鸿蒙应用可以通过HTTP/HTTPS协议与后端进行通信,实现数据的传输和交互。具体步骤如下: 1.在应用中添加网络权限:在config.json文件中添加以下代码 ``` "requiredPermissions": [ "ohos.permission.INTERNET" ], ``` 2.使用HttpURLConnection或OkHttp等第三方库进行网络请求 例如,使用HttpURLConnection进行GET请求: ``` try { URL url = new URL("http://your.backend.api.com/data"); HttpURLConnection connection = (HttpURLConnection) url.openConnection(); connection.setRequestMethod("GET"); connection.setConnectTimeout(5000); if (connection.getResponseCode() == HttpURLConnection.HTTP_OK) { InputStream inputStream = connection.getInputStream(); BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream)); StringBuilder response = new StringBuilder(); String line; while ((line = reader.readLine()) != null) { response.append(line); } reader.close(); inputStream.close(); connection.disconnect(); // 处理服务端返回的数据 // ... } } catch (IOException e) { e.printStackTrace(); } ``` 3.根据后端API的设计,构造请求参数并发送请求。通常来说,后端API会返回JSON格式的数据,需要使用JSON解析库对返回结果进行解析和处理,例如使用FastJson: ``` // 假设服务端返回的JSON数据格式如下: // { // "code": 200, // "data": { // "name": "张三", // "age": 25 // } // } JSONObject jsonObject = JSON.parseObject(response.toString()); int code = jsonObject.getIntValue("code"); if (code == 200) { JSONObject data = jsonObject.getJSONObject("data"); String name = data.getString("name"); int age = data.getIntValue("age"); // 处理服务端返回的数据 // ... } ``` 需要注意的是,网络请求可能会阻塞主线程,导致UI无法响应用户操作。因此,建议使用异步方式进行网络请求。可以使用Java原生的线程或者鸿蒙提供的异步任务机制进行处理。例如,使用鸿蒙提供的AsyncTask进行异步请求: ``` new AsyncTask<Void, Void, String>() { @Override protected void onPreExecute() { // 在UI线程执行,可以进行一些UI操作,比如显示进度条等 } @Override protected String doInBackground(Void... params) { // 在新线程中执行,进行网络请求等耗时操作 } @Override protected void onPostExecute(String result) { // 在UI线程执行,处理服务端返回的数据 } @Override protected void onCancelled() { // 在UI线程执行,任务被取消时执行的操作 } }.execute(); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值