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í)。