我是从页面开始写的。
Components/Layout/NavMenu.razor中添加菜单:

 <div class="nav-item px-3">
    <NavLink class="nav-link" href="User">
        <span class="oi oi-list-rich" aria-hidden="true"></span> User
    </NavLink>
</div>

Pages文件夹中添加MyUser.razor:

@page "/User"
@using BlazorApp.Service
@using BlazorApp.Entity
@inject UserService myUserService

<h3>User</h3>
<table class="table">
    <tr>
        <td>id</td>
        <td>username</td>
        <td>email</td>
        <td>password</td>
        <td>phone_num</td>
    </tr>
    @foreach (var useritem in userlist)
    {
          <tr>
            <td>@useritem.Id</td>
            <td>@useritem.Username</td>
            <td>@useritem.Email</td>
            <td>@useritem.Password</td>
            <td>@useritem.PhoneNum</td>
        </tr>  
    }
    
</table>
@code {
    private MyUser[]? userlist;

    protected override async Task OnInitializedAsync()
    {
        userlist = await myUserService.getUserList();
    }
}

“@inject UserService myUserService” 注入UserService实例,该实例是在Program.cs中声明的。

在Program.cs中“var builder = WebApplication.CreateBuilder(args)”下面添加UserService实例:

builder.Services.AddSingleton<UserService>();

新建Service文件夹,其中添加UserService.cs:

using BlazorApp.Entity;
using BlazorApp.Models;
using MySqlConnector;
using System.Data;

namespace BlazorApp.Service
{
    public class UserService
    {
        public MySqlConnection connection;
        public UserService() {
            connection = new MySqlConnection("server=localhost;user id=root;password=234sbn;port=3306;database=test;");
        }
        public async Task<MyUser[]> getUserList()
        {
            if(connection.State != ConnectionState.Open)
            {
                connection.Open();

            }

            List<MyUser> list = new List<MyUser>();
            using (MySqlCommand cmd = new MySqlCommand("select * from sys_user", connection))
            {
                using (MySqlDataReader reader = cmd.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        list.Add(new MyUser()
                        {
                            Id = reader.GetInt32("id"),
                            Username = reader.GetString("username"),
                            Email = reader.GetString("email"),
                            Password = reader.GetString("password"),
                            PhoneNum = reader.GetString("phone_num"),
                        });
                    }
                }
            }
            connection.Close();

            return list.ToArray();
        }
    }
}


新建Entity文件夹,其中添加MyUser.cs:

namespace BlazorApp.Entity
{
    public class MyUser
    {
        public int Id { get; set; }
        public string Username { get; set; }
        public string Email { get; set; }

        public string Password { get; set; }
        public string PhoneNum { get; set; }
    }
}


用NuGet安装MySqlConnector和Microsoft.EntityFrameworkCore。
在MySql数据库中新建表sys_user:
在这里插入图片描述

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐