基于.NetCore開發博客項目 StarBlog - (13) 加入友情鏈接功能

系列文章

前言

很快啊，pia的一下，博客上線已經一周時間了（網址：http://blog.deali.cn）

閱讀量不高，不過對于沒有做過SEO的網站來說已經不錯了~

這段時間雖然忙不過一直在寫代碼給博客添磚加瓦~~（Github上的Commit每天不斷的）~~

這不，友情鏈接功能來了~

本文來一步步介紹這個功能的實現。

同時所有項目代碼已經上傳GitHub，歡迎各位大佬Star/Fork！

博客后端+前臺項目地址：https://github.com/Deali-Axy/StarBlog
管理后臺前端項目地址：https://github.com/Deali-Axy/StarBlog-Admin

先看效果

分析

先分析一下功能

友情鏈接，既可以自己手動添加，也可以由訪問網站的人申請

其他站長可以申請互換友鏈，提交申請之后在博客后臺可以看到，確認之后就會顯示到網站中啦~

這就是初步的功能設計

當然我還想到了一些擴展的功能，比如根據鏈接的點擊量來調整鏈接的顯示順序~~（百度：聽起來怎么那么熟悉）~~

建模

根據需求，需要倆模型

一個是要顯示的友情鏈接，一個是友情鏈接申請記錄

那開始吧

在StarBlog.Data/Models中創建數據模型

/// <summary>
/// 友情鏈接
/// </summary>
public class Link {
    [Column(IsIdentity = true, IsPrimary = true)]
    public int Id { get; set; }

    /// <summary>
    /// 網站名稱
    /// </summary>
    public string Name { get; set; }

    /// <summary>
    /// 介紹
    /// </summary>
    public string? Description { get; set; }

    /// <summary>
    /// 網址
    /// </summary>
    public string Url { get; set; }

    /// <summary>
    /// 是否顯示
    /// </summary>
    public bool Visible { get; set; }
}

還有這個

/// <summary>
/// 友情鏈接申請記錄
/// </summary>
public class LinkExchange {
    [Column(IsIdentity = true, IsPrimary = true)]
    public int Id { get; set; }

    /// <summary>
    /// 網站名稱
    /// </summary>
    public string Name { get; set; }

    /// <summary>
    /// 介紹
    /// </summary>
    public string? Description { get; set; }

    /// <summary>
    /// 網址
    /// </summary>
    public string Url { get; set; }

    /// <summary>
    /// 站長
    /// </summary>
    public string WebMaster { get; set; }

    /// <summary>
    /// 聯系郵箱
    /// </summary>
    public string Email { get; set; }

    /// <summary>
    /// 是否已驗證
    /// <para>友情鏈接需要驗證后才顯示在網站上</para>
    /// </summary>
    public bool Verified { get; set; } = false;

    /// <summary>
    /// 申請時間
    /// </summary>
    public DateTime ApplyTime { get; set; } = DateTime.Now;
}

Service

有了模型，接下來完善一下邏輯

在StarBlog.Web/Services中寫邏輯

首先是友情鏈接的，增刪改查除外，還加一個設置可見性的快捷方式

public class LinkService {
    private IBaseRepository<Link> _repo;

    public LinkService(IBaseRepository<Link> repo) {
        _repo = repo;
    }

    /// <summary>
    /// 獲取全部友情鏈接
    /// </summary>
    /// <param name="onlyVisible">只獲取顯示的鏈接</param>
    /// <returns></returns>
    public List<Link> GetAll(bool onlyVisible = true) {
        return onlyVisible
            ? _repo.Where(a => a.Visible).ToList()
            : _repo.Select.ToList();
    }

    public Link? GetById(int id) {
        return _repo.Where(a => a.Id == id).First();
    }

    public Link? GetByName(string name) {
        return _repo.Where(a => a.Name == name).First();
    }

    public Link AddOrUpdate(Link item) {
        return _repo.InsertOrUpdate(item);
    }

    public Link? SetVisibility(int id, bool visible) {
        var item = GetById(id);
        if (item == null) return null;
        item.Visible = visible;
        _repo.Update(item);
        return GetById(id);
    }

    public int DeleteById(int id) {
        return _repo.Delete(a => a.Id == id);
    }
}

這個沒啥特別的

繼續

管理友情鏈接申請記錄的邏輯，同樣也是有增刪改查，這部分代碼跟上面的一樣，省略了

這里只貼設置是否驗證的代碼

public class LinkExchangeService {
    private readonly IBaseRepository<LinkExchange> _repo;
    private readonly LinkService _linkService;

    public LinkExchangeService(IBaseRepository<LinkExchange> repo, LinkService linkService) {
        _repo = repo;
        _linkService = linkService;
    }
    
	// 設置是否驗證
    public LinkExchange? SetVerifyStatus(int id, bool status) {
        var item = GetById(id);
        if (item == null) return null;

        item.Verified = status;
        _repo.Update(item);


        var link = _linkService.GetByName(item.Name);
        if (status) {
            if (link == null) {
                _linkService.AddOrUpdate(new Link {
                    Name = item.Name,
                    Description = item.Description,
                    Url = item.Url,
                    Visible = true
                });
            }
            else {
                _linkService.SetVisibility(link.Id, true);
            }
        }
        else {
            if (link != null) _linkService.DeleteById(link.Id);
        }

        return GetById(id);
    }
}

在設置是否驗證的方法中，實現了：

設置一個申請為已驗證，自動將該申請的鏈接添加到友情鏈接中
設置一個申請為未驗證，則自動將對應的友情鏈接刪除（如果存在的話）

其他地方就跟上面的友情鏈接一樣了。

寫完之后別忘了注冊服務

builder.Services.AddScoped<LinkExchangeService>();
builder.Services.AddScoped<LinkService>();

添加數據

雖然管理這些鏈接的接口我也寫了，但目前本系列文章還處在介紹前臺的部分，我打算把接口實現放到后面的RESTFul接口開發部分講~

所以先直接在數據庫中添加吧~

頁面展示

數據模型和邏輯都實現了，接下來就是找一個合適的地方顯示

參考了幾個同類的博客之后，我決定把友鏈放在主頁底部

編輯StarBlog.Web/ViewModels/HomeViewModel.cs，添加一個新屬性

public class HomeViewModel {
    /// <summary>
    /// 友情鏈接
    /// </summary>
    public List<Link> Links { get; set; } = new();
}

用Bootstrap5的responsive variation來做響應式的友情鏈接展示

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

官網上的例子效果是這樣的

勉強還行，不過都是一樣的顏色太單調了，我要七彩的！

封裝Razor組件

于是封裝了一個名為ColorfulButton的Razor組件

先定義ViewModel，用來配置這個組件

在StarBlog.Web/ViewModels中新增ColorfulButtonViewModel.cs文件，代碼如下

public static class LinkTarget {
    public const string Blank = "_blank";
    public const string Parent = "_parent";
    public const string Self = "_self";
    public const string Top = "_top";
}

public class ColorfulButtonViewModel {
    public string Name { get; set; }
    public string Url { get; set; } = "#";
    public string Target { get; set; } = "_self";
}

然后在StarBlog.Web/Views/Shared/Widgets中新增ColorfulButton.cshtml

把Bootstrap支持的幾種按鈕顏色放進去，然后每次隨機顯示一個顏色~

@model ColorfulButtonViewModel

@{
    var rnd = Random.Shared;
    var colorList = new[] {
        "btn-outline-primary",
        "btn-outline-secondary",
        "btn-outline-success",
        "btn-outline-danger",
        "btn-outline-warning",
        "btn-outline-info",
        "btn-outline-dark",
    };
    var btnColor = colorList[rnd.Next(0, colorList.Length)];
}

<a href="@Model.Url" role="button" class="btn btn-sm @btnColor mb-1" target="@Model.Target">
    @Model.Name
</a>

添加到頁面中

組件完成了，最后在主頁中實現友情鏈接的展示

編輯StarBlog.Web/Views/Home/Index.cshtml文件

在最底下（推薦博客板塊下方）新增代碼

<div class="container px-4 py-3">
    <h2 class="pb-2 border-bottom">Link Exchange</h2>
    @if (Model.Links.Count > 0) {
        <div class="d-grid gap-2 d-md-block">
            @foreach (var link in Model.Links) {
                @await Html.PartialAsync("Widgets/ColorfulButton",
                    new ColorfulButtonViewModel { Name = link.Name, Url = link.Url })
            }
        </div>
    }
    else {
        @await Html.PartialAsync("Widgets/PlaceholderCard", "友情鏈接")
    }
</div>

最終效果就是一開始展示的那樣，每次訪問都會有不同的顏色，老炫酷了~

搞定

完成了，很簡單的一個功能，可以給單調的博客小小增色一下~

同時也歡迎各位站長大佬來交換友鏈~！

posted @ 2022-06-28 23:34 程序設計實驗室閱讀(2211) 評論(0) 編輯收藏舉報

會員救園

刷新頁面返回頂部

Loading

程序設計實驗室

公眾號：程序設計實驗室