web学习笔记08-Ionic的前后端简单交互与打包

    前言：这篇文章同样是新手专用，对于一个像我一样的前端渣新来说，看看还可以，大神的话就算啦。里面涉及的点都不算太难，虽然我也有一堆东西没懂，但是跟着先敲起来，慢慢地就会理解了。这个之后还做了一个angular的前后端简单交互，道理都一样，只是pc端会出现跨域问题，需要配置一下nginx的反向代理之类的。本篇就不说这些了，因为做这个的时候没遇到这些问题，遇到的是一些网络权限的问题，在下面也都提了。

1.实现目标

    目标是搭建一个简单的前后端交互，应用ionic实现一个简单的表单，点击提交按钮，会发送一个请求，并且能在搭建的后端处查看到提交表单上的值。如图：

2.页面搭建

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

    安装node.js可以去官网下载，下载完node.js之后可以使用集成包管理工具npm安装剩下的两样（全局安装）。

$ npm install -g cordova ionic

2.1 创建ionic空模板项目

    在终端，进入搭建工程的目录

$ cd /Users/apple/Desktop/

    下载ionic空模板

$ ionic start ionicTest blank

    下载成功之后，进入工程。

    其中www是我们主要编写代码的文件夹。这时候我们在终端运行

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

    会编译生成页面，在浏览器中显示如下图：

这就是ionic的空模板，所以展示出来的是空页面。

2.2 编写代码

1 编写页面html代码

    进入/www/index.html。在body中的标签 之间，写下如下页面代码。

  

    

      
版本号 :
      
    
  

  

    

      
编码方式 :
      
    
  


  

    

      
    
 
 

结果如图：

2 编写css样式

    **这里提一嘴：**css中用了不少!important的原因是因为ionic里面很多东西的样式都有初始设定，所以很多时候需要强制设定下。我写css也没几天，不知道这种方式算不算对，要是大家有好的解决办法，一定要告诉我。

结果如图：

3 添加form标签

    其中submitForm()方法是点击提交按钮的时候先触发的方法。在这个方法中进行一些验证或者判断是否为空值。action之后接的是需要将表单上的内容发送到的地址。这里就用本机ip地址来吧。

4 添加逻辑代码，如果输入框为空，就弹出提示框。

    以上基本上就搭建好了界面，现在需要的是搭建一个后台服务，来接受发送的请求。

3.服务搭建

    在这里为了简便，我们所使用的是express来搭建，express是基于node.js平台，快速，开放，极简的web开发框架。

1 创建server文件

    进入工程目录的www文件夹下，创建server.js文件

2 安装express组件

$ npm install express --save

    此外还需要安装express的中间件bodyParser。因为不知名的原因，express里没有包括bodyParser。bodyParser用来解析表单提交的数据。

$ npm install body-parser --save

3 编写代码（按照官网的教程写）

var express = require('express');
var bodyParser = require('body-parser');//引入
var app = express();//创建实例
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服务

4.运行

    编译前端：

$ ionic serve

    启动后台服务：

$ node server.js

    在页面输入姓名，年龄。

    点击提交

    成功的话会出现后台我写的返回报文。这个时候在终端上看，后台打印的内容，会发现如下图：

    表单提交的内容都已经在后台显示出来。这样就完成了自建前后端简单的交互。

5.打包

1. 添加设备

$ ionic platform add ios
$ ionic platform add android

    一般项目都需要两个平台同时部署，所以我们就添加两个，执行完毕之后执行命令查看你已经添加的平台列表：

$ ionic platform list

结果：

    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中选择要运行的模拟器版本并执行快捷键cmd+R运行模拟器，模拟器打开后会自动运行你应用。

    输入姓名年龄，点击提交，这个时候会报错：

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

    出现这个错误的原因是因为没有设置白名单，iOS9+会拒绝请求。
    所以解决方案也很简单。只需要在ios -> ionicTest -> config.xml中配置

 //即允许跳转到任意http协议的页面  

这样就成功解决这个问题，接下来重新运行，就通畅了。

2.2 打包ipa包

    在Xcode中，模拟器选择Generic iOS Device

    在顶部导航栏上的product中选择Archive进行打包，接下来的选择根据不同的需要选择不同的选项，我这里选择的是测试包。

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

    以上就是打包iOS包的方法和遇到的一些小问题。

3 Android

安卓模块不是我负责的，我也就没有花太多精力去详细研究，一些配置什么的也就大概说下，具体的配置项需要自己根据自己所处的环境进行配置。我就不赘述了。
3.1 配置环境

    1.安装Java的JDK，并配置好环境变量。

    2.安装工程需要版本的AndroidSDK，并配置好环境变量；这里JDK和andriodSDK的安装和配置都很重要，必须安装好JDK和AndroidSDK，才可以进行下面的打包，否则是打不了包的。

3.2 打包
    在终端进入工程目录下，进行编译

$ ionic build android

    注意：这里会提示你安装部分版本的Android SDK，按照上面的步骤跟着安装就可以，之后重新编译一下。

    编译之后可以选择在模拟器上运行或者是在真机上运行。（需要先新建虚拟机/连接手机，新建方法：打开Android SDK安装目录下的AVD Manager.exe选择新建）

$ ionic run android

    同样，iOS中出现的问题，Android也出现了。

    只需要在platform -> Android-> AndroidManifest.xml中，添加上以下一些权限设置的代码即可：

    以上就是整个Ionic的前后端简单交互与打包了。项目要是有需求的话可以评论留言跟我要。不过这个项目比较简单，跟着一步一步走很快就可以搞定的。要是大家在这里发现什么问题，请私信或者评论告诉我，让我也学习学习。