网站图标只做,一个电脑建设多个网站,做网店好还是自己建网站好,php网站里放asp系列文章使用 abp cli 搭建项目给项目瘦身#xff0c;让它跑起来完善与美化#xff0c;Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API#xff0c;包装返回模型再说Swagger#xff0c;分组、描述、小绿锁接入GitHub#xff0c;用JWT保护你的API异常处理和… 系列文章使用 abp cli 搭建项目给项目瘦身让它跑起来完善与美化Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API包装返回模型再说Swagger分组、描述、小绿锁接入GitHub用JWT保护你的API异常处理和日志记录使用Redis缓存数据集成Hangfire实现定时任务处理用AutoMapper搞定对象映射定时任务最佳实战一定时任务最佳实战二定时任务最佳实战三博客接口实战篇一博客接口实战篇二博客接口实战篇三博客接口实战篇四博客接口实战篇五Blazor实战系列一Blazor实战系列二Blazor实战系列三Blazor实战系列四上一篇完成了分类标签友链的列表查询页面数据绑定还剩下一个文章详情页的数据没有绑现在简单的解决掉。文章详情之前已经添加了四个参数year、month、day、name用来组成我们最终的URL继续添加一个参数用来接收API返回的数据。[Parameter]
public int year { get; set; }[Parameter]
public int month { get; set; }[Parameter]
public int day { get; set; }[Parameter]
public string name { get; set; }/// summary
/// URL
/// /summary
private string url $/{year}/{(month 10 ? month.ToString() : $0{month})}/{(day 10 ? day.ToString() : $0{day})}/{name}/;/// summary
/// 文章详情数据
/// /summary
private ServiceResultPostDetailDto post;然后在初始化方法OnInitializedAsync()中请求数据。/// summary
/// 初始化
/// /summary
protected override async Task OnInitializedAsync()
{// 获取数据post await Http.GetFromJsonAsyncServiceResultPostDetailDto($/blog/post?url{url});
}
现在拿到了post数据然后在HTML中绑定即可。if (post null)
{Loading /
}
else
{if (post.Success){var _post post.Result;article classpost-wrapheader classpost-headerh1 classpost-title_post.Title/h1div classpost-metaAuthor: a itempropauthor relauthor hrefjavascript:;_post.Author/aspan classpost-timeDate: a hrefjavascript:;_post.CreationTime/a/spanspan classpost-categoryCategory:a href/category/_post.Category.DisplayName/_post.Category.CategoryName/a/span/div/headerdiv classpost-content idcontent((MarkupString)_post.Html)/divp classpost-copyrightp classcopyright-itemspanAuthor:/spanspan_post.Author/span/pp classcopyright-itemspanPermalink:/spanspana href/post_post.Urlhttps://meowv.com/post_post.Url/a/span/pp classcopyright-itemspanLicense:/spanspan本文采用a target_blank hrefhttp://creativecommons.org/licenses/by-nc-nd/4.0/ 知识共享 署名-非商业性使用-禁止演绎(CC BY-NC-ND)国际许可协议 /a进行许可/span/p/pp classpost-tagsdivspanTag(s):/spanspan classtagif (_post.Tags.Any()){foreach (var tag in _post.Tags){a href/tag/tag.DisplayName/# tag.TagName/a}}/span/divdiva onclickasync () await Common.BaskAsync()back/aspan· /spana href/home/a/div/pp classpost-navif (_post.Previous ! null){a classprevrelprevonclick(async () await Common.NavigateTo($/post{_post.Previous.Url}, true))href/post_post.Previous.Url_post.Previous.Title/a}if (_post.Next ! null){a classnextrelnextonclick(async () await Common.NavigateTo($/post{_post.Next.Url}, true))href/post_post.Next.Url_post.Next.Title/a}/p/article}else{ErrorTip /}
}
其中有几个地方需要注意一下我们从post对象中取到的文章内容HTML直接显示是不行了需要将其解析为HTML标签需要用到MarkupString。然后页面上有一个后退按钮这里我在Common.cs中写了一个方法来实现。/// summary
/// 后退
/// /summary
/// returns/returns
public async Task BaskAsync()
{await InvokeAsync(window.history.back);
}
还有就是上一篇和下一篇的问题将具体的URL传递给NavigateTo()方法然后跳转过去即可。在Common.cs中将之前文章创建RenderPage()方法修改成NavigateTo()。这个命名更好一点。/// summary
/// 跳转指定URL
/// /summary
/// param nameuri/param
/// param nameforceLoadtrue绕过路由刷新页面/param
/// returns/returns
public async Task NavigateTo(string url, bool forceLoad false)
{_navigationManager.NavigateTo(url, forceLoad);await Task.CompletedTask;
}
现在数据算是绑定完了但是遇到了一个大问题就是详情页面的样式问题因为用到了Markdown所以之前是加载了许多JS文件来处理的。那么现在肯定行不通了所以关于详情页的样式问题暂时搁浅让我寻找一下好多解决方式。现在显示是没有问题了就是不太好看还有关于添加文章的功能不知道有什么好的 Markdown 编辑器可以推荐我使用。到这里Blazor的前端展示页面已经全部弄完了接下来开始写后台相关的页面。后台首页关于后台管理的所有页面都放在Admin文件夹下在Pages文件夹下新建Admin文件夹然后先添加两个组件页面Admin.razor、Auth.razor。Admin.razor为后台管理的首页入口我们在里面直接添加几个预知的链接并设置其路由。page /admindiv classpost-wraph2 classpost-title-nbsp;博客内容管理nbsp;-/h2ullia href/admin/posth3????~~~ 新增文章 ~~~????/h3/a/lilia href/admin/postsh3????~~~ 文章管理 ~~~????/h3/a/lilia href/admin/categoriesh3????~~~ 分类管理 ~~~????/h3/a/lilia href/admin/tagsh3????~~~ 标签管理 ~~~????/h3/a/lilia href/admin/friendlinksh3????~~~ 友链管理 ~~~????/h3/a/li/ul
/div
里面的a标签所对应的页面还没有添加等做到的时候再加先手动访问这个页面看看当成功授权后就跳到这个页面来。认证授权关于授权因为之前在API中已经完成了基于Github的JWT模式的认证授权模式所以这里我想做一个无感的授权功能为什么说无感呢因为在我使用GitHub登录的过程中如果之前已经登录过且没有清除浏览器cookie数据下次再登录的时候会默认直接登录成功从而达到无感的。实现逻辑其实也很简单我这里用到了Common.cs中之前添加的公共方法设置和获取localStorage的方法我会将token等信息放入localStorage中。我设置的路由是/auth。这个路由需要和 GitHub OAuth App 的回调地址一致当登录成功会回调跳到配置的页面并携带code参数。在获取请求参数这块需要引用一个包Microsoft.AspNetCore.WebUtilities添加好后在_Imports.razor添加引用using Meowv.Blog.BlazorApp.Shared。默认还是显示加载中的组件Loading /。然后在code{}中编写代码添加页面初始化函数。/// summary
/// 初始化
/// /summary
/// returns/returns
protected override async Task OnInitializedAsync()
{// localStorage中access_token值var access_token await Common.GetStorageAsync(access_token);// access_token有值if (!string.IsNullOrEmpty(access_token)){// 获取tokenvar _token await Http.GetFromJsonAsyncServiceResultstring($/auth/token?access_token{access_token});if (_token.Success){// 将token存入localStorageawait Common.SetStorageAsync(token, _token.Result);// 跳转至后台首页await Common.NavigateTo(/admin);}else{// access_token失效或者请求失败的情况下重新执行一次验证流程await AuthProcessAsync();}}else //access_token为空{await AuthProcessAsync();}
}
先去获取localStorage中的access_token值肯定会有两种情况有或者没有然后分别去走不同的逻辑。当access_token有值就可以直接拿access_token去取token的值理想情况请求成功拿到了token这时候可以将token存到浏览器中然后正常跳转至后台管理首页还有就是取token失败了失败了就有可能是access_token过期了或者出现异常情况这时候我们不去提示错误直接抛弃所有重新来一遍认证授权的流程放在一个单独的方法中AuthProcessAsync()。而当access_token没值那就好办了也去来一遍认证授权的流程即可。验证流程AuthProcessAsync()的代码。/// summary
/// 验证流程
/// /summary
/// returns/returns
private async Task AuthProcessAsync()
{// 当前URI对象var uri await Common.CurrentUri();// 是否回调携带了code参数bool hasCode QueryHelpers.ParseQuery(uri.Query).TryGetValue(code, out Microsoft.Extensions.Primitives.StringValues code);if (hasCode){var access_token await Http.GetFromJsonAsyncServiceResultstring($/auth/access_token?code{code});if (access_token.Success){// 将access_token存入localStorageawait Common.SetStorageAsync(access_token, access_token.Result);var token await Http.GetFromJsonAsyncServiceResultstring($/auth/token?access_token{access_token.Result});if (token.Success){// 将token存入localStorageawait Common.SetStorageAsync(token, token.Result);// 成功认证授权跳转至后台管理首页await Common.NavigateTo(/admin);}else{// 没有权限的人回到首页去吧await Common.NavigateTo(/);// 输出提示信息Console.WriteLine(token.Message);}}else{// 出错了回到首页去吧await Common.NavigateTo(/);// 输出提示信息Console.WriteLine(access_token.Message);}}else{// 获取第三方登录地址var loginAddress await Http.GetFromJsonAsyncServiceResultstring(/auth/url);// 跳转到登录页面await Common.NavigateTo(loginAddress.Result);}
}
验证流程的逻辑先获取当前URI对象判断URI中是否携带了code参数从而可以知道当前页面是回调的过来的还是直接请求的获取当前URI对象放在Common.cs中。/// summary
/// 获取当前URI对象
/// /summary
/// returns/returns
public async TaskUri CurrentUri()
{var uri _navigationManager.ToAbsoluteUri(_navigationManager.Uri);return await Task.FromResult(uri);
}
在刚才添加的包Microsoft.AspNetCore.WebUtilities中为我们封装好了解析URI参数的方法。使用QueryHelpers.ParseQuery(...)获取code参数的值。当没有值的时候直接取请求登录地址然后如果登录成功就会跳转到携带code参数的回调页面。这样流程就又回到了 验证流程 开始的地方了。登录成功此时code肯定就有值了那么直接根据code获取access_token存入localStorage正常情况拿到access_token就去生成token然后也存入localStorage成功授权可以跳到后台管理首页了。其中如果有任何一个环节出现问题直接跳转到网站首页去。如果授权不成功肯定是你在瞎搞(不接受任何反驳????????)赶紧回到首页去吧。现在流程走完去看看效果。GitHub在国内的情况大家知道有时候慢甚至打不开有时候还是挺快的还好今天没掉链子我遇到过好几次压根打不开的情况获取可以针对网络不好的时候我们换成其它的验证方式这个以后有机会再优化吧。验证组件这个时候会发现其实我们压根不需要打开/auth走验证流程直接访问/admin就可以进来管理首页这是极其不合理的。那岂不是谁知道地址谁都能进来瞎搞了。所以我们可以在 Shared 文件夹下添加一个权限验证的组件AdminLayout.razor。用来判断是否真的登录了。新建一个bool类型的变量 isLogin。默认肯定是false此时可以让页面转圈圈使用Loading /组件。当isLogin true的时候我们才展示具体的HTML内容。那么就需要用到服务端组件RenderFragment他有一个固定的参数名称ChildContent。判断是否登录的方法可以写在初始化方法中这里还少了一个API就是判断当前token的值是否合法合法就表示已经成功执行了验证流程了。token不存在或者不合法直接拒绝请求返回到首页去吧。整个代码如下if (!isLogin)
{Loading /
}
else
{ChildContent
}code {/// summary/// 展示内容/// /summary[Parameter]public RenderFragment ChildContent { get; set; }/// summary/// 是否登录/// /summaryprivate bool isLogin { get; set; }/// summary/// 初始化/// /summary/// returns/returnsprotected override async Task OnInitializedAsync(){var token await Common.GetStorageAsync(token);if (string.IsNullOrEmpty(token)){isLogin false;await Common.NavigateTo(/);}else{// TODO:判断token是否合法先默认都是正确的isLogin true;}}
}
使用这个组件也很方便了我们后台所有页面都引用AdminLayout将展示内容传递给就行了成功验证后就会展示HTM内容。在Admin.razor中使用。page /adminAdminLayoutdiv classpost-wraph2 classpost-title-nbsp;博客内容管理nbsp;-/h2ullia href/admin/posth3????~~~ 新增文章 ~~~????/h3/a/lilia href/admin/postsh3????~~~ 文章管理 ~~~????/h3/a/lilia href/admin/categoriesh3????~~~ 分类管理 ~~~????/h3/a/lilia href/admin/tagsh3????~~~ 标签管理 ~~~????/h3/a/lilia href/admin/friendlinksh3????~~~ 友链管理 ~~~????/h3/a/li/ul/div
/AdminLayout
现在清除掉浏览器缓存去请求/admin试试。完美比较简单的实现了验证是否登录的组件。其中还有许多地方可以优化就交给大家去自行完成了????。开源地址https://github.com/Meowv/Blog/tree/blog_tutorial
