日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
WindowsAzure云中托管jQuery應(yīng)用實例

之前曾報導(dǎo)過如何在Windows Azure云上托管SilverLight應(yīng)用，本文的內(nèi)容則是教您如何在Windows Azure云中托管jQuery應(yīng)用，在這篇文章中，假設(shè)你從未使用過Windows Azure，我會盡量詳細地向你展示在云中托管一個Web應(yīng)用程序所需的全部步驟。

創(chuàng)新互聯(lián)專注于枝江企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),成都做商城網(wǎng)站。枝江網(wǎng)站建設(shè)公司,為枝江等地區(qū)提供建站服務(wù)。全流程按需開發(fā)，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

關(guān)于jQuery，推薦專題： jQuery從入門到精通

為了更方便說明，本文使用的應(yīng)用程序只有一個HTML頁面和一個服務(wù)，HTML頁面將會包括jQuery代碼調(diào)用這個服務(wù)，檢索并顯示記錄集。托管jQuery程序必須執(zhí)行的五個步驟是：

1、注冊Windows Azure賬號

2、創(chuàng)建一個托管服務(wù)

3、安裝Windows Azure Tools for Visual Studio

4、創(chuàng)建一個Windows Azure云服務(wù)

5、部署云服務(wù)

注冊Windows Azure賬號

進入http://www.microsoft.com/windowsazure/，點擊注冊按鈕，選擇特別推薦(Introductory Special)產(chǎn)品，因為它是免費的，我也只不過是想體驗一下Windows Azure而已。

 
圖1 選擇無需付費產(chǎn)品

注冊Windows Azure賬號需要一個Windows Live ID，并需要輸入信用卡號碼，注冊結(jié)束后，將會收到一封激活賬號的電子郵件。

訪問開發(fā)者門戶

激活賬號后，輸入下面的URL進入Windows Azure開發(fā)者門戶。

http://windows.azure.com/

當(dāng)你***次訪問開發(fā)者門戶時，你將會看到注冊Windows Azure賬號時創(chuàng)建的一個項目，我的項目取名為StephenWalther。

 
圖2 Windows Azure開發(fā)者門戶

創(chuàng)建一個新的Windows Azure托管服務(wù)

在云中托管一個應(yīng)用程序之前，必須先給項目增加一個托管服務(wù)，在摘要頁面點擊你的項目，點擊“新建服務(wù)”鏈接，接著會提示你是創(chuàng)建一個存儲賬號還是創(chuàng)建一個托管服務(wù)。

 
圖3 選擇是創(chuàng)建存儲賬號還是托管服務(wù)

因為我們是想在云中托管服務(wù)，因此選擇“托管服務(wù)”選項，你需要為這個服務(wù)取一個名字，并添加適當(dāng)?shù)拿枋鲂畔ⅰ?/p>

 
圖4 為托管服務(wù)取名并添加描述信息

我這里取名為jQueryApp，接下來要為這個服務(wù)選擇一個地區(qū)，我選擇的是“美國任何地方(Anywhere US)”，***點擊“創(chuàng)建”按鈕創(chuàng)建一個托管服務(wù)。

 
圖5 為托管服務(wù)指定地區(qū)

#p#

安裝Windows Azure Tools for Visual Studio

我們將使用Visual Studio創(chuàng)建jQuery項目，在開始之前必須先安裝Windows Azure Tools for Visual Studio，進入http://www.microsoft.com/windowsazure/，點擊“Get Tools and SDK”下載Windows Azure Tools for Visual Studio，Windows Azure Tools for Visual Studio支持Visual Studio 2008和Visual Studio 2010。

 
圖6 點擊Get Tools and SDK按鈕下載

整個安裝過程非常簡單，你只需要檢查一些參數(shù)復(fù)選框，連續(xù)點擊幾次下一步按鈕便可完成安裝。

 
圖7 安裝Windows Azure Tools for Visual Studio

創(chuàng)建Windows Azure應(yīng)用程序

安裝好Windows Azure Tools for Visual Studio后，點擊“文件”*“新建項目”，選擇“ Windows Azure Cloud Service”創(chuàng)建一個新的Windows Azure云服務(wù)，我將我創(chuàng)建的云服務(wù)取名為jQueryApp。

 
圖8 創(chuàng)建一個名叫jQueryApp的云服務(wù)

接下來需要選擇云服務(wù)項目的類型。

 
圖9 選擇云服務(wù)項目類型

我選擇了“ASP.NET Web Role”，當(dāng)然，如果想將jQuery和ASP.NET MVC結(jié)合起來使用也可以選擇“ASP.NET MVC 2 Web Role”，如果想將jQuery和PHP結(jié)合起來使用，那么可以選擇“CGI Web Role”。

點擊“確定”后，在Visual Studio解決方案資源管理器樹形列表中將會看到兩個新項目，WebRole1項目代表ASP.NET應(yīng)用程序，我們將使用它創(chuàng)建我們的jQuery應(yīng)用程序。

 
圖10 解決方案資源管理器樹形結(jié)構(gòu)

在云中創(chuàng)建一個jQuery應(yīng)用程序

一切準(zhǔn)備就緒后，我們就來創(chuàng)建一個超簡單的jQuery應(yīng)用程序，顯示從一個WCF服務(wù)(托管到云中的)檢索到的記錄集。在WebRole1項目中創(chuàng)建一個新頁面，保存為Default.htm，添加下面的代碼：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.     Products 
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.       
    7.   
  
  
  
  7.         #productContainer div {  
    8.   
  
  
  
  8.             border:solid 1px black;  
    9.   
  
  
  
  9.             padding:5px;  
    10.   
  
  
  
  10.             margin:5px;  
    11.   
  
  
  
  11.         }  
    12.   
  
  
  
  12.           
    13.   
  
  
  
  13.       
    14.   
  
  
  
  14.      
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18.     
    Product Catalog
         
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20.     
 
  •  
  •      
  •  
  •      
  •      
  •  
  •      
  •  
  •  
  •  

    •  #p#

    Product Catalog

    這里的jQuery代碼簡單顯示了一個產(chǎn)品清單，我使用了一個jQuery模板格式化每個產(chǎn)品。

    按F5測試一下Default.htm頁面工作是否正常，這里因為是在本機測試，因此需要用本地數(shù)據(jù)庫模擬云存儲，運行后，你將看到如下圖所示的頁面。

     
    圖11 本機模擬運行效果

    如果Default.htm如預(yù)期那樣工作，你將會看到三個產(chǎn)品。

     
    圖12 運行結(jié)果，顯示了三個產(chǎn)品的產(chǎn)品清單

    添加一個啟用Ajax的WCF服務(wù)

    前面我們創(chuàng)建的jQuery程序太簡單的，數(shù)據(jù)是從一個數(shù)組中提取，是靜態(tài)的，下面我們修改一下代碼，讓它從一個WCF服務(wù)提取數(shù)據(jù)。

    首先給WebRole1項目添加一個新的啟用Ajax的WCF服務(wù)，在菜單中選擇“項目”*“增加新項目”，選擇“Ajax-enabled WCF Service”，將新項目命名為ProductService.svc。

     
    圖13 新建啟用Ajax的WCF服務(wù)項目

     
 
 
 
      
  
  
  
  
    1. ProductService.svc的代碼如下：  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3. using System.Collections.Generic;  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. using System.ServiceModel;  
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. using System.ServiceModel.Activation;  
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9. namespace WebRole1 {  
      10.   
  
  
  
    10.  
      11.   
  
  
  
    11. public class Product {  
      12.   
  
  
  
    12.  
      13.   
  
  
  
    13. public string name { get; set; }  
      14.   
  
  
  
    14.  
      15.   
  
  
  
    15. public decimal price { get; set; }  
      16.   
  
  
  
    16.  
      17.   
  
  
  
    17. }  
      18.   
  
  
  
    18.  
      19.   
  
  
  
    19. [ServiceContract(Namespace = "")]  
      20.   
  
  
  
    20.  
      21.   
  
  
  
    21. [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]  
      22.   
  
  
  
    22.  
      23.   
  
  
  
    23. public class ProductService {  
      24.   
  
  
  
    24.  
      25.   
  
  
  
    25. [OperationContract]  
      26.   
  
  
  
    26.  
      27.   
  
  
  
    27. public IList SelectProducts() {  
      28.   
  
  
  
    28.  
      29.   
  
  
  
    29. var products = new List();  
      30.   
  
  
  
    30.  
      31.   
  
  
  
    31. products.Add(new Product {name="Milk", price=4.55m} );  
      32.   
  
  
  
    32.  
      33.   
  
  
  
    33. products.Add(new Product { name = "Yogurt", price = 2.99m });  
      34.   
  
  
  
    34.  
      35.   
  
  
  
    35. products.Add(new Product { name = "Steak", price = 23.44m });  
      36.   
  
  
  
    36.  
      37.   
  
  
  
    37. return products;  
      38.   
  
  
  
    38.  
      39.   
  
  
  
    39. }  
      40.   
  
  
  
    40.  
      41.   
  
  
  
    41. }  
      42.   
  
  
  
    42.  
      43.   
  
  
  
    43. } 
      44.

    現(xiàn)實中，我們都是從數(shù)據(jù)庫中提取數(shù)據(jù)的，為了偷懶我這里使用了一個數(shù)組。接下來就要修改Default.htm，讓它使用ProductService.svc，更新Default.htm中的jQuery代碼，讓它調(diào)用WCF服務(wù)，數(shù)據(jù)從ProductService.svc檢索。

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.     Products 
      5.   
  
  
  
    5.      
      6.   
  
  
  
    6.       
      7.   
  
  
  
    7.         #productContainer div {  
      8.   
  
  
  
    8.             border:solid 1px black;  
      9.   
  
  
  
    9.             padding:5px;  
      10.   
  
  
  
    10.             margin:5px;  
      11.   
  
  
  
    11.         }  
      12.   
  
  
  
    12.           
      13.   
  
  
  
    13.       
      14.   
  
  
  
    14.      
      15.   
  
  
  
    15.  
      16.   
  
  
  
    16.  
      17.   
  
  
  
    17.  
      18.   
  
  
  
    18.     
      Product Catalog
            
      19.   
  
  
  
    19.  
      20.   
  
  
  
    20.     
     
  •  
  •      
  •  
  •      
  •      
  •  
  •      
  •  
  •  
  •  

    •  #p#

    將jQuery應(yīng)用程序部署到云中

    現(xiàn)在我們要將創(chuàng)建好的jQuery應(yīng)用程序部署到云中，在jQueryApp項目上點擊右鍵，選擇“發(fā)布”。

     
    圖14 選中項目準(zhǔn)備發(fā)布

    當(dāng)你點擊發(fā)布后，你的應(yīng)用程序和應(yīng)用程序配置信息將被打包成兩個文件，jQueryApp.cspkg和ServiceConfiguration.cscfg，Visual Studio會打開包含這兩個文件的文件夾。

     
    圖15 包含打包文件的文件夾

    為了將這些文件部署到Windows Azure云中，你必須手動上傳它們，進入Windows Azure開發(fā)者門戶http://windows.azure.com/。

    選擇你的項目和jQueryApp服務(wù)，你將會看到一個神秘的立方體，點擊“部署”按鈕上傳你的應(yīng)用程序。

     
    圖16 準(zhǔn)備部署

    接下來要瀏覽到j(luò)QueryApp項目發(fā)布文件所在位置，選擇打包的應(yīng)用程序和應(yīng)用程序配置文件，并為部署取一個名字，然后點擊“部署”按鈕。

     
    圖17 指定應(yīng)用程序和應(yīng)用程序配置文件位置

    應(yīng)用程序部署期間，你將會看到一個進度條。

     
    圖18 正在部署

    在云中運行jQuery應(yīng)用程序

    ***，點擊“運行”按鈕，在運行你的jQuery應(yīng)用程序。

     
    圖19 點擊運行按鈕，開始在云中運行jQuery應(yīng)用程序

    程序初始化可能需要幾分鐘時間，WebRole1完成初始化后，你可以輸入下面的URL訪問你部署到云中的jQuery應(yīng)用程序。

    http://jqueryapp.cloudapp.net/default.htm

    這個頁面是托管到云Windows Azure中的，每次請求這個頁面時，WCF服務(wù)就執(zhí)行一次，檢索出產(chǎn)品清單。

     
    圖20 訪問云中的頁面

    小結(jié)

    因為我們是從零開始的，因此本文介紹了如何創(chuàng)建Windows Azure賬號，創(chuàng)建托管服務(wù)，安裝Windows Azure Tools for Visual Studio，創(chuàng)建jQuery應(yīng)用程序和部署到云中等全部布置，只要經(jīng)歷這一次，要新建或修改現(xiàn)有應(yīng)用程序，重新部署到云中就很容易了。

    jQuery和Windows Azure可以***地融合到一起，因此我們可以使用jQuery構(gòu)建前端Web應(yīng)用程序，在后端通過Windows Azure托管WCF服務(wù)為jQuery應(yīng)用程序提供服務(wù)。Windows Azure的***好處是允許我們進行動態(tài)擴展，如果我們的jQuery應(yīng)用突然受到熱捧，Windows Azure允許我們向上擴展以滿足需要。


    網(wǎng)站欄目：WindowsAzure云中托管jQuery應(yīng)用實例
    網(wǎng)站路徑：http://m.5511xx.com/article/djggojj.html