日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

新聞中心

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

之前曾報(bào)導(dǎo)過如何在Windows Azure云上托管SilverLight應(yīng)用，本文的內(nèi)容則是教您如何在Windows Azure云中托管jQuery應(yīng)用，在這篇文章中，假設(shè)你從未使用過Windows Azure，我會(huì)盡量詳細(xì)地向你展示在云中托管一個(gè)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è)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

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

1、注冊(cè)Windows Azure賬號(hào)

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

3、安裝Windows Azure Tools for Visual Studio

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

5、部署云服務(wù)

注冊(cè)Windows Azure賬號(hào)

進(jìn)入http://www.microsoft.com/windowsazure/，點(diǎn)擊注冊(cè)按鈕，選擇特別推薦(Introductory Special)產(chǎn)品，因?yàn)樗敲赓M(fèi)的，我也只不過是想體驗(yàn)一下Windows Azure而已。

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

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

訪問開發(fā)者門戶

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

http://windows.azure.com/

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

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

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

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

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

因?yàn)槲覀兪窍朐谠浦型泄芊?wù)，因此選擇“托管服務(wù)”選項(xiàng)，你需要為這個(gè)服務(wù)取一個(gè)名字，并添加適當(dāng)?shù)拿枋鲂畔ⅰ?/p>

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

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

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

#p#

安裝Windows Azure Tools for Visual Studio

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

 
圖6 點(diǎn)擊Get Tools and SDK按鈕下載

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

 
圖7 安裝Windows Azure Tools for Visual Studio

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

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

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

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

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

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

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

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

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

一切準(zhǔn)備就緒后，我們就來創(chuàng)建一個(gè)超簡(jiǎn)單的jQuery應(yīng)用程序，顯示從一個(gè)WCF服務(wù)(托管到云中的)檢索到的記錄集。在WebRole1項(xiàng)目中創(chuàng)建一個(gè)新頁(yè)面，保存為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代碼簡(jiǎn)單顯示了一個(gè)產(chǎn)品清單，我使用了一個(gè)jQuery模板格式化每個(gè)產(chǎn)品。

    按F5測(cè)試一下Default.htm頁(yè)面工作是否正常，這里因?yàn)槭窃诒緳C(jī)測(cè)試，因此需要用本地?cái)?shù)據(jù)庫(kù)模擬云存儲(chǔ)，運(yùn)行后，你將看到如下圖所示的頁(yè)面。

     
    圖11 本機(jī)模擬運(yùn)行效果

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

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

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

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

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

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

     
 
 
 
      
  
  
  
  
    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í)中，我們都是從數(shù)據(jù)庫(kù)中提取數(shù)據(jù)的，為了偷懶我這里使用了一個(gè)數(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項(xiàng)目上點(diǎn)擊右鍵，選擇“發(fā)布”。

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

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

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

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

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

     
    圖16 準(zhǔn)備部署

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

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

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

     
    圖18 正在部署

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

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

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

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

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

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

     
    圖20 訪問云中的頁(yè)面

    小結(jié)

    因?yàn)槲覀兪菑牧汩_始的，因此本文介紹了如何創(chuàng)建Windows Azure賬號(hào)，創(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的***好處是允許我們進(jìn)行動(dòng)態(tài)擴(kuò)展，如果我們的jQuery應(yīng)用突然受到熱捧，Windows Azure允許我們向上擴(kuò)展以滿足需要。


    新聞標(biāo)題：WindowsAzure云中托管jQuery應(yīng)用實(shí)例
    網(wǎng)站網(wǎng)址：http://www.dlmjj.cn/article/djggojj.html