博客园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啦，最后的结果大家已经看到了，就是红色方框里的喽