轻松学习 .NET 6.0 和 Angular - 入门 Admin LTE 设计 - 第三部分
4.86/5 (3投票s)
开始使用 .NET 6.0 和独立 Angular 模板，使用 Admin LTE Bootstrap 设计制作一个简单的网站
引言
一直以来，我都在计划发布 .NET 6.0 和 Angular 系列文章。在这个系列中，我计划发布以下文章：
- 易学易用 .NET 6.0 和 Angular - Angular 模板入门 – 第 1 部分
- 易学易用 .NET 6.0 和 Angular - Angular 独立模板入门 – 第 2 部分
- 易学易用 .NET 6.0 和 Angular - Admin LTE 设计入门 – 第 3 部分
- 易学易用 .NET 6.0 和 Angular - 多语言入门 – 第 4 部分
- 易学易用 .NET 6.0 和 Angular - 发布到 IIS 入门 – 第 5 部分
- 易学易用 .NET 6.0 和 Angular - WEB API 入门 – 第 6 部分
- 易学易用 .NET 6.0 和 Angular - WEB API CRUD SQL SERVER 入门 – 第 7 部分
在本文中，我们将详细介绍如何开始使用 .NET 6.0 和独立 Angular 模板，利用 Admin LTE Bootstrap 设计来制作一个简单的网站。
在本文中，我们将使用我们之前的文章 .NET 6.0 和独立 Angular 模板源代码来应用 Admin LTE 设计。请阅读我之前的文章，其中详细地分步介绍了如何开始使用 .NET 6.0 和独立 Angular 模板。
我们使用 AdminLTE 的原因是它是一个开源的管理后台，使用 Bootstrap 开发。如果我们想构建一个客户端和管理端的网站，那么最好使用 AdminLTE 管理后台。客户端和管理端网站，我们可以称之为电子商务网站、MES 和所有类型的管理网站。
例如，我们可以考虑购物卡网站，它有多个用户角色，每个角色的后台和页面选项可能不同。我根据下面的图片制作了一个简单的用例演示样本，这是一个购物卡网站，有几种用户类型，我还添加了购物卡网站将拥有的基本模块。
用户角色
Admin
超级管理员：超级管理员是购物卡网站的主要用户，他将拥有购物卡网站的所有控制权。有时，超级管理员也可以是开发该网站的软件开发团队，以及购物卡的所有者，用于监控和控制所有其他角色。重要的网站设置和菜单主项仅由超级管理员处理，以确保安全。
管理员：管理员可以由超级管理员创建，并且所有网站控制将由主管理员处理，他可以创建员工，并且可以接受、删除和监控所有供应商客户、员工和访客用户的活动。
员工：员工可能拥有有限的角色，例如，如果员工是销售人员，那么他可以监控购物卡网站的所有销售部分，如果员工与配送管理相关，那么他可以查看所有订单并进行配送，跟踪和监控配送状态，并检查和确认配送是否成功。
客户端
供应商：供应商可以注册并获得管理员或超级管理员的批准，批准后，供应商可以将他们的产品上传到购物卡网站，他们可以看到他们产品的所有订单详细信息，如已配送、已取消、待处理订单详情。
客户：客户是在购物卡网站注册的最终用户，他们搜索所需商品并进行购物。客户可以查看他们的购物车详情、订单历史详情并跟踪他们所订商品的配送状态。客户还可以根据供应商设定的条件取消订购的商品。
访客用户：访客用户是允许在不注册和登录购物卡网站的情况下进行购物的访客结账用户。
在线购物网站还将拥有基本模块，如用户模块，用于创建和管理用户，创建角色并根据角色管理用户。产品，管理员、员工或供应商可以按类别添加和管理他们的商品，包括销售成本、商品图片、商品配送成本等。此外，还有一些更基本的菜单，如订单管理、销售管理、配送与跟踪管理等。
因此，在这里我们可以看到，对于每个用户角色，后台对于管理员和客户都可以是不同的。为了让网站具有更标准的外观和感觉，我们可以使用 AdminLTE 管理后台 Bootstrap 设计，这样我们的网站也可以轻松地在多平台访问，如手机、平板电脑以及任何有互联网的 PC，随时随地轻松访问。
背景
- Visual Studio 2022
- Node.js – 如果你没有安装 Node.js，请安装 Node.js（下载链接）
- Angular CLI（下载链接）
- Admin LTE 管理后台模板（下载链接)
AdminLTE
从 AdminLTE 网站链接，我们可以下载最新的 AdminLTE Bootstrap 设计文档。
下载后，解压 AdminLTE 文件夹，我们可以看到所有需要的页面、插件、脚本、css 和演示页面都包含在文件夹内。
要查看 ADMINLTE 页面，我们可以从文件夹中打开演示页面，如 Index.html、index2.html、index3.html 以及带有不同主题的 iframe HTML。如果我们打开任何演示 HTML 页面，我们可以看到 AdminLTE 设计的演示，就像我们在这里打开的后台，左侧有菜单，还有一些插件，使后台对终端用户更加丰富。
Using the Code
注意：我们将使用我们之前的文章源代码，分步将 AdminLTE Bootstrap 模板应用于项目。请注意，我将从下载的 AdminLTE 文件夹中复制所需的文件夹和文件到我们的 Angular 和 .NET 6.0 Angular 独立模板项目中。
步骤 1
在 assets 文件夹内创建一个 Content 文件夹，然后在 Content 文件夹内创建另外两个文件夹，分别为 SiteImg 和 UITemplate。在 UITemplate 文件夹中，我们将复制 AdminLTE 的所有 dist、JavaScript 和 Plugin 文件夹，而 SiteImage 文件夹将用于保存我们网站使用的图片。
第二步
将下载的 AdminLTE 文件夹中的 dist 和 plugins 文件夹拖放到我们的 Angular 项目 UITemplate 文件夹中。
步骤 3
接下来，您可以使用编辑器打开 AdminLTE 文件夹中的 Index.html 文件，并复制头部链接和脚本部分。
步骤 4
现在，让我们设计我们的在线购物卡后台页面，为此，我们首先需要将 css 和 JavaScript 插件添加到我们的 Angular Index 页面。
打开您 Angular 项目中的 Index.html 文件。
将头部和脚本部分粘贴到我们的 Angular index.html 文件中。
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<title>LINK5 BOT2U </title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="assets/UITemplate/dist/css/video-js.css">
<link rel="stylesheet" href="assets/UITemplate/dist/css/video-js.min.css">
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,
700&display=fallback">
<!-- Font Awesome Icons -->
<link rel="stylesheet"
href="assets/UITemplate/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="assets/UITemplate/dist/css/adminlte.min.css">
<link rel="stylesheet"
href="assets/UITemplate/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- daterange picker -->
<link rel="stylesheet"
href="assets/UITemplate/plugins/daterangepicker/daterangepicker.css">
<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet"
href="assets/UITemplate/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Bootstrap Color Picker -->
<link rel="stylesheet"
href="assets/UITemplate/plugins/bootstrap-colorpicker/css/
bootstrap-colorpicker.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet"
href="assets/UITemplate/plugins/tempusdominus-bootstrap-4/
css/tempusdominus-bootstrap-4.min.css">
<!-- Select2 -->
<link rel="stylesheet" href="assets/UITemplate/plugins/
select2/css/select2.min.css">
<link rel="stylesheet"
href="assets/UITemplate/plugins/
select2-bootstrap4-theme/select2-bootstrap4.min.css">
<!-- Bootstrap4 Duallistbox -->
<link rel="stylesheet"
href="assets/UITemplate/plugins/bootstrap4-duallistbox/
bootstrap-duallistbox.min.css">
<!-- BS Stepper -->
<link rel="stylesheet"
href="assets/UITemplate/plugins/bs-stepper/css/bs-stepper.min.css">
<!-- dropzonejs -->
<link rel="stylesheet"
href="assets/UITemplate/plugins/dropzone/min/dropzone.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="assets/UITemplate/dist/css/adminlte.min.css">
<link rel="stylesheet"
href="assets/UITemplate/plugins/jquery-ui/jquery-ui.css" />
<link rel="stylesheet"
href="assets/UITemplate/js/jqueryconfirm/js/custom.jqueryconfirm.js" />
<link rel="stylesheet"
href="assets/UITemplate/js/jqueryconfirm/dist/jquery-confirm.min.css" />
<!-- SweetAlert2 -->
<link rel="stylesheet"
href="assets/UITemplate/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
<!-- Toastr -->
<link rel="stylesheet" href="assets/UITemplate/plugins/toastr/toastr.min.css">
</head>
<body >
<app-root>Loading...</app-root>
</body>
</html>
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<!-- jQuery -->
<script asp-append-version="true"
src="assets/UITemplate/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script asp-append-version="true"
src="assets/UITemplate/plugins/jquery-ui/jquery-ui.min.js"></script>
<script asp-append-version="true"
src="assets/UITemplate/plugins/jquery-ui/jquery-ui.js"></script>
<script asp-append-version="true"
src="assets/UITemplate/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Bootstrap 4 -->
<script asp-append-version="true"
src="assets/UITemplate/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button)
$(function () {
var Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
}
</script>
<script src="https://unpkg.com/systemjs@0.19.47/dist/system.js">
</script>
<!-- Bootstrap 4 -->
<script src="assets/UITemplate/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src=
"assets/UITemplate/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js">
</script>
<!-- AdminLTE App -->
<script src="assets/UITemplate/dist/js/adminlte.js"></script>
<!-- daterangepicker -->
<script src="assets/UITemplate/plugins/moment/moment.min.js"></script>
<script src="assets/UITemplate/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="assets/UITemplate/plugins/tempusdominus-bootstrap-4/js/
tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="assets/UITemplate/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="assets/UITemplate/plugins/overlayScrollbars/js/
jquery.overlayScrollbars.min.js"></script>
<!-- daterangepicker -->
<script src="assets/UITemplate/plugins/moment/moment.min.js"></script>
<script src="assets/UITemplate/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="assets/UITemplate/plugins/tempusdominus-bootstrap-4/js/
tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="assets/UITemplate/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="assets/UITemplate/plugins/overlayScrollbars/js/
jquery.overlayScrollbars.min.js"></script>
<script src="assets/UITemplate/plugins/toastr/toastr.min.js"></script>
<script src="assets/UITemplate/js/jqueryconfirm/dist/jquery-confirm.min.js"></script>
<script src="assets/UITemplate/js/jqueryconfirm/js/custom.jqueryconfirm.js"></script>
<!-- Select2 -->
<script src="assets/UITemplate/plugins/select2/js/select2.full.min.js"></script>
<!-- Bootstrap4 Duallistbox -->
<script src="assets/UITemplate/plugins/bootstrap4-duallistbox/
jquery.bootstrap-duallistbox.min.js"></script>
<!-- InputMask -->
<script src="assets/UITemplate/plugins/moment/moment.min.js"></script>
<script src="assets/UITemplate/plugins/inputmask/jquery.inputmask.min.js"></script>
<!-- date-range-picker -->
<script src="assets/UITemplate/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="assets/UITemplate/plugins/bootstrap-colorpicker/js/
bootstrap-colorpicker.min.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="assets/UITemplate/plugins/tempusdominus-bootstrap-4/js/
tempusdominus-bootstrap-4.min.js"></script>
<!-- Bootstrap Switch -->
<script src="assets/UITemplate/plugins/bootstrap-switch/js/bootstrap-switch.min.js">
</script>
<!-- BS-Stepper -->
<script src="assets/UITemplate/plugins/bs-stepper/js/bs-stepper.min.js"></script>
<!-- dropzonejs -->
<script src="assets/UITemplate/plugins/dropzone/min/dropzone.min.js"></script>
<!-- SweetAlert2 -->
<script src="assets/UITemplate/plugins/sweetalert2/sweetalert2.min.js"></script>
<!-- Toastr -->
<script src="assets/UITemplate/plugins/toastr/toastr.min.js"></script>
步骤 5
现在，让我们在 Angular App 文件夹中添加 Header、Navigation、Footer 和 dashboard 文件夹。
在 dashboard 页面中，我们将创建我们的主仪表板登录设计页面。在 layout 文件夹中，我们添加了我们购物卡网站的页脚、顶部导航栏和侧边菜单栏部分。
页脚组件
现在，让我们在 footer 文件夹中添加页脚组件，并添加以下 HTML 和组件代码。
footer.component.html
<footer class="main-footer">
<img src="assets/Content/SiteImg/logo.png" alt="Shanu Cart"
style="height:36px;width:36px">
<strong>Copyright © 2022-2023 .</strong>
<div class="float-right d-none d-sm-inline-block">
<strong>Shanu <b>Cart</b> </strong> - Shop your need's from Anywhere Anytime
</div>
</footer>
footer.component.ts
import { Component, Inject } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html'
})
export class FooterComponent {
}
导航栏组件
现在，让我们为我们的购物卡网站添加顶部导航栏，并将其组件添加到我们的 navbar 文件夹中，并添加以下 html 和组件代码。
注意：在这里的 navbar 中，我还为我们的购物卡网站添加了语言选择选项。在下一篇文章中，我们将详细介绍如何在 Angular 项目中添加多语言选项。
navbar.component.html
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-dark" style="height:40px;">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"
enableRemember="true"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item">
<h5 class="nav-link">
<i class="fa fa-bug"></i>
<strong>Shanu <b>Cart</b> </strong>
</h5>
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link" asp-controller="Home"
asp-action="Index"> Welcome Shanu !</a>
</li>
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fas fa-language"></i>
</a>
<div class="dropdown-menu dropdown-menu-lg-right dropdown-menu-right"
style="max-width: 20px;width:20px">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="../../../../assets/Content/SiteImg/KOR.png"
alt="Korean" class="img-size-32 mr-lg-4 img-circle"
style="height:24px;width:24px;">
<div class="media-body">
<h3 class="dropdown-item-title">
KOREA
</h3>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item ">
<!-- Message Start -->
<div class="media">
<img src="../../../../assets/Content/SiteImg/ENG.png"
alt="English" class="img-size-32 mr-lg-4 img-circle"
style="height:24px;width:24px;">
<div class="media-body">
<h3 class="dropdown-item-title ">
ENGLISH
</h3>
</div>
</div>
<!-- Message End -->
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen"
href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"
enableRemember="true"><i class="fas fa-bars"></i></a>
</li>
</ul>
</nav>
navbar.component.ts
import { Component, Inject } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html'
})
export class NavBarComponent {
}
侧边栏组件
现在，让我们为我们的购物卡网站添加主菜单。让我们在 sidebar 文件夹中添加 Angular 组件，并添加以下 HTML 和组件代码。
注意：出于演示目的，我创建了静态菜单。实际的管理端和客户端模块菜单将是动态的，并根据登录用户的角色从数据库加载。稍后在本系列文章中，我将尝试添加一篇新文章，介绍如何创建动态菜单并在我们的购物卡网站中根据角色显示。
sidebar.component.html
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a class="brand-link" [routerLink]="['/dashboard']">
<img src="../../../../assets/Content/SiteImg/logo.png" alt="Shanu Cart"
class="brand-image" style="opacity: .8">
<span class="brand-text font-weight-light">Shanu Cart</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column"
data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/dashboard']">
<i class="nav-icon fas fa-th"></i>
<p>
Dashboard
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
<li class="nav-item">
<!--<a class="nav-link" [routerLink]="['/fetch-data']">-->
<a class="nav-link" [routerLink]="['/home']">
<i class="nav-icon fas fa-th"></i>
<p>
About Us
</p>
</a>
</li>
<li class="nav-item">
<!--<a class="nav-link" [routerLink]="['/fetch-data']">-->
<a class="nav-link" [routerLink]="['/items']">
<i class="nav-icon fas fa-th"></i>
<p>
Item Sales
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="nav-icon fas fa-copy"></i>
<p>
Products
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">3</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="far fa-circle nav-icon"></i>
<p>Category</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="far fa-circle nav-icon"></i>
<p>Add Item</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="far fa-circle nav-icon"></i>
<p>Search Item</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="nav-icon fas fa-copy"></i>
<p>
Orders
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">3</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="far fa-circle nav-icon"></i>
<p>Order Details</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="far fa-circle nav-icon"></i>
<p>Address Book</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="far fa-circle nav-icon"></i>
<p>Delivery Status</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
sidebar.component.ts
import { Component, Inject } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html'
})
export class SideBarComponent {
}
步骤 6
仪表板组件
现在，让我们设计管理端的登陆仪表板页面。在这里，我做了一个非常简单的仪表板设计，显示今日总订单、今日已发货商品、今日销售额和今日退货商品。我们还添加了一个 HTML 表来显示本月按商品代码的商品销售情况。
注意：在我们之前的系列文章中，我解释了如何添加 WEB API 控制器，然后将 WEB API 结果绑定到我们的 Angular 应用程序。在这里，我采用了相同的格式，添加了 WEB API 来返回商品销售数量，并将结果绑定到仪表板。
稍后在本系列中，我们将详细了解如何使用数据库连接，并使用 .NET 6 和 Angular 独立模板执行 CRUD 操作。
dashboard.component.html
<section class="content">
<br />
<div class="container-fluid">
<div>
<div class="row">
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3 shadow">
<span class="info-box-icon bg-info elevation-1">
<i class="fa fa-cart-arrow-down"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">Todays Total Orders</span>
<span class="info-box-number">
5000
</span>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3 shadow">
<span class="info-box-icon bg-danger elevation-1">
<i class="fa fa-truck"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">Todays Delivered Items</span>
<span class="info-box-number">230</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<!-- fix for small devices only -->
<div class="clearfix hidden-md-up"></div>
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3 shadow">
<span class="info-box-icon bg-success elevation-1">
<i class="fa fa-university"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">Todays Sales </span>
<span class="info-box-number">23,000 $</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3 shadow">
<span class="info-box-icon bg-warning elevation-1">
<i class="fa fa-angle-double-left" aria-hidden="true"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">Todays Returned Items </span>
<span class="info-box-number">13</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- Main row -->
<div class="row">
<div class="col-md-8">
<div class="card card-outline card-success">
<div class="card-header">
<h3 class="card-title">Item Sales Count by current Month </h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body" style="display: flex; justify-content: center;">
<table class="table table-bordered table-striped" *ngIf="itemsdetails">
<thead>
<tr>
<th> Item Code </th>
<th> sale Count </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let itemdetail of itemsdetails">
<td>{{ itemdetail.itemCode }}</td>
<td>{{ itemdetail.saleCount }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-outline card-primary">
<div class="card-header">
<h3 class="card-title">Shanu Cart Logo</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body" style="display: flex; justify-content: center;">
<img src="../../assets/Content/SiteImg/logo.png" style="width:60%;" />
</div>
</div>
</div>
</div>
<!-- /.row (main row) -->
</div><!-- /.container-fluid -->
</div>
</section>
bashboard.component.ts
import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
})
export class DashboardComponent {
public itemsdetails: ItemDetails[] = [];
constructor(http: HttpClient) {
http.get<ItemDetails[]>('/ItemDetails').subscribe(result => {
this.itemsdetails = result;
}, error => console.error(error));
}
}
interface ItemDetails {
itemCode: string;
saleCount: number;
}
注意
将所有上述组件和路由添加到我们的 app.module。
步骤 7
app.component.html
现在，让我们将以下代码添加到我们的 app 组件中，因为在这里，我们添加了所有导航栏、侧边栏、页脚以在主 app 组件中显示。
<body class="dark-mode sidebar-mini sidebar-collapse">
<app-navbar></app-navbar>
<app-sidebar></app-sidebar>
<div class="content-wrapper">
<nav style="background-color: #49b0fa;height:2px ;">
</nav>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</body>
注意：我还添加了一个名为 items 的 app 组件，并在该页面中绑定了商品销售数量，并在侧边菜单点击时显示我们的管理后台页面。
步骤 8
构建和运行
现在是时候看看我们的管理后台页面了。当我们运行应用程序时，我们可以看到如下的仪表板页面。在这里，我显示了来自 WEB API 的商品销售详情，其余详细信息为静态内容。稍后在本系列中，我们将了解如何将所有结果从数据库绑定。
当我们从链接点击商品销售菜单时，我们将显示本月商品销售详情。其余菜单为演示目的，我设置为静态。
关注点
希望本文能帮助您了解如何使用 Visual Studio 2022 入门 ASP.NET Core 和 Angular 独立项目，并使用 Admin LTE Bootstrap 模板设计我们的 .NET 6 应用程序。在下一部分，我们将更详细地了解如何使用 ASP.NET Core 和 Angular 来制作 Admin LTE 设计。
历史
- 2022年6月15日：初始版本