Condividi tramite


博客园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拼接出如下的链接https://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 = "https://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啦,最后的结果大家已经看到了,就是红色方框里的喽