博客園UAP版開發心得之推薦應用的實現


   最近做了一個博客園UAP升級項目,增加了一些新的功能,下面簡單說一下都有什么新功能在等着我們,並且着重介紹一下推薦應用的實現過程,希望能給一些感興趣的博友們一些幫助:)

 

1.在首頁增加了"熱門"和"精選"的快速訪問入口,省了好多事兒

 

 

2.可以離線收藏文章啦(離線所有的文字內容)

 

3.實現透明磁貼,去開始屏幕看看吧

 

4.在博主頁面二級菜單里面增加了"查找博主"的功能菜單,找人再也不費勁兒了 

 

5.在欄目中增加幾個推薦應用,馬上去看看有哪些有意思的應用吧

 

 

  下面我們重點說一下增加的推薦應用的實現過程,我們利用Web API + Cloud實現薦應用的服務器端的控制,Web API大家可能並不陌生,國內外介紹Web API的文章有很多,在這里我就不詳細的介紹了,簡單地介紹一下服務器端如何實現推薦頻道,從sql server到Web API再到cnblogs客戶端的整體實現過程

 

一、SQL Server數據庫的創建

 

  在SQL Server數據庫中創建一個名為CnblogsDB的數據庫實例,創建一個名為Cnblogs_Recommend_Columns的數據庫表字段包括Id,Quick,Icon,Name,Desc,Page,Color,Language等,我們不必關心具體字段的含義。

 

 

創建數據庫表Cnblogs_Recommend_Columns的腳本如下

 

CREATE TABLE [dbo].[Cnblogs_Recommend_Columns]

(

[Id] INT NOT NULL PRIMARY KEY IDENTITY (1, 1),

[Quick] VARCHAR(50) NULL,

[Icon] VARCHAR(200) NULL,

[Name] NVARCHAR(50) NULL,

[Desc] VARCHAR(500) NULL,

[Page] VARCHAR(100) NULL,

[Color] VARCHAR(10) NULL,

[Language] VARCHAR(10) NULL

)

 

insert into [dbo].[Cnblogs_Recommend_Columns]([Quick],[Icon],[Name],[Desc],[Page],[Color],[Language])

values ('false','Images/bingdicticon.png',N'必應詞典',N'推薦應用','ms-windows-store:navigate?appid=71bbd0fd-23e8-4157-ab29-a1cbd82e425b','#AA7EAE','zh-CN')

insert into [dbo].[Cnblogs_Recommend_Columns]([Quick],[Icon],[Name],[Desc],[Page],[Color],[Language])

values ('false','Images/bingdicticon.png','BingDict','Recommendations','ms-windows-store:navigate?appid=71bbd0fd-23e8-4157-ab29-a1cbd82e425b','#AA7EAE','en-US')

insert into [dbo].[Cnblogs_Recommend_Columns]([Quick],[Icon],[Name],[Desc],[Page],[Color],[Language])

values ('false','Images/coupleticon.png',N'微軟對聯',N'推薦應用','ms-windows-store:navigate?appid=25035c46-0362-40b9-9c84-fd4a3cafe4df','#AA7EAE','zh-CN')

insert into [dbo].[Cnblogs_Recommend_Columns]([Quick],[Icon],[Name],[Desc],[Page],[Color],[Language])

values ('false','Images/coupleticon.png','Couplet','Recommendations','ms-windows-store:navigate?appid=25035c46-0362-40b9-9c84-fd4a3cafe4df','#AA7EAE','en-US')

insert into [dbo].[Cnblogs_Recommend_Columns]([Quick],[Icon],[Name],[Desc],[Page],[Color],[Language])

values ('false','Images/doubanicon.png',N'豆瓣一刻',N'推薦應用','ms-windows-store:navigate?appid=ed23f20b-3b0d-4efb-97f8-e70ef709b31b','#AA7EAE','zh-CN')

insert into [dbo].[Cnblogs_Recommend_Columns]([Quick],[Icon],[Name],[Desc],[Page],[Color],[Language])

values ('false','Images/doubanicon.png','BouBan','Recommendations','ms-windows-store:navigate?appid=ed23f20b-3b0d-4efb-97f8-e70ef709b31b','#AA7EAE','en-US')

insert into [dbo].[Cnblogs_Recommend_Columns]([Quick],[Icon],[Name],[Desc],[Page],[Color],[Language])

values ('false','Images/riddleicon.png',N'微軟字謎',N'推薦應用','ms-windows-store:navigate?appid=4a54f6f0-d387-4517-8026-dd8b93bcdf19','#AA7EAE','zh-CN')

insert into [dbo].[Cnblogs_Recommend_Columns]([Quick],[Icon],[Name],[Desc],[Page],[Color],[Language])

values ('false','Images/riddleicon.png','Riddle','Recommendations','ms-windows-store:navigate?appid=4a54f6f0-d387-4517-8026-dd8b93bcdf19','#AA7EAE','en-US')

 

二、Web API的實現與部署

 

1.創建一個Web API 項目,命名為CNBlogsWebAPI

 

 

2.在Models文件夾中創建一個LINQ to SQL Classes,名為CnblogsDB.dbml,雙擊打開主文件

3.利用VS的Server Explorer與數據庫連接,並且打開,拖拽表Cnblogs_Recommend_Columns進入CnblogsDB.dbml

4.在Controllers文件夾增加一個RecommendController類

類的代碼如下

using CNBlogsWebAPI.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Text;

using System.Web.Http;

using System.Xml.Serialization;

namespace CNBlogsWebAPI.Controllers

{

[RoutePrefix("api/cnblogs")]

public class RecommendController : ApiController

{

CnblogsDBDataContext _db = new CnblogsDBDataContext();

[Route("recommendcolumns/{language}")]

[HttpGet]

public IHttpActionResult GetRecommendColumns(string language)

{

if (string.IsNullOrEmpty(language)) language = "zh-CN";

var result = _db.Cnblogs_Recommend_Columns.Where(c => c.Language.ToLower() == language.ToLower());

return Ok(

new

{

Columns = result.ToList()

});

}

 

protected override void Dispose(bool disposing)

{

base.Dispose(disposing);  

if (_db != null)

{

this._db.Dispose();

}

}

}

}

 

測試一下,運行CNBlogsWebAPI會出現如下見面

 

 

不過,沒關系,我們可以根據RoutePrefix和Route拼接出如下的鏈接http://localhost:34023/api/cnblogs/recommendcolumns/zh-CN,然后在地址欄中輸入這個鏈接,回車,值得一提的是用IE瀏覽器打開會返回一個Json串,據說用火狐返回是XML格式(本人不用火狐的,所以並沒有驗證過,感興趣的朋友可以自己試試)

 

5.至於部署,采用IIS托管即可,博客園UAP是在雲服務器上部署的

 

三、Cnblogs WP客戶端調用

 

接下來到了最關鍵的一步了,那就是在APP中如何調用,說起來介紹這方面的文章在網上一搜一大把,在這里也不贅述了,直接上Code(這段代碼僅為示例)

using Windows.Web.Http;

public async static Task GetColumns()

{

var rootUrl = "http://localhost:34023/";

var url = rootUrl + "api/cnblogs/recommendcolumns/" + System.Globalization.CultureInfo.CurrentCulture.Name;

var client = new HttpClient();

var request = new HttpRequestMessage(HttpMethod.Get, new Uri(url));

var response = await client.SendRequestAsync(request);

if (response.StatusCode == HttpStatusCode.Ok)

{

var result = response.Content;//此處為返回結果,Json格式

}

}

通過如上的方法調用,我們得到了result,結果是Json格式的數據,得到了數據,就是我們為所欲為,大顯身手的時候啦,最好是Json to object,這樣我們就可以更好地與XAML界面Binding啦,最后的結果大家已經看到了,就是紅色方框里的嘍


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM