基于 abp vnext 和 .net core 开发博客项目 -凯发k8官方网

基于 abp vnext 和 .net core 开发博客项目 - blazor 实战系列（七）

转载于：https://github.com/meowv/blog

上一篇完成了后台分类模块的所有功能，本篇继续将标签模块和凯发k8官方网的友情链接模块的增删改查完成。

标签管理

图片

实现方式和之前的分类管理是一样的，在admin文件夹下面添加tags.razor组件，设置路由@page “/admin/tags”。

同样的内容也需要放在adminlayout组件下面，添加几个参数：弹窗状态bool open、新增或更新时标签字段string tagname, displayname、更新时的标签idint id、api返回的标签列表接收参数serviceresult tags。

///
/// 默认隐藏box
///
private bool open { get; set; } = false;

///
/// 新增或者更新时候的标签字段值
///
private string tagname, displayname;

///
/// 更新标签的id值
///
private int id;

///
/// api返回的标签列表数据
///
private serviceresult tags;
//querytagforadmindto.cs
namespace meowv.blog.blazorapp.response.blog
{
public class querytagforadmindto : querytagdto
{
///
/// 主键
///
public int id { get; set; }
}
}
在初始化方法oninitializedasync()中获取数据。

///
/// 初始化
///
///
protected override async task oninitializedasync()
{
var token = await common.getstorageasync(“token”);
http.defaultrequestheaders.add(“authorization”, $“bearer {token}”);

tags = await fetchdata();

}

///
/// 获取数据
///
///
private async task> fetchdata()
{
return await http.getfromjsonasync>("/blog/admin/tags");
}
注意需要设置请求头，进行授权访问，然后页面上绑定数据。

@if (tags == null) { } else {

- tags -

@if (tags.success && tags.result.any()) { @foreach (var item in tags.result) { tags没获取到数据的时候显示组件内容，循环遍历数据进行绑定，删除按钮绑定点击事件调用deleteasync()方法。新增和编辑按钮点击事件调用showbox()方法显示弹窗。新增的时候不需要传递参数，编辑的时候需要将当前item即querytagforadmindto传递进去。

组件中绑定了标签的两个参数，是否打开参数opne和确认按钮回调事件方法submitasync()。

删除标签的方法deleteasync(…)如下：

// 弹窗确认
bool confirmed = await common.invokeasync(“confirm”, “\n💥💢真的要干掉这个该死的标签吗💢💥”);

if (confirmed)
{
var response = await http.deleteasync($"/blog/tag?id={id}");

var result = await response.content.readfromjsonasync();if (result.success) {tags = await fetchdata(); }

}
删除之前进行二次确认，避免误伤，删除成功重新加载一遍数据。

弹窗的方法showbox(…)如下：

///
/// 显示box，绑定字段
///
///
private void showbox(querytagforadmindto dto = null)
{
open = true;
id = 0;

// 新增 if (dto == null) {displayname = null;tagname = null; } else // 更新 {id = dto.id;displayname = dto.displayname;tagname = dto.tagname; }

}
最后在弹窗中确认按钮的回调事件方法submitasync()如下：

///
/// 确认按钮点击事件
///
///
private async task submitasync()
{
var input = new edittaginput()
{
displayname = displayname.trim(),
tagname = tagname.trim()
};

if (string.isnullorempty(input.displayname) || string.isnullorempty(input.tagname)) {return; }var responsemessage = new httpresponsemessage();if (id > 0)responsemessage = await http.putasjsonasync($"/blog/tag?id={id}", input); elseresponsemessage = await http.postasjsonasync("/blog/tag", input);var result = await responsemessage.content.readfromjsonasync(); if (result.success) {tags = await fetchdata();open = false; }

}
输入参数edittaginput。

namespace meowv.blog.blazorapp.response.blog
{
public class edittaginput : tagdto
{
}
}
最终执行新增或者更新数据都在点击事件中进行，将变量的值赋值给edittaginput，根据id判断走新增还是更新，成功后重新加载数据，关掉弹窗。

标签管理页面全部代码如下：

@page “/admin/categories”

@if (categories == null) { } else {

- categories -

@if (categories.success && categories.result.any()) { @foreach (var item in categories.result) {

@code {
///
/// 默认隐藏box
///
private bool open { get; set; } = false;

///

/// 新增或者更新时候的分类字段值 ///

private string categoryname, displayname;///

/// 更新分类的id值 ///

private int id;///

/// api返回的分类列表数据 ///

private serviceresult> categories;///

/// 初始化 ///

/// protected override async task oninitializedasync() {var token = await common.getstorageasync("token");http.defaultrequestheaders.add("authorization", $"bearer {token}");categories = await fetchdata(); }///

/// 获取数据 ///

/// private async task>> fetchdata() {return await http.getfromjsonasync>>("/blog/admin/categories"); }///

/// 删除分类 ///

/// /// private async task deleteasync(int id) {open = false;// 弹窗确认bool confirmed = await common.invokeasync("confirm", "\n💥💢真的要干掉这个该死的分类吗💢💥");if (confirmed){var response = await http.deleteasync($"/blog/category?id={id}");var result = await response.content.readfromjsonasync();if (result.success){categories = await fetchdata();}} }///

/// 显示box，绑定字段 ///

/// private void showbox(querycategoryforadmindto dto = null) {open = true;id = 0;// 新增if (dto == null){displayname = null;categoryname = null;}else // 更新{id = dto.id;displayname = dto.displayname;categoryname = dto.categoryname;} }///

/// 确认按钮点击事件 ///

/// private async task submitasync() {var input = new editcategoryinput(){displayname = displayname.trim(),categoryname = categoryname.trim()};if (string.isnullorempty(input.displayname) || string.isnullorempty(input.categoryname)){return;}var responsemessage = new httpresponsemessage();if (id > 0)responsemessage = await http.putasjsonasync($"/blog/category?id={id}", input);elseresponsemessage = await http.postasjsonasync("/blog/category", input);var result = await responsemessage.content.readfromjsonasync();if (result.success){categories = await fetchdata();open = false;} }

}

图片

友链管理

图片

实现方式都是一样的，这个就不多说了，直接上代码。

先将api返回的接收参数和新增编辑的输入参数添加一下。

//queryfriendlinkforadmindto.cs
namespace meowv.blog.blazorapp.response.blog
{
public class queryfriendlinkforadmindto : friendlinkdto
{
///
/// 主键
///
public int id { get; set; }
}
}

//editfriendlinkinput.cs
namespace meowv.blog.blazorapp.response.blog
{
public class editfriendlinkinput : friendlinkdto
{
}
}
@page “/admin/friendlinks”

@if (friendlinks == null) { } else {

- friendlinks -

@if (friendlinks.success && friendlinks.result.any()) { @foreach (var item in friendlinks.result) {

@code {
///
/// 默认隐藏box
///
private bool open { get; set; } = false;

///

/// 新增或者更新时候的友链字段值 ///

private string title, linkurl;///

/// 更新友链的id值 ///

private int id;///

/// api返回的友链列表数据 ///

private serviceresult> friendlinks;///

/// 初始化 ///

/// protected override async task oninitializedasync() {var token = await common.getstorageasync("token");http.defaultrequestheaders.add("authorization", $"bearer {token}");friendlinks = await fetchdata(); }///

/// 获取数据 ///

/// private async task>> fetchdata() {return await http.getfromjsonasync>>("/blog/admin/friendlinks"); }///

/// 删除分类 ///

/// /// private async task deleteasync(int id) {open = false;// 弹窗确认bool confirmed = await common.invokeasync("confirm", "\n💥💢真的要干掉这个该死的分类吗💢💥");if (confirmed){var response = await http.deleteasync($"/blog/friendlink?id={id}");var result = await response.content.readfromjsonasync();if (result.success){friendlinks = await fetchdata();}} }///

/// 显示box，绑定字段 ///

/// private void showbox(queryfriendlinkforadmindto dto = null) {open = true;id = 0;// 新增if (dto == null){title = null;linkurl = null;}else // 更新{id = dto.id;title = dto.title;linkurl = dto.linkurl;} }///

/// 确认按钮点击事件 ///

/// private async task submitasync() {var input = new editfriendlinkinput(){title = title.trim(),linkurl = linkurl.trim()};if (string.isnullorempty(input.title) || string.isnullorempty(input.linkurl)){return;}var responsemessage = new httpresponsemessage();if (id > 0)responsemessage = await http.putasjsonasync($"/blog/friendlink?id={id}", input);elseresponsemessage = await http.postasjsonasync("/blog/friendlink", input);var result = await responsemessage.content.readfromjsonasync();if (result.success){friendlinks = await fetchdata();open = false;} }

}

图片

截至目前为止，还剩下文章模块的功能还没做了，今天到这里吧，明天继续刚，未完待续…

开源地址：https://github.com/meowv/blog/tree/blog_tutorial

总结

以上是凯发k8官方网为你收集整理的基于 abp vnext 和 .net core 开发博客项目 - blazor 实战系列（七）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。