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

关于本教程

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

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

本教程分为以下部分:

下载源码

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

{{if UI == "MVC"}}

动态JavaScript代理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{{end}}

本地化

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

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

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

  1. {
  2. "Culture": "en",
  3. "Texts": {
  4. "Menu:Home": "Home",
  5. "Welcome": "Welcome",
  6. "LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.",
  7. "Menu:BookStore": "Book Store",
  8. "Menu:Books": "Books",
  9. "Actions": "Actions",
  10. "Close": "Close",
  11. "Delete": "Delete",
  12. "Edit": "Edit",
  13. "PublishDate": "Publish date",
  14. "NewBook": "New book",
  15. "Name": "Name",
  16. "Type": "Type",
  17. "Price": "Price",
  18. "CreationTime": "Creation time",
  19. "AreYouSure": "Are you sure?",
  20. "AreYouSureToDelete": "Are you sure you want to delete this item?",
  21. "Enum:BookType:0": "Undefined",
  22. "Enum:BookType:1": "Adventure",
  23. "Enum:BookType:2": "Biography",
  24. "Enum:BookType:3": "Dystopia",
  25. "Enum:BookType:4": "Fantastic",
  26. "Enum:BookType:5": "Horror",
  27. "Enum:BookType:6": "Science",
  28. "Enum:BookType:7": "Science fiction",
  29. "Enum:BookType:8": "Poetry"
  30. }
  31. }
  • 本地化关键字名称是任意的. 你可以设置任何名称. 对于特定的文本类型,我们更喜欢遵循一些约定:

    • 为按钮项添加 Menu: 前缀.
    • 使用 Enum:<enum-type>:<enum-value> 命名约定来本地化枚举成员. 当您这样做时ABP可以在某些适当的情况下自动将枚举本地化.

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

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

{{if UI == "MVC"}}

创建图书页面

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

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

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

  1. @page
  2. @using Acme.BookStore.Web.Pages.Books
  3. @model IndexModel
  4. <h2>Books</h2>

Index.cshtml.cs 内容应该是:

  1. using Microsoft.AspNetCore.Mvc.RazorPages;
  2. namespace Acme.BookStore.Web.Pages.Books
  3. {
  4. public class IndexModel : PageModel
  5. {
  6. public void OnGet()
  7. {
  8. }
  9. }
  10. }

将Book页面添加到主菜单

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

  1. context.Menu.AddItem(
  2. new ApplicationMenuItem(
  3. "BooksStore",
  4. l["Menu:BookStore"],
  5. icon: "fa fa-book"
  6. ).AddItem(
  7. new ApplicationMenuItem(
  8. "BooksStore.Books",
  9. l["Menu:Books"],
  10. url: "/Books"
  11. )
  12. )
  13. );

运行项目,使用用户名 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 改成下面的样子:

  1. @page
  2. @using Acme.BookStore.Localization
  3. @using Acme.BookStore.Web.Pages.Books
  4. @using Microsoft.Extensions.Localization
  5. @model IndexModel
  6. @inject IStringLocalizer<BookStoreResource> L
  7. @section scripts
  8. {
  9. <abp-script src="/Pages/Books/Index.js" />
  10. }
  11. <abp-card>
  12. <abp-card-header>
  13. <h2>@L["Books"]</h2>
  14. </abp-card-header>
  15. <abp-card-body>
  16. <abp-table striped-rows="true" id="BooksTable"></abp-table>
  17. </abp-card-body>
  18. </abp-card>
  • abp-script tag helper用于将外部的 脚本 添加到页面中.它比标准的script标签多了很多额外的功能.它可以处理 最小化版本.查看捆绑 & 压缩文档获取更多信息.
  • abp-cardabp-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 的内容如下:

  1. $(function () {
  2. var l = abp.localization.getResource('BookStore');
  3. var dataTable = $('#BooksTable').DataTable(
  4. abp.libs.datatables.normalizeConfiguration({
  5. serverSide: true,
  6. paging: true,
  7. order: [[1, "asc"]],
  8. searching: false,
  9. scrollX: true,
  10. ajax: abp.libs.datatables.createAjax(acme.bookStore.books.book.getList),
  11. columnDefs: [
  12. {
  13. title: l('Name'),
  14. data: "name"
  15. },
  16. {
  17. title: l('Type'),
  18. data: "type",
  19. render: function (data) {
  20. return l('Enum:BookType:' + data);
  21. }
  22. },
  23. {
  24. title: l('PublishDate'),
  25. data: "publishDate",
  26. render: function (data) {
  27. return luxon
  28. .DateTime
  29. .fromISO(data, {
  30. locale: abp.localization.currentCulture.name
  31. }).toLocaleString();
  32. }
  33. },
  34. {
  35. title: l('Price'),
  36. data: "price"
  37. },
  38. {
  39. title: l('CreationTime'), data: "creationTime",
  40. render: function (data) {
  41. return luxon
  42. .DateTime
  43. .fromISO(data, {
  44. locale: abp.localization.currentCulture.name
  45. }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
  46. }
  47. }
  48. ]
  49. })
  50. );
  51. });
  • abp.localization.getResource 获取一个函数,该函数用于使用服务器端定义的相同JSON文件对文本进行本地化. 通过这种方式你可以与客户端共享本地化值.
  • abp.libs.datatables.normalizeConfiguration是另一个辅助方法.不是必须的, 但是它通过为缺少的选项提供常规值来简化数据表配置.
  • abp.libs.datatables.createAjax是帮助ABP的动态JavaScript API代理跟Datatable的格式相适应的辅助方法.
  • acme.bookStore.books.book.getList 是动态JavaScript代理函数(上面已经介绍过了)
  • luxon 库也是该解决方案中预先配置的标准库,你可以轻松地执行日期/时间操作.

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

运行最终应用程序

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

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

{{end}}

{{if UI == "NG"}}

安装NPM包

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

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

  1. yarn

创建图书页面

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

BookModule

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

  1. yarn ng generate module book --module app --routing --route books

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

  1. > yarn ng generate module book --module app --routing --route books
  2. yarn run v1.19.1
  3. $ ng generate module book --module app --routing --route books
  4. CREATE src/app/book/book-routing.module.ts (336 bytes)
  5. CREATE src/app/book/book.module.ts (335 bytes)
  6. CREATE src/app/book/book.component.html (19 bytes)
  7. CREATE src/app/book/book.component.spec.ts (614 bytes)
  8. CREATE src/app/book/book.component.ts (268 bytes)
  9. CREATE src/app/book/book.component.scss (0 bytes)
  10. UPDATE src/app/app-routing.module.ts (1289 bytes)
  11. Done in 3.88s.

BookModule

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

  1. import { NgModule } from '@angular/core';
  2. import { SharedModule } from '../shared/shared.module';
  3. import { BookRoutingModule } from './book-routing.module';
  4. import { BookComponent } from './book.component';
  5. @NgModule({
  6. declarations: [BookComponent],
  7. imports: [
  8. BookRoutingModule,
  9. SharedModule
  10. ]
  11. })
  12. export class BookModule { }
  • 添加了 SharedModule. SharedModule 导出了一些创建用户界面所需的通用模块.
  • SharedModule 已经导出了 CommonModule,所以我们删除了 CommonModule.

路由

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

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

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

  1. function configureRoutes(routes: RoutesService) {
  2. return () => {
  3. routes.add([
  4. {
  5. path: '/',
  6. name: '::Menu:Home',
  7. iconClass: 'fas fa-home',
  8. order: 1,
  9. layout: eLayoutType.application,
  10. },
  11. {
  12. path: '/book-store',
  13. name: '::Menu:BookStore',
  14. iconClass: 'fas fa-book',
  15. order: 2,
  16. layout: eLayoutType.application,
  17. },
  18. {
  19. path: '/books',
  20. name: '::Menu:Books',
  21. parentName: '::Menu:BookStore',
  22. layout: eLayoutType.application,
  23. },
  24. ]);
  25. };
  26. }

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

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

更多信息请参阅RoutesService 文档.

生成代理

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

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

  1. abp generate-proxy

生成的文件如下:

BookComponent

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

  1. import { ListService, PagedResultDto } from '@abp/ng.core';
  2. import { Component, OnInit } from '@angular/core';
  3. import { BookDto } from './models';
  4. import { BookService } from './services';
  5. @Component({
  6. selector: 'app-book',
  7. templateUrl: './book.component.html',
  8. styleUrls: ['./book.component.scss'],
  9. providers: [ListService],
  10. })
  11. export class BookComponent implements OnInit {
  12. book = { items: [], totalCount: 0 } as PagedResultDto<BookDto>;
  13. constructor(public readonly list: ListService, private bookService: BookService) {}
  14. ngOnInit() {
  15. const bookStreamCreator = (query) => this.bookService.getListByInput(query);
  16. this.list.hookToQuery(bookStreamCreator).subscribe((response) => {
  17. this.book = response;
  18. });
  19. }
  20. }
  • 我们注入了生成的 BookService.
  • 我们实现了 ListService,它是一个公用服务,提供了简单的分页,排序和搜索.

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

  1. <div class="card">
  2. <div class="card-header">
  3. <div class="row">
  4. <div class="col col-md-6">
  5. <h5 class="card-title">
  6. {%{{{ '::Menu:Books' | abpLocalization }}}%}
  7. </h5>
  8. </div>
  9. <div class="text-right col col-md-6"></div>
  10. </div>
  11. </div>
  12. <div class="card-body">
  13. <ngx-datatable [rows]="book.items" [count]="book.totalCount" [list]="list" default>
  14. <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column>
  15. <ngx-datatable-column [name]="'::Type' | abpLocalization" prop="type">
  16. <ng-template let-row="row" ngx-datatable-cell-template>
  17. {%{{{ '::Enum:BookType:' + row.type | abpLocalization }}}%}
  18. </ng-template>
  19. </ngx-datatable-column>
  20. <ngx-datatable-column [name]="'::PublishDate' | abpLocalization" prop="publishDate">
  21. <ng-template let-row="row" ngx-datatable-cell-template>
  22. {%{{{ row.publishDate | date }}}%}
  23. </ng-template>
  24. </ngx-datatable-column>
  25. <ngx-datatable-column [name]="'::Price' | abpLocalization" prop="price">
  26. <ng-template let-row="row" ngx-datatable-cell-template>
  27. {%{{{ row.price | currency }}}%}
  28. </ng-template>
  29. </ngx-datatable-column>
  30. </ngx-datatable>
  31. </div>
  32. </div>

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

{{end}}

下一章

查看本教程的下一章.

[ABP教程]第二章 图书列表页面的更多相关文章

  1. [ABP教程]第一章 创建服务端

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

  2. HTML第二章:列表,表格,媒体元素

    第二章:列表,表格,媒体元素 列表:有三种,有序列表,无序列表,定义列表 1.有序列表:<ol></ol>            列表项:<li></li&g ...

  3. 学习opencv中文版教程——第二章

    学习opencv中文版教程——第二章 所有案例,跑起来~~~然而并没有都跑起来...我只把我能跑的都尽量跑了,毕竟看书还是很生硬,能运行能出结果,才比较好. 越着急,心越慌,越是着急,越要慢,越是陌生 ...

  4. javascript进阶教程第二章对象案例实战

    javascript进阶教程第二章对象案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过案例练习补充几个之前没有见到或者虽然讲过单是讲的不仔细的知识点. 二.具体实例 温馨提示 面向对象的知 ...

  5. Cobalt Strike系列教程第二章:Beacon详解

    上周更新了Cobalt Strike系列教程第一章:简介与安装,文章发布后,深受大家的喜爱,遂将该系列教程的其他章节与大家分享,提升更多实用技能! 第二章:Beacon详解 一.Beacon命令 大家 ...

  6. [Learn Android Studio 汉化教程]第二章:Android Studio概述(一)

    [Learn Android Studio ]第二章:Android Studio概述(一) Android Studio是一个视窗化的开发环境.为了充分利用有限的屏幕空间,不让你束手束脚,Andro ...

  7. python 教程 第二章、 类型

    第二章. 类型 常量 5,1.23,9.25e-3,’This is a string’,”It’s a string!” 1) 数 整数:2 长整数: 浮点数:3.23,52.3E-4 复数:-5+ ...

  8. python基础教程-第二章-列表和元组

    本章将引入一个新的概念,:数据结构.数据结构是通过某种方式(例如对元素进行编号)组织在 一起的数据元素的集合,这些数据元素可以是数字或者字符,甚至可以是其他数据结构.在python中,最基本的数据结构 ...

  9. 《Python基础教程》第二章:列表和元组(1)

    列表可以修改,元组则不能 字符串就是一个由字符组成的序列 使用分片操作来访问一定范围内的元素,分片操作的实现需要提供两个索引作为边界,第一个索引的元素是包含在分片内的,而第二个不包含在分片内. 如果分 ...

随机推荐

  1. React跳转路由传参3种方法和区别

    1.params传参 路由表配置:参数地址栏显示 路由页面:<Route path='/demo/:id' component={Demo}></Route> //配置 /:i ...

  2. leetcode——(四)2020.06.08

    新的一周,leetcode计划:78,79,98,102,236,124,128 (23)

  3. Scrum 冲刺 第二篇

    Scrum 冲刺 第二篇 每日会议照片 昨天已完成工作 队员 昨日完成任务 黄梓浩 初步完成app项目架构搭建 黄清山 完成部分个人界面模块数据库的接口 邓富荣 完成部分后台首页模块数据库的接口 钟俊 ...

  4. 实现一个类型判断函数,需要鉴别出基本类型、function、null、NaN、数组、对象?

    只需要鉴别这些类型那么使用typeof即可,要鉴别null先判断双等判断是否为null,之后使用typeof判断,如果是obejct的话,再用Array.isArray判断是否为数组,如果是数字再使用 ...

  5. 在Linux中使用Dbeaver等GTK3界面的软件出现频繁闪烁的问题解决

    问题复现 复现环境LinuxMint 19 Dbeaver: 7.3 输入法: ibus + ibus-table-wubi 如图,当光标移动到Sql Editor中会不停的闪-- 解决过程 先百度. ...

  6. 2020中国.NET开发者峰会主题内容发布

    2020年12月09日,组委会正式发布了China .NET Conf 2020中国 .NET 开发者峰会的主题内容. 今年的大会主题收到超预期的主题,无论是数量还是质量上都比2019年有所进步,这也 ...

  7. 题解-[WC2011]最大XOR和路径

    [WC2011]最大XOR和路径 给一个 \(n\) 个点 \(m\) 条边(权值为 \(d_i\))的无向有权图,可能有重边和子环.可以多次经过一条边,求 \(1\to n\) 的路径的最大边权异或 ...

  8. Java PDF全套笔记

    java 知识pdf文档,基本涵盖了java知识点 java基础部分:https://github.com/HOSystemH/JavaFile/tree/master/JavaPDF java高级部 ...

  9. Mysql LIMIT的用法

    使用范围 MySQL语句中的limit字句可以帮助我们在使用执行查询的时候,返回数据库中间的数据或者是只提取前几段数据 使用语法 SELECT * FROM table LIMIT [offset,] ...

  10. Git:git常用命令

    1.版本控制工具     一个可以管理和追踪软件代码的工具.     分类:       集中式版本控制工具:SVN       分布式版本控制工具:Git 2.Git 的概念:     工作区:就是 ...