使用MUI框架構(gòu)建App請求http接口實例代碼
簡介
最近在看Dcloud的MUI框架，MUI封裝了android、ios等多個平臺的原生接口，達(dá)到開發(fā)一個項目，采取不同打包方式，生產(chǎn)多種平臺的app。
無可厚非，對于從事java web開發(fā)的工程師，帶來了極大的福音，再也不用去花太多時間去學(xué)習(xí)原生的android、ios語言，大大縮短了app開發(fā)的學(xué)習(xí)周期和成本。
當(dāng)然，既然是做了封裝處理，肯定性能上面不如原生。但是Dcloud官方聲稱MUI是最接近原生App體驗的前端框架，并且在一些低端機上的表現(xiàn)也比較理想，想必也做了不少優(yōu)化處理，另一方面，隨著手機市場的激烈競爭，手機配置及價格都越來越讓人滿意，性能問題就愈發(fā)的可以忽略不計，畢竟項目周期和成本也相當(dāng)?shù)闹匾?！之前也了解過PhoneGap框架（僅僅是了解），據(jù)說，MUI的性能要比PhoneGap好。當(dāng)然，僅僅是代表鄙人的觀點，暫時也沒有在重型或者大數(shù)據(jù)量項目上做過驗證，只好大家各自體驗了。
看得出來Dcloud還是做了不少事情的，再加上國產(chǎn)，這個還是要支持的！
MUI官方地址：http://www.dcloud.io/mui.html
好了，廢話不多說，下面進入正題。
要用app請求http接口當(dāng)然要分別有http接口和app應(yīng)用。
1.創(chuàng)建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”。因為僅僅是個示例，就不去連數(shù)據(jù)庫啦！
OK，web端的http接口就開發(fā)完成了，通過地址“http://[ip地址]:[端口]/myhttp/login?name=admin&password=123“即可訪問該servlet請求，得到返回結(jié)果。
我這里裝逼格了一下，把web應(yīng)用發(fā)布到了自己的服務(wù)器上，模擬實際場景嘛！當(dāng)然大家在本地也是可以的，可以通過瀏覽器訪問本地項目地址訪問。HBuilder工具是支持本地瀏覽器調(diào)試的。
2.使用HBuilder創(chuàng)建基于MUI框架的App
既然是基于MUI框架的App，當(dāng)然要用Dcloud推出的HBuilder這款I(lǐng)DE開發(fā)啦，另外說明下，這款I(lǐng)DE開發(fā)前臺確實超級棒，可以大幅度提升開發(fā)效率，HBuilder是基于Eclipse改造的，同時添加了很多便利的提示和快捷鍵功能，同時還支持EMMET規(guī)則。用官方的話就是：飛速編碼的極客工具，手指爽，眼睛爽——讓手爽，飛一般的編碼（這里不是打廣告哈，自己親身體驗過，確實很方便）。
在HBuilder中新建項目——移動App，輸入應(yīng)用名稱（我這里應(yīng)用名為MUIDemo1），選擇“mui項目”。
點擊完成，便生成了一個已包含mui的js、css、字體資源的項目模板。如圖所示：
OK，一個基礎(chǔ)的App應(yīng)用的框架就搭建好了。
3.頁面編寫，具體調(diào)用接口實現(xiàn)。
下面開始編寫具體頁面和實現(xiàn)接口的調(diào)用。
我這里為了方便，直接從”HelloMUI”項目模板中examples目錄下copy了一個ajax.html示例頁面置于MUIDemo1項目的根目錄下。大家可以在新建移動App項目時選擇“Hello mui”模板即可生成。
打開ajax.html頁面，里面的一些css、js引入路徑需要改一下，因為我直接把ajax.html頁面放到了我新建項目中的根目錄（原來是在examples目錄下）。
這里說明下，MUI是采用ajax方式發(fā)送請求的，平時習(xí)慣，一些我們在后臺的代碼處理MUI都是在js中編寫的(現(xiàn)在的js不僅僅涉及前端的技術(shù)了，比如node.js)。
因為ajax.html中已經(jīng)包含了一個完整的ajax請求示例，所以，只需要在這基礎(chǔ)上做下修改即可。修改后的頁面代碼如下：
<!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。輸入正確提示成功，否則提示失敗，測試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>密 碼：</label>
<input id="password" type="password" class="mui-input-password" placeholder="請輸入密碼">
</div>
<div class="mui-input-row">
<label>類 型：:</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>方 式:</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">登 陸</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, "<").replace(/>/g, ">");
}
respnoseEl.innerHTML = response;
};
//設(shè)置全局beforeSend
$.ajaxSettings.beforeSend = function(xhr, setting) {
//beforeSend演示,也可在$.ajax({beforeSend:function(){}})中設(shè)置單個Ajax的beforeSend
console.log('beforeSend:::' + JSON.stringify(setting));
};
//設(shè)置全局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';
//請求方式，默認(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 = '正在請求中...';
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ā)送請求按鈕的點擊事件
document.getElementById("confirm").addEventListener('tap', function() {
if(network){
console.log('網(wǎng)絡(luò)正常,正在發(fā)送請求...');
ajax();
}else{
mui.toast("當(dāng)前網(wǎng)絡(luò)不給力，請稍后再試...");
}
});
//點擊描述中鏈接時，打開對應(yīng)網(wǎng)頁介紹；
$('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改成自己對應(yīng)的請求地址。具體代碼就不需要講解了，都比較簡單。
頁面編寫好后，可以用USB把手機插上電腦，直接在手機上運行查看效果，也可以采用瀏覽器調(diào)試都非常方便。效果如下：
Chrome
iphone(或android機)
一切就緒，準(zhǔn)備測試下效果。首先雙擊“manifest.json”文件，更改頁面入口為“ajax.html”，保存。
選擇在我的iphone上運行，這時候看手機發(fā)現(xiàn)已經(jīng)安裝好了應(yīng)用，控制面板提示安裝成功，點擊圖標(biāo)打開應(yīng)用，顯示上圖頁面。輸入用戶名“admin”，密碼“123”，點擊“登錄”（因為我的請求類型和請求方式分別為HTML、Post，所以不用改變，直接默認(rèn)），返回結(jié)果提示：“Login Success”，修改下密碼再次登錄，提示“Login Fail”,如下圖：
圖1（返回成功）：
圖2（返回失?。?/strong>
綜上所述，基于MUI進行移動App開發(fā)更符合我們做java web“程序猿”的口味。開發(fā)過程中通過查看官方API及examples示例，有現(xiàn)成的一些東西可以利用，加上國產(chǎn)，API也沒有語言障礙，所以感覺MUI是個不錯的框架，本人無MUI開發(fā)經(jīng)驗，僅僅是淺嘗甜頭，需要學(xué)習(xí)的還很多，希望接下來時間MUI可以讓自己在移動方面有所彌補。
以上這篇使用MUI框架構(gòu)建App請求http接口實例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了java Random.nextInt()方法的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
給大家分享10中java常見字符串操作方法以及相關(guān)實例代碼，對此有需要的讀者們可以學(xué)習(xí)參考下。2019-07-07
在Java8與Java7中HashMap源碼實現(xiàn)的對比
這篇文章主要介紹了在Java8與Java7中HashMap源碼實現(xiàn)的對比,內(nèi)容包括HashMap 的原理簡單介紹、結(jié)合源碼在Java7中是如何解決hash沖突的以及優(yōu)缺點，結(jié)合源碼以及在Java8中如何解決hash沖突，balance tree相關(guān)源碼介紹，需要的朋友可以參考借鑒。2017-01-01
這篇文章主要介紹了Java Pattern與Matcher字符串匹配案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
SpringBoot+Ant Design Vue實現(xiàn)數(shù)據(jù)導(dǎo)出功能方式
這篇文章主要介紹了SpringBoot+Ant Design Vue實現(xiàn)數(shù)據(jù)導(dǎo)出功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
Java中HashTable和HashMap的區(qū)別_動力節(jié)點Java學(xué)院整理
HashTable和HashMap主要的區(qū)別有：線程安全性，同步(synchronization)，以及速度。接下來通過本文給大家簡單介紹下HashTable和HashMap的區(qū)別，需要的的朋友參考下吧2017-04-04
本文主要介紹了快速搭建一個SpringBoot項目，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了Java中finalize()詳解及用法的相關(guān)資料,final是Java的關(guān)鍵字，它所表示的是“這部分是無法修改的”，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了Spring Boot項目中定制攔截器的方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了使用Feign配置請求頭以及支持Https協(xié)議，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03