web學習筆記08-Ionic的前后端簡單交互與打包

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

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

1.實現(xiàn)目標

????目標是搭建一個簡單的前后端交互，應(yīng)用ionic實現(xiàn)一個簡單的表單，點擊提交按鈕，會發(fā)送一個請求，并且能在搭建的后端處查看到提交表單上的值。如圖：


示例圖

2.頁面搭建

前提：已安裝node.js，ionic，cordova。

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

$ npm install -g cordova ionic

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

????在終端，進入搭建工程的目錄

$ cd /Users/apple/Desktop/

????下載ionic空模板

$ ionic start ionicTest blank

????下載成功之后，進入工程。

工程目錄

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

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

????會編譯生成頁面，在瀏覽器中顯示如下圖：

2.png

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

2.2 編寫代碼

1 編寫頁面html代碼

????進入/www/index.html。在body中的標簽 <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的原因是因為ionic里面很多東西的樣式都有初始設(shè)定，所以很多時候需要強制設(shè)定下。我寫css也沒幾天，不知道這種方式算不算對，要是大家有好的解決辦法，一定要告訴我。

結(jié)果如圖：

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

</form>

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

4 添加邏輯代碼，如果輸入框為空，就彈出提示框。
<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文件

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

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

????此外還需要安裝express的中間件bodyParser。因為不知名的原因，express里沒有包括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)建實例
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.運行

????編譯前端：

$ ionic serve

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

$ node server.js

????在頁面輸入姓名，年齡。

5.png

????點擊提交

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

????一般項目都需要兩個平臺同時部署，所以我們就添加兩個，執(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 編譯

????在終端進入工程目錄下，進行編譯

$ ionic build ios

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

????輸入姓名年齡，點擊提交，這個時候會報錯：

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

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

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

這樣就成功解決這個問題，接下來重新運行，就通暢了。

2.2 打包ipa包

????在Xcode中，模擬器選擇Generic iOS Device

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

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

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

3 Android

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

????1.安裝Java的JDK，并配置好環(huán)境變量。

????2.安裝工程需要版本的AndroidSDK，并配置好環(huán)境變量；這里JDK和andriodSDK的安裝和配置都很重要，必須安裝好JDK和AndroidSDK，才可以進行下面的打包，否則是打不了包的。

3.2 打包
????在終端進入工程目錄下，進行編譯

$ ionic build android

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

????編譯之后可以選擇在模擬器上運行或者是在真機上運行。（需要先新建虛擬機/連接手機，新建方法：打開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的前后端簡單交互與打包了。項目要是有需求的話可以評論留言跟我要。不過這個項目比較簡單，跟著一步一步走很快就可以搞定的。要是大家在這里發(fā)現(xiàn)什么問題，請私信或者評論告訴我，讓我也學習學習。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容