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

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

1.实现目标

    目标是搭建一个简单的前后端交互,应用ionic实现一个简单的表单,点击提交按钮,会发送一个请求,并且能在搭建的后端处查看到提交表单上的值。如图:
web学习笔记08-Ionic的前后端简单交互与打包_第1张图片

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

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

web学习笔记08-Ionic的前后端简单交互与打包_第2张图片

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

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

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

web学习笔记08-Ionic的前后端简单交互与打包_第3张图片

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

2.2 编写代码

1 编写页面html代码

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

版本号 :
编码方式 :

结果如图:

web学习笔记08-Ionic的前后端简单交互与打包_第4张图片

2 编写css样式

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

结果如图:

web学习笔记08-Ionic的前后端简单交互与打包_第5张图片

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

    在页面输入姓名,年龄。

web学习笔记08-Ionic的前后端简单交互与打包_第6张图片

    点击提交

web学习笔记08-Ionic的前后端简单交互与打包_第7张图片

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

7.png

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

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

你可能感兴趣的:(web学习笔记,angular,nginx,web,前端,网络)