从零开始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
。
从零开始Blazor Server(1)--项目搭建的更多相关文章
- 从零开始Blazor Server(15)--总结
我们用了14篇文章,基本上把一个后台管理系统需要的UI部分都说的差不多了.所以这套文章也该到了结束的时候了. 这里面有很多问题,比如我们直接使用UI来拉数据库信息而没有使用service,再比如我们大 ...
- 从零开始Blazor Server(3)--添加cookie授权
认证方式简述 Blazor Server微软官方还是推荐直接使用Cookie授权,因为本来Blazor Server就是前后端不分离的.不存在Cookie跨域等一系列问题. 只要不是使用SSO之类的统 ...
- [Asp.Net Core] Blazor Server Side 项目实践 - 切换页面时保留状态
前言: 这是 项目实践系列 , 算是中高级系列博文, 用于为项目开发过程中不好解决的问题提出解决方案的. 不属于入门级系列. 解释起来也比较跳跃, 只讲重点. 因为有网友的项目需求, 所以提前把这些解 ...
- 从零开始Blazor Server(4)--登录系统
说明 上一篇文章中我们添加了Cookie授权,可以跳转到登录页了.但是并没有完成登录,今天我们来完成它. 我们添加Cookie授权的时候也说了,这套跟MVC一模一样,所以我们登录也是跟MVC一模一样. ...
- 从零开始Blazor Server(6)--基于策略的权限验证
写这个的原因 现在BootstrapBlazor处于大更新时期,Menu组件要改为泛型模式. 本来我们的这一篇应该是把Layout改了,但是改Layout肯定要涉及到菜单,如果现在写了呢,就进入一个发 ...
- 从零开始Blazor Server(9)--修改Layout
目前我们的MainLayout还是默认的,这里我们需要修改为BootstrapBlazor的Layout,并且处理一下菜单. 修改MainLayout BootstrapBlazor已经自带了一个La ...
- 从零开始Blazor Server(10)--编辑角色
例图 目前的样式是这样的: 其中角色在一个table里,然后可以增删改查,并且可以给指定的用户分配权限. 创建文件 首先我们在Pages/Admin目录下新建一个Role.razor.因为我们的Adm ...
- 从零开始Blazor Server(12)--编辑菜单
上个星期有点事,导致没法及时更新.现在我们继续更我们的从零开始系列. 这个系列也快要结束了,目前规划再有2-3篇,就结束了. 今天我们来说编辑菜单的问题,说实话菜单这种东西,你不更新代码加个页面,单独 ...
- 从零开始Blazor Server(2)--整合数据库
开篇 上一篇文章我们留了个尾巴,没有把freesql整合进去,这篇文章我们来整合. 目前的思路呢,是做一个简单的四不像的RABC,也有用户.角色. 权限三部分. 但是其中每个用户只有一个角色,即用户和 ...
随机推荐
- Dapr 不是服务网格,只是我长的和他很像
概述 我们快速看一遍官方文档:https://docs.dapr.io/concepts/service-mesh/#how-dapr-and-service-meshes-compare ,看看 D ...
- 设计模式---单例模式,pickle模块
设计模式---单例模式 简介 单例模式(Singleton Pattern) 是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实 例存在.当你希望在整个系统中,某个类只能出现一个实例时 ...
- kernel heap bypass smep,smap && 劫持modprobe_path
kernel heap bypass smep,smap && 劫持modprobe_path exp1 smep:smep即用户数据不可执行,当 CPU 处于 ring0 模式时,执 ...
- ElasticSearch7.3学习(二十五)----Doc value、query phase、fetch phase解析
1.Doc value 搜索的时候,要依靠倒排索引: 排序的时候,需要依靠正排索引,看到每个document的每个field,然后进行排序. 所谓的正排索引,其实就是doc values. 在建立索引 ...
- 4.0 vue绑定dom属性和函数的方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CentOS自动同步时间
安装ntpdate yum install ntpdate -y 测试是否正常 ntpdate cn.ntp.org.cn # 正常情况 [root@centos7 www]# ntpdate cn. ...
- 821. Shortest Distance to a Character - LeetCode
Question 821. Shortest Distance to a Character Solution 思路:遍历字符串S,遇到与字符C相等就分别向左/右计算其他字符与该字符的距离,如果其他字 ...
- unity---角色控制器控制角色移动
获取对象 public CharacterController cc; cc=gameObject.GetComponent<CharacterController>(); if(Inpu ...
- k8s client-go源码分析 informer源码分析(4)-DeltaFIFO源码分析
client-go之DeltaFIFO源码分析 1.DeltaFIFO概述 先从名字上来看,DeltaFIFO,首先它是一个FIFO,也就是一个先进先出的队列,而Delta代表变化的资源对象,其包含资 ...
- Git移除远程已经上传的文件
我们常常会将本地的一些秘钥文件不小心推送到远端,此时仅仅修改本地的.gitignore文件,然后再提交推送是不能将远端的此文件删除的. 此时可以用下面的命令 git rm --cached filen ...