当前位置：网站首页>be based on. NETCORE development blog project starblog - (13) add friendship link function

be based on. NETCORE development blog project starblog - (13) add friendship link function

2022-07-01 12:37:00 【Dotnet cross platform】

Series articles

Preface

Soon! ,pia For a moment , The blog has been online for a week （ website ：http://blog.deali.cn）

The amount of reading is not high , But for those who haven't done SEO It's good for the website ~

Although busy, I have been writing code to add bricks to the blog （Github Upper Commit Constantly every day ）

see , Here comes the link function ~

This article will introduce the implementation of this function step by step .

At the same time, all project codes have been uploaded GitHub, Welcome to everyone Star/Fork！

  • Blog back end + Front desk project address ：https://github.com/Deali-Axy/StarBlog

  • Management background front end project address ：https://github.com/Deali-Axy/StarBlog-Admin

Look at the effect

9ddfce4b0c56824dde079cc6e438c036.png
image

analysis

First analyze the functions

link , You can add them manually , It can also be applied by people who visit the website

Other webmasters can apply for exchanging friend chains , After submitting the application, you can see... In the background of the blog , After confirmation, it will be displayed in the website ~

This is the preliminary functional design

Of course, I also thought of some extended functions , For example, adjust the display order of links according to the number of clicks on the links （ Baidu ： How does it sound so familiar 371b9bc51aa19420f1bb9f0209ca6e41.png）

modeling

According to the demand , Two models are needed

One is to show the links , One is the friendship link application record

Let's get started

stay StarBlog.Data/Models Create a data model in 

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

    /// <summary>
    ///  Website name 
    /// </summary>
    public string Name { get; set; }

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

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

    /// <summary>
    ///  Whether or not shown 
    /// </summary>
    public bool Visible { get; set; }
}

And this one. 

/// <summary>
///  Link application records 
/// </summary>
public class LinkExchange {
    [Column(IsIdentity = true, IsPrimary = true)]
    public int Id { get; set; }

    /// <summary>
    ///  Website name 
    /// </summary>
    public string Name { get; set; }

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

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

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

    /// <summary>
    ///  Contact email 
    /// </summary>
    public string Email { get; set; }

    /// <summary>
    ///  Whether it has been verified 
    /// <para> Links need to be verified before they are displayed on the website </para>
    /// </summary>
    public bool Verified { get; set; } = false;

    /// <summary>
    ///  Application time 
    /// </summary>
    public DateTime ApplyTime { get; set; } = DateTime.Now;
}

Service

With the model , Next, improve the logic

stay StarBlog.Web/Services Chinese writing logic

First of all link Of , Except for addition, deletion and modification , Add a shortcut to set visibility 

public class LinkService {
    private IBaseRepository<Link> _repo;

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

    /// <summary>
    ///  Get all the links 
    /// </summary>
    /// <param name="onlyVisible"> Get only the displayed Links </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);
    }
}

This is nothing special

continue

The logic of managing friendship link application records , There are also additions, deletions, modifications and checks , This part of the code is the same as the above , omitted

Here only paste Set whether to verify Code for 

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

    public LinkExchangeService(IBaseRepository<LinkExchange> repo, LinkService linkService) {
        _repo = repo;
        _linkService = linkService;
    }
    
 //  Set whether to verify 
    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);
    }
}

In the method of setting whether to verify , Realized ：

  • Set a request as verified , Automatically add the link of this application to the friendship link

  • Set an application as unauthenticated , The corresponding links will be deleted automatically （ If it exists ）

Other places are just like the above links .

Don't forget to sign up for the service after writing 

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

Add data

Although I also wrote the interface to manage these links , But this series of articles is still in the part of introducing the front desk , I'm going to put the interface implementation behind RESTFul The interface development part talks about ~

So add it directly to the database ~

24cebc8f3394c6cce0d9ee7b9d993c69.png
image

The page display

The data model and logic are implemented , The next step is to find a suitable place to display

After referring to several similar blogs , I decided to put the friend chain at the bottom of the home page

edit StarBlog.Web/ViewModels/HomeViewModel.cs, Add a new attribute 

public class HomeViewModel {
    /// <summary>
    ///  link 
    /// </summary>
    public List<Link> Links { get; set; } = new();
}

use Bootstrap5 Of responsive variation To show the responsive Links 

<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>

The example effect on the official website is as follows

122e24ab7ad5870d8a022847217f2938.png
image

Barely , But the same color is too monotonous , I want colorful ！

encapsulation Razor Components

So a package named ColorfulButton Of Razor Components

First define ViewModel, Used to configure this component

stay StarBlog.Web/ViewModels Newly added ColorfulButtonViewModel.cs file , The code is as follows 

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";
}

And then in StarBlog.Web/Views/Shared/Widgets Newly added ColorfulButton.cshtml

hold Bootstrap Several supported button colors are put in , And then randomly display one color at a time ~

@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>

Add to page

The component is finished , Finally, the display of friendly links in the home page

edit StarBlog.Web/Views/Home/Index.cshtml file

At the bottom （ Below the recommended blog section ） New code 

<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", " link ")
    }
</div>

The final effect is what was shown at the beginning , Each visit will have a different color , Old cool ~

Get it done

It's done , A very simple function , You can add a little color to the monotonous blog ~

At the same time, you are also welcome to exchange friends with the webmaster ~！

原网站

版权声明
本文为[Dotnet cross platform]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/182/202207011234321728.html

边栏推荐

猜你喜欢

随机推荐