实战使用Axure设计App,使用WebStorm开发(6)

系列文章

实战使用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的官方地：安装方法非常简单，新建一个Server端的项目文件夹，比如DeliverAppServer，然后控制台 cd 进入这个文件夹，执行 npm install express -–save 就可以了。这里咱们主要去搭建一个模拟的Server端，这个Server端没有访问数据库，没有具体的业务逻辑，只是返回静态的JSON，目的是让App得到Http请求过来的数据。完成所有App的开发工作。

npm install express –-save

这样数据就可以请求到后端了。其它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

原文链接：?Content_Id=160

会让你的心态更平和更坦然，也会让你心无旁骛，更会让你的心灵得到解脱和抚慰。

相关文章：

你感兴趣的文章：

标签云：