使用MUI框架构建App请求http接口实例代码

    简介

    最近在看Dcloud的MUI框架,MUI封装了android、ios等多个平台的原生接口,达到开发一个项目,采取不同打包方式,生产多种平台的app。

    无可厚非,对于从事java web开发的工程师,带来了极大的福音,再也不用去花太多时间去学习原生的android、ios语言,大大缩短了app开发的学习周期和成本。

    当然,既然是做了封装处理,肯定性能上面不如原生。但是Dcloud官方声称MUI是最接近原生App体验的前端框架,并且在一些低端机上的表现也比较理想,想必也做了不少优化处理,另一方面,随着手机市场的激烈竞争,手机配置及价格都越来越让人满意,性能问题就愈发的可以忽略不计,毕竟项目周期和成本也相当的重要!之前也了解过PhoneGap框架(仅仅是了解),据说,MUI的性能要比PhoneGap好。当然,仅仅是代表鄙人的观点,暂时也没有在重型或者大数据量项目上做过验证,只好大家各自体验了。

    看得出来Dcloud还是做了不少事情的,再加上国产,这个还是要支持的!

    MUI官方地址:http://www.dcloud.io/mui.html

    好了,废话不多说,下面进入正题。

    要用app请求http接口当然要分别有http接口和app应用。

    1.创建http接口

    我这里是做了一个很简单的java servlet的项目。

    新建java web项目,项目名myhttp。web.xml中配置一个名为login的servlet请求:

    
    <servlet>
     <servlet-name>login</servlet-name>
     <servlet-class>demo.webservice.LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
     <servlet-name>login</servlet-name>
     <url-pattern>/login.do</url-pattern>
    </servlet-mapping>

    demo.webservice目录下的LoginServlet.java代码:

    
    package demo.webservice;
    import java.io.IOException;
    import java.io.PrintWriter;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    @SuppressWarnings("serial")
    public class LoginServlet extends HttpServlet{
     @Override
     protected void doGet(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {
      this.doPost(req, resp);
     }
     @Override
     protected void doPost(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {
      System.out.println("进入post方法!");
      req.setCharacterEncoding("utf-8");
      resp.setCharacterEncoding("utf-8");
      resp.setContentType("text/html;charset=utf-8");
      PrintWriter out = resp.getWriter();
      String name = req.getParameter("name");
      String pwd = req.getParameter("password");
      if("admin".equals(name) && "123".equals(pwd)){
      //验证通过
      out.write("Login Success!");
      }else{
      out.write("Login Fail!");
      }
      out.flush();
      out.close();
     }
    }

    这里做了一个很简单的验证示例,若输入用户名和密码分别为“admin”、“123”,即验证通过,返回“Login Success”,否则返回“Login Fail”。因为仅仅是个示例,就不去连数据库啦!

    OK,web端的http接口就开发完成了,通过地址“http://[ip地址]:[端口]/myhttp/login?name=admin&password=123“即可访问该servlet请求,得到返回结果。

    我这里装逼格了一下,把web应用发布到了自己的服务器上,模拟实际场景嘛!当然大家在本地也是可以的,可以通过浏览器访问本地项目地址访问。HBuilder工具是支持本地浏览器调试的。

    2.使用HBuilder创建基于MUI框架的App

    既然是基于MUI框架的App,当然要用Dcloud推出的HBuilder这款IDE开发啦,另外说明下,这款IDE开发前台确实超级棒,可以大幅度提升开发效率,HBuilder是基于Eclipse改造的,同时添加了很多便利的提示和快捷键功能,同时还支持EMMET规则。用官方的话就是:飞速编码的极客工具,手指爽,眼睛爽——让手爽,飞一般的编码(这里不是打广告哈,自己亲身体验过,确实很方便)。

    在HBuilder中新建项目——移动App,输入应用名称(我这里应用名为MUIDemo1),选择“mui项目”。

    点击完成,便生成了一个已包含mui的js、css、字体资源的项目模板。如图所示:

    OK,一个基础的App应用的框架就搭建好了。

    3.页面编写,具体调用接口实现。

    下面开始编写具体页面和实现接口的调用。

    我这里为了方便,直接从”HelloMUI”项目模板中examples目录下copy了一个ajax.html示例页面置于MUIDemo1项目的根目录下。大家可以在新建移动App项目时选择“Hello mui”模板即可生成。

    打开ajax.html页面,里面的一些css、js引入路径需要改一下,因为我直接把ajax.html页面放到了我新建项目中的根目录(原来是在examples目录下)。

    这里说明下,MUI是采用ajax方式发送请求的,平时习惯,一些我们在后台的代码处理MUI都是在js中编写的(现在的js不仅仅涉及前端的技术了,比如node.js)。

    因为ajax.html中已经包含了一个完整的ajax请求示例,所以,只需要在这基础上做下修改即可。修改后的页面代码如下:

    
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <title>Ajax Login</title>
      <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <!--标准mui.css-->
      <link rel="stylesheet" href="./css/mui.min.css" rel="external nofollow" >
      <!--App自定义的css-->
      <link rel="stylesheet" type="text/css" href="./css/login.css" rel="external nofollow" />
      <style>
       .mui-content-padded {
        padding: 5px;
       }
       body,body .mui-content {
        background-color: #fff !important;
       }
       code {
        word-wrap: break-word;
        word-break: normal;
        font-size: 90%;
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 4px;
       }
      </style>
     </head>
     <body>
      <header class="mui-bar mui-bar-nav">
       <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
       <h1 class="mui-title">用户登陆</h1>
      </header>
      <div class="mui-content">
       <div class="mui-content-padded" style="padding-bottom: 50px;">
        <p style="text-indent: 22px;margin-bottom: 50px;">
         用户登录示例:正确用户名及密码admin,123。输入正确提示成功,否则提示失败,测试ajax请求http接口示例。
        </p>
        <!--<h4 class="mui-content-padded">登陆</h4>-->
        <div class="mui-input-group">
         <div class="mui-input-row">
          <label>用户名:</label>
          <input id="name" type="text" class="mui-input-clear" placeholder="用户名/邮箱">
         </div>
         <div class="mui-input-row mui-password">
          <label>密&nbsp;&nbsp;&nbsp;码:</label>
          <input id="password" type="password" class="mui-input-password" placeholder="请输入密码">
         </div>
         <div class="mui-input-row">
          <label>类&nbsp;&nbsp;&nbsp;型::</label>
          <select id="dataType">
           <option value="html">HTML</option>
           <option value="json">JSON</option>
           <option value="xml">XML</option>
          </select>
         </div>
         <div class="mui-input-row">
          <label>方&nbsp;&nbsp;&nbsp;式:</label>
          <select id="method">
           <option value="post">POST</option>
           <option value="html">GET</option>
          </select>
         </div>
         <div class="mui-button-row">
          <button type="button" id="confirm" class="mui-btn mui-btn-primary">登&nbsp;&nbsp;陆</button>
         </div>
        </div>
        <h4 class="mui-content-padded">返回结果:</h4>
        <code id="response"></code>
       </div>
      </div>
      <script src="./js/mui.min.js"></script>
      <script>
       (function($) {
        $.init({
         swipeBack:true //启用右滑关闭功能
        });
        var network = true;
        if(mui.os.plus){
         mui.plusReady(function () {
          if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
           network = false;
          }
         });
        }
        var nameEl = document.getElementById("name");
        var passwordEl = document.getElementById("password");
        var respnoseEl = document.getElementById("response");
        var dataTypeEl = document.getElementById("dataType");
        var methodEl = document.getElementById("method");
        //成功响应的回调函数
        var success = function(response) {
         console.log('响应成功!');
         var dataType = dataTypeEl.value;
         if (dataType === 'json') {
          response = JSON.stringify(response);
         } else if (dataType === 'xml') {
          response = new XMLSerializer().serializeToString(response).replace(/</g, "&lt;").replace(/>/g, "&gt;");
         }
         respnoseEl.innerHTML = response;
        };
        //设置全局beforeSend
        $.ajaxSettings.beforeSend = function(xhr, setting) {
         //beforeSend演示,也可在$.ajax({beforeSend:function(){}})中设置单个Ajax的beforeSend
         console.log('beforeSend:::' + JSON.stringify(setting));
        };
        //设置全局complete
        $.ajaxSettings.complete = function(xhr, status) {
         console.log('complete:::' + status);
        }
        var ajax = function() {
         console.log('进入ajax方法...');
         //利用RunJS的Echo Ajax功能测试
         var url = 'http://120.24.44.11:8080/myhttp/login.do';
         //请求方式,默认为Get;
         var type = methodEl.value;
         //预期服务器范围的数据类型
         var dataType = dataTypeEl.value;
         //发送数据
         console.log('url:'+ url + ",type:" + type + ",dataType:" + dataType);
         var data = {
          name: nameEl.value,
          password: passwordEl.value
         };
         /*url = url + (dataType === 'html' ? 'text' : dataType);*/
         respnoseEl.innerHTML = '正在请求中...';
         if (type === 'get') {
          if (dataType === 'json') {
           $.getJSON(url, data, success);
          } else {
           $.get(url, data, success, dataType);
          }
         } else if (type === 'post') {
          $.post(url, data, success, dataType);
         }
        };
        //发送请求按钮的点击事件
        document.getElementById("confirm").addEventListener('tap', function() {
         if(network){
          console.log('网络正常,正在发送请求...');
          ajax();
         }else{
          mui.toast("当前网络不给力,请稍后再试...");
         }
        });
        //点击描述中链接时,打开对应网页介绍;
        $('body').on('tap', 'a', function(e) {
         var href = this.getAttribute('href');
         if (href) {
          if (window.plus) {
           plus.runtime.openURL(href);
          } else {
           location.href = href;
          }
         }
        });
       })(mui);
      </script>
     </body>
    </html>

    大家注意把url改成自己对应的请求地址。具体代码就不需要讲解了,都比较简单。

    页面编写好后,可以用USB把手机插上电脑,直接在手机上运行查看效果,也可以采用浏览器调试都非常方便。效果如下:

    Chrome

    iphone(或android机)

    一切就绪,准备测试下效果。首先双击“manifest.json”文件,更改页面入口为“ajax.html”,保存。

    选择在我的iphone上运行,这时候看手机发现已经安装好了应用,控制面板提示安装成功,点击图标打开应用,显示上图页面。输入用户名“admin”,密码“123”,点击“登录”(因为我的请求类型和请求方式分别为HTML、Post,所以不用改变,直接默认),返回结果提示:“Login Success”,修改下密码再次登录,提示“Login Fail”,如下图:

    图1(返回成功):

    图2(返回失败):

    综上所述,基于MUI进行移动App开发更符合我们做java web“程序猿”的口味。开发过程中通过查看官方API及examples示例,有现成的一些东西可以利用,加上国产,API也没有语言障碍,所以感觉MUI是个不错的框架,本人无MUI开发经验,仅仅是浅尝甜头,需要学习的还很多,希望接下来时间MUI可以让自己在移动方面有所弥补。

    以上这篇使用MUI框架构建App请求http接口实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持lingkb。

Leave a Reply

Leave a Reply