Nodejs + jquery Mobile builds a simple mobile web (client)

The previous section shows the use of Nodejs technology and JQM to build a simple service-side portion of a crud-enabled application (see: Nodejs + jquery Mobile builds a simple mobile web (server side)), and the server is implemented with NODEJS technology, Using the MongoDB database and the Lightweight web development Framework EXPRESSJS, routing uses restful style, so you can also use restify to develop.

The implementation of the client is implemented primarily through AJAX calls. Use the Jade template engine.

The client consists of two files: Layout.jade and Index.jade

1. Layout.jade layout file, including JS and CSS files required by the application

!!! 5HTML  head    title= ' NODEJSJQM '    meta (name= ' viewport ', content= ' width=device-width, Initial-scale=1 ')    meta (name= ' apple-mobile-web-app-capable ', content= ' yes ')    meta (name= ' Apple-mobile-web-app-status-bar-style ', content= ' Black ')    link (rel= ' stylesheet ', href= '/http Code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css ')    script (src= ' http://code.jquery.com/ Jquery-1.9.1.min.js ')    script (src= ' http://code.jquery.com/mobile/1.4.2/ Jquery.mobile-1.4.2.min.js ')  body! = Body

2.index.jade main interface file, application with multi-page design

A. First page

Div#index (data-role= ' page ') div (data-role= ' header ', data-theme= ' B ') H1 NodeJs and JQM A.ui-btn-right (href= ' #add ', data-icon= ' plus ') Add div (Data-role= ' content ') UL (Data-role= ' ListView ', data-inset= ' true ', id= ' fruitslist ')      - for(varindex=0; index<fruits.length; index++) {Li A (href= ' #fruitview ', id=fruits[index]._id) img (src= ' 1.png ') H3=Fruits[index].title P=fruits[index].content-} div (Data-role= ' footer ', data-position= ' fixed ') div (data-role= ' NavBar ', data-theme= ' B ') ul Li A (href= ' #index ', data-theme= ' B ') Home li A (href= ' # ', data-theme= ' B ') Blog li A (href= ' # ', data-theme= ' B ') Email

B. View page to view the specified object

Div#fruitview (data-role= ' page ') div (data-role= ' header ', data-theme= ' B ') A (data-rel= ' Back ', data-icon= ' back ', data-derection= ' reverse ') back H1 Fruit View div (data-role= ' content ') div (data-role= ' Filedcontain ') Label ( for= ' Ftitle ') title:h1#ftitle Div (Data-role= ' Filedcontain ') Label ( for= ' Fdesc ') Desc:p#fdesc Div.ui-bar (data-role= ' footer ', data-theme= ' B ', data-position= ' fixed ') div (data-role= ' Controlgroup ', data-type= ' horizontal ') A (href= ' #editfruit ', data-icon= ' gear ', data-transition= ' Flip ') Edit a (href= ' #confirmDialog ', data-icon= ' delete ', data-rel= ' dialog ') delete

C. Adding a new object page

Div#add (data-role= ' page ') div (data-role= ' header ', data-theme= ' B ') A (data-rel= ' Back ', data-icon= ' back ', data-derection= ' reverse ') Back H1 Add fruit A (href= ' #add ', data-icon= ' plus ') Add Div (Data-role= ' content ') div (data-role= ' Filedcontain ') Label ( for= ' Fruit-title ') title input (type= ' text ', value= ', id= ' fruit-title ', name= ' Fruit-title ') div (data-role= ' Filedcontain ') Label ( for= ' Fruit-content ') content input (type= ' text ', value= ', id= ' fruit-content ', name= ' fruit-content ') div (data-role= ' footer ', data-position= ' fixed ', data-theme= ' B ') A#save-btn (href= ' # ', data-icon= ' check ') Save

D. Request data part through Ajax, listen to the Beforepageshow event of the page, process the initialization of the data when the specified page is loaded, about the Beforepageshow event reference JQM document

ScriptvarMDStore = {}; $(function() {    $("#fruitsList"). Delegate (' A ', ' click ',function(e) {Mdstore.selectedid= This. ID;    }); $("#index"). Bind (' Pagebeforeshow ',function(E, UI) {$.get (' Fruits/list '        , function(data) {$ ("#fruitsList"). empty ();  for(varindex=0; Index < data.length; index++) {              $("#fruitsList"). Append (' <li><a href= ' #fruitview ", id=" ' + data[index]._id + ' "> ); }            $("#fruitsList"). ListView (' Refresh ');    }        );    }); $("#add"). Bind (' Pagebeforeshow ',function(E, UI) {$ ("#fruit-title"). Val ('); $("#fruit-content"). Val (');    }); $("#fruitview"). Bind (' Pagebeforeshow ',function(E, UI) {$ ("#ftitle"). HTML ('); $("#fdesc"). HTML ('); $.get (' fruits/' + Mdstore.selectedid,function(data) {$ ("#ftitle"). HTML (data.title); $("#fdesc"). HTML (data.content);    });    }); $("#editfruit"). Bind (' Pagebeforeshow ',function(E,ui) {$ ("#edit-fruit-title"). Val ('); $("#edit-fruit-desc"). Val ('); $.get (' fruits/' +mdstore.selectedid,function(data) {$ ("#edit-fruit-desc"). Val (data.content); $("#edit-fruit-title"). Val (Data.title);      });    }); $("#save-btn"). Bind (' click ',function(e) {$.post (' Fruits ', {title: $ ("#fruit-title"). Val (), content:$ (' #fruit-content '). Val ()}, onsuccess,' JSON '      );    }); $(' #edit-save '). Bind (' click ',function(e) {$.ajax ({type:' PUT ', URL:' fruits/' +Mdstore.selectedid, data:{title:$ ("#edit-fruit-title"). Val (), content:$ ("#edit-fruit-desc"). Val ()}, Success:onsuccess, DataType:' JSON '        });         }); $(' #btnDel '). Bind (' click ',function(e) {$.ajax ({type:' DELETE ', URL:' fruits/' +Mdstore.selectedid, success:onsuccess});    }); functiononsuccess (data) {$ (' #info '). HTML (data.message); $.mobile.changepage (' #msgDialog ', {transition: ' Slidedown ', Role: ' Dialog '});  }; });

View Code

Example download

Description: Example contains index.js server file, Views folder contains view (page) files such as Index.jade, public folder contains only one picture

If you want to run the file you need to install some NODEJS modules:

Mongoose, Jade, MongoDB and Expressjs (3.x)

Also ensure that the MongoDB data service is started, and then CMD switches to the directory where the Index.js is located, enter node Index.js

Access by: http://127.0.0.1:8888