Real-life use of axure design app, using Webstorm development (6) – Towards the backend

Series Articles

Use axure to design apps, use Webstorm development (1) – Describe requirements with axure

Use axure to design the app, use Webstorm development (2) – Create a Ionic project

Use axure to design apps, use Webstorm development (3) – Build page schemas

Use Axure to design apps, use Webstorm development (4) – Implement page UI

Use Axure to design the app, use Webstorm development (5) – Achieve page functionality

Real-life use of axure design app, using Webstorm development (6) – Towards the backend

Connected to a series of articles, in this article, will connect the backend service, realize the user login function, and remove the front-end MOCKDB, using the server-side data. While moving to the backend, it also describes how to use the Chrome cross-domain plugin to request cross-domain data in the browser and simulate the app's data requests. Server-Side Select the Nodejs Express Framework, it is convenient to turn the original MOCKDB into a server-side restful Service.

App Service side

We chose Express as the service-side technology of the app, and express needed to install the Nodejs first, and the Nodejs was already installed in the previous Ionic installation section. The next step is to install Express, the Official Express: http://expressjs.com/installation method is very simple, create a new server-side project folder, such as Deliverappserver, and then the console CD into this folder, Execute NPM Install Express-–save. Here we mainly to build a simulation server side, the server side does not have access to the database, no specific business logic, just return the static JSON, the purpose is to let the app get HTTP request data. Complete development work for all apps.

NPM Install Express–-save

Next Test, create a new app.js to write a simple HelloWorld

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

App.get (/, function (req, res) {
  Res.send (Hello world!);
});

var server = App.listen (, function () {
  var host = Server.address (). Address;
  var port = server.address (). Port;

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

Then execute:

Node App.js

You can see that the server side of the app is turned on. Next, you can start implementing the server-side restful API. The Express framework is very easy to use, and with App.get app.post you can implement an HTTP method definition. As login this definition:

App.post ("/login", Function (req, res) {
    Res.json ({success:true, data: {authenticationtoken: "Abc01234567890defgh"}});
});

The HTTP POST method, the requested URL is/login, directly returns the login success information. In the actual project, this place is back-end business logic, according to the request of the user name and password to check the user information, here is the simulation backend service, so directly returned to the login success. Authenticationtoke is a successful user login token, in each subsequent HTTP request, will be carried in the header of the HTTP request, because the HTTP protocol is stateless, so in every request with Authenticationtoken, The server knows who the user is currently visiting. If the HTTP header does not have a valid authenticationtoken, which means that the HTTP request is an illegal user, you need to return 403 and other status codes.

All server-side RESTful API has been written, mainly to the original front-end MOCKDB, moved to the back end, and then configure the URL routing information, basically no changes, has been placed in the final download link in this article, you can download directly, using node app.js to open the service.


Front-end Refactoring

Services.js need big change, need to delete mockdb, use $http to obtain data from the backend, there is a BuildUrl method in Commonservice, just fill in the relative URL, when the server side is published, It is convenient to point to the actual domain name on the server side.

Requests in orderservice, such as the All method, are used directly:

Return $http. Get (Commonservice.buildurl (orders));

You can turn the original MOCKDB request to the server-side request for HTTP. If you use Ionic emulate iOS

Ionic emulate iOS

can be accessed directly:


But if you use a browser to debug, you'll see the browser's cross-domain request interception in the console:


Due to the security standards of the Web, the HttpRequest cross-domain request, the need to set up allow-control-allow-origin, because we will eventually publish a separate application, so there is no cross-domain browser restrictions. But in order to debug in the browser, so you need to temporarily add this HTTP header settings, Chrome plug-in can solve the problem:


Once installed, an icon will appear on the browser to turn on this feature.


This allows the data to be requested to the backend. Other HTML code and Controller code basically does not change, mainly the code in the Services.js to modify, directly using $http to obtain data. In order to realize the need to log in, you can see the requirements of the page, to add a limit in App.run:

$rootScope. $on ("$stateChangeStart", Function (event, tostate, Toparams, FromState, Fromparams) {
      if (Authenticationservice.isneedlogin (tostate.data) &&! Authenticationservice.islogin ()) {
          Event.preventdefault ();
          $state. Go ("login");
      }
  });

This way, when the user is not logged in, is not able to access the other pages, will be redirected to login, and here the series of articles are all finished. The final code is in: Https://github.com/zhangsichu/DeliveryApp/releases/tag/Final can be downloaded to. You can also use git checkout Final

git checkout Final

Code warehouse GitHub Address: https://github.com/zhangsichu/DeliveryApp

Original link: http://zhangsichu.com/blogview.asp?Content_Id=160

Real-life use of axure design app, using Webstorm development (6) – Towards the backend