专栏首页葡萄城控件技术团队实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

实战使用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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App

    费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app。 我们基于《Mobile first! Wijmo 5 ...

    葡萄城控件
  • C#开发人员应该知道的13件事情

    本文讲述了C#开发人员应该了解到的13件事情,希望对C#开发人员有所帮助。 1. 开发过程 开发过程是错误和缺陷开始的地方。使用工具可以帮助你在发布之后,解决掉...

    葡萄城控件
  • Webpack 4教程 - 第七部分 减少打包体积与Tree Shaking

    在本次Webpack 4教程中,我们会更进一步讲述项目优化。我们会学习什么是tree shaking以及如何使用它。你会找到让Webpack 4中tree sh...

    葡萄城控件
  • Nginx性能优化

    当我需要进行性能优化时,说明我们服务器无法满足日益增长的业务。性能优化是一个比较大的课题,需要从以下几个方面进行探讨

    Cyylog
  • HIVE入门_2

    HIVE 是数据仓库,本质上也是数据库。 数据仓库 概念 就是一个数据库。 数据仓库是一个面向主题的(商品的推荐系统内容是商品的信息)、集成的(分散型地...

    用户1147754
  • Docker 远程连接 -- dockerd 命令详解

    配置 TLS 实现安全的 Docker 远程连接。 GitHub:https://github.com/khs1994-docker/dockerd-tls 本...

    康怀帅
  • axios进阶之路——封装篇

    一般情况下,一个项目的所有请求都会由一个统一的基础路径加上不同的接口路径和接口名组成,并且大部分接口都会有统一的请求或者响应处理,例如返回不同code值,要做响...

    流眸
  • FPGA基础知识极简教程(2)抛却软件思维去设计硬件电路

    学过一门或多门软件语言的数字设计初学者经常会犯一些错误 ,例如硬件语言的并发性,可综合以及不可综合语句区分,循环语句的使用等等。本文的建议将带你区别并扫除这些易...

    Reborn Lee
  • Android开发者的Flutter入门(二)

    上篇文章Android开发者的Flutter入门(一)讲解了用Flutter开发一个简单的新闻app的大体流程以及主要功能的实现。其中略过了一些功能的实现细节。...

    HowHardCanItBe
  • Jenkins初级使用过程中的异常处理(1)

    在使用Jenkins一些基本功能的时候,或者说是基本插件的时候,会遇到各种各样的报错。这里就设想模拟一下,重现一下以前遇到过的问题,记录一下。虽说是Jenkin...

    一夕如环

扫码关注云+社区

领取腾讯云代金券