实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

系列文章

实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 

实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目  

实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构 

实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI

实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

接上一篇系列文章,在本文中,将连接后端服务,实现用户登录功能,并去掉前端的MockDB,使用服务器端的数据。在迈向后端的同时,同时介绍如何使用Chrome跨域插件,在浏览器中请求跨域数据,模拟App的数据请求。服务器端选择了NodeJS的Express框架,很方便的就把原来的MockDB变成了服务器端的RESTful Service。

App服务端

咱们选择了Express作为App的服务端技术,Express需要先安装NodeJS,在之前的Ionic安装部分,已经安装好了NodeJS。接下来就是安装Express了,Express的官方地: http://expressjs.com/ 安装方法非常简单,新建一个Server端的项目文件夹,比如DeliverAppServer,然后控制台 cd 进入这个文件夹,执行 npm install express -–save 就可以了。这里咱们主要去搭建一个模拟的Server端,这个Server端没有访问数据库,没有具体的业务逻辑,只是返回静态的JSON,目的是让App得到Http请求过来的数据。完成所有App的开发工作。

npm install express –-save

接下来测试一下,新建一个 app.js 写一个简单的 HelloWorld

var express = require(express);var app = express();

app.get(/, function (req, res) {  res.send(Hello World!);});

var server = app.listen(3000, function () {  var host = server.address().address;  var port = server.address().port;

  console.log(Example app listening at http://%s:%s, host, port);});

然后执行:

node app.js

可以看到App的Server端已经开启了。接下来就可以开始实现Server端的RESTful API了。Express 框架非常的简单易用,使用 app.get app.post 就可以实现一个Http的Method定义。如 login 这个定义:

app.post("/login", function (req, res) {    res.json({success: true, data: {authenticationToken: "abc01234567890defgh"}});});

Http的Post方法,请求的Url是 /login,直接返回登陆成功信息。在实际的项目中,这个地方是后端的业务逻辑,根据请求中的用户名和密码去检查用户信息,这里是模拟后端服务,所以直接返回了登陆成功。authenticationToke 是用户登陆成功的令牌,在后面的每次Http请求中,都会带在Http请求的Header中,由于Http协议是无状态的,所以在每次请求中都带上 authenticationToken,服务器就知道当前访问的用户是谁了。如果Http Header中没有有效的 authenticationToken 也就是说明Http请求的是非法用户,需要返回403 等其它状态码。

所有的Server端RESTful API已经写好了,主要是把原来前端的MockDB,搬移到了后端,然后配置了URL路由信息,基本没有改动,已经放在了本文最后的下载链接里了,你可以直接下载,使用 node app.js 开启服务。


前端重构

services.js 需要大的改动,需要删除MockDB, 使用 $http 从后端取得数据,在CommonService中有一个buildUrl方法,只要填写相对Url就可以了,当Server端发布以后,可以方便的指向Server端实际的域名。

OrderService 中的请求如all 方法,直接使用:

return $http.get(CommonService.buildUrl(orders));

就可以将原来的MockDB请求转向了Http的Server端请求。如果你使用 ionic emulate ios

ionic emulate ios

是可以直接访问的:

但是如果你使用浏览器来调试,你会在控制台看到浏览器的跨域请求拦截:

由于W3C的安全标准,Web的HttpRequest跨域请求,需要设置Allow-Control-Allow-Origin,由于咱们最后会发布一个单独的应用,所以没有浏览器的跨域限制。但是为了在浏览器里进行调试,所以需要暂时添加这个Http Header设置,Chrome 的插件可以解决这个问题:

安装好以后,在浏览器上会出现图标,打开此功能。

这样数据就可以请求到后端了。其它html的代码和controller的代码基本不用变化,主要是吧 services.js 里的代码修改一下,直接使用$http去取得数据。为了实现需要登录后,才能看到页面的需求,要在 app.run 的里加入限定:

$rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {      if (AuthenticationService.isNeedLogin(toState.data) && !AuthenticationService.isLogin()) {          event.preventDefault();          $state.go("login");      }  });

这样当用户没有登录的时候,是不能访问其它页面的,会被重定向到 login, 到这里本系列文章就全部完结了。最终代码在:https://github.com/zhangsichu/DeliveryApp/releases/tag/Final 可以下载到。也可以使用 git checkout Final

git checkout Final

代码仓库的 github 地址:https://github.com/zhangsichu/DeliveryApp

原文链接:http://zhangsichu.com/blogview.asp?Content_Id=160

时间: 2024-10-14 06:07:43

实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端的相关文章

实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构  实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能 接上一篇系列文章,在本文中,将进一步的去实现页面功能.去实现输入

实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI

系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能 接上一篇系列文章,在本文中,将在WebStorm中继续开发,实现页面的功

实战使用Axure设计App,使用WebStorm开发 – 构建页面架构

在本文中,将继续介绍在 WebStorm 中开发,去实现App的功能需求. 就像盖房子一样,第一步需要把整个工程的页面结构先勾勒出来,先让各个页面流转起来,然后再去细化每个页面. 所有工程代码放在了 https://github.com/zhangsichu/DeliveryApp 同时上篇文章中创建的初始化工程,也Tag了 TheInitialProject,您可以使用 Git checkout 这个Tag, 也可以直接到:https://github.com/zhangsichu/Deliv

实战厕所在哪APP视频教程 react native服务端实战项目实战开发教程

一个很好且包含服务端的实战项目视频教程!学习本视频最后有Node基础! ------------------课程目录------------------ <react native 快速开发App>├reactnative厕所在哪源码.zip├<第八章 App阅读模块开发>│  ├8-1 阅读模块功能设计.avi│  ├8-10 列表使用listview组件.avi│  ├8-11 数据列表展示.avi│  ├8-12 完善详情页.avi│  ├8-2 五大模块创建和加载.avi│

使用Axure制作App原型的尺寸设置

想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?这里直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置即可. 如: iPhone4 320*480iPhone5  320*568 iPhone6  375*667 iPhone 6 Plus 414*736 Samsung Galaxy S

上门洗车APP --- Android客户端开发 前言及业务简介

上门洗车APP --- Android客户端开发 前言及业务简介 最近有些小累,私自接了一个项目,利用空余时间在开发,也比较乏力,时间和精力上有时候分配不过来,毕竟公司的事情要忙,只能自己抽时间来完成了,男人嘛,累点好,舒服是留给死人的(套用了一句逼格的话,o_O"~). 项目目前还在开发中,接口的调试以及业务的分析,框架的搭建,客户端这边已进行的差不多了,明天端午节,先祝大家节日快乐,汗~,看了下时间,貌似博客写完发表已经是端午节了,好吧,咕嘟咕嘟...... 大晚上的也是睡不着,写写博客,总

BI之SSAS完整实战教程6 -- 设计维度、细化维度上:创建维度定义特性关系

前面我们使用过数据源向导.数据源视图向导.Cube向导来创建相应的对象. 本篇我们将学习使用维度向导来创建维度. 通过前面几个向导的学习,我们归纳一下共同点,主要分成两步 1. 使用某种对象类型的向导创建对象,完成主要结构搭建 2. 使用相应的设计器完成最终对象的修改和细化 有点像送快递,先通过大的物流(创建对象向导)把货物送到相应的城市,再通过快递员(设计器进行细化)送到具体顾客手中. 同样的,我们使用维度向导以一种通用的方式来创建维度,然后根据自己的业务需求,使用维度设计器将创建的维度放置到

“简密”App Store处女作开发总结

前言 今天是我的iOS App Store上架应用处女作"简密"第一天上线的日子,简密是我从事iOS开发三年以来的第一款个人上架应用,之前做过两年的企业级应用开发以及公司的电商应用开发,有不少应用上架的经验,但要是论全然从头到尾,设计.制图.开发.測试.文案.广告以及部署上架全然由自己一人完毕,"简密"确实是我的处女作.不论上架之后销售效果怎样,这次开发的过程帮我又一次梳理了一遍iOS App Store应用开发上架的整个流程,这点是我认为做这件事意义最大的地方,当

BI之SSAS完整实战教程7 -- 设计维度、细化维度中 :浏览维度,细化维度

上篇文章我们已经将Dim Geography维度设计好. 若要查看维度的成员, AS需要接收该维度的详细信息(包括已创建的特性.成员属性以及多级层次结构), 通过XMLA与AS的实例进行通信. 今天我们将维度部署到AS上进行查看. 文章提纲 补充背景知识 浏览维度,细化维度 总结 补充背景知识 XMLA是一种基于简单对象访问协议(SOAP)的XML应用程序编程接口的行业标准, 设计用于OLAP和数据挖掘. XMLA规范定义了两个函数,即Execute和Discover, 这两个函数用于向主机实例