当前位置：网站首页>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-06-29 04:35:00 【pythonxxoo】

High quality resource sharing

Learning route guidance （ Click unlock ） Knowledge orientation Crowd positioning
🧡 Python Actual wechat ordering applet 🧡 Progressive class This course is python flask+ Perfect combination of wechat applet , From the deployment of Tencent to the launch of the project , Create a full stack ordering system .
Python Quantitative trading practice beginner Take you hand in hand to create an easy to expand 、 More secure 、 More efficient quantitative trading system

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！

Look at the effect

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

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 

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

    /// 
    ///  Website name 
    /// 
    public string Name { get; set; }

    /// 
    ///  Introduce 
    /// 
    public string? Description { get; set; }

    /// 
    ///  website 
    /// 
    public string Url { get; set; }

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

And this one. 

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

    /// 
    ///  Website name 
    /// 
    public string Name { get; set; }

    /// 
    ///  Introduce 
    /// 
    public string? Description { get; set; }

    /// 
    ///  website 
    /// 
    public string Url { get; set; }

    /// 
    ///  stationmaster 
    /// 
    public string WebMaster { get; set; }

    /// 
    ///  Contact email 
    /// 
    public string Email { get; set; }

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

    /// 
    ///  Application time 
    /// 
    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 _repo;

    public LinkService(IBaseRepository repo) {
        _repo = repo;
    }

    /// 
    ///  Get all the links 
    /// 
    ///  Get only the displayed Links 
    /// 
    public List 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 \_repo;
 private readonly LinkService \_linkService;

 public LinkExchangeService(IBaseRepository 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();
builder.Services.AddScoped();

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 ~

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 {
    /// 
    ///  link 
    /// 
    public List 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">Buttonbutton>
  <button class="btn btn-primary" type="button">Buttonbutton>
div>

The example effect on the official website is as follows

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)];
}

["@Model.Url" role="button" class="btn btn-sm @btnColor mb-1" target="@Model.Target">
 @Model.Name](<span)

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 

class="container px-4 py-3">
 ## class="pb-2 border-bottom">Link Exchange


 @if (Model.Links.Count > 0) {
 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 })
 }
 
 }
 else {
 @await Html.PartialAsync("Widgets/PlaceholderCard", " link ")
 }

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

  • About bloggers ： official account ： Programming Lab , Welcome to exchange ~
  • Copyright notice ： All articles in this blog except special statement , All adopt BY-NC-SA license agreement . Reprint please indicate the source ！
  • Solidarity bloggers ： If you think the article will help you , You can click the bottom right corner of the article **【[ recommend ](javascript:void(0)】** once .
原网站

版权声明
本文为[pythonxxoo]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/180/202206290428417429.html

边栏推荐

猜你喜欢

随机推荐