最近做了一個博客園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啦,最后的結果大家已經看到了,就是紅色方框里的嘍