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
????會編譯生成頁面姥份,在瀏覽器中顯示如下圖:
這就是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é)果如圖:
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é)果如圖:
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>
<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
????在頁面輸入姓名酌媒,年齡。
????點(diǎn)擊提交
????成功的話會出現(xiàn)后臺我寫的返回報文。這個時候在終端上看,后臺打印的內(nèi)容,會發(fā)現(xiàn)如下圖:
????表單提交的內(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í)。