Windows Azure云中托管jQuery應(yīng)用實(shí)例
51CTO之前曾報(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)用程序所需的全部步驟。
關(guān)于jQuery，51CTO推薦專題： jQuery從入門到精通
為了更方便說明，本文使用的應(yīng)用程序只有一個(gè)HTML頁面和一個(gè)服務(wù)，HTML頁面將會(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ù)，在摘要頁面點(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ū)，我選擇的是“美國任何地方(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è)新頁面，保存為Default.htm，添加下面的代碼：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Products</title>
- <style type="text/css">
- #productContainer div {
- border:solid 1px black;
- padding:5px;
- margin:5px;
- }
- </style>
- </head>
- <body>
- <h1>Product Catalog</h1>
- <div id="productContainer"></div>
- <script id="productTemplate" type="text/html">
- <div>
- Name: {{= name }} <br />
- Price: {{= price }}
- </div>
- </script>
- <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
- <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
- <script type="text/javascript">
- var products = [
- {name:"Milk", price:4.55},
- {name:"Yogurt", price:2.99},
- {name:"Steak", price:23.44}
- ];
- $("#productTemplate").render(products).appendTo("#productContainer");
- </script>
- </body>
- </html>
#p#
Product Catalog
這里的jQuery代碼簡(jiǎn)單顯示了一個(gè)產(chǎn)品清單，我使用了一個(gè)jQuery模板格式化每個(gè)產(chǎn)品。
按F5測(cè)試一下Default.htm頁面工作是否正常，這里因?yàn)槭窃诒緳C(jī)測(cè)試，因此需要用本地?cái)?shù)據(jù)庫模擬云存儲(chǔ)，運(yùn)行后，你將看到如下圖所示的頁面。
圖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)目
- ProductService.svc的代碼如下：
- using System.Collections.Generic;
- using System.ServiceModel;
- using System.ServiceModel.Activation;
- namespace WebRole1 {
- public class Product {
- public string name { get; set; }
- public decimal price { get; set; }
- }
- [ServiceContract(Namespace = "")]
- [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
- public class ProductService {
- [OperationContract]
- public IList SelectProducts() {
- var products = new List();
- products.Add(new Product {name="Milk", price=4.55m} );
- products.Add(new Product { name = "Yogurt", price = 2.99m });
- products.Add(new Product { name = "Steak", price = 23.44m });
- return products;
- }
- }
- }
現(xiàn)實(shí)中，我們都是從數(shù)據(jù)庫中提取數(shù)據(jù)的，為了偷懶我這里使用了一個(gè)數(shù)組。接下來就要修改Default.htm，讓它使用ProductService.svc，更新Default.htm中的jQuery代碼，讓它調(diào)用WCF服務(wù)，數(shù)據(jù)從ProductService.svc檢索。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Products</title>
- <style type="text/css">
- #productContainer div {
- border:solid 1px black;
- padding:5px;
- margin:5px;
- }
- </style>
- </head>
- <body>
- <h1>Product Catalog</h1>
- <div id="productContainer"></div>
- <script id="productTemplate" type="text/html">
- <div>
- Name: {{= name }} <br />
- Price: {{= price }}
- </div>
- </script>
- <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
- <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
- <script type="text/javascript">
- $.post("ProductService.svc/SelectProducts", function (results) {
- var products = results["d"];
- $("#productTemplate").render(products).appendTo("#productContainer");
- });
- </script>
- </body>
- </html>
#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è)頁面是托管到云Windows Azure中的，每次請(qǐng)求這個(gè)頁面時(shí)，WCF服務(wù)就執(zhí)行一次，檢索出產(chǎn)品清單。
圖20 訪問云中的頁面
小結(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ò)展以滿足需要。
【編輯推薦】
