快捷導(dǎo)航

使用MUI框架構(gòu)建App請(qǐng)求http接口實(shí)例代碼

更新時(shí)間：2018年01月31日 10:07:42 作者：irokay

下面小編就為大家分享一篇使用MUI框架構(gòu)建App請(qǐng)求http接口實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

簡(jiǎn)介

最近在看Dcloud的MUI框架，MUI封裝了android、ios等多個(gè)平臺(tái)的原生接口，達(dá)到開發(fā)一個(gè)項(xiàng)目，采取不同打包方式，生產(chǎn)多種平臺(tái)的app。

無(wú)可厚非，對(duì)于從事java web開發(fā)的工程師，帶來(lái)了極大的福音，再也不用去花太多時(shí)間去學(xué)習(xí)原生的android、ios語(yǔ)言，大大縮短了app開發(fā)的學(xué)習(xí)周期和成本。

當(dāng)然，既然是做了封裝處理，肯定性能上面不如原生。但是Dcloud官方聲稱MUI是最接近原生App體驗(yàn)的前端框架，并且在一些低端機(jī)上的表現(xiàn)也比較理想，想必也做了不少優(yōu)化處理，另一方面，隨著手機(jī)市場(chǎng)的激烈競(jìng)爭(zhēng)，手機(jī)配置及價(jià)格都越來(lái)越讓人滿意，性能問(wèn)題就愈發(fā)的可以忽略不計(jì)，畢竟項(xiàng)目周期和成本也相當(dāng)?shù)闹匾≈耙擦私膺^(guò)PhoneGap框架（僅僅是了解），據(jù)說(shuō)，MUI的性能要比PhoneGap好。當(dāng)然，僅僅是代表鄙人的觀點(diǎn)，暫時(shí)也沒有在重型或者大數(shù)據(jù)量項(xiàng)目上做過(guò)驗(yàn)證，只好大家各自體驗(yàn)了。

看得出來(lái)Dcloud還是做了不少事情的，再加上國(guó)產(chǎn)，這個(gè)還是要支持的！

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

好了，廢話不多說(shuō)，下面進(jìn)入正題。

要用app請(qǐng)求http接口當(dāng)然要分別有http接口和app應(yīng)用。

1.創(chuàng)建http接口

我這里是做了一個(gè)很簡(jiǎn)單的java servlet的項(xiàng)目。

新建java web項(xiàng)目，項(xiàng)目名myhttp。web.xml中配置一個(gè)名為login的servlet請(qǐng)求：

<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("進(jìn)入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)){
  //驗(yàn)證通過(guò)
  out.write("Login Success!");
  }else{
  out.write("Login Fail!");
  }
  out.flush();
  out.close();
 }
}

這里做了一個(gè)很簡(jiǎn)單的驗(yàn)證示例，若輸入用戶名和密碼分別為“admin”、“123”，即驗(yàn)證通過(guò)，返回“Login Success”，否則返回“Login Fail”。因?yàn)閮H僅是個(gè)示例，就不去連數(shù)據(jù)庫(kù)啦！

OK，web端的http接口就開發(fā)完成了，通過(guò)地址“http://[ip地址]:[端口]/myhttp/login?name=admin&password=123“即可訪問(wèn)該servlet請(qǐng)求，得到返回結(jié)果。

我這里裝逼格了一下，把web應(yīng)用發(fā)布到了自己的服務(wù)器上，模擬實(shí)際場(chǎng)景嘛！當(dāng)然大家在本地也是可以的，可以通過(guò)瀏覽器訪問(wèn)本地項(xiàng)目地址訪問(wèn)。HBuilder工具是支持本地瀏覽器調(diào)試的。

2.使用HBuilder創(chuàng)建基于MUI框架的App

既然是基于MUI框架的App，當(dāng)然要用Dcloud推出的HBuilder這款I(lǐng)DE開發(fā)啦，另外說(shuō)明下，這款I(lǐng)DE開發(fā)前臺(tái)確實(shí)超級(jí)棒，可以大幅度提升開發(fā)效率，HBuilder是基于Eclipse改造的，同時(shí)添加了很多便利的提示和快捷鍵功能，同時(shí)還支持EMMET規(guī)則。用官方的話就是：飛速編碼的極客工具，手指爽，眼睛爽——讓手爽，飛一般的編碼（這里不是打廣告哈，自己親身體驗(yàn)過(guò)，確實(shí)很方便）。

在HBuilder中新建項(xiàng)目——移動(dòng)App，輸入應(yīng)用名稱（我這里應(yīng)用名為MUIDemo1），選擇“mui項(xiàng)目”。

點(diǎn)擊完成，便生成了一個(gè)已包含mui的js、css、字體資源的項(xiàng)目模板。如圖所示：

OK，一個(gè)基礎(chǔ)的App應(yīng)用的框架就搭建好了。

3.頁(yè)面編寫，具體調(diào)用接口實(shí)現(xiàn)。

下面開始編寫具體頁(yè)面和實(shí)現(xiàn)接口的調(diào)用。

我這里為了方便，直接從”HelloMUI”項(xiàng)目模板中examples目錄下copy了一個(gè)ajax.html示例頁(yè)面置于MUIDemo1項(xiàng)目的根目錄下。大家可以在新建移動(dòng)App項(xiàng)目時(shí)選擇“Hello mui”模板即可生成。

打開ajax.html頁(yè)面，里面的一些css、js引入路徑需要改一下，因?yàn)槲抑苯影補(bǔ)jax.html頁(yè)面放到了我新建項(xiàng)目中的根目錄（原來(lái)是在examples目錄下）。

這里說(shuō)明下，MUI是采用ajax方式發(fā)送請(qǐng)求的，平時(shí)習(xí)慣，一些我們?cè)诤笈_(tái)的代碼處理MUI都是在js中編寫的(現(xiàn)在的js不僅僅涉及前端的技術(shù)了，比如node.js)。

因?yàn)閍jax.html中已經(jīng)包含了一個(gè)完整的ajax請(qǐng)求示例，所以，只需要在這基礎(chǔ)上做下修改即可。修改后的頁(yè)面代碼如下：

<!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">
  <!--標(biāo)準(zhǔn)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。輸入正確提示成功，否則提示失敗，測(cè)試ajax請(qǐng)求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="請(qǐng)輸入密碼">
     </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">返回結(jié)果：</h4>
    <code id="response"></code>
   </div>
  </div>
  <script src="./js/mui.min.js"></script>
  <script>
   (function($) {
    $.init({
     swipeBack:true //啟用右滑關(guān)閉功能
    });
    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");
    //成功響應(yīng)的回調(diào)函數(shù)
    var success = function(response) {
     console.log('響應(yīng)成功！');
     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;
    };
    //設(shè)置全局beforeSend
    $.ajaxSettings.beforeSend = function(xhr, setting) {
     //beforeSend演示,也可在$.ajax({beforeSend:function(){}})中設(shè)置單個(gè)Ajax的beforeSend
     console.log('beforeSend:::' + JSON.stringify(setting));
    };
    //設(shè)置全局complete
    $.ajaxSettings.complete = function(xhr, status) {
     console.log('complete:::' + status);
    }
    var ajax = function() {
     console.log('進(jìn)入ajax方法...');
     //利用RunJS的Echo Ajax功能測(cè)試
     var url = 'http://120.24.44.11:8080/myhttp/login.do';
     //請(qǐng)求方式，默認(rèn)為Get；
     var type = methodEl.value;
     //預(yù)期服務(wù)器范圍的數(shù)據(jù)類型
     var dataType = dataTypeEl.value;
     //發(fā)送數(shù)據(jù)
     console.log('url:'+ url + ",type:" + type + ",dataType:" + dataType);
     var data = {
      name: nameEl.value,
      password: passwordEl.value
     };
     /*url = url + (dataType === 'html' ? 'text' : dataType);*/
     respnoseEl.innerHTML = '正在請(qǐng)求中...';
     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);
     }
    };
    //發(fā)送請(qǐng)求按鈕的點(diǎn)擊事件
    document.getElementById("confirm").addEventListener('tap', function() {
     if(network){
      console.log('網(wǎng)絡(luò)正常,正在發(fā)送請(qǐng)求...');
      ajax();
     }else{
      mui.toast("當(dāng)前網(wǎng)絡(luò)不給力，請(qǐng)稍后再試...");
     }
    });
    //點(diǎn)擊描述中鏈接時(shí)，打開對(duì)應(yīng)網(wǎng)頁(yè)介紹；
    $('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改成自己對(duì)應(yīng)的請(qǐng)求地址。具體代碼就不需要講解了，都比較簡(jiǎn)單。

頁(yè)面編寫好后，可以用USB把手機(jī)插上電腦，直接在手機(jī)上運(yùn)行查看效果，也可以采用瀏覽器調(diào)試都非常方便。效果如下：

Chrome

iphone(或android機(jī))

一切就緒，準(zhǔn)備測(cè)試下效果。首先雙擊“manifest.json”文件，更改頁(yè)面入口為“ajax.html”，保存。

選擇在我的iphone上運(yùn)行，這時(shí)候看手機(jī)發(fā)現(xiàn)已經(jīng)安裝好了應(yīng)用，控制面板提示安裝成功，點(diǎn)擊圖標(biāo)打開應(yīng)用，顯示上圖頁(yè)面。輸入用戶名“admin”，密碼“123”，點(diǎn)擊“登錄”（因?yàn)槲业恼?qǐng)求類型和請(qǐng)求方式分別為HTML、Post，所以不用改變，直接默認(rèn)），返回結(jié)果提示：“Login Success”，修改下密碼再次登錄，提示“Login Fail”,如下圖：

圖1（返回成功）：

圖2（返回失敗）：

綜上所述，基于MUI進(jìn)行移動(dòng)App開發(fā)更符合我們做java web“程序猿”的口味。開發(fā)過(guò)程中通過(guò)查看官方API及examples示例，有現(xiàn)成的一些東西可以利用，加上國(guó)產(chǎn)，API也沒有語(yǔ)言障礙，所以感覺MUI是個(gè)不錯(cuò)的框架，本人無(wú)MUI開發(fā)經(jīng)驗(yàn)，僅僅是淺嘗甜頭，需要學(xué)習(xí)的還很多，希望接下來(lái)時(shí)間MUI可以讓自己在移動(dòng)方面有所彌補(bǔ)。

以上這篇使用MUI框架構(gòu)建App請(qǐng)求http接口實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: