七天.NET 8操作SQLite入门到实战 - 第七天BootstrapBlazor UI组件库引入(1)

前言

由于第七天Blazor前端页面编写和接口对接的内容比较的多,所以这一章节将会分为三篇文章来进行讲解,大家可以认为分为早、中、晚来进行阶段性学习,从而提高学习效率。

七天.NET 8操作SQLite入门到实战 - 第七天BootstrapBlazor UI组件库引入(1)_第1张图片

七天.NET 8 操作 SQLite 入门到实战详细教程

  • 第一天 SQLite 简介
  • 第二天 在 Windows 上配置 SQLite 环境
  • 第三天 SQLite 快速入门
  • 第四天 EasySQLite 前后端项目框架搭建
  • 第五天引入 SQLite-net ORM 并封装常用方法
  • 第六天后端班级管理相关接口完善和Swagger自定义配置

EasySQLite 项目源码地址

GitHub 地址:GitHub - YSGStudyHards/EasySQLite: 七天.NET 8操作SQLite入门到实战详细教程

Blazor简介和快速入门

不熟悉Blazor的同学可以先看这篇文章大概了解一下。

全面的ASP.NET Core Blazor简介和快速入门:全面的ASP.NET Core Blazor简介和快速入门

BootstrapBlazor介绍

  • 使用文档:https://www.blazor.zone/introduction
  • Gitee项目地址:https://gitee.com/LongbowEnterprise/BootstrapBlazor

BootstrapBlazor是一套基于 Bootstrap 和 Blazor 的企业级组件库,可以认为是 Bootstrap 项目的 Blazor 版实现。基于 Bootstrap 样式库精心打造,并且额外增加了 100 多种常用的组件,为您快速开发项目带来非一般的感觉(喜欢Bootstrap风格的同学推荐使用)。

BootstrapBlazor类库安装

管理Nuget程序包=>搜索BootstrapBlazor进行安装。

七天.NET 8操作SQLite入门到实战 - 第七天BootstrapBlazor UI组件库引入(1)_第2张图片

BootstrapBlazor库注入容器

Program.cs中将 BootstrapBlazor 库添加到 ASP.NET Core 项目中的依赖关系注入容器中。

七天.NET 8操作SQLite入门到实战 - 第七天BootstrapBlazor UI组件库引入(1)_第3张图片

导入BootstrapBlazor组件库命名空间

打开_Imports.razor文件,导入BootstrapBlazor组件库命名空间:@using BootstrapBlazor.Components。

七天.NET 8操作SQLite入门到实战 - 第七天BootstrapBlazor UI组件库引入(1)_第4张图片

Menu 导航菜单设置

MainLayout.razor

@inherits LayoutComponentBase


    
        Bootstrap of Blazor                  
         IsOpen = !IsOpen)">
                                                EasySQLite             
        
                                                   管理员             
            
        
         
                     @Body              
    
                     Bootstrap Admin         
                  

Sorry, there's nothing at this address.

    
              IsOpen = false)">点击关闭
                     

布局调整

                                                   IsFullSide = true)" data-toggle="tooltip" title="左右结构">                                                                                                                                                                                                                                                                                                                                  IsFullSide = false)" data-toggle="tooltip" title="上下结构">                                                                                                                                                                                                                                                                                                                                                            

固定调整

                                                                                                         固定页头                                                                                                                                        固定页脚                                                                                                                                        显示页脚                                                             

主题配色

                                                                                                                                                                                                                                                                                                                                                                                                  

更多设置

                                                                                                         @(UseTabSet ? "多标签" : "单页")                                            

MainLayout.razor.cs

    public partial class MainLayout
    {
        private bool UseTabSet { get; set; } = true;

        private string Theme { get; set; } = "";

        private bool IsOpen { get; set; }

        private bool IsFixedHeader { get; set; } = true;

        private bool IsFixedFooter { get; set; } = true;

        private bool IsFullSide { get; set; } = true;

        private bool ShowFooter { get; set; } = true;

        private List? Menus { get; set; }

        /// 
        /// OnInitialized 方法
        /// 
        protected override void OnInitialized()
        {
            base.OnInitialized();

            Menus = GetIconSideMenuItems();
        }

        private static List GetIconSideMenuItems()
        {
            var menus = new List
            {
               new MenuItem() { Text = "Home", Icon = "fa-solid fa-fw fa-flag", Url = "/" , Match = NavLinkMatch.All},
               new MenuItem() { Text = "班级管理", Icon = "fa-solid fa-fw fas fa-user-secret", Url = "SchoolClass" },
               new MenuItem() { Text = "学生管理", Icon = "fa-solid fa-fw fas fa-universal-access", Url = "Student" },
            };

            return menus;
        }
    }

Collapse 折叠面板组件引入

Home.razor

@page "/"








Home

七天.NET 8操作SQLite入门到实战详细教程

SQLite是一个轻量级的嵌入式关系型数据库,它以一个小型的C语言库的形式存在。它是一个自包含、无需服务器、零配置的数据库引擎。与传统的数据库系统不同,SQLite直接读写普通磁盘文件,不需要单独的数据库服务器。它支持标准的SQL查询语言,并提供了事务支持和ACID属性(原子性、一致性、隔离性和持久性)。
                                                
SQLite的库可以轻松地嵌入到应用程序中,不需要独立的数据库服务器进程。
                                          
与大多数数据库系统不同,SQLite不需要单独的数据库服务器,所有数据都存储在一个磁盘文件中。
                                          
使用SQLite时,没有任何复杂的配置或管理任务。只需引入SQLite库,并开始使用即可。
                                          
SQLite是一个轻量级的数据库引擎,库文件的大小很小,并且在内存使用方面也非常高效。
                     
         

Home.razor.cs

    public partial class Home
    {
        [NotNull]
        private ConsoleLogger? NormalLogger { get; set; }

        private Task OnChanged(CollapseItem item)
        {
            NormalLogger.Log($"{item.Text}: {item.IsCollapsed}");
            return Task.CompletedTask;
        }

        private bool State { get; set; }

        private void OnToggle()
        {
            State = !State;
        }

        /// 
        /// 获得属性方法
        /// 
        /// 
        private AttributeItem[] GetAttributes() =>
        [
            new()
            {
                Name = "CollapseItems",
                Description = "内容",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new()
            {
                Name = "IsAccordion",
                Description = "是否手风琴效果",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new()
            {
                Name = "OnCollapseChanged",
                Description = "项目收起展开状态改变回调方法",
                Type = "Func",
                ValueList = " — ",
                DefaultValue = " — "
            }
        ];
    }

    public class AttributeItem
    {
        /// 
        /// 获取或设置属性的名称。
        /// 
        public string Name { get; set; }

        /// 
        /// 获取或设置属性的描述。
        /// 
        public string Description { get; set; }

        /// 
        /// 获取或设置属性的类型。
        /// 
        public string Type { get; set; }

        /// 
        /// 获取或设置属性的取值列表(如果有)。
        /// 
        public string ValueList { get; set; }

        /// 
        /// 获取或设置属性的默认值。
        /// 
        public string DefaultValue { get; set; }
    }

DotNetGuide技术社区交流群

欢迎加入DotNetGuide技术社区微信交流群

你可能感兴趣的:(.NET,.NET,Core,C#,.net,sqlite,ui)