目录
介绍
一直以来,我都计划发布.NET 6.0和Angular系列文章。在本系列中,我计划发表以下文章:
- 易于学习的.NET 6.0和Angular——Angular模板入门——第1部分
- 易于学习的.NET 6.0和Angular——Angular独立模板入门——第2部分
- 易于学习的.NET 6.0和Angular——管理员LTE设计入门——第3部分
- 易于学习的.NET 6.0和Angular——多语言入门——第4部分
- 易于学习的.NET 6.0和Angular——发布到IIS入门——第5部分
在本文中,我们将详细了解如何开始使用.NET 6.0和独立Angular模板,以使用Admin LTE引导程序设计制作一个简单的网站。
在本文中,我们将使用上一篇文章.NET 6.0和独立Angular模板源来应用Admin LTE设计。请阅读我之前的文章,其中非常详细地逐步解释了开始使用.NET 6.0和独立Angular模板。
我们使用AdminLTE的原因是其开源管理仪表板,它是使用Bootstrap开发的。如果我们想建立一个客户端和管理员类型的网站,那么最好使用AdminLTE管理仪表板,客户端和管理员网站,我们可以说电子商务网站,MES和所有类型的管理网站。
例如,我们可以将购物卡网站视为具有多个用户角色的网站,并且每个角色的仪表板和页面选项可能不同。我已经制作了购物车网站用例的简单演示示例,如下图所示,该图像具有多种用户类型,并且我还添加了购物车网站将具有的基本模块。
用户角色
Admin
超级管理员:超级管理员是购物车用户的主要用户,因为他将拥有购物车网站的所有控制权。有时,超级管理员也可以是开发网站的软件开发团队,也可以是购物车的所有者,以监视和控制所有其他卷。出于安全和安保原因,重要的网站设置和菜单母版将仅由此超级管理员处理。
管理员:管理员可以由超级管理员创建,所有站点控制将由主管理员处理,因为他可以创建员工,还可以接受,删除和监控供应商客户,员工和来宾用户的所有活动。
员工:如果员工是销售人员,那么他可以监控购物车网站的所有销售部分,那么他可以查看所有订单和交货,跟踪和监控交货状态,检查和确认交货是否成功完成。
Client
供应商:供应商可以注册并可以由管理员或超级管理员批准,批准后供应商可以将他们的产品上传到购物车网站,他们可以查看其产品的所有订购详细信息,如已交付,取消,待处理订单详细信息。
客户:客户是将在购物车站点注册,搜索所需商品并进行购物的最终用户,客户可以查看其购物车详细信息,订单历史记录详细信息并跟踪其订购商品的交付状态。客户还可以根据供应商的条件取消订购的物料。
来宾用户:来宾用户是来宾结帐用户,无需注册即可进行购物并登录到购物车站点。
在线购物网站还将具有基本模块,如用户模块,用于创建和管理用户,创建角色并根据角色管理用户。Products作为管理员,员工或供应商可以根据类别添加和管理他们的项目,包括项目详细信息,如销售成本,项目图像,项目交付成本等,除此之外,还有一些更基本的菜单,如订单管理,销售管理,交付和跟踪管理等。
所以在这里,我们可以看到每个用户角色,仪表板对于管理员和客户来说也可以是不同的,为了使网站的外观和感觉更加标准,我们可以使用AdminLTE管理仪表板Bootstrap设计,我们的网站也可以轻松访问多平台,如手机,平板电脑和任何具有互联网的PC,随时随地轻松访问。
背景
- Visual Studio 2022
- Node.js——如果您没有Node.js请安装Node.js(下载链接)
- Angular CLI(下载链接)
- Admin LTE管理仪表板模板(下载链接)
Admin LTE
从AdminLTE网站链接,我们可以下载最新的AdminLTE Bootstrap设计文档。
下载后,解压缩AdminLTE文件夹,我们可以看到所有需要的页面,插件,脚本,css和演示页面将添加到文件夹中。
要检查ADMINLTE页面,我们可以从文件夹中打开演示页面作为 Index.html、index2.html、index3.html以及具有不同主题的iframe HTML。如果我们打开任何演示HTML页面,我们可以看到AdminLTE设计的演示,如下所示,我们打开了仪表板,左侧有菜单和一些插件,可以向最终用户展示仪表板更多内容。
使用代码
注意:我们将使用上一篇文章源代码,逐步为项目应用AdminLTE引导模板。请注意,我将把所需的文件夹和文件从下载的 AdminLTE 文件夹复制到我们的Angular和.NET 6.0 Angular独立模板项目中。
步骤 1
在assets文件夹和内容文件夹中创建内容文件夹,再创建两个文件夹SiteImg和UITemplate。在UITemplate内,我们将复制AdminLTE的所有dist,JavaScript和Plugin文件夹,并在SiteImage文件夹中用于保存我们用于网站的图像。
步骤 2
将dist和插件文件夹从下载的AdminLTE文件夹拖放到我们的Angular项目UITemplate文件夹中。
步骤 3
接下来,您可以从 AdminLTE 文件夹中打开编辑器中的Index.html并复制标题链接和脚本部分。
步骤 4
现在,让我们首先设计我们的在线购物车仪表板页面,我们需要将css和JavaScript插件添加到我们的Angular索引页面。
从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文件夹中添加页眉、导航、页脚和仪表板文件夹。
在仪表板页面中,我们将创建主仪表板登录设计页面,在布局文件夹中,我们添加页脚、顶部导航栏和购物车网站的侧边菜单栏部分。
footer组件
现在,让我们在footer文件夹中添加页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组件
现在,让我们为购物车网站添加顶部导航栏,让我们在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
Dashboard组件
现在让我们设计管理部分主登陆仪表板页面。在这里,我做了一个非常简单的仪表板设计,显示今天的总订单,今天的交付项目,今天的销售和今天的退货项目。我们还添加了一个HTML表,以按项目代码显示当月项目销售额。
注意:在我们之前的系列文章中,我已经解释了如何添加WEB API控制器,然后在我们的Angular应用程序中绑定WEB API结果。在本文中,我完成了相同的格式,并添加了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
现在让我们将以下代码添加到我们的应用程序组件中,就像这里一样,我们添加了要在主应用程序组件中显示的所有导航栏、侧边栏、页脚。
<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>
注意:我还添加了另一个名为项目的应用程序组件,并在该页面中绑定了项目销售计数,并在侧面菜单单击中显示我们的管理仪表板页面。
步骤 8
构建和运行
现在是时候查看我们的管理仪表板页面了。当我们运行应用程序时,我们可以看到如下所示的仪表板页面。在这里,我将来自WEB API的项目销售详细信息和其余详细信息显示为静态内容,在本系列的后面,我们可以看到如何绑定数据库中的所有结果。
当我们单击链接中的“项目销售”菜单时,我们会显示当月的“项目销售详细信息”。菜单的其余部分我将其作为演示目的的静态。
兴趣点
希望这篇文章能帮助你理解如何使用Visual Studio 2022开始ASP.NET Core和Angular独立项目,并使用Admin LTE Bootstrap模板设计我们的.NET 6应用程序。在下一部分中,我们将更详细地了解如何使用ASP.NET Core和Angular进行Admin LTE设计。
https://www.codeproject.com/Articles/5334995/Easy-to-Learn-NET-6-0-and-Angular-Getting-Starte-3