nodejs + jquery Mobile構建一個簡單的移動web (用戶端)

標籤：des   style   c   class   blog   code   

前面展示了使用nodejs技術和jqm來搭建一個簡單的支援CRUD操作應用的服務端部分(參見:nodejs + jquery Mobile構建一個簡單的移動web(服務端) ),服務端採用nodejs技術實現，使用了mongodb資料庫和輕量級web開發架構expressJS, 路由使用restful風格，所以你也可以使用restify來開發。

用戶端的實現主要通過ajax調用實現.使用jade模板引擎.

用戶端主要包含兩個檔案：layout.jade和index.jade

1. layout.jade 布局檔案，包含應用所需的的js和css檔案

!!! 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 主介面檔案，應用採用多頁面設計

  a. 首頁面

 

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(var index=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. 視圖頁面，用於查看指定的對象

 

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.添加新對象頁面

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. 通過ajax請求資料部分,監聽頁面的beforepageshow事件，在指定頁面被載入時候處理資料的初始化工作,關於beforepageshow事件參考jqm文檔

script  var mdstore = {};  $(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(var index=0; index < data.length; index++) {              $("#fruitsList").append(‘<li><a href="#fruitview",id="‘ + data[index]._id + ‘"><img src="1.png" /><h3>‘ + data[index].title + ‘</h3><p>‘ + data[index].content + ‘</p></a></li>‘);            }            $("#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        });      });    function onSuccess(data) {      $(‘#info‘).html(data.message);      $.mobile.changePage(‘#msgDialog‘, {transition : ‘slidedown‘, role : ‘dialog‘});    };  });

View Code

 

例子下載  

說明： 例子包含index.js 服務端檔案，views檔案夾包含index.jade等視圖（頁面)檔案 , public檔案夾只包含一張圖片

如果你想運行該檔案 你需要安裝一些nodejs模組 ：

  mongoose ， jade ， mongodb 和 expressjs（3.x）

同時保證mongodb資料服務已經啟動，然後再cmd切換到index.js 所在的目錄，輸入 node index.js 

訪問通過: http://127.0.0.1:8888