ABP框架+Mysql(二)

展示页面--图书列表页面

本地化

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

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

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

{
  "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.Undefined": "Undefined",
    "Enum:BookType.Adventure": "Adventure",
    "Enum:BookType.Biography": "Biography",
    "Enum:BookType.Dystopia": "Dystopia",
    "Enum:BookType.Fantastic": "Fantastic",
    "Enum:BookType.Horror": "Horror",
    "Enum:BookType.Science": "Science",
    "Enum:BookType.ScienceFiction": "Science fiction",
    "Enum:BookType.Poetry": "Poetry"
  }
}

简体中文翻译请打开zh-Hans.json文件 ,并将"Texts"对象中对应的值替换为中文.

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

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

创建图书页面

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

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

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

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

<h2>Books</h2>

@page

这行代码声明这是一个Razor Page。Razor Pages 是一种ASP.NET Core的功能,用于简化基于页面的Web应用程序的开发。@page指令使得这个文件成为一个处理HTTP请求的页面。

@using Acme.BookStore.Web.Pages.Books

这行代码引入了 Acme.BookStore.Web.Pages.Books 命名空间。使用 @using 指令可以导入命名空间,使得在页面中可以直接使用该命名空间下的类和方法。

@model IndexModel

这行代码指定了这个页面使用的模型类是 IndexModelIndexModel 是一个后台代码类,通常位于 Index.cshtml.cs 文件中,包含了处理页面数据和操作的逻辑。在Razor Page中,模型类通常派生自 PageModel 类。

Index.cshtml.cs 内容应该是:

using Microsoft.AspNetCore.Mvc.RazorPages;

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

        }
    }
}

将图书页面添加到主菜单

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

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* 登录到应用程序. 看到新菜单项已添加到菜单栏:

图书列表

Index.cshtml

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

@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文件

js的内容:

$(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是一个辅助方法.不是必须的, 但是它通过为缺省的选项提供约定的值来简化Datatables配置.
  • abp.libs.datatables.createAjax是另一个辅助方法,用来适配ABP的动态JavaScript API代理和Datatable期望的参数格式.
  • acme.bookStore.books.book.getList 是动态JavaScript代理函数(上面已经介绍过了)
  • luxon 库也是该解决方案中预先配置的标准库,你可以轻松地执行日期/时间操作.

 最终的效果图

出现的问题

菜单项无法点击

菜单项无法点击,然后 看网页的控制台,各种找不到,这是我们缺少一个lib包

Could not find the bundle file '/libs/abp/luxon/abp.luxon.js' for the bundle 'LeptonXLite.Global'!
VM52:1 Could not find the bundle file '/libs/timeago/jquery.timeago.js' for the bundle 'LeptonXLite.Global'!

可以直接去我得资源中去找。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/671446.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

6.1Java方法

1、方法定义&#xff1a; 方法是一种语法结构&#xff0c;它可以把一段代码封装成一个功能&#xff0c;以便重复调用 方法的完整格式&#xff1a; 修饰符 返回类型 方法名(形参列表){ 方法体代码(需要执行的功能代码) return 返回值; } package com.define;public class …

每日一题——力扣20. 有效的括号(举一反三+思想解读+逐步优化)

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 专业点评 时间复杂度分析 空间复杂度分析 代码优化建议 我要更强 优化…

强烈推荐|分享6款小而美的图片美化工具

给大家分享6个我日常用到的图片美化软件&#xff0c;都是免费且好用的&#xff0c;如果大家觉得有用&#xff0c;求一个点赞收藏&#xff0c;如果点赞收藏超过60&#xff0c;后续我会继续分享&#xff0c;谢谢大家&#xff5e; 文字卡片美化&#xff1a; https://www.memocar…

C语言实现贪吃蛇小游戏(控制台)

本篇主要内容是使用C语言在Windows环境的控制台中模拟实现经典小游戏贪吃蛇。 一、准备工作 我们要实现的基本功能有&#xff1a; 地图绘制蛇吃食物的功能&#xff08;上、下、左、右方向键控制蛇的动作&#xff09;蛇撞墙死亡蛇撞自身死亡计算得分蛇身加速、减速暂停游戏 …

数据恢复大革新!EasyRecovery16版本带来UIUX及性能的重大提升

全球领先的数据恢复解决方案提供商Ontrack与其中国区总代理近日共同宣布&#xff0c;其广受欢迎的数据恢复软件EasyRecovery16迎来了重大更新&#xff0c;版本号提升至v16.0.0.5。这一更新为用户带来了一系列值得关注的新功能和改进&#xff0c;进一步巩固了EasyRecovery在数据…

Android 输入法框架流程

输入法框架流程梳理 输入法框架构成 输入法管理端&#xff08;IMMS/InputMethodManagerService&#xff09; 主要负责输入法服务端与客户端的绑定&#xff1b;输入法的切换/显示/隐藏/启用/关闭。输入法服务端&#xff08;IMS/InputMethodService&#xff09; 输入法服务&…

【C++面试50题】

以下是针对C程序员面试可能遇到的一些问题&#xff0c;涵盖了从基础语法、面向对象、STL、内存管理、模板、异常处理、并发编程等多个方面。 ### 基础概念与语法 1. C与C的主要区别是什么&#xff1f; 2. 什么是构造函数和析构函数&#xff1f;它们何时被调用&#xff1f; 3. 什…

JDK版本特性(JDK8\11\17\21版本)

JDK版本特性 Oracle官网https://www.oracle.com/java/technologies/java-se-support-roadmap.html Oracle官网中JDK版本的说明&#xff0c;Java SE 8、11、17和21是LTS版本。也就是长期支持版本。 我们针对这几个版本了解学习下对应版本的新特性。 JDK8版本 正式发布于2014…

XCP协议系列介绍02-基于ASAP2 Tool-Set生成A2l介绍

本文框架 1. 前言2. ASAP2 Tool-Set系统介绍2.1 ASAP2 Creator介绍2.2 ASAP2 Updater介绍2.3 ASAP2 Merger介绍2.4 ASAP2 Comparer及Checker介绍2.5 ASAP2 Modifier介绍2.6 ASAP2 Studio介绍 3. 项目实操说明3.1 项目实操建议3.2 工具下载地址及使用 1. 前言 在XCP观测及标定整…

【自撰写,国际象棋入门】第1课、棋盘和棋子

第1课 棋盘和棋子 一、国际象棋的棋盘 国际象棋的棋盘为一8乘8的黑、白格相间的棋盘&#xff0c;8条竖线的编号分别为A-H&#xff0c;8条横线的编号分别为1-8&#xff0c;在记谱时用竖线编号横线编号的方式表示棋盘上的格子&#xff0c;例如a1格、h8格等.棋盘上有几条重要的大…

抖音 UG 社招一面算法原题

史上最严热点新机制 或许是受到前段时间「巴黎丢作业」的影响&#xff0c;抖音近日&#xff08;5月27日&#xff09;实施了新的热点内容核实机制。 具体来说&#xff0c;若用户在抖音以热点事件当事人身份发声&#xff0c;抖音将联系当事人进行身份认证。 逾期未认证的用户&…

基于springboot实现网络海鲜市场系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现网络海鲜市场系统演示 摘要 计算机网络发展到现在已经好几十年了&#xff0c;在理论上面已经有了很丰富的基础&#xff0c;并且在现实生活中也到处都在使用&#xff0c;可以说&#xff0c;经过几十年的发展&#xff0c;互联网技术已经把地域信息的隔阂给消除…

STM32作业实现(六)闪存保存数据

目录 STM32作业设计 STM32作业实现(一)串口通信 STM32作业实现(二)串口控制led STM32作业实现(三)串口控制有源蜂鸣器 STM32作业实现(四)光敏传感器 STM32作业实现(五)温湿度传感器dht11 STM32作业实现(六)闪存保存数据 STM32作业实现(七)OLED显示数据 STM32作业实现(八)触摸按…

大学生Python自救课程总结

因为一些事情的缘故&#xff0c;我已经几乎没有更新很久了&#xff0c;然后现在快到期末了&#xff0c;不知道各位学习python的同志们慌不慌【坏笑】。 本学期&#xff0c;我只是简单的讲了讲python的基础用法。当然&#xff0c;可能有些地方总结的并不全面&#xff0c;很多知…

MyBatis 的在使用上的注意事项及其辨析

1. MyBatis 的在使用上的注意事项及其辨析 文章目录 1. MyBatis 的在使用上的注意事项及其辨析2. 准备工作3. #{ } 与 ${ } 的区别和使用3.1 什么情况下必须使用 ${ }3.1.1 拼接表名3.1.2 批量删除3.1.3 模糊查询3.1.3.1 使用 ${ }的方式3.1.3.2 使用 #{ } 的方式 4. typeAlias…

童心与美食的邂逅,蒙自源邀你共绘梦想画卷

激情夏日所带来的热情如同孩子们的梦想一样炽热而澎湃。为了庆祝六一儿童节&#xff0c;从5月25日起&#xff0c;蒙自源旗下各大门店准备了一系列的活动&#xff0c;以迎接这个属于孩子们的特别日子。 特别活动期间&#xff0c;蒙自源特意为孩子们推出了一系列独具特色的美食。…

Cobalt_Strike(CS)渗透工具安装使用到免杀上线

Cobalt_Strike&#xff08;CS&#xff09;安装到免杀上线 原文链接&#xff1a; cs免杀上线 点我 https://mp.weixin.qq.com/s?__bizMzkxNDY5NzMxNw&amp;mid2247483862&amp;idx1&amp;snc6b4da3ce5772a075431098227397baa&amp;chksmc16b3cdcf61cb5ca06f61513…

Flutter开发效率提升1000%,Flutter Quick教程之在特定位置插入Widget

当我们要将Widget插入一个Column,Row或者Listview等有多个子元素的Widget的时候&#xff0c;有两种情况&#xff0c;一种是顺序插入&#xff0c;一种是非顺序插入。顺序插入就是Widget的排列顺序和插入顺序相同&#xff0c;非顺序插入则不是。 一&#xff0c;顺序插入。如图所…

树莓派通过PCA9685控制FT2331M舵机(Python)

很久之前整过PWM舵机&#xff0c;刚好最近师弟需要&#xff0c;并且网上现有教程不是很完整&#xff0c;就整理一下。方便交流以及后面回顾。 首先要明确&#xff0c;在这个控制方式中需要用到哪些方面&#xff1a; 1、树莓派与PCA9685之间使用I2C通信 2、PCA9685通讯协议 3…

牛客网刷题 | BC113 数字三角形

目前主要分为三个专栏&#xff0c;后续还会添加&#xff1a; 专栏如下&#xff1a; C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读&#xff01; 初来乍到&#xff0c;如有错误请指出&#xff0c;感谢&#xff01; 描述 KiKi学习了循环&am…