项目介绍

本次项目准备搭建一个使用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)--项目搭建的更多相关文章

  1. 从零开始Blazor Server(15)--总结

    我们用了14篇文章,基本上把一个后台管理系统需要的UI部分都说的差不多了.所以这套文章也该到了结束的时候了. 这里面有很多问题,比如我们直接使用UI来拉数据库信息而没有使用service,再比如我们大 ...

  2. 从零开始Blazor Server(3)--添加cookie授权

    认证方式简述 Blazor Server微软官方还是推荐直接使用Cookie授权,因为本来Blazor Server就是前后端不分离的.不存在Cookie跨域等一系列问题. 只要不是使用SSO之类的统 ...

  3. [Asp.Net Core] Blazor Server Side 项目实践 - 切换页面时保留状态

    前言: 这是 项目实践系列 , 算是中高级系列博文, 用于为项目开发过程中不好解决的问题提出解决方案的. 不属于入门级系列. 解释起来也比较跳跃, 只讲重点. 因为有网友的项目需求, 所以提前把这些解 ...

  4. 从零开始Blazor Server(4)--登录系统

    说明 上一篇文章中我们添加了Cookie授权,可以跳转到登录页了.但是并没有完成登录,今天我们来完成它. 我们添加Cookie授权的时候也说了,这套跟MVC一模一样,所以我们登录也是跟MVC一模一样. ...

  5. 从零开始Blazor Server(6)--基于策略的权限验证

    写这个的原因 现在BootstrapBlazor处于大更新时期,Menu组件要改为泛型模式. 本来我们的这一篇应该是把Layout改了,但是改Layout肯定要涉及到菜单,如果现在写了呢,就进入一个发 ...

  6. 从零开始Blazor Server(9)--修改Layout

    目前我们的MainLayout还是默认的,这里我们需要修改为BootstrapBlazor的Layout,并且处理一下菜单. 修改MainLayout BootstrapBlazor已经自带了一个La ...

  7. 从零开始Blazor Server(10)--编辑角色

    例图 目前的样式是这样的: 其中角色在一个table里,然后可以增删改查,并且可以给指定的用户分配权限. 创建文件 首先我们在Pages/Admin目录下新建一个Role.razor.因为我们的Adm ...

  8. 从零开始Blazor Server(12)--编辑菜单

    上个星期有点事,导致没法及时更新.现在我们继续更我们的从零开始系列. 这个系列也快要结束了,目前规划再有2-3篇,就结束了. 今天我们来说编辑菜单的问题,说实话菜单这种东西,你不更新代码加个页面,单独 ...

  9. 从零开始Blazor Server(2)--整合数据库

    开篇 上一篇文章我们留了个尾巴,没有把freesql整合进去,这篇文章我们来整合. 目前的思路呢,是做一个简单的四不像的RABC,也有用户.角色. 权限三部分. 但是其中每个用户只有一个角色,即用户和 ...

随机推荐

  1. .NET程序设计实验2

    1.设计编写一个控制台应用程序,练习类的继承. (1) 编写一个抽象类 People,具有"姓名","年龄"字段,"姓名"属性,Work 方 ...

  2. 安装Iftop到CentOS(YUM)

    iftop是Linux系统下实时流量监控工具. 运行环境 系统版本:CentOS Linux release 7.6.1810 (Core) 软件版本:Python 硬件要求:无 安装过程 1.安装i ...

  3. VB.net使用Microsoft.Office.Interop.Excel对Excel进行简单的读取和写入

    环境:Visual Stadio 2017  .NET Framework 4.6.1 1.直接进入正题,新建一个控制台程序,右键引用-管理Nuget程序包,搜索Microsoft.Office.In ...

  4. CAP 6.1 版本发布通告

    前言 今天,我们很高兴宣布 CAP 发布 6.1 版本正式版,在这个版本中我们主要针对目前已经发现的几个BUG进行了修复了以及添加了一些小特性. 那么,接下来我们具体看一下吧. 总览 可能有些人还不知 ...

  5. 开源项目 PM 浅谈如何设计官网

      有用户反馈进入官网首页光秃秃的一片,大家忙着做产品,忽略了官网的建设,惭愧惭愧.   确实,极简风格和极其简单还是有很大区别的.     旧的 Web 端   除了极其简单之外,它还有一个小问题, ...

  6. Linux安装netstat命令

    Linux安装netstat命令 1.查找netstat命令所属的依赖包 [root@localhost ~]# yum provides netstat netstat命令的安装包为net-tool ...

  7. C语言学习之我见-strcat()字符拼接函数(有缺陷)

    strcat()函数,用于两个字符串的拼接. (1)函数原型: char * strcat(char *Dest,const char * Source); (2)头文件: #include < ...

  8. SAP Tree

    Effect picture Code as bellow *&---------------------------------------------------------------- ...

  9. js 表面学习 - 认识事件

    事件 描述 onchange HTML 元素已被改变 onclick 用户点击了 HTML 元素 onmouseover 用户把鼠标移动到 HTML 元素上 onmouseout 用户把鼠标移开 HT ...

  10. MySQL十种锁,一篇文章带你全解析

    MySQL有两个核心的知识点,索引和锁.前几篇文章已经详细讲解了MySQL索引实现机制,今天再一起学习一下MySQL的锁. 1 为什么要加锁? 当多个事务并发操作同一批数据的时候,如果不加锁,就无法保 ...