web學(xué)習(xí)筆記08-Ionic的前后端簡單交互與打包

Ionic的前后端簡單交互與打包

????前言:這篇文章同樣是新手專用否灾,對于一個像我一樣的前端渣新來說,看看還可以健提,大神的話就算啦。里面涉及的點(diǎn)都不算太難紊遵,雖然我也有一堆東西沒懂暗膜,但是跟著先敲起來学搜,慢慢地就會理解了。這個之后還做了一個angular的前后端簡單交互炬丸,道理都一樣,只是pc端會出現(xiàn)跨域問題酸纲,需要配置一下nginx的反向代理之類的。本篇就不說這些了外厂,因?yàn)樽鲞@個的時候沒遇到這些問題,遇到的是一些網(wǎng)絡(luò)權(quán)限的問題掖棉,在下面也都提了。

1.實(shí)現(xiàn)目標(biāo)

????目標(biāo)是搭建一個簡單的前后端交互帕棉,應(yīng)用ionic實(shí)現(xiàn)一個簡單的表單,點(diǎn)擊提交按鈕即纲,會發(fā)送一個請求,并且能在搭建的后端處查看到提交表單上的值。如圖:


示例圖

2.頁面搭建

前提:已安裝node.js,ionic礁遵,cordova唧龄。

????安裝node.js可以去官網(wǎng)下載懒叛,下載完node.js之后可以使用集成包管理工具npm安裝剩下的兩樣(全局安裝)。

$ npm install -g cordova ionic

2.1 創(chuàng)建ionic空模板項(xiàng)目

????在終端诅迷,進(jìn)入搭建工程的目錄

$ cd /Users/apple/Desktop/

????下載ionic空模板

$ ionic start ionicTest blank

????下載成功之后逝钥,進(jìn)入工程艘款。

工程目錄

????其中www是我們主要編寫代碼的文件夾。這時候我們在終端運(yùn)行

$ cd /Users/apple/Desktop/ionicTest/
$ ionic serve

????會編譯生成頁面姥份,在瀏覽器中顯示如下圖:

2.png

這就是ionic的空模板埃难,所以展示出來的是空頁面。

2.2 編寫代碼

1 編寫頁面html代碼

????進(jìn)入/www/index.html考抄。在body中的標(biāo)簽 <ion-content></ion-content>之間疯兼,寫下如下頁面代碼潮饱。

<div>

  <div class="row1">
    <div class="inner_box">
      <div class="title_msg">版本號 :</div>
      <input class="input_text" type="text" name="name" id="name" placeholder="請輸入姓名">
    </div>
  </div>

  <div class="row1">
    <div class="inner_box">
      <div class="title_msg">編碼方式 :</div>
      <input class="input_text" type="text" name="age" id="age" placeholder="請輸入年齡">
    </div>
  </div>

  
  <div class="row1">
    <div class="button_box">
      <input type="submit" value="提交" class="submit_btn">
    </div>
 </div> 

</div>

結(jié)果如圖:

3.png
2 編寫css樣式
<style type="text/css">
    .inner_box{
    width: 310px;
    height: 40px;
    margin: 0 auto;
    background-color: lightblue;
    border-radius: 5px;
}
.row1{
    width: 98%;
    height: 40px;
    margin:0 auto;
    margin-top: 5px;
    padding: 0;
}
.title_msg{
    float: left;
    width: 100px;
    margin-left: 5px;
    height: 40px;
    text-align: left;
    font-size: 14px;
    line-height: 40px;
    color: #333;
}
.input_text{
    padding: 0px !important;
    float: left;
    width: 200px;
    height: 26px!important;
    margin-top: 7px;
    border: 1px solid #dddddd !important;
    border-radius: 5px;
    font-size: 14px;
    line-height: 26px;
}
.button_box{
    width: 200px;
    height: 40px;
    margin: 0 auto;
}
.submit_btn{
    padding: 0px !important;
    width: 150px;
    height: 30px;
    margin-top: 5px;
    margin-left: 25px;
    border: 1px solid lightblue !important;
    border-radius: 5px;
    background-color: lightblue;
    color: #333333;
}
</style>

????這里提一嘴:css中用了不少!important的原因是因?yàn)閕onic里面很多東西的樣式都有初始設(shè)定,所以很多時候需要強(qiáng)制設(shè)定下。我寫css也沒幾天换帜,不知道這種方式算不算對,要是大家有好的解決辦法,一定要告訴我说贝。

結(jié)果如圖:

4.png
3 添加form標(biāo)簽
<form action="http://192.168.1.100:3000/Info" method="post" onsubmit="return submitForm();">

</form>

????其中submitForm()方法是點(diǎn)擊提交按鈕的時候先觸發(fā)的方法。在這個方法中進(jìn)行一些驗(yàn)證或者判斷是否為空值讯屈。action之后接的是需要將表單上的內(nèi)容發(fā)送到的地址。這里就用本機(jī)ip地址來吧沪蓬。

4 添加邏輯代碼营搅,如果輸入框?yàn)榭眨蛷棾鎏崾究颉?/h5>
<script type="text/javascript">
    function submitForm(){
        var name = document.getElementById("name");
        var age = document.getElementById("age");

        if(name.value == null || name.value == ""){
            alert("請輸入姓名");
            return false;
        }
        if(age.value == null || age.value == ""){
            alert("請輸入年齡");
            return false;
        }
    }
</script>

????以上基本上就搭建好了界面,現(xiàn)在需要的是搭建一個后臺服務(wù)绑榴,來接受發(fā)送的請求备埃。

3.服務(wù)搭建

????在這里為了簡便,我們所使用的是express來搭建唯沮,express是基于node.js平臺,快速,開放吹菱,極簡的web開發(fā)框架鳍刷。

1 創(chuàng)建server文件

????進(jìn)入工程目錄的www文件夾下,創(chuàng)建server.js文件

2 安裝express組件
$ npm install express --save

????此外還需要安裝express的中間件bodyParser凛捏。因?yàn)椴恢脑蚴韭蓿琫xpress里沒有包括bodyParser拌阴。bodyParser用來解析表單提交的數(shù)據(jù)。

$ npm install body-parser --save
3 編寫代碼(按照官網(wǎng)的教程寫)
var express = require('express');
var bodyParser = require('body-parser');//引入
var app = express();//創(chuàng)建實(shí)例
var router = express.Router();

app.use(bodyParser.json());
app.use(require('body-parser').urlencoded({extended: true}));

//請求時開始使用的方法
router.use(function(req, res, next) {
    next();
});

//請求返回的方法
router.post('/Info', function (req, res) {
    res.send('Got a POST request');
    console.log(req.body);
});

app.use(router);
app.listen(3000); //指定端口并啟動express web服務(wù)

4.運(yùn)行

????編譯前端:

$ ionic serve

????啟動后臺服務(wù):

$ node server.js

????在頁面輸入姓名酌媒,年齡。

5.png

????點(diǎn)擊提交

6.png

????成功的話會出現(xiàn)后臺我寫的返回報文。這個時候在終端上看,后臺打印的內(nèi)容,會發(fā)現(xiàn)如下圖:

7.png

????表單提交的內(nèi)容都已經(jīng)在后臺顯示出來。這樣就完成了自建前后端簡單的交互。

5.打包

1. 添加設(shè)備
$ ionic platform add ios
$ ionic platform add android

????一般項(xiàng)目都需要兩個平臺同時部署,所以我們就添加兩個,執(zhí)行完畢之后執(zhí)行命令查看你已經(jīng)添加的平臺列表:

$ ionic platform list

結(jié)果:

    Installed platforms:ios 4.1.1所意,android ~5.2.0
    Available platforms: amazon-fireos ~3.6.3 (deprecated)姻檀,blackberry10 ~3.8.0歼疮,browser ~4.1.0,firefoxos ~3.6.3阅仔,osx ~4.0.1刃唐,webos ~3.7.0
2 iOS

2.1 編譯

????在終端進(jìn)入工程目錄下抖甘,進(jìn)行編譯

$ ionic build ios

????開始編譯項(xiàng)目,編譯完成之后代開Xcode,打開platform->ios->myIonic.xcodeproj的項(xiàng)目文件,Xcode中選擇要運(yùn)行的模擬器版本并執(zhí)行快捷鍵cmd+R運(yùn)行模擬器,模擬器打開后會自動運(yùn)行你應(yīng)用。

????輸入姓名年齡,點(diǎn)擊提交,這個時候會報錯:

    ERROR Internal navigation rejected - <allow-navigation> not set for url='http://192.168.14.102:3000/Info'

????出現(xiàn)這個錯誤的原因是因?yàn)闆]有設(shè)置白名單,iOS9+會拒絕請求。
????所以解決方案也很簡單。只需要在ios -> ionicTest -> config.xml中配置

<allow-navigation href="*" /> //即允許跳轉(zhuǎn)到任意http協(xié)議的頁面  

這樣就成功解決這個問題柒凉,接下來重新運(yùn)行,就通暢了蔬咬。

2.2 打包ipa包

????在Xcode中沐寺,模擬器選擇Generic iOS Device

????在頂部導(dǎo)航欄上的product中選擇Archive進(jìn)行打包啥酱,接下來的選擇根據(jù)不同的需要選擇不同的選項(xiàng),我這里選擇的是測試包。

    Export -> Save for Ad Hoc Deployment -> select a Development Team -> Export one app for all compatible devices -> next -> Export到指定文件夾下微酬。

????以上就是打包iOS包的方法和遇到的一些小問題忙上。

3 Android

安卓模塊不是我負(fù)責(zé)的腰懂,我也就沒有花太多精力去詳細(xì)研究绣溜,一些配置什么的也就大概說下,具體的配置項(xiàng)需要自己根據(jù)自己所處的環(huán)境進(jìn)行配置。我就不贅述了。
3.1 配置環(huán)境

????1.安裝Java的JDK明肮,并配置好環(huán)境變量菱农。

????2.安裝工程需要版本的AndroidSDK,并配置好環(huán)境變量柿估;這里JDK和andriodSDK的安裝和配置都很重要循未,必須安裝好JDK和AndroidSDK,才可以進(jìn)行下面的打包秫舌,否則是打不了包的的妖。

3.2 打包
????在終端進(jìn)入工程目錄下,進(jìn)行編譯

$ ionic build android

????注意:這里會提示你安裝部分版本的Android SDK足陨,按照上面的步驟跟著安裝就可以嫂粟,之后重新編譯一下。

????編譯之后可以選擇在模擬器上運(yùn)行或者是在真機(jī)上運(yùn)行墨缘。(需要先新建虛擬機(jī)/連接手機(jī)星虹,新建方法:打開Android SDK安裝目錄下的AVD Manager.exe選擇新建)

$ ionic run android

????同樣零抬,iOS中出現(xiàn)的問題,Android也出現(xiàn)了宽涌。

????只需要在platform -> Android-> AndroidManifest.xml中平夜,添加上以下一些權(quán)限設(shè)置的代碼即可:

<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_LOGS" />

????以上就是整個Ionic的前后端簡單交互與打包了。項(xiàng)目要是有需求的話可以評論留言跟我要卸亮。不過這個項(xiàng)目比較簡單忽妒,跟著一步一步走很快就可以搞定的。要是大家在這里發(fā)現(xiàn)什么問題兼贸,請私信或者評論告訴我段直,讓我也學(xué)習(xí)學(xué)習(xí)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末溶诞,一起剝皮案震驚了整個濱河市坷牛,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌很澄,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,084評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件颜及,死亡現(xiàn)場離奇詭異甩苛,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)俏站,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3 392
  • 文/潘曉璐 我一進(jìn)店門讯蒲,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人肄扎,你說我怎么就攤上這事墨林。” “怎么了犯祠?”我有些...
    開封第一講書人閱讀 163,450評論 0 353
  • 文/不壞的土叔 我叫張陵旭等,是天一觀的道長。 經(jīng)常有香客問我衡载,道長搔耕,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,322評論 1 293
  • 正文 為了忘掉前任痰娱,我火速辦了婚禮弃榨,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘梨睁。我一直安慰自己鲸睛,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布坡贺。 她就那樣靜靜地躺著官辈,像睡著了一般箱舞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上钧萍,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天褐缠,我揣著相機(jī)與錄音,去河邊找鬼风瘦。 笑死队魏,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的万搔。 我是一名探鬼主播胡桨,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼瞬雹!你這毒婦竟也來了昧谊?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤酗捌,失蹤者是張志新(化名)和其女友劉穎呢诬,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體胖缤,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡尚镰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了哪廓。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片狗唉。...
    茶點(diǎn)故事閱讀 39,773評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖涡真,靈堂內(nèi)的尸體忽然破棺而出分俯,到底是詐尸還是另有隱情,我是刑警寧澤哆料,帶...
    沈念sama閱讀 35,470評論 5 344
  • 正文 年R本政府宣布缸剪,位于F島的核電站,受9級特大地震影響东亦,放射性物質(zhì)發(fā)生泄漏橄登。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,080評論 3 327
  • 文/蒙蒙 一讥此、第九天 我趴在偏房一處隱蔽的房頂上張望拢锹。 院中可真熱鬧,春花似錦萄喳、人聲如沸卒稳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽充坑。三九已至减江,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間捻爷,已是汗流浹背辈灼。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留也榄,地道東北人巡莹。 一個月前我還...
    沈念sama閱讀 47,865評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像甜紫,于是被迫代替她去往敵國和親降宅。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,689評論 2 354

推薦閱讀更多精彩內(nèi)容