Abp vNext 学习(3)
Abp vNext 学习第三弹 - 图书列表
参考上一篇 :Abp vNext 学习(2).
动态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.books
是BookAppService
的命令空间转换成小驼峰形式.book
是BookAppService
的约定名称(删除AppService
后缀并且转换为小驼峰).getList
是CrudAppService
基类定义的GetListAsync
方法的约定名称(删除Async后缀并且转换为小驼峰).- {} 参数将空对象发送到
GetListAsync
方法,该方法通常需要一个类型为PagedAndSortedResultRequestDto
的对象,该对象用于将分页和排序选项发送到服务器(所有属性都是可选的,具有默认值. 因此你可以发送一个空对象). getList
函数返回一个promise
. 你可以传递一个回调到then
(或done
)函数来获取从服务器返回的结果.
让我们使用 create 函数创建一本书:
1 | acme.bookStore.books.book.create({ |
您应该在控制台中看到类似以下的消息:
1 | successfully created the book with id: 439b0ea8-923e-8e1e-5d97-39f2c7ac4246 |
检查数据库中的 Books
表你会看到新的一行. 你可以自己尝试使用 get
, update
和 delete
函数.
在接下来的章节,我们将利用这些动态代理函数与服务器通信.
本地化
开始的UI开发之前,我们首先要准备本地化的文本(这是你通常在开发应用程序时需要做的).
本地化文本位于 Acme.BookStore.Domain.Shared
项目的 Localization/BookStore
文件夹下:
打开 en.json (英文翻译)文件并更改内容,如下所示:
1 | { |
简体中文翻译请打开zh-Hans.json文件 ,并将”Texts”对象中对应的值替换为中文.
- 本地化关键字名称是任意的. 你可以设置任何名称. 对于特定的文本类型,我们更喜欢遵循一些约定:
- 为按钮项添加
Menu:
前缀. - 使用
Enum:<enum-type>.<enum-value>
或<enum-type>.<enum-value>
命名约定来本地化枚举成员. 当您这样做时ABP可以在某些适当的情况下自动将枚举本地化.
- 为按钮项添加
如果未在本地化文件中定义文本,则文本将回退到本地化键(ASP.NET Core的标准行为).
创建图书页面
是时候创建可见的和可用的东西了! 我们将使用微软推荐的Razor Pages UI
,而不是经典的MVC.
在 Acme.BookStore.Web
项目的 Pages
文件夹下创建一个名为新的 Books
的文件夹. 然后在文件夹右键选择 添加 > Razor Page 菜单. 输入名称 Index
:
打开 Index.cshtml 并把内容修改成下面这样:
1 | @page |
Index.cshtml.cs 内容应该是:
1 | using Microsoft.AspNetCore.Mvc.RazorPages; |
将图书页面添加到主菜单
打开 Menus 文件夹中的 BookStoreMenuContributor
类,在 ConfigureMainMenuAsync
方法的底部添加如下代码:
1 | context.Menu.AddItem( |
运行项目,使用用户名 admin
和密码 1q2w3E*
登录到应用程序. 看到新菜单项已添加到顶部栏
点击BookStore下的Books子菜单项就会跳转到空的图书页面.
图书列表
我们将使用Datatables.net JQuery插件来显示图书列表. Datatables 可以完全通过AJAX工作,速度快,并提供良好的用户体验.
Datatables插件在启动模板中配置,因此你可以直接在任何页面中使用它,无需在页面中引用样式和脚本文件.
Index.cshtml
将 Pages/Book/Index.cshtml
改成下面的样子:
1 | @page |
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 的内容如下:
1 | $(function () { |
abp.localization.getResource
获取一个函数,该函数用于使用服务器端定义的相同JSON文件对文本进行本地化. 通过这种方式你可以与客户端共享本地化值.abp.libs.datatables.normalizeConfiguration
是一个辅助方法.不是必须的, 但是它通过为缺省的选项提供约定的值来简化Datatables配置.abp.libs.datatables.createAjax
是另一个辅助方法,用来适配ABP的动态JavaScript API代理和Datatables期望的参数格式.acme.bookStore.books.book.getList
是动态JavaScript代理函数(上面已经介绍过了)
查看 Datatable文档 了解更多配置项.
运行最终应用程序
你可以运行应用程序!该部分的最终用户界面如下所示:
Demo Codes
github commit
下一章
参阅的Abp vNext 学习(4)。