經過接口調取博客園文章的實現

時間  2020-05-11
標籤 經過 接口 博客 文章 實現 简体版
原文   原文鏈接

經過接口調取博客園文章的實現

註冊了個域名（Nineksy.cn），在阿里雲申請了個雲虛主機。今天域名備案經過了，準備給網站作幾個個頁面，由於博客園用的很順手了就不許備本身內容管理了，準備直接調用博客園的內容。因爲阿里雲的雲虛主機不支持.net core， 但支持.NET Framework，就用.NET MVC 來作。html

1、博客園的接口

博客園開發者中心支持對博客園的各類管理api，返回json格式，不過使用這種接口要申請ApiKey，這是隻是簡單調用一下博客列表和內容，因此使用另外一個簡單的方式http://wcf.open.cnblogs.com/blog/help，這個api較少（以下圖），只是調取一下博客內容頁足夠了。這裏使用的是.net 4.5 MVC項目進行調用。web

2、建立網站

打開VS2019，【文件】->【新建】->【項目】。json

在建立新項目對話框中選擇【ASP.NET Web 應用程序（.NET Framework）】，【下一步】。bootstrap

選擇建立項目
c#

在配置新項目對話框中對項目進行配置。項目名稱輸入「NineskyWeb」；位置是項目源代碼保存的位置，能夠隨便選；解決方案名稱這裏與項目名稱一致。框架選擇「.NET Framework4.5」，由於雲虛主機只支持到4.5。點【建立】。api

在建立新的ASP.NET Web應用程序裏面選擇「MVC」。點擊【建立】。而後等待項目建立完成。瀏覽器

項目建立完成後 點開【解決方案管理器】，能夠看到建立了一個標準的.net mvc 項目（以下圖），無需任何配置，按【F5】便可運行項目。架構

運行後能夠在瀏覽器中能夠看到一個bootstrap風格的頁面。mvc

這個界面有點醜，找個風格稍微美化一下。比上面一個好看了些。框架

3、調用文章

一、添加控制器

在控制器文件夾【Controller】右鍵->【添加】->【控制器】

在添加已搭建基架的新項對話框中選擇【MVC5 控制器-空】，點擊【添加】

在添加控制器名稱中輸入博客控制器名稱，「BlogController」，點擊【添加】

自動建立的代碼以下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace NineskyWeb.Controllers
{
    public class BlogController : Controller
    {
        // GET: Blog
        public ActionResult Index()
        {
            return View();
        }
    }
}

二、接口的返回格式

看一下博客園分頁獲取我的博客文章列表的api：http://wcf.open.cnblogs.com/blog/u/{BLOGAPP}/posts/{PAGEINDEX}/{PAGESIZE}

這裏須要三個參數

BLOGAPP 博客地址
PAGEINDEX 當前頁
PAGESIZE 每頁記錄數

直接在瀏覽其中輸入http://wcf.open.cnblogs.com/blog/u/mzwhj/posts/1/2，看一下返回的xml格式。

<feed xmlns="http://www.w3.org/2005/Atom">
<title type="text">博客園_洞庭夕照</title>
<id>uuid:1ca5ca2a-9303-4ff0-8404-47cf84630ebe;id=9103</id>
<updated>2020-04-26T09:19:20+08:00</updated>
<logo>
file://pic.cnblogs.com/face/132313/20140310231701.png
</logo>
<author>
<name>洞庭夕照</name>
<uri>http://www.cnblogs.com/mzwhj/</uri>
</author>
<postcount>103</postcount>
<entry>
<id>6256307</id>
<title type="text">.Net Core MVC 網站開發（Ninesky） 2.四、添加欄目與異步方法</title>
<summary type="text">
在2.3中完成依賴注入後，此次主要實現欄目的添加功能。按照前面思路欄目有三種類型，常規欄目便可以添加子欄目也能夠選擇是否添加內容，內容又能夠分文章或其餘類型，因此還要添加一個模塊功能。此次主要實現欄目的添加，附帶實現模塊列表功能，並將業務邏輯層的功能都實現了異步方法。 先來個完成後的界面吧。 1、業...
</summary>
<published>2017-01-06T14:55:00+08:00</published>
<updated>2020-04-26T03:36:18Z</updated>
<author>
<name>洞庭夕照</name>
<uri>http://www.cnblogs.com/mzwhj/</uri>
</author>
<link rel="alternate" href="http://www.cnblogs.com/mzwhj/p/6256307.html"/>
<diggs>0</diggs>
<views>4529</views>
<comments>17</comments>
</entry>
<entry>
<id>6224237</id>
<title type="text">
.Net Core MVC 網站開發（Ninesky） 2.三、項目架構調整(續)-使用配置文件動態注入
</title>
<summary type="text">
上次實現了依賴注入，可是web項目必需要引用業務邏輯層和數據存儲層的實現，項目解耦並不徹底；另外一方面，要同時注入業務邏輯層和數據訪問層，注入的服務直接寫在Startup中顯得很是臃腫。理想的方式是，web項目近引用接口而不引用實現，在配置文件中進行配置實現程序集合類，注入業務邏輯層而沒必要注入數據訪問
</summary>
<published>2016-12-26T22:39:00+08:00</published>
<updated>2020-04-26T03:36:18Z</updated>
<author>
<name>洞庭夕照</name>
<uri>http://www.cnblogs.com/mzwhj/</uri>
</author>
<link rel="alternate" href="http://www.cnblogs.com/mzwhj/p/6224237.html"/>
<diggs>0</diggs>
<views>2038</views>
<comments>1</comments>
</entry>
</feed>

咱們關注的是「entry」節點內容，這個節點裏返回博客列表的相關內容，根據這個內容來添加模型

三、添加模型

添加博客列表模型

在Models文件夾上右鍵->添加->類。類名輸入BlogItem。

using System;

namespace NineskyWeb.Models
{
    public class BlogItem
    {
        /// <summary>
        /// 標識
        /// </summary>
        public int Id { get; set; }

        /// <summary>
        /// 標題
        /// </summary>

        public string Title { set; get; }

        /// <summary>
        /// 簡介
        /// </summary>

        public string Summary { set; get; }

        /// <summary>
        /// 發佈時間
        /// </summary>

        public DateTime Published { get; set; }

        /// <summary>
        /// 做者
        /// </summary>

        public string Author { get; set; }

        /// <summary>
        /// 閱讀次數
        /// </summary>
        public int Views { get; set; }

        /// <summary>
        /// 評論數
        /// </summary>
        public int Comments { get; set; }
    }
}

另外一個要關注的就是「postcount」，分頁須要用到總記錄數，下面添加分頁模型。

添加分頁模型

在Models文件夾上右鍵->添加->類。類名輸入Page

using System.Collections.Generic;

namespace NineskyWeb.Models
{
    public class Page<T> where T:class
    {
        /// <summary>
        /// 頁碼
        /// </summary>
        public int Index { get; set; }

        /// <summary>
        /// 每頁記錄數
        /// </summary>
        public int Size { get; set; }

        /// <summary>
        /// 總記錄數
        /// </summary>

        public int TotalCount { get; set; }

        /// <summary>
        /// 總頁數
        /// </summary>

        public int TotalPage { get; set; }

        /// <summary>
        /// 博客列表
        /// </summary>
        public List<T> Items { get; set; }
    }
}

如今返回到剛添加的博客控制器中，修改Index代碼，實現從博客園get博客列表。

四、用HttpClient從博客園獲取數據

思路：利用HttpClient從博客園獲取博客列表的xml格式數據，而後轉換成Page模型，並傳遞給試圖。代碼以下：

/// <summary>
        /// 博客列表
        /// </summary>
        /// <param name="id">頁碼</param>
        /// <param name="size">每頁記錄數</param>
        /// <returns></returns>
       [ActionName("Index")]
        public async Task<ActionResult> IndexAsync(int id=1,int size=8)
        {
            HttpClient client = new HttpClient() { BaseAddress = new Uri("http://wcf.open.cnblogs.com/blog/u/mzwhj/posts/" + id + "/" + size) };
            HttpResponseMessage responseMessage = await client.SendAsync(new HttpRequestMessage());
            if(responseMessage.IsSuccessStatusCode)
            {
                var content = await responseMessage.Content.ReadAsStringAsync();
                XmlDocument document = new XmlDocument();
                document.LoadXml(content);
                XmlNamespaceManager xmlNamespace = new XmlNamespaceManager(document.NameTable);
                xmlNamespace.AddNamespace("ns", "http://www.w3.org/2005/Atom");
                Page<BlogItem> page = new Page<BlogItem> (){ Index = id, Size = size, Items = new List<BlogItem>() };
                var countNode = document.SelectSingleNode("/ns:feed/ns:postcount", xmlNamespace);
                page.TotalCount = Convert.ToInt32(countNode.InnerText);
                page.TotalPage = (page.TotalCount + page.Size - 1) / page.Size;
                var blogsNode = document.SelectNodes("/ns:feed/ns:entry", xmlNamespace);
                foreach(XmlNode blog in blogsNode)
                {
                    var aa = blog["id"].InnerText;
                    page.Items.Add(new BlogItem
                    {
                        Id = Convert.ToInt32(blog["id"].InnerText),
                        Title = blog["title"].InnerText,
                        Summary = blog["summary"].InnerText,
                        Author = blog["author"].FirstChild.InnerText,
                        Published = Convert.ToDateTime(blog["published"].InnerText),
                        Views = Convert.ToInt32(blog["views"].InnerText),
                        Comments = Convert.ToInt32(blog["comments"].InnerText)
                    });
                }
                return View(page);
            }
            return RedirectToAction("Index", "Home");
        }

注意：因爲使用的異步方法action變成了「IndexAsync」，因此給acion加上[ActionName("Index")]特性，讓瀏覽器繼續使用Index訪問。

五、添加視圖

在IndexAsync上右鍵添加視圖。

注意因爲action名稱爲「IndexAsync」，添加視圖對話框中默認視圖名爲「IndexAsync」，由於咱們把action重命名爲「Index」，因此這裏視圖名稱要改爲「Index」。添加視圖後修改代碼，把控制器傳過來的分頁數據用列表顯示出來，代碼也很簡單，以下：

@model NineskyWeb.Models.Page<NineskyWeb.Models.BlogItem>

@{
    ViewBag.Title = "博客";
}

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="~/">首頁</a></li>
        <li class="breadcrumb-item active" aria-current="page">博客</li>
    </ol>
</nav>

@foreach (var item in Model.Items)
{<div class="list-group mt-4">
        <a href="@Url.Action("Post","Blog",new {id= item.Id })" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">@item.Title</h5>
                @*<small class="text-muted">3 days ago</small>*@
            </div>
            <hr />
            <p class="mb-1">@item.Summary</p>
            <small class="text-muted">
                posted:@item.Published  @item.Author 閱讀 (@item.Views) 評論 (@item.Comments)
            </small>
        </a>
    </div>
}

<nav aria-label="">
    <ul class="pagination justify-content-end">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1" aria-disabled="true"> @Model.Index / @Model.TotalPage 頁</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="~/Blog" tabindex="-1" aria-disabled="true">首頁</a>
        </li>

        @if (Model.Index > 1)
        {
            <li class="page-item"><a class="page-link" href="~/Blog/Index/@(Model.Index -1)">上一頁</a></li>
        }

        @if (Model.Index < Model.TotalPage)
        {
            <li class="page-item"><a class="page-link" href="~/Blog/Index/@(Model.Index +1)">下一頁</a></li>
        }
        <li class="page-item">
            <a class="page-link" href="~/Blog/Index/@Model.TotalPage">尾頁</a>
        </li>
    </ul>
</nav>

按「F5」查看效果，以下圖，自我感受還不錯。

六、顯示博客內容。

http://wcf.open.cnblogs.com/blog/post/body/{POSTID}

這個接口真簡單，直接返回內容以下圖。

這個調用乾脆不作了。直接從列表哪兒跳到博客園吧，只須要改一下博客列表視圖裏面的連接地址就好了。

把紅框裏的地址改爲：href="https://www.cnblogs.com/mzwhj/p/@(item.Id).html"，大功告成。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程