吐槽一下最近开发blazor SPA应用遇到的坑

跳动de指尖 2021-02-23 04:59:49
我用的是 Ant Design of Blazor

首先,我觉得blazor最大的问题就是断点偶尔失效的问题,这点很烦,不能debug,只能从堆栈信息里面找到底哪里出错了。

.net standar API好少,NuGet上基于standar的库能用的也不多。


还有导航,在当前页导航到当前页是不会触发OnInitializedAsync,相当于js的pushState() 但是没有任何配套功能

[Inject]
private NavigationManager Navigation { get; set; }

private asycn Task QueryAsycn()
{

/* 如果我当前页是 /Demo
* 那么我想筛选数据,导航到 /Demo?name=123,地址会变,但是不会OnInitializedAsync
* 不知道是我的想法没跟上还是本该这样子
*/
Navigation.NavigateTo("/Demo?name=123");
//如果导航到其他页面倒是符合预期,像这样
Navigation.NavigateTo("/Welcome?name=123");

//所以目前我处理的方式是 navigateTo 后,继续查询数据更新UI
Source = await LoadDataAsync();
}


RenderFragment 用代码的方式构建好麻烦,我开发的方式是
Welcome.razor
Welcome.razor.cs

//file Welcome.razor.cs
public partial class Webcome{}

就想着以后好维护,层次看的清晰,更纯粹干净,但是不得已还是在razor上添加了代码

//在razor文件上构建RenderFragment很简单 ,var rf = @<tag></tag>
private string NewTag { get; set; }

private RenderFragment DropdownRender(RenderFragment originNode)
{
RenderFragment customDropdownRender =
@<Template>
<div>
@originNode
<Divider Style="margin: 4px 0"></Divider>
<div style="display: flex; flex-wrap: nowrap; padding: 8px">
<Input Style="flex: auto" @bind-Value="NewTag"/>
<a style="flex: none; padding: 8px; display: block; cursor: pointer" @onclick="AddItem">
<Icon Type="plus" Theme="outline"></Icon>
添加标签
</a>
</div>
</div>
</Template>;

return customDropdownRender;
}

private void AddItem(MouseEventArgs args)
{
if (!string.IsNullOrWhiteSpace(NewTag))
{
_tags.AddItem(NewTag);
NewTag = string.Empty;
}
}

//但是在cs文件里面构建很麻烦,RenderFragment是一颗结构树,就简单一个图标都没那么便捷
var icon = builder =>
{
builder.OpenComponent<Icon>(0);
builder.AddAttribute(0,"Type","exclamation-circle");
builder.AddAttribute(1,"Theme","outline");
builder.CloseComponent();
},


就我上面的例子,就为了在下拉框新增一个值,把我坑惨了,花了我半天时间,就为了实现这么一个功能而已

然后就报错

因为什么? 因为 NewTag最开始我定义的是字段,不是属性
private string _newTag = string.Empty;
花半天时间浪费在这儿了。

还有一个路由问题,因为我要管理一些文件,所以路由参数值里面必然会有(. dot 点 )这个符号,然后404了。
嗯,想了一下,肯定是当作静态文件访问给处理了,没问题。
然后我去MSDN找文档看有什么解决办法
刚好也有。
引用
Routing with URLs that contain dots
For hosted Blazor WebAssembly and Blazor Server apps, the server-side default route template assumes that if the last segment of a request URL contains a dot (.) that a file is requested. For example, the URL https://localhost.com:5001/example/some.thing is interpreted by the router as a request for a file named some.thing. Without additional configuration, an app returns a 404 - Not Found response if some.thing was meant to route to a component with an @page directive and some.thing is a route parameter value. To use a route with one or more parameters that contain a dot, the app must configure the route with a custom template.

Consider the following Example component that can receive a route parameter from the last segment of the URL.

@page "/example/{param?}"

<p>
Param: @Param
</p>

@code {
[Parameter]
public string Param { get; set; }
}

照做,然后喜闻乐见了,依然404
目前还没解决,哈哈 。等会儿还是解决不了,我就采用QueryString的方式吧。





哈哈哈哈,写了几天了,想吐槽 吐槽 吐槽 吐槽
...全文
489 5 打赏 收藏 举报
写回复
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
关于路径中的“点符号(dot)”或者其它什么特殊符号,请遵守最基本的 http 路径规范,该 urlencode 的就 encode。调试一下你的路径,以调试为准,以基础逻辑知识结构为根本。
  • 打赏
  • 举报
回复
你的“层次看的清晰,更纯粹干净”我认为是没有层次,道完全不同。 分层的 MVVM 开发就是基本上不写代码“意淫”什么UI控件,而你写代码时为了在代码中拼凑零碎的控件 dhtml 代码。这是完全不同的道,没有分层概念。
  • 打赏
  • 举报
回复
guanyinsishengzi 2021-02-24
server-side模式所有处理逻辑和渲染都放在服务端,大量用户同时访问的情况下,会不会造成服务端压力过大。
  • 打赏
  • 举报
回复
跳动de指尖 2021-02-24
引用 1 楼 楠小南 的回复:
异常处理不好 线路很容易挂的,线路挂了你还得刷新重启线路 其他的还好,有一个最坑的就是 他的生命周期是基于连接的,即你依赖注入的服务默认都视为 scope 等同单例 ,坑吧! 要是你用EF 之类的东西 就把你坑得死死的,这东西不看官网一定掉坑里
你用的blazor server吧?我用的是blazor WebAssembly ,访问web api ,我还以为blazor server坑少一些呢
  • 打赏
  • 举报
回复
楠小南 2021-02-23
异常处理不好 线路很容易挂的,线路挂了你还得刷新重启线路 其他的还好,有一个最坑的就是 他的生命周期是基于连接的,即你依赖注入的服务默认都视为 scope 等同单例 ,坑吧! 要是你用EF 之类的东西 就把你坑得死死的,这东西不看官网一定掉坑里
  • 打赏
  • 举报
回复
相关推荐
发帖
C#

10.8w+

社区成员

.NET技术 C#
社区管理员
  • C#
  • Web++
  • by_封爱
加入社区
帖子事件
创建了帖子
2021-02-23 04:59
社区公告

让您成为最强悍的C#开发者