mui如何对接java后台_MUI框架-09-MUI 与后台数据交互
MUI框架-09-MUI 与后台数据交互
本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现
我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们要清楚,怎么发,发给谁,返回的数据是什么内容,格式
先放一张图,给大家学习的动力:
然后今天呢,介绍的是调用 API,API 是什么呢,就是一个接口,比如知乎日报的API ,我们可以通过这个 API 获取到知乎上最新的消息,并且是 json 格式,我们就不用再去找数据了,其他类型 API 还有 百度语音识别,就是百度给我们一个接口,我们可以想这个接口发送 语音,然后返回给我们识别的结果,我们就没必要就了解具体是怎么识别的
【注意】:我这里收集了大量的 API ,赠送给大家:
API 分析
这里我们就使用知乎日报 API
怎么使用呢,比如说我们想要拿到日报的主题,大家可以看上面的那篇文章,找到主题,下面有一个链接,就是我们需要的 API
下面也给出了响应实例
我们就只需要考虑怎么使用这些数据就 OK 了
为了方便查看,大家也可以通过这个链接格式化 json 数据:在线代码格式化
Ajax
参数呢,大家自己在官网看就可以,下面开始实战
这里我们先一起看一下,官网给出的代码示例:如下为通过post方式向某服务器发送鉴权登录的代码片段:
mui.ajax('http://server-name/login.php',{
data:{
username:'username',
password:'password'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
headers:{'Content-Type':'application/json'},
success:function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});
上面这段代码就是说,ajax请求,设置一个目标地址,逗号,大括号后面是传入的参数信息
大家记住一句话 大括号开始 大括号结束就是 json 格式
然后我们就根据这个做一个实例,准备呢,大家请先根据这篇创建一个简单的页面:MUI框架-08-窗口管理-创建子页面
然后打开我们的自己建的 html 目录下的那个子页面 html文件
我们用下面代码替换 init() 的 script 标签,具体步骤写在注释:
mui.init()
//plusReady,用来定义加载dom后的操作
mui.plusReady(function() {
//发起 ajax请求,地址使用知乎日报 api
mui.ajax('https://news-at.zhihu.com/api/4/theme/11', {
/* data 是参数,我们这里不需要,我们只是从 api获取数据
data: {
username: 'username',
password: 'password'
},
*/
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒;
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
//服务器返回响应,根据响应结果,分析是否登录成功;
//我们现在控制台打印一下请求结果
console.log(data)
//然后获取json数据中的具体值
console.log(data.stories[0].title)
},
error: function(xhr, type, errorThrown) {
//异常处理;
console.log(type);
}
});
})
如果你没有安卓手机,建议下载一个夜神安卓模拟器,配置方法:MUI框架-07-HBuilder+夜神安卓模拟器 配置
然后我们点击【运行】>【】真机运行
我们可以看到控制台
检查一下:
把返回的 json 数据放在页面 -
使用 art-template - JavaScript 模板引擎
返回的数据不能就展示在控制台吧,怎么把数据放在页面是不是也很关键
这里要介绍另一位主角:art-template,它是高性能 JavaScript 模板引擎
1.下载的话可以从官网下载
3.如果你会用 npm 包管理器,那么建议新建一个文件夹,因为我们只需要一个 template -web.js 文件,我们有很多都不需要
npm install art-template --save
然后找到 art-template/template -web.js 文件
然后我们拷贝到项目 js 目录的下面:
打开需要使用的 html 文件,在 head 标签里加入:
然后我们看一下 art-template 官网
也就是说们要使用这个 art-template,语句使用就要放在 这种 script 标签里,做对数据的渲染
第一步:把页面上 ul 标签里的内容都删掉,给ul 标签加一个id为zhihu截图:
第2步把页面里 init 函数的那个 script 标签删掉,步骤,写在注释里了,粘贴下面这段代码:
{{each stories as list}}
{{list.title}}
{{/each}}
mui.init()
//plusReady,用来定义加载dom后的操作
mui.plusReady(function() {
//发起 ajax请求,地址使用知乎日报 api
mui.ajax('https://news-at.zhihu.com/api/4/theme/11', {
/* data 是参数,我们这里不需要,我们只是从 api获取数据
data: {
username: 'username',
password: 'password'
},
*/
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒;
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
//服务器返回响应,根据响应结果,分析是否登录成功;
//我们现在控制台打印一下请求结果
console.log(data)
//然后获取json数据中的具体值
//console.log(data.stories[0].title)
//list 对应上面的 id,就是得到 拼接的 html
var html = template('list', data);
//把得到的 html 放到id为 zhihu 的 ul 标签里
document.getElementById("zhihu").innerHTML = html;
console.log(html);
},
error: function(xhr, type, errorThrown) {
//异常处理;
console.log(type);
}
});
})
真机运行
更多文章链接:MUI 框架
- 本笔记不允许任何个人和组织转载
mui如何对接java后台_MUI框架-09-MUI 与后台数据交互相关推荐
- android-async-http框架之与服务器进行数据交互
一 服务器准备: 本文使用Tomcat 6做服务器. 本文搭建服务器端使用MyEclipse 10. 首先准备好Tomcat 6与MyEclipse 10,并且将服务器配置到MyEclipse中,对于 ...
- asp后台调用产品数据_后台产品经理,需掌握这些数据交互知识
人们每天都在接收信息和发送信息,在传递信息的过程中,明白对方要表达的意思.数据也是如此,在系统交换数据的过程中,就伴随着数据交互.本篇文章将为大家具体分析前端和后台的数据交互与协议. 本文所说的&qu ...
- 电信物联网开放平台_NB-IoT业务对接 Java 后台、Android 前端已完成预研
电信物联网开放平台_NB-IoT业务对接 Java 后台.Android 前端已完成预研 一.NB-IoT : 硬件设备 BC28模组 二.Java 后台: SSH集成电信物联SDK.极光推送SDK. ...
- 基于Java后台(Springboot框架)+前端小程序(MINA框架)+Mysql数据库的教室图书馆座位预约小程序系统设计与实现
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序预约订座小程序,前台用户使用小程序,后台管理使用Java+Mysql开发,后台使用了springboot框架:通过后台添加座位类型 ...
- 基于Java后台(Springboot框架)+前端小程序(MINA框架)+Mysql数据库的影视评论交流小程序系统设计与实现
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序影视评论交流系统,前台用户使用小程序,后台管理使用Java+Mysql开发,后台使用了springboot框架:通过后台设置影视属 ...
- 基于Java后台(Springboot框架)+前端小程序(MINA框架)+Mysql数据库的菜谱美食小程序系统设计与实现
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序美食菜谱点评系统,前台用户使用小程序,后台管理使用Java+Mysql开发,后台使用了springboot框架:通过后台添加资讯和 ...
- 基于Java后台(Springboot框架)+前端小程序(MINA框架)+Mysql数据库的旅游景区景点购票小程序系统设计与实现
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序景区景点预约购票系统,前台用户使用小程序,后台管理使用Java+Mysql开发,后台使用了springboot框架:通过后台添加景 ...
- Java SSM springmvc spring mybatis 集代码生成器 后台框架源码
A代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 (单表.主表.明细表.树形表,快速开发利器)+快速表单构建器 freemaker模版技术 ,0个代码不用 ...
- java 快速开发框架平台 代码生成器 springmvc SSM后台框架源码
博文来源:http://www.fhadmin.org/webnewsdetail2.html A代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [正反双 ...
- 基于Java后台(Springboot框架)+小程序(MINA框架)+Mysql数据库的小程序商城系统设计与实现
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序商城系统,前台用户使用小程序,小程序使用微信开发者工具开发:后台管理使用基JAVA+MySql的C/S架构,开发工具使用IDEA: ...
最新文章
- Linux下Verilog仿真过程(二)
- LNMP+HAProxy+Keepalived负载均衡(五)- 通过rsyncd实现文件的相互同步
- 微信支付 ---- (微信退款,提示return_msg=证书已过期, return_code=FAIL)
- 编程珠玑Column11中插入排序和快排序
- VS2017无法保存工具栏布局信息
- cmd NTSD命令用法详解
- 磁测仪高斯计与特斯拉计、磁通计的区别
- 软件开发的201个原则
- ATSC /DVB SI/PSI 主要的区别
- count(1)、count(*)、count(列名) 详解
- html 跑步比赛小游戏,趣味跑步比赛游戏
- 粗同步 符号同步 matlab,OFDM系统在衰落信道中帧同步算法研究(毕业论文)
- 免费的压缩/解压缩软件
- python写一个类方法_重写python脚本,在脚本的每个类中注入一个方法 - python
- 用python做思维导图软件_分享一下python数据处理工具思维导图
- nodeJS与npx之间的三两事
- python简单笔试题_python编程简单笔试题
- Oracle Parallel 多线程
- tmp: Springboot 修改classPath地址
- 高德地图API学习二、获取定位数据
热门文章
- WinISO5.3 注册码 不需要注册机
- matlab2008 软件下载及安装教程
- 黑莓系统包服务器,黑莓os10.3.3.2163
- linux如何卸载金山安全终端,卸载和释放-文档中心-金山云
- python写诗代码_pyTorch实现AI写诗:开放源码
- Excel函数公式大全—IF函数
- Linux客户/服务器程序设计范式——阿帕奇服务器(多进程)
- apache服务器搭建
- vc html插件,VC++6.0插件系列(绝对经典)
- 找到某个关键字 同义词词林 python_Python——详解__slots__,property和命名规范