[ABP教程]第二章图书列表页面

合集 - 测试1(73)

1.windwos terminal 主题美化包括WSL和其他终端命令行2023-03-12 2.win11+cuda11.2+cudnn+Tensorflow-GPU 环境配置2022-10-22 3.win11+wls2+ubuntu2004配置cuda+cudnn+pytorch2022-10-14 4.xshell7 无法打开提示"要继续使用此程序,您必须应用最新的更新或使用新版本" 解决方案2022-10-08 5.wls2 ubuntu22 kind k8s 配置记录2022-09-12 6.wsl2安装与配置2022-09-11 7.PVE UPS NUT配置自动关机2022-07-31 8.centos-stream-9 centos9 配置国内源阿里云源2022-04-20 9.群晖gitlab备份迁移2022-01-28 10.国内网站recaptcha无法使用的解决办法2022-01-06 11.[每日小技巧] vscode配置vue项目基础2021-11-09 12.Windows11 AirPods /AirPods Pro 声音小解决方案2021-10-24 13.windows端口占用快速查询解决方法2021-05-14 14.解决github无法连接错误 OpenSSL SSL_connect: Connection was reset in connection to github.com:4432021-03-17 15.[ABP教程]第七章作者:数据库集成2020-12-24 16.[ABP教程]第六章作者：领域层2020-12-24 17.[ABP教程]第五章授权2020-12-24 18.[ABP教程]第四章集成测试2020-12-24 19.[ABP教程]第三章创建、更新和删除图书2020-12-24

20.[ABP教程]第二章图书列表页面2020-12-24

21.[ABP教程]第一章创建服务端2020-12-24 22.[Skill] git下载助手2020-12-23 23.[Abp]Abp 新手入门随记2020-12-20 24.[Skill] 记一次vue项目热更新失败案例2020-12-15 25.[Skill]加速npm与yarn还原2020-11-22 26.解决黑群晖"抱歉，您所指定的页面不存在"-记一次黑群晖修复案例2020-09-15 27.如何下载youtube的视频？2020-09-13 28.[新手教程]申请https泛域名解析2020-09-07 29.docker frps 内网穿透容器化服务2020-09-02 30.docker nginx 自定义配置容器2020-09-02 31.asp.net core 学习笔记2020-07-09 32.gitlab git仓库地址修改后更新方法2020-05-31 33.树莓派(4B)新手入门教程2020-05-30 34.Docker-MsSqlServer和安装版本异同2020-04-11 35.Win Task 任务管理器批量杀进程方法2020-04-09 36.Win Docker 安装C盘清理方法之一2020-04-03 37.中移动ipv6-老毛子固件获取ipv6设置2020-03-20 38.win7-win10 禁用IPV6临时地址2020-03-20 39.辅助调用函数【call,apply,bind】2020-02-27 40.Unraid修改docker镜像地址&默认启动2020-02-26 41.docker基本入门知识-小白向2020-02-26 42.[不止于代码]Unraid基本使用速记2020-02-26 43.Dockerfile文件说明2020-01-19 44.Git之pull,fetch差别2019-08-26 45.ES6+Webpack+Babel基本环境搭建2019-08-26 46.抽象类和接口的异同及实例解析2018-11-22 47.KVM与OpenVZ架构的区别2018-08-02 48.关闭win10 defender的方法集锦2018-07-19 49.ChromeDriver与Chrome版本对应表2018-05-28 50.Hexo-Next-多地同步丢失解决(WARN No layout: index.html)2018-04-26 51.修改vs模板添加版权注释信息2018-03-27 52.Easyui中form表单验证事件不通过处理方法2018-03-27 53.最简化版本-Centos7 配置.Net Core 及Jexus服务器2018-03-12 54.常用开发中使用到的作图工具(开发向)2018-02-25 55.Git 常用指令备注2018-01-31 56.记一次未能加载文件或程序集“”或它的某一个依赖项。试图加载格式不正确的程序错误解决方案2018-01-31 57.截图工具小结2018-01-29 58.更优雅的处理数据-linqjs2018-01-29 59.解决未安装Sql Server 配置数据库别名2018-01-28 60.windows添加右键菜单-此处运行CMD2018-01-24 61.记一次微信开发安卓访问阿里云服务器慢处理方案2018-01-13 62.Hexo发布到Github丢失readme和CNAME解决方案2018-01-11 63.Git之别名配置2018-01-08 64.Github博客多地同步文章2018-01-07 65.Github博客自定义域名2018-01-07 66.Github 搭建个人博客2018-01-04 67.(转载)开源许可证教程2018-01-02 68.小米路由mini刷改华硕[N14U N54U]5G 2G的7620老毛子Padavan固件(私人云储存 aria2 QOS)2017-12-31 69.小米路由mini刷不死breed2017-12-31 70.小米路由mini开启ssh2017-12-31 71.比特币是什么？2017-12-21 72.IIS发布网站出现拒绝访问的错误分析2017-11-07 73.公众平台服务号、订阅号、企业微信、小程序的相关说明2017-11-07

Web应用程序开发教程 - 第二章: 图书列表页面

关于本教程#

在本系列教程中, 你将构建一个名为 Acme.BookStore 的用于管理书籍及其作者列表的基于ABP的应用程序. 它是使用以下技术开发的:

{{DB_Text}} 做为ORM提供程序.
{{UI_Value}} 做为UI框架.

本教程分为以下部分:

Part 1: 创建服务端
Part 2: 图书列表页面(本章)
Part 3: 创建,更新和删除图书
Part 4: 集成测试
Part 5: 授权
Part 6: 作者: 领域层
Part 7: 作者: 数据库集成
Part 8: 作者: 应用服务层
Part 9: 作者: 用户页面
[Part 10: 图书到作者的关系]abp-tutorial-part-10.html)

下载源码#

本教程根据你的UI 和 Database偏好有多个版,我们准备了两种可供下载的源码组合:

动态JavaScript代理#

通常在 JavaScript 端通过AJAX调用HTTP API端点. 你可以使用 $.ajax 或其他工具来调用端点. 但是ABP提供了更好的方法.

ABP动态为所有API端点创建 JavaScript代理. 所以你可以像调用Javascript本地方法一样使用任何端点.

在开发者控制台中进行测试#

你可以在自己喜欢的浏览器的开发者控制台轻松的测试JavaScript代理. 运行应用程序,打开浏览器的开发者人员工具(快捷键通常是F12),切换到控制台选项卡,输入以下代码然后按回车:

Copy
acme.bookStore.books.book.getList({}).done(function (result) { console.log(result); });

acme.bookStore.books 是 BookAppService 的命令空间转换成小驼峰形式.
book 是 BookAppService 的约定名称(删除AppService后缀并且转换为小驼峰).
getList 是 CrudAppService 基类定义的 GetListAsync 方法的约定名称(删除Async后缀并且转换为小驼峰).
{} 参数将空对象发送到 GetListAsync 方法,该方法通常需要一个类型为 PagedAndSortedResultRequestDto 的对象,该对象用于将分页和排序选项发送到服务器(所有属性都是可选的,具有默认值. 因此你可以发送一个空对象).
getList 函数返回一个 promise. 你可以传递一个回调到 then(或done)函数来获取从服务器返回的结果.

运行该代码会产生以下输出:

你可以看到服务端返回的 图书列表. 你也可以在开发者人员工具的网络选项卡查看客户端到服务端的通信:

Let's create a new book using the create function:

让我们使用 create 函数创建一本书:

Copy
acme.bookStore.books.book.create({ 
        name: 'Foundation', 
        type: 7, 
        publishDate: '1951-05-24', 
        price: 21.5 
    }).then(function (result) { 
        console.log('successfully created the book with id: ' + result.id); 
    });

您应该在控制台中看到类似以下的消息:

Copy
successfully created the book with id: 439b0ea8-923e-8e1e-5d97-39f2c7ac4246

检查数据库中的 Books 表你会看到新的一行. 你可以自己尝试使用 get, update 和 delete 函数.

我们将利用这些动态代理功能在接下来的章节来与服务器通信.

本地化#

开始的UI开发之前,我们首先要准备本地化的文本(这是你通常在开发应用程序时需要做的).

本地化文本位于 Acme.BookStore.Domain.Shared 项目的 Localization/BookStore 文件夹下:

打开 en.json (英文翻译)文件并更改内容,如下所示:

Copy
{
  "Culture": "en",
  "Texts": {
    "Menu:Home": "Home",
    "Welcome": "Welcome",
    "LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.",
    "Menu:BookStore": "Book Store",
    "Menu:Books": "Books",
    "Actions": "Actions",
    "Close": "Close",
    "Delete": "Delete",
    "Edit": "Edit",
    "PublishDate": "Publish date",
    "NewBook": "New book",
    "Name": "Name",
    "Type": "Type",
    "Price": "Price",
    "CreationTime": "Creation time",
    "AreYouSure": "Are you sure?",
    "AreYouSureToDelete": "Are you sure you want to delete this item?",
    "Enum:BookType:0": "Undefined",
    "Enum:BookType:1": "Adventure",
    "Enum:BookType:2": "Biography",
    "Enum:BookType:3": "Dystopia",
    "Enum:BookType:4": "Fantastic",
    "Enum:BookType:5": "Horror",
    "Enum:BookType:6": "Science",
    "Enum:BookType:7": "Science fiction",
    "Enum:BookType:8": "Poetry"
  }
}

本地化关键字名称是任意的. 你可以设置任何名称. 对于特定的文本类型,我们更喜欢遵循一些约定:
- 为按钮项添加 Menu: 前缀.
- 使用 Enum:<enum-type>:<enum-value> 命名约定来本地化枚举成员. 当您这样做时ABP可以在某些适当的情况下自动将枚举本地化.

如果未在本地化文件中定义文本,则文本将回退到本地化键(作为ASP.NET Core的标准行为).

ABP本地化系统建立在ASP.NET Core标准本地化系统之上,并以多种方式进行了扩展. 有关详细信息请参见本地化文档.

创建图书页面#

是时候创建可见的和可用的东西了! 代替经典的MVC,我们将使用微软推荐的Razor Pages UI.

在 Acme.BookStore.Web 项目的 Pages 文件夹下创建一个名为新的 Books 的文件夹. 然后在文件夹右键选择 添加 > Razor Page 菜单. 输入名称 Index:

打开 Index.cshtml 并把内容修改成下面这样:

Copy
@page
@using Acme.BookStore.Web.Pages.Books
@model IndexModel

<h2>Books</h2>

Index.cshtml.cs 内容应该是:

Copy
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace Acme.BookStore.Web.Pages.Books
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {
  
        }
    }
}

将Book页面添加到主菜单#

打开 Menus 文件夹中的 BookStoreMenuContributor 类,在 ConfigureMainMenuAsync 方法的底部添加如下代码:

Copy
context.Menu.AddItem(
    new ApplicationMenuItem(
        "BooksStore",
        l["Menu:BookStore"],
        icon: "fa fa-book"
    ).AddItem(
        new ApplicationMenuItem(
            "BooksStore.Books",
            l["Menu:Books"],
            url: "/Books"
        )
    )
);

运行项目,使用用户名 admin 和密码 1q2w3E* 登录到应用程序. 看到新菜单项已添加到顶部栏:

点击BookStore下的Books子菜单项就会跳转到空的图书页面.

图书列表#

We will use the Datatables.net jQuery library to show the book list. Datatables library completely work via AJAX, it is fast, popular and provides a good user experience.

我们将使用Datatables.netJQuery插件来显示页面上的表格列表. Datatables可以完全通过AJAX工作,速度快,并提供良好的用户体验.

Datatables插件在启动模板中配置,因此你可以直接在任何页面中使用它,无需在页面中引用样式和脚本文件.

Index.cshtml#

将 Pages/Book/Index.cshtml 改成下面的样子:

Copy
@page
@using Acme.BookStore.Localization
@using Acme.BookStore.Web.Pages.Books
@using Microsoft.Extensions.Localization
@model IndexModel
@inject IStringLocalizer<BookStoreResource> L
@section scripts
{
    <abp-script src="/Pages/Books/Index.js" />
}
<abp-card>
    <abp-card-header>
        <h2>@L["Books"]</h2>
    </abp-card-header>
    <abp-card-body>
        <abp-table striped-rows="true" id="BooksTable"></abp-table>
    </abp-card-body>
</abp-card>

abp-script tag helper用于将外部的脚本添加到页面中.它比标准的script标签多了很多额外的功能.它可以处理 最小化和版本.查看捆绑 & 压缩文档获取更多信息.
abp-card 和 abp-table 是为Twitter Bootstrap的card component封装的 tag helpers.ABP中有很多tag helpers,可以很方便的使用大多数bootstrap组件.你也可以使用原生的HTML标签代替tag helpers.使用tag helper可以通过智能提示和编译时类型检查减少HTML代码并防止错误.查看tag helpers 文档.

Index.js#

在 Pages/Books/ 文件夹中创建 index.js文件

index.js 的内容如下:

Copy
$(function () {
    var l = abp.localization.getResource('BookStore');

    var dataTable = $('#BooksTable').DataTable(
        abp.libs.datatables.normalizeConfiguration({
            serverSide: true,
            paging: true,
            order: [[1, "asc"]],
            searching: false,
            scrollX: true,
            ajax: abp.libs.datatables.createAjax(acme.bookStore.books.book.getList),
            columnDefs: [
                {
                    title: l('Name'),
                    data: "name"
                },
                {
                    title: l('Type'),
                    data: "type",
                    render: function (data) {
                        return l('Enum:BookType:' + data);
                    }
                },
                {
                    title: l('PublishDate'),
                    data: "publishDate",
                    render: function (data) {
                        return luxon
                            .DateTime
                            .fromISO(data, {
                                locale: abp.localization.currentCulture.name
                            }).toLocaleString();
                    }
                },
                {
                    title: l('Price'),
                    data: "price"
                },
                {
                    title: l('CreationTime'), data: "creationTime",
                    render: function (data) {
                        return luxon
                            .DateTime
                            .fromISO(data, {
                                locale: abp.localization.currentCulture.name
                            }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
                    }
                }
            ]
        })
    );
});

abp.localization.getResource 获取一个函数,该函数用于使用服务器端定义的相同JSON文件对文本进行本地化. 通过这种方式你可以与客户端共享本地化值.
abp.libs.datatables.normalizeConfiguration是另一个辅助方法.不是必须的, 但是它通过为缺少的选项提供常规值来简化数据表配置.
abp.libs.datatables.createAjax是帮助ABP的动态JavaScript API代理跟Datatable的格式相适应的辅助方法.
acme.bookStore.books.book.getList 是动态JavaScript代理函数(上面已经介绍过了)
luxon 库也是该解决方案中预先配置的标准库,你可以轻松地执行日期/时间操作.

查看 Datatable文档了解更多配置项.

运行最终应用程序#

你可以运行应用程序!该部分的最终用户界面如下所示:

这是一个完全正常工作的服务端分页,排序和本地化的图书列表.

安装NPM包#

注意: 本教程基于ABP Framework v3.0.3+. 如果你的项目版本较旧,请升级您的解决方案. 如果要升级现有的v2.x项目,请参阅迁移指南.

在 angular 目录下打开命令行窗口,选择 yarn 命令安装NPM包:

Copy
yarn

创建图书页面#

是时候创建可见和可用的东西了!开发ABP Angular前端应用程序时,需要使用一些工具:

Ng Bootstrap 用做UI组件库.
ngx-datatable 用做 datatable 类库.

BookModule#

运行以下命令创建一个名为 BookModule 的新模块:

Copy
yarn ng generate module book --module app --routing --route books

该命令应该产生以下的输出:

Copy
> yarn ng generate module book --module app --routing --route books

yarn run v1.19.1
$ ng generate module book --module app --routing --route books
CREATE src/app/book/book-routing.module.ts (336 bytes)
CREATE src/app/book/book.module.ts (335 bytes)
CREATE src/app/book/book.component.html (19 bytes)
CREATE src/app/book/book.component.spec.ts (614 bytes)
CREATE src/app/book/book.component.ts (268 bytes)
CREATE src/app/book/book.component.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (1289 bytes)
Done in 3.88s.

BookModule#

打开 /src/app/book/book.module.ts 并使用以下内容替换:

Copy
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { BookRoutingModule } from './book-routing.module';
import { BookComponent } from './book.component';

@NgModule({
  declarations: [BookComponent],
  imports: [
    BookRoutingModule,
    SharedModule
  ]
})
export class BookModule { }

添加了 SharedModule. SharedModule 导出了一些创建用户界面所需的通用模块.
SharedModule 已经导出了 CommonModule,所以我们删除了 CommonModule.

路由#

生成的代码将新的路由定义放在 src/app/app-routing.module.ts 文件中,如下所示:

Copy
const routes: Routes = [
  // other route definitions...
  { path: 'books', loadChildren: () => import('./book/book.module').then(m => m.BookModule) },
];

现在打开 src/app/route.provider.ts 以下替换 configureRoutes 函数:

Copy
function configureRoutes(routes: RoutesService) {
  return () => {
    routes.add([
      {
        path: '/',
        name: '::Menu:Home',
        iconClass: 'fas fa-home',
        order: 1,
        layout: eLayoutType.application,
      },
      {
        path: '/book-store',
        name: '::Menu:BookStore',
        iconClass: 'fas fa-book',
        order: 2,
        layout: eLayoutType.application,
      },
      {
        path: '/books',
        name: '::Menu:Books',
        parentName: '::Menu:BookStore',
        layout: eLayoutType.application,
      },
    ]);
  };
}

RoutesService 是ABP框架提供的用于配置主菜单和路由的服务.

path 路由的URL.
name 菜单项的名称(参阅本地化文档了解更多).
iconClass 菜单项的图标(你可以使用默认的Font Awesome图标).
order 菜单项的排序.我们定义了101,它显示在 "Administration" 项的后面.
layout BooksModule路由的布局. 可以定义 eLayoutType.application, eLayoutType.account 或 eLayoutType.empty.

更多信息请参阅RoutesService 文档.

生成代理#

ABP CLI提供了 generate-proxy 命令为你的服务HTTP API生成客户端代理简化客户端使用服务的成本. 运行 generate-proxy 命令前你的host必须正在运行. 参阅 CLI 文档.

在 angular 文件夹下运行以下命令:

Copy
abp generate-proxy

生成的文件如下:

BookComponent#

打开 /src/app/book/book.component.ts 用以下内容替换它:

Copy
import { ListService, PagedResultDto } from '@abp/ng.core';
import { Component, OnInit } from '@angular/core';
import { BookDto } from './models';
import { BookService } from './services';

@Component({
  selector: 'app-book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.scss'],
  providers: [ListService],
})
export class BookComponent implements OnInit {
  book = { items: [], totalCount: 0 } as PagedResultDto<BookDto>;

  constructor(public readonly list: ListService, private bookService: BookService) {}

  ngOnInit() {
    const bookStreamCreator = (query) => this.bookService.getListByInput(query);

    this.list.hookToQuery(bookStreamCreator).subscribe((response) => {
      this.book = response;
    });
  }
}

我们注入了生成的 BookService.
我们实现了 ListService,它是一个公用服务,提供了简单的分页,排序和搜索.

打开 /src/app/book/book.component.html 用以下内容替换它:

Copy
<div class="card">
  <div class="card-header">
    <div class="row">
      <div class="col col-md-6">
        <h5 class="card-title">
          {%{{{ '::Menu:Books' | abpLocalization }}}%}
        </h5>
      </div>
      <div class="text-right col col-md-6"></div>
    </div>
  </div>
  <div class="card-body">
    <ngx-datatable [rows]="book.items" [count]="book.totalCount" [list]="list" default>
      <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column>
      <ngx-datatable-column [name]="'::Type' | abpLocalization" prop="type">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {%{{{ '::Enum:BookType:' + row.type | abpLocalization }}}%}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column [name]="'::PublishDate' | abpLocalization" prop="publishDate">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {%{{{ row.publishDate | date }}}%}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column [name]="'::Price' | abpLocalization" prop="price">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {%{{{ row.price | currency }}}%}
        </ng-template>
      </ngx-datatable-column>
    </ngx-datatable>
  </div>
</div>

现在你可以在浏览器看到最终结果:

下一章#

查看本教程的下一章.

posted @ 2020-12-24 15:12 LandWind 阅读(859) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下

公告

昵称： LandWind
园龄： 10年10个月
粉丝： 4
关注： 25

+加关注

2025年3月

日

一

二

三

四

五

六

landwind

像风一样的自由

[ABP教程]第二章图书列表页面

Web应用程序开发教程 - 第二章: 图书列表页面

关于本教程#

下载源码#

动态JavaScript代理#

在开发者控制台中进行测试#

本地化#

创建图书页面#

将Book页面添加到主菜单#

图书列表#

Index.cshtml#

Index.js#

运行最终应用程序#

安装NPM包#

创建图书页面#

BookModule#

BookModule#

路由#

生成代理#

BookComponent#

下一章#

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

合集 (1)

随笔分类 (36)

随笔档案 (48)

文章分类 (36)

文章档案 (28)

相册 (2)

Ad

阅读排行榜

评论排行榜

推荐排行榜

最新评论

landwind

像风一样的自由

[ABP教程]第二章 图书列表页面

Web应用程序开发教程 - 第二章: 图书列表页面

关于本教程#

下载源码#

动态JavaScript代理#

在开发者控制台中进行测试#

本地化#

创建图书页面#

将Book页面添加到主菜单#

图书列表#

Index.cshtml#

Index.js#

运行最终应用程序#

安装NPM包#

创建图书页面#

BookModule#

BookModule#

路由#

生成代理#

BookComponent#

下一章#

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

合集 (1)

随笔分类 (36)

随笔档案 (48)

文章分类 (36)

文章档案 (28)

相册 (2)

Ad

阅读排行榜

评论排行榜

推荐排行榜

最新评论

[ABP教程]第二章图书列表页面