从零开始Blazor Server(1)–项目搭建

  • 2022 年 7 月 27 日
  • 筆記

项目介绍

本次项目准备搭建一个使用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库，可以自动添加主键、创建时间、修改时间。这样我们在建表的时候就可以方便很多。

配置项目

  1. 在Pargram.cs中引入Furion

var builder = WebApplication.CreateBuilder(args).Inject();

在builder中添加.Inject()。

app.UseInjectBase();

在app中添加这句app.UseInjectBase();。

注意这里要是UseInjectBase不能是UseInject，因为我们是纯Blazor项目，没有MVC，所以Swagger是无法绑定的。UseInject默认添加了Swagger，所以这里会出错。

这样Furion就引入成功了。

  1. 引入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: //github.com/j4587698/BlazorLearn，每篇文章都对应者一个分支，这篇的分支是lesson1。

VirMach 便宜 VPS

QNews

QNews