• 欢迎光临~

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

开发技术 开发技术 2022-07-27 次浏览

项目介绍

本次项目准备搭建一个使用Furion框架,Blazor的UI使用BootstrapBlazor、数据库ORM使用Freesql的后台管理系统。


目前的规划是实现简单的注册,登录。增加管理员跟普通用户两种权限,不会实现复杂的权限管理,但是也不准备用默认的那套,自己实现一个简单的架子把。

然后实现一下后台对用户的删除,禁用。


大概就这个逻辑,后面想写别的再说。

创建项目

创建项目我们不使用任何模板,直接建立官方模板的blazor项目来做,这样应该是最通用的。


首先我们建立一个Blazor Server的项目。这个就不用多说了吧,直接用你的IDE建立一个Blazor Server项目就行了。


然后用NuGet管理器分别安装FurionBootstrapBlazorBootstrapBlazor.FontAwesomeFreeSql.Extensions.BaseEntityFreeSql.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>

这样我们的FurionBootstrapBlazor就就整合好了。


Freesql的整合我们后面再说。


项目源码在github: https://github.com/j4587698/BlazorLearn,每篇文章都对应者一个分支,这篇的分支是lesson1

程序员灯塔
转载请注明原文链接:从零开始Blazor Server(1)--项目搭建
喜欢 (0)