526互联

用ABP Suite创建Blazor Server的应用程序

发布时间 2023-05-20 14:57:32作者: 终南山人

这个应用程序我们取名为BlazorOne，意思是集AuthServer、HttpApi Host和Blazor Server3个功能于一体的应用程序。因为ABP Suite支持另外一种模式，是把上述3个功能独立部署。为了由浅入深的介绍ABP的模块化开发，我们先完成BlazorOne吧！

# 1、

1

# 2、我们的解决方案名字叫Study.BlazorOne，其它信息如下图。滚动条未显示的区域都不需要改动。

1

# 3、上图点OK后

3

# 4、下图中点“yes”，自动创建数据库并且添加种子数据。

4

# 5、完成后，数据库中多了一个BlazorOne“。并且EntityFrameworkCore完成了第一次迁移/更新。

5

因为ABP自动在EntityFrameworkCore的项目上运行了命令，生成了下述迁移文件，并且调用了dotnet ef的database update方法，生成了上述数据库：

61

# 6、尝试启动Blazor Server程序吧

先修改Web的承载方式

6

然后直接强势启动一下

7

# 7、接受浏览器的SSL证书警告

8

# 8、可能得到的是错误的页面，也可能一次成功。我得到的是错误的页面

9

# 9、在Blazor项目上运行abp install-libs这个命令就可以修复错误

10

11

# 10、再次运行后，错误依旧。

这时我们应该注意到，上述界面上的警告YARN is not installed, which may cause package inconsistency, please use YARN instead of NPM. visit https://classic.yarnpkg.com/lang/en/docs/install/ and install YARN

# 11、安装YARN，然后再次执行abp install-libs

根据上述提示，打开网页https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable

页面如下：

15

那我们就在Visual Studio的“开发者PowerShell”那里执行上述命令

13

再执行一次abp install-libs

16

# 12、在Visual Studio里检查一下，发现报错缺少的文件，已经自动出现了。

17

# 12、再次启动程序，顺利打开界面。

14

# 13、如果折腾abp install-libs的时候，执行之后始终缺少文件，那就是2个原因：

1）需要删除yarn.lock

19

2）ABP的版本变了，导致NuGet的包的版本也变化很大，package.json文件的内容需要更新。更新的办法，就是用正确的ABP Suite创建一个新的模板，从这个模板的对应项目下拷贝package.json的内容来即可。比如7.2.2的Blazor Server类型的项目的package.json文件内容是这样的：

{
  "version": "1.0.0",
  "name": "my-app",
  "private": true,
  "dependencies": {
    "@volo/abp.aspnetcore.mvc.ui.theme.leptonx": "~2.2.0-rc.1",
    "@volo/aspnetcore.components.server.leptonxtheme": "~2.2.0-rc.1",
    "@volo/cms-kit-pro.admin": "~7.2.2",
    "@volo/account": "~7.2.2",
    "@volo/language-management": "~7.2.2"
  }
}

这篇文章就到这里。