项目介绍

本次项目准备搭建一个使用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. Dapr 不是服务网格,只是我长的和他很像

    概述 我们快速看一遍官方文档:https://docs.dapr.io/concepts/service-mesh/#how-dapr-and-service-meshes-compare ,看看 D ...

  2. 设计模式---单例模式,pickle模块

    设计模式---单例模式 简介 单例模式(Singleton Pattern) 是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实 例存在.当你希望在整个系统中,某个类只能出现一个实例时 ...

  3. kernel heap bypass smep,smap && 劫持modprobe_path

    kernel heap bypass smep,smap && 劫持modprobe_path exp1 smep:smep即用户数据不可执行,当 CPU 处于 ring0 模式时,执 ...

  4. ElasticSearch7.3学习(二十五)----Doc value、query phase、fetch phase解析

    1.Doc value 搜索的时候,要依靠倒排索引: 排序的时候,需要依靠正排索引,看到每个document的每个field,然后进行排序. 所谓的正排索引,其实就是doc values. 在建立索引 ...

  5. 4.0 vue绑定dom属性和函数的方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. CentOS自动同步时间

    安装ntpdate yum install ntpdate -y 测试是否正常 ntpdate cn.ntp.org.cn # 正常情况 [root@centos7 www]# ntpdate cn. ...

  7. 821. Shortest Distance to a Character - LeetCode

    Question 821. Shortest Distance to a Character Solution 思路:遍历字符串S,遇到与字符C相等就分别向左/右计算其他字符与该字符的距离,如果其他字 ...

  8. unity---角色控制器控制角色移动

    获取对象 public CharacterController cc; cc=gameObject.GetComponent<CharacterController>(); if(Inpu ...

  9. k8s client-go源码分析 informer源码分析(4)-DeltaFIFO源码分析

    client-go之DeltaFIFO源码分析 1.DeltaFIFO概述 先从名字上来看,DeltaFIFO,首先它是一个FIFO,也就是一个先进先出的队列,而Delta代表变化的资源对象,其包含资 ...

  10. Git移除远程已经上传的文件

    我们常常会将本地的一些秘钥文件不小心推送到远端,此时仅仅修改本地的.gitignore文件,然后再提交推送是不能将远端的此文件删除的. 此时可以用下面的命令 git rm --cached filen ...