在ABP的模块解决方案中使用BootstrapBlazor

1、为Study.Trade.Blazor.Server.Host引入两个包

成功后效果如下：

2、修改Study.Trade.Blazor.Server.Host的Pages目录下的_Host.cshtml文件

没有修改前是这样：

修改后是这样：

3、修改Program.cs

官网说了，net 5就修改StartUp.cs，net 6以上就修改Program.cs。我们都net 7了，自然是修改Program.cs

没有修改前（我们将在红框的两行代码中间增加内容）

修改后：

4、修改Web的承载方式，不使用IIS Express。

5、启动吧

点“高级”，再选择“接受风险并继续”

6、浏览器显示了新的错误

修复这个错误，就是需要运行abp install-libs这个命令

7、为Study.Trade.Blazor.Server.Host运行abp install-libs

在Study.Trade.Blazor.Server.Host项目上点右键，选择“在终端中打开”

执行命令abp install-libs

耐心等待：

执行成功啦：

8、再次启动

成功啦！

但是只是项目在引入了BootstrapBlazor组件后，“依然能正常运行”而已，我们并没有使用任何BootstrapBlazor的控件。

9、为Study.Trade.Blazor项目添加BootstrapBlazor的包

10、修改Study.Trade.Blazor项目的_Imports.razor文件

修改前：

修改后：

1）删除了ABP默认的Blazorise组件需要的2行命名空间；

2）BootstrapBlazor组件需要引用BootstrapBlazor.Components

3）我们的例子需要ABP Suite自动生成的和Customer Order有关的代码，所以需要引用Study.Trade.CustomerOrders

11、开始写我们的第一个Blazor页面

如下图，在Pages/Trade目录上点右键，选择“添加”，再选择“Razor组件……”：

名称我们输入OrderList，然后点“添加（A）”：

成功后如下图：

12、设置页面的网址

就是在razor顶部加一句@page "/orders"即可：

13、注入订单的服务

就是加一句@inject ICustomerOrdersAppService CustomerOrdersAppService

（在__mports.razor里已经引用了命名空间了）

14、用BootstrapBlazor的Table组件来呈现CustomerOrder的列表

15、强势启动一下

启动后，不要点“登入”按钮，而是直接在浏览器地址栏后边加上/orders，进入我们开发的页面。

控制台报错：

报的错误是权限异常，也就是用户不须有特定的权限。

浏览器的Table的位置一直转啊转，网页底部有黄色警告栏

15、给页面声明需要的授权

16、再访问/orders路径的时候，被重定向到了登入页面

输入默认用户admin

默认密码：

1q2w3E*

登入后自动跳转到了/orders

这篇文章就先到这里。