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

2024-05-29 19:20
文章标签 简单 数据 mysql 入门 查询 连接 例子 database 列出 blazor

本文主要是介绍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。

相关文章

canal实现mysql数据同步的详细过程

canal实现mysql数据同步的详细过程

《canal实现mysql数据同步的详细过程》：本文主要介绍canal实现mysql数据同步的详细过程,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的... 目录1、canal下载2、mysql同步用户创建和授权3、canal admin安装和启动4、canal
阅读更多...
SQL中JOIN操作的条件使用总结与实践

SQL中JOIN操作的条件使用总结与实践

《SQL中JOIN操作的条件使用总结与实践》在SQL查询中,JOIN操作是多表关联的核心工具,本文将从原理,场景和最佳实践三个方面总结JOIN条件的使用规则,希望可以帮助开发者精准控制查询逻辑... 目录一、ON与WHERE的本质区别二、场景化条件使用规则三、最佳实践建议1.优先使用ON条件2.WHERE用
阅读更多...
MySQL存储过程之循环遍历查询的结果集详解

MySQL存储过程之循环遍历查询的结果集详解

《MySQL存储过程之循环遍历查询的结果集详解》：本文主要介绍MySQL存储过程之循环遍历查询的结果集,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录前言1. 表结构2. 存储过程3. 关于存储过程的SQL补充总结前言近来碰到这样一个问题：在生产上导入的数据发现
阅读更多...
MySQL 衍生表(Derived Tables)的使用

MySQL 衍生表(Derived Tables)的使用

《MySQL衍生表(DerivedTables)的使用》本文主要介绍了MySQL衍生表(DerivedTables)的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学... 目录一、衍生表简介1.1 衍生表基本用法1.2 自定义列名1.3 衍生表的局限在SQL的查询语句select
阅读更多...
MySQL 横向衍生表(Lateral Derived Tables)的实现

MySQL 横向衍生表(Lateral Derived Tables)的实现

《MySQL横向衍生表(LateralDerivedTables)的实现》横向衍生表适用于在需要通过子查询获取中间结果集的场景,相对于普通衍生表,横向衍生表可以引用在其之前出现过的表名,本文就来... 目录一、横向衍生表用法示例1.1 用法示例1.2 使用建议前面我们介绍过mysql中的衍生表（From子句
阅读更多...
六个案例搞懂mysql间隙锁

六个案例搞懂mysql间隙锁

《六个案例搞懂mysql间隙锁》MySQL中的间隙是指索引中两个索引键之间的空间,间隙锁用于防止范围查询期间的幻读,本文主要介绍了六个案例搞懂mysql间隙锁,具有一定的参考价值,感兴趣的可以了解一下... 目录概念解释间隙锁详解间隙锁触发条件间隙锁加锁规则案例演示案例一：唯一索引等值锁定存在的数据案例二：
阅读更多...
MySQL JSON 查询中的对象与数组技巧及查询示例

MySQL JSON 查询中的对象与数组技巧及查询示例

《MySQLJSON查询中的对象与数组技巧及查询示例》MySQL中JSON对象和JSON数组查询的详细介绍及带有WHERE条件的查询示例,本文给大家介绍的非常详细,mysqljson查询示例相关知... 目录jsON 对象查询1. JSON_CONTAINS2. JSON_EXTRACT3. JSON_TA
阅读更多...
MySQL 设置AUTO_INCREMENT 无效的问题解决

MySQL 设置AUTO_INCREMENT 无效的问题解决

《MySQL设置AUTO_INCREMENT无效的问题解决》本文主要介绍了MySQL设置AUTO_INCREMENT无效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录快速设置mysql的auto_increment参数一、修改 AUTO_INCREMENT 的值。
阅读更多...
MYSQL查询结果实现发送给客户端

MYSQL查询结果实现发送给客户端

《MYSQL查询结果实现发送给客户端》：本文主要介绍MYSQL查询结果实现发送给客户端方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql取数据和发数据的流程（边读边发）Sending to clientSending DataLRU(Least Rec
阅读更多...
MySQL分区表的具体使用

MySQL分区表的具体使用

《MySQL分区表的具体使用》MySQL分区表通过规则将数据分至不同物理存储,提升管理与查询效率,本文主要介绍了MySQL分区表的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录一、分区的类型1. Range partition(范围分区)2. List partition(列表分区)3. H
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2