MUI框架-09-MUI 与后台数据交互

ゝ一世哀愁。 2022-05-10 06:58 437阅读 0赞

## MUI框架-09-MUI 与后台数据交互 ##

*  本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现
 *  我们大家都知道，想要数据交互就要有数据，每次当我们发送请求，我们要清楚，怎么发，发给谁，返回的数据是什么内容，格式
 *  先放一张图，给大家学习的动力：  
    ![70][]
 *  然后今天呢，介绍的是调用 API，API 是什么呢，就是一个接口，比如知乎日报的API ，我们可以通过这个 API 获取到知乎上最新的消息，并且是 json 格式，我们就不用再去找数据了，其他类型 API 还有 百度语音识别，就是百度给我们一个接口，我们可以想这个接口发送 语音，然后返回给我们识别的结果，我们就没必要就了解具体是怎么识别的
 *  【注意】：我这里收集了大量的 API ，赠送给大家:
 *  链接地址：[中国国内 - 可用API合集][- _API]

### API 分析 ###

*  这里我们就使用知乎日报 API
 *  知乎日报 API 分析：[https://github.com/izzyleung/ZhihuDailyPurify/wiki/知乎日报-API-分析][https_github.com_izzyleung_ZhihuDailyPurify_wiki_-API-]
 *  怎么使用呢，比如说我们想要拿到日报的主题，大家可以看上面的那篇文章，找到主题，下面有一个链接，就是我们需要的 API  
    ![70 1][]
 *  下面也给出了响应实例
 *  我们就只需要考虑怎么使用这些数据就 OK 了
 *  然后大家也可以试一下这个链接：[https://news-at.zhihu.com/api/4/theme/11][https_news-at.zhihu.com_api_4_theme_11]
 *  为了方便查看，大家也可以通过这个链接格式化 json 数据：[在线代码格式化][Link 1]  
    ![70 2][]

### Ajax ###

*  [MUI Ajax 官方文档][MUI 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-窗口管理-创建子页面][MUI_-08-_-]
 *  然后打开我们的自己建的 html 目录下的那个子页面 html文件
 *  我们用下面代码替换 init() 的 script 标签，具体步骤写在注释：

*  如果你没有安卓手机，建议下载一个夜神安卓模拟器，配置方法：[  
    MUI框架-07-HBuilder+夜神安卓模拟器 配置][MUI_-07-HBuilder_]
 *  然后我们点击【运行】>【】真机运行  
    ![70 3][]
 *  我们可以看到控制台  
    ![70 4][]
 *  检查一下：  
    ![在这里插入图片描述][70 5]

### 把返回的 json 数据放在页面 - ###

### 使用 art-template - JavaScript 模板引擎 ###

*  返回的数据不能就展示在控制台吧，怎么把数据放在页面是不是也很关键
 *  这里要介绍另一位主角：art-template，它是高性能 JavaScript 模板引擎
 *  art-template 官网： [http://aui.github.io/art-template/zh-cn/index.html][http_aui.github.io_art-template_zh-cn_index.html]
 *  1.下载的话可以从官网下载
 *  2.可以直接下载我的 template -web.js：[https://download.csdn.net/download/qq\_40147863/10689407][https_download.csdn.net_download_qq_40147863_10689407]
 *  3.如果你会用 npm 包管理器，那么建议新建一个文件夹，因为我们只需要一个 template -web.js 文件，我们有很多都不需要

> **npm install art-template --save**

*  然后找到 art-template/template -web.js 文件  
    ![70 6][]
 *  然后我们拷贝到项目 js 目录的下面：  
    ![70 7][]
 *  打开需要使用的 html 文件，在 head 标签里加入：

*  然后我们看一下 art-template 官网  
    ![70 8][]
 *  也就是说们要使用这个 art-template，语句使用就要放在 这种 script 标签里，做对数据的渲染
 *  第一步：把页面上 ul 标签里的内容都删掉，给ul 标签加一个id为zhihu截图：

*  第2步把页面里 init 函数的那个 script 标签删掉，步骤，写在注释里了，粘贴下面这段代码：

<script src="../js/template-web.js" type="text/javascript" charset="UTF-8"></script>
    		
    		<script id="list" type="text/html">
    			    
    			    {
       {each stories as list}}
    				<li class="mui-table-view-cell mui-media">
    					<a href="javascript:;">
    						<img class="mui-media-object mui-pull-left" src="{
       {list.images[0]}}">
    						<div class="mui-media-body">
    							
    							{
       {list.title}}
    						</div>
    					</a>
    				</li>
    				{
       {/each}}
    			</script>
    		<script type="text/javascript">
    			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);
    					}
    				});
    
    			})
    		</script>

### 真机运行 ###

*  **注意 web 浏览器是看不到效果的，必须真机运行**
 *  截图：  
    ![70][]
 *  art-template 官方文档：[http://aui.github.io/art-template/zh-cn/docs/syntax.html][http_aui.github.io_art-template_zh-cn_docs_syntax.html]

### 更多文章链接：[MUI 框架][MUI] ###

--------------------

\- 本笔记不允许任何个人和组织转载

[70]: /images/20220510/40f98d50cea34dba828c8ca04c238a61.png
[- _API]: https://blog.csdn.net/qq_40147863/article/details/82855787
[https_github.com_izzyleung_ZhihuDailyPurify_wiki_-API-]: https://github.com/izzyleung/ZhihuDailyPurify/wiki/%E7%9F%A5%E4%B9%8E%E6%97%A5%E6%8A%A5-API-%E5%88%86%E6%9E%90
[70 1]: /images/20220510/9647321103854c9f98664c57c3c09ab2.png
[https_news-at.zhihu.com_api_4_theme_11]: https://news-at.zhihu.com/api/4/theme/11
[Link 1]: http://www.bejson.com/
[70 2]: /images/20220510/7e99156dddf643baa8ad90eace0fe13a.png
[MUI Ajax]: http://dev.dcloud.net.cn/mui/ajax/
[MUI_-08-_-]: https://blog.csdn.net/qq_40147863/article/details/82846484
[MUI_-07-HBuilder_]: https://blog.csdn.net/qq_40147863/article/details/82842959
[70 3]: /images/20220510/abb2559d65c647de8d8be3e93af97b4b.png
[70 4]: /images/20220510/60187e65738b4f7bb767670f52534ed2.png
[70 5]: /images/20220510/95f0c6733ef3477b9af2ed278d116cea.png
[http_aui.github.io_art-template_zh-cn_index.html]: http://aui.github.io/art-template/zh-cn/index.html
[https_download.csdn.net_download_qq_40147863_10689407]: https://download.csdn.net/download/qq_40147863/10689407
[70 6]: /images/20220510/75d7240f9382478fbccb1dc00181db9e.png
[70 7]: /images/20220510/e5248aa1c9f04d3bb2c7d91ad04180f7.png
[70 8]: /images/20220510/0d4205525ff34e9bbbff8a65682f6829.png
[http_aui.github.io_art-template_zh-cn_docs_syntax.html]: http://aui.github.io/art-template/zh-cn/docs/syntax.html
[MUI]: https://blog.csdn.net/qq_40147863/article/category/8079041