Blazor入门-连接MySQL的简单例子:列出数据+简单查询

2024-05-29 19:20

本文主要是介绍Blazor入门-连接MySQL的简单例子:列出数据+简单查询,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

参考:
ASP.NET Core 6.0 Blazor Server APP并使用MySQL数据库_blazor mysql-CSDN博客
https://blog.csdn.net/mzl87/article/details/129199352

本地环境:win10, visual studio 2022 community, mysql 8.0.33 (MySQL Community Server), net core 6.0


目录

  • 问题
  • 实现效果
  • 前置工作
    • 配置VS插件/程序包
    • 配置MySQL
  • blazor配置和编码
    • 1.创建模型类
    • 2.创建连接类
      • 2.1创建连接辅助类
      • 2.2创建连接类
    • 3.创建服务类
    • 4.创建客户端razor
    • 5.配置侧边栏

问题

假设本地装有MySQL,里面有一个数据库名为vector,其下有一个表名为basic_unit,现在需要在某个网页上:

  • 列出basic_unit中所有数据
  • 能根据字段 Name 和(或)Type 查询并列出结果。

实现效果

  1. 列出所有数据
    在这里插入图片描述
  2. 查询
    在这里插入图片描述

前置工作

配置VS插件/程序包

使用 NuGet 安装如下两个程序包。其中,第一个包可能要对照.NET的版本,如果对不上会安装失败。
在这里插入图片描述

配置MySQL

首先创建一个表:

create table basic_unit(id int unsigned not null AUTO_INCREMENT,name varchar(200) default null,ustart int default -1,uend int default -1,direction varchar(1) default 'n',unit_type varchar(100) default null,seq varchar(15000) default null,primary key(id)
) engine=InnoDB;

然后创建一个procedure:

use vector;
delimiter $$mysql> create procedure SearchBU(in n varchar(200), in utype varchar(100))-> BEGIN-> select name, ustart, uend, direction, unit_type, seq-> from basic_unit-> where->     name like concat('%', n, '%')->     and->     unit_type like concat('%', utype, '%');-> END$$
Query OK, 0 rows affected (0.04 sec)

测试一下procedure是否创建成功:

mysql> call SearchBU("AmpR promoter","promoter");
+---------------+--------+------+-----------+-----------+-----------------------------------------------------------------------------------------------------------+
| name          | ustart | uend | direction | unit_type | seq                                                                                                       |
+---------------+--------+------+-----------+-----------+-----------------------------------------------------------------------------------------------------------+
| AmpR promoter |      1 |  105 | f         | promoter  | CGCGGAACCCCTATTTGTTTATTTTTCTAAATACATTCAAATATGTATCCGCTCATGAGACAATAACCCTGATAAATGCTTCAATAATATTGAAAAAGGAAGAGT |
+---------------+--------+------+-----------+-----------+-----------------------------------------------------------------------------------------------------------+
1 row in set (0.00 sec)Query OK, 0 rows affected (0.01 sec)

blazor配置和编码

blazor项目的创建参见下面的链接,此处不再展开。

Blazor入门-基础知识+vs2022自带例程的理解_blazor教程 菜鸟-CSDN博客
https://blog.csdn.net/pxy7896/article/details/138621017

1.创建模型类

在项目中新建一个文件夹Models,然后创建一个模型类 BasicUnit。我把Models放在Data文件夹下,其实也可以放在根目录,都可以。

namespace BlazorApp1.Data.Models
{public class BasicUnit{public int Id { get; set; }public string? Name { get; set; }public int Ustart { get; set; } = -1;public int Uend { get; set; } = -1;public string Direction { get; set; } = "n";public string? UnitType { get; set; }public string? Seq { get; set; }}
}

2.创建连接类

2.1创建连接辅助类

还是在Models下创建一个连接辅助类 MySQLHelper,内容为:

using MySqlConnector;namespace BlazorApp1.Data.Models
{public class MySQLHelper{//this field gets initialized at Program.cspublic static string? conStr;public static MySqlConnection GetConnection(){try{MySqlConnection connection = new MySqlConnection(conStr);return connection;}catch (Exception e){Console.WriteLine(e);throw;}}}
}

然后在 Program.cs 中初始化这个辅助类:

using BlazorApp1.Data.Models;
....
builder.Services.AddServerSideBlazor();
...
// connect mysql
MySQLHelper.conStr = builder.Configuration["ConnectionStrings:DefaultConnection"];var app = builder.Build();
...

然后修改 appsettings.json ,增加一段内容:

  "ConnectionStrings": {"DefaultConnection": "server=localhost;user id=用户名;password=密码;port=3306;database=数据库名称;"},

这样连接辅助类就拿到连接所需的各种信息了。

2.2创建连接类

下面的代码很好理解,就是在函数里执行查询过程,然后包装结果,准备传递给service。

using BlazorApp1.Data.Models;
using MySqlConnector;
using System.Data;namespace BlazorApp1.Data
{public class BasicUnitConnection{public async Task<BasicUnit[]> SearchBasicUnits(string name, string utype) { List<BasicUnit> basicUnits = new List<BasicUnit>();// 辅助类提供了连接信息using (MySqlConnection conn = MySQLHelper.GetConnection()) { // open connectionconn.Open();// SearchBU 是前面创建的查询过程(procedure)using (MySqlCommand cmd = new MySqlCommand("SearchBU", conn)) {cmd.CommandType = CommandType.StoredProcedure;// add parameterscmd.Parameters.Add(new MySqlParameter { ParameterName = "@n",DbType = DbType.String,Value = name,Direction = ParameterDirection.Input,});cmd.Parameters.Add(new MySqlParameter{ParameterName = "@utype",DbType = DbType.String,Value = utype,Direction = ParameterDirection.Input,});// 执行查询,将收到的查询结果包装成模型对象// 查询结果应与sql查询语句对应,包括类型using (MySqlDataReader reader = cmd.ExecuteReader()) {while (reader.Read()) {basicUnits.Add(new BasicUnit() { Name = reader.GetString("name"),Ustart = reader.GetInt32("ustart"),Uend = reader.GetInt32("uend"),Direction = reader.GetString("direction"),UnitType = reader.GetString("unit_type"),Seq = reader.GetString("seq"),});}} }}//Console.WriteLine(basicUnits.Count);return basicUnits.ToArray();}}
}

3.创建服务类

服务类更简单了,只要调用上面的连接类里的函数即可。

using BlazorApp1.Data.Models;namespace BlazorApp1.Data
{public class BasicUnitService{private BasicUnitConnection conn { get; set; } = new BasicUnitConnection();public async Task<BasicUnit[]> GetBasicUnitsByNameType(string name, string type) {BasicUnit[] res = conn.SearchBasicUnits(name, type).Result.ToArray();return res;}}
}

4.创建客户端razor

razor是显示内容的元件,里面包括一个查询框和一个查询结果列表,两个都是table。

需要注意的是,如果模型的一个属性可能是null,需要注意处理。

@page "/basicunit/list"
@using BlazorApp1.Data
@using BlazorApp1.Data.Models;
@inject BasicUnitService basicUnitService<h3>BasicUnitList</h3><!-- search frame -->
<table><tr style="height: 30px; background-color:#336699 ;color:#FFFFFF ;border: solid 1px #659EC7;"><td colspan="5" align="left">Search BasicUnit</td></tr><tr><td>Name:</td><td><input class="input-group-text" type="text" @bind-value="@custName" /></td><td>Type:</td><td><input class="input-group-text" type="text" @bind-value="@custType" /></td><td><input type="button" class="btn btn-primary"value="Search" @onclick="@searchDetails" /></td></tr>
</table><hr/>@if (basicUnits == null)
{<p><em>Loading...</em></p>
} else
{<table class="table"><thead><tr><th>Name</th><th>Start</th><th>End</th><th>Length</th><th>Direction</th><th>Type</th><th>Seq</th></tr></thead><tbody>@foreach(var bu in basicUnits){bsize = @bu.Uend - bu.Ustart + 1;if (@bu.Seq != null){bseq = bu.Seq;if (bsize > 50){bseq = bseq.Substring(0, 50) + "...";}}<tr><td>@bu.Name</td><td>@bu.Ustart</td><td>@bu.Uend</td><td>@bsize</td><td>@bu.Direction</td><td>@bu.UnitType</td><td>@bseq</td></tr>    }</tbody></table>    
}

代码部分则是:

@code {private string custName = "";private string custType = "";private BasicUnit[]? basicUnits;private int bsize = -1; // 因为要计算seq属性的长度,所以额外用一个变量private string bseq = ""; // 显示的seqprotected override async Task OnInitializedAsync(){basicUnits = await basicUnitService.GetBasicUnitsByNameType(custName, custType);	}async Task searchDetails(){basicUnits = await basicUnitService.GetBasicUnitsByNameType(custName, custType);} }

5.配置侧边栏

修改 NavMenu.razor ,给侧边栏增加一个链接:

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu"><nav class="flex-column"><div class="nav-item px-3"><NavLink class="nav-link" href="/" Match="NavLinkMatch.All"><span class="oi oi-home" aria-hidden="true"></span> Home</NavLink></div><!-- 新增的部分 --><div class="nav-item px-3"><!-- href就是上面razor里@page后跟的字符串 --><NavLink class="nav-link" href="/basicunit/list"><span class="oi oi-list-rich" aria-hidden="true"></span> Basic Unit</NavLink></div><!-- 新增的部分 END -->      </nav>
</div>

done.

这篇关于Blazor入门-连接MySQL的简单例子:列出数据+简单查询的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1014415

相关文章

Windows 上如果忘记了 MySQL 密码 重置密码的两种方法

《Windows上如果忘记了MySQL密码重置密码的两种方法》:本文主要介绍Windows上如果忘记了MySQL密码重置密码的两种方法,本文通过两种方法结合实例代码给大家介绍的非常详细,感... 目录方法 1:以跳过权限验证模式启动 mysql 并重置密码方法 2:使用 my.ini 文件的临时配置在 Wi

MySQL重复数据处理的七种高效方法

《MySQL重复数据处理的七种高效方法》你是不是也曾遇到过这样的烦恼:明明系统测试时一切正常,上线后却频频出现重复数据,大批量导数据时,总有那么几条不听话的记录导致整个事务莫名回滚,今天,我就跟大家分... 目录1. 重复数据插入问题分析1.1 问题本质1.2 常见场景图2. 基础解决方案:使用异常捕获3.

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

SQL中redo log 刷⼊磁盘的常见方法

《SQL中redolog刷⼊磁盘的常见方法》本文主要介绍了SQL中redolog刷⼊磁盘的常见方法,将redolog刷入磁盘的方法确保了数据的持久性和一致性,下面就来具体介绍一下,感兴趣的可以了解... 目录Redo Log 刷入磁盘的方法Redo Log 刷入磁盘的过程代码示例(伪代码)在数据库系统中,r

mysql中的group by高级用法

《mysql中的groupby高级用法》MySQL中的GROUPBY是数据聚合分析的核心功能,主要用于将结果集按指定列分组,并结合聚合函数进行统计计算,下面给大家介绍mysql中的groupby用法... 目录一、基本语法与核心功能二、基础用法示例1. 单列分组统计2. 多列组合分组3. 与WHERE结合使

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Mysql用户授权(GRANT)语法及示例解读

《Mysql用户授权(GRANT)语法及示例解读》:本文主要介绍Mysql用户授权(GRANT)语法及示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql用户授权(GRANT)语法授予用户权限语法GRANT语句中的<权限类型>的使用WITH GRANT

Mysql如何解决死锁问题

《Mysql如何解决死锁问题》:本文主要介绍Mysql如何解决死锁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录【一】mysql中锁分类和加锁情况【1】按锁的粒度分类全局锁表级锁行级锁【2】按锁的模式分类【二】加锁方式的影响因素【三】Mysql的死锁情况【1

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

SQL BETWEEN 的常见用法小结

《SQLBETWEEN的常见用法小结》BETWEEN操作符是SQL中非常有用的工具,它允许你快速选取某个范围内的值,本文给大家介绍SQLBETWEEN的常见用法,感兴趣的朋友一起看看吧... 在SQL中,BETWEEN是一个操作符,用于选取介于两个值之间的数据。它包含这两个边界值。BETWEEN操作符常用