从零开始Blazor Server(1)--项目搭建 - jvx
source link: https://www.cnblogs.com/j4587698/p/16524802.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
从零开始Blazor Server(1)--项目搭建
本次项目准备搭建一个使用Furion框架,Blazor的UI使用BootstrapBlazor、数据库ORM使用Freesql的后台管理系统。
目前的规划是实现简单的注册,登录。增加管理员跟普通用户两种权限,不会实现复杂的权限管理,但是也不准备用默认的那套,自己实现一个简单的架子把。
然后实现一下后台对用户的删除,禁用。
大概就这个逻辑,后面想写别的再说。
创建项目我们不使用任何模板,直接建立官方模板的blazor项目来做,这样应该是最通用的。
首先我们建立一个Blazor Server的项目。这个就不用多说了吧,直接用你的IDE建立一个Blazor Server项目就行了。
然后用NuGet管理器分别安装Furion
、BootstrapBlazor
、BootstrapBlazor.FontAwesome
、FreeSql.Extensions.BaseEntity
、FreeSql.Provider.Sqlite
。
BootstrapBlazor.FontAwesome
是一个FontAwesome
的扩展,在BootstrapBlazor
中默认使用FontAwesome
图标,这里直接引用即可。
这里简单解释一下,因为我们是测试使用,所以就直接使用sqlite
,只需要安装FreeSql.Provider.Sqlite
就可以了。如果你需要连接MySql
、达梦
等其他数据库,需要安装对应的Provider包。
FreeSql.Extensions.BaseEntity
是一个简化的Entity
库,可以自动添加主键、创建时间、修改时间。这样我们在建表的时候就可以方便很多。
在
Pargram.cs
中引入Furion
var builder = WebApplication.CreateBuilder(args).Inject();
在builder
中添加.Inject()
。
app.UseInjectBase();
在app中添加这句app.UseInjectBase();
。
注意这里要是
UseInjectBase
不能是UseInject
,因为我们是纯Blazor项目,没有MVC,所以Swagger
是无法绑定的。UseInject
默认添加了Swagger
,所以这里会出错。
这样Furion就引入成功了。
引入BootstrapBlazor
在
Pages/_Layout.csthml
中的部分,首先移除原来的Bootstrap
的css
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
然后添加BootstrapBlazor
的
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">
同时我们需要引入Fontawasome
的图标库,所以需要引入
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">
<script src="_framework/blazor.server.js"></script>
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
在
Pargram.cs
中添加BootstrapBlazor
的服务。
builder.Services.AddBootstrapBlazor();
在
~/_Imports.razor
添加全局的引用,使我们的每个组件都可以不用再次import
就可以使用组件。
@using BootstrapBlazor.Components
在
~/App.razor
增加BootstrapBlazorRoot
组件,
<BootstrapBlazorRoot>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
<FocusOnNavigate RouteData="@routeData" Selector="h1"/>
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</BootstrapBlazorRoot>
这样我们的Furion
和BootstrapBlazor
就就整合好了。
Freesql的整合我们后面再说。
项目源码在github: https://github.com/j4587698/BlazorLearn,每篇文章都对应者一个分支,这篇的分支是lesson1
。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK