开源博客项目Blog .NET Core源码学习(25:App.Hosting项目结构分析-13)

  本文学习并分析App.Hosting项目中后台管理页面的文章管理页面。
  文章管理页面用于显示、检索、新建、编辑、删除文章数据,以便在前台页面的首页、文章专栏、文章详情页面显示文章数据。文章管理页面附带一新建及编辑页面,以支撑新建和编辑文章数据。整个页面使用了layui中的表格、表单、上传组件、KindEditor组件、日期与时间选择、formSelects组件(参考文献3)等样式或模块,并未使用独立的js文件,而是直接在页面内嵌js代码,并调用BlogManage/ArticleController的相关函数处理数据。
在这里插入图片描述

  文章管理页面的上半部分显示搜索框,下半部分以表格形式显示全部文章数据或者检索结果。
在这里插入图片描述
  内置的js代码主要用于设置表格样式及处理事件,同时处理搜索事件。调用layui的table.render函数设置表格样式,主要包括:
  1)用elem属性设置表格容器元素,同时用url设置调用BlogManage/ArticleController的Index函数分页获取所有文章数据;
  2)用limit、limits、page属性设置数据分页显示;
  3)用toolbar属性设置头部工具栏,指定的元素id定义在_AminLayout.cshtml内,且根据不同的页面显示不同的工具栏内容,在本页面中工具栏中有添加按钮(按钮在系统管理->按钮管理中配置);
  4)用where属性设置调用Index时附加的其它参数;
  5)用cols属性设置表格显示列,其中第一列采用type:‘number’设置为序号列,标题列(对应字段Title)、来源列(对应字段Source)、是否显示列(对应字段Visible)、是否置顶列(对应字段IsTop)采用templet属性以模版函数方式设置显示样式,其它列对应Index函数返回值的属性,最后一列用templet属性以模版选择器形式指定_AminLayout.cshtml文件中定义的按钮模版(按钮在系统管理->按钮管理中配置)。

在这里插入图片描述
  除上述设置之外,还定义了工具栏、操作按钮、检索按钮的响应函数,其余的添加、编辑和删除按钮中,删除按钮的事件处理函数逻辑为调用BlogManage/ArticleController的Delete函数删除数据,然后使用table.reload重载页面数据。
在这里插入图片描述
  调用form.on('switch(enabled)'设置表格中是否显示列开关事件的事件处理函数,其内部调用tools.submitConfrim函数提示用户是否在显示和隐藏间切换,确定的话则调用BlogManage /ArticleController的Show函数更新显示状态,同时更新页面数据,取消的话则还原是否显示列之前的显示值。
  调用form.on('switch(top)'设置表格中是否置顶列开关事件的事件处理函数,其内部调用tools.submitConfrim函数提示用户是否在置顶和取消置顶间切换,确定的话则调用BlogManage /ArticleController的Top函数更新置顶状态,同时更新页面数据,取消的话则还原是否置顶列之前的显示值。

在这里插入图片描述
  新建和编辑文章数据使用的同一页面,位置为BlogManage\Views\Article\Form.cshtml页面,使用layui的表单组件设置样式。如果是新建文章,则直接弹出页面编辑文章数据,而编辑数据的话,主页面会通过url传递key参数,在编辑页面中调用BlogManage/ArticleController的Detail函数获取文章数据初始化编辑页面的对应元素数据。新建或编辑完成后,主页面的js中设置了回调函数,最终调用BlogManage/ArticleController的Form函数新增或更新数据。
在这里插入图片描述

  如上图所示,采用layui的栅格布局将新建或编辑文章页面划分为左右两栏,左侧上半部分维护文章标题及摘要,同时调用BlogManage/ArticleController的Thumbnail函数上传文章缩略图,下半部分使用富文本编辑器KindEditor编辑文章正文,并在Form.cshtml调用KindEditor.ready初始化富文本编辑器设置,右侧从上向下维护文章属性,调用BlogManage/CategoryController的List函数和BlogManage/ TagsController的List函数初始化栏目和标签下拉复选框。文章还能设置定时发布,不过暂时没有看出来处理逻辑。
在这里插入图片描述

参考文献:
[1]https://gitee.com/miss_you/Blog
[2]https://layui.dev/docs/2/
[3]https://github.com/hnzzmsf/layui-formSelects

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【传知代码】transformer-论文复现

文章目录 概述原理介绍模型架构 核心逻辑嵌入表示层注意力层前馈层残差连接和层归一化编码器和解码器结构 数据处理和模型训练环境配置小结 本文涉及的源码可从transforme该文章下方附件获取 概述 Transformer模型是由谷歌在2017年提出并首先应用于机器翻译的神经网络模型结构…

IDEA的妙用

IDEA 安装破解 复制JetbrainsIdesCrack-4.2.jar到安装目录下 修改安装目录下的bin目录的idea64.exe.vmoptions: 最后一行添加:-javaagent:E:\develop\JetBrains\IntelliJ IDEA 2018.3.5\bin\JetbrainsIdesCrack-4.2.jar(注意:使用自己的路…

ts文档+type-challenges

ts不错的学习文档 文档1 文档2 tsconfig配置 实现pick 挑战 从对象中选出指定对象key的类型 type MyPick<T, K extends keyof T> {[key in K]:T[key] }实现只读 挑战 type MyReadonly<T> {readonly [key in keyof T]:T[key] }返回函数类型 type MyReturnT…

Flutter笔记:Widgets Easier组件库-使用隐私守卫

Flutter笔记 Widgets Easier组件库&#xff1a;使用隐私守卫 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https:…

实战演练:一文教你将交换机纳入K8s,对容器进行纳管

随着云计算的发展和云原生应用的兴起&#xff0c;容器技术成为一种流行的应用部署和管理方式。容器化应用程序具有轻量、可移植和可扩展的特点&#xff0c;能够快速部署和运行在不同的环境中。Kubernetes作为一个容器编排平台&#xff0c;为云原生应用的部署、管理和自动化提供…

Qt官方示例---embedded

digiflip flickable flightinfo lightmaps raycasting styleexample

什么是流量医美?

流量医美是一个结合了流量经济和医美产业的新兴概念。要理解流量医美&#xff0c;您可以从以下几个方面入手&#xff1a; 流量经济&#xff1a; 定义&#xff1a;流量经济指的是通过吸引和管理互联网用户流量&#xff08;即访问量&#xff09;来获取经济利益的模式。特点&#…

华为OD机试:36 学校的位置

package a_od_test;import java.util.Arrays; import java.util.Scanner;/* 学校的位置 题目描述为了解新学期学生暴涨的问题,小乐村要建立所新学校&#xff0c; 考虑到学生上学安全问题,需要所有学生家到学校的距离最短。 假设学校和所有学生家都走在一条直线之上,请问学校建立…

@RequestBody注解

RequestBody注解 扩展&#xff1a; http报文会包含四部分&#xff0c;第一部分是请求行&#xff0c;第二部分是请求头&#xff0c;第三部分是空行&#xff0c;第四部分是请求体。 对于POST之类的请求来说&#xff0c;它主要是用来传输数据的&#xff0c;它的参数主要是写在请求…

软考高级系规与高项,哪个更好考?

系规难度要小一些&#xff0c;但学习资源较少&#xff1b;高项难度大一些&#xff0c;但学习资源较多&#xff0c;二者各有优缺点。 偏管理方向考虑高项&#xff0c;偏运维方向考虑系规&#xff1b;没有计算机基础和相关经验&#xff0c;选择高项会更容易理解知识点&#xff1…

JAVA开发 基于最长公共子序列来计算两个字符串之间的重复率

计算两个字符串之间的重复率 最长公共子序列实现代码 最长公共子序列 基于最长公共子序列&#xff08;Longest Common Subsequence, LCS&#xff09;的重复率的中心逻辑是首先找到两个或多个序列中同时出现的、不一定连续但保持相对顺序的最长子序列&#xff0c;然后计算这个最…

如何使用Unity XR Interaction Toolkit

使用环境&#xff1a; Unity2021.3.21f XR Interaction Toolkit v3.0.0 各类函数可用的&#xff1a; 简单项目配置&#xff1a; 第一步&#xff0c;导包&#xff08;samples可以不用导这么多&#xff0c;两个就够了&#xff09;&#xff1a; 第二步&#xff0c;构建场景&a…

【ZYNQ】GPIO 与 AXI GPIO

在嵌入式开发中&#xff0c;GPIO 是最常见的外设。GPIO 是 General Purpose I/O 的缩写&#xff0c;译为通用输入/输出。GPIO 用于连接外部设备&#xff0c;例如按键、传感器等&#xff0c;实现数字信号的输入或输出功能。本文主要介绍 Zynq GPIO 的基本概念&#xff0c;并对比…

SpringBoot 实现私钥解密 前端的公钥加密内容

目录 一、前端公钥加密 二、后端私钥解密 一、前端公钥加密 Nextjs 前端实现RSA公钥加密 JSEncrypt加载问题解决-CSDN博客 二、后端私钥解密 import javax.crypto.Cipher; import java.security.KeyFactory; import java.security.PrivateKey; import java.security.spec.…

表现层框架设计之表现层设计模式_3.MVVM模式

1.MVVM模式 MVVM模式正是为解决MVP中UI种类变多&#xff0c;接口也会不断增加的问题而提出的。 MVVM模式全称是模型-视图-视图模型&#xff08;Model-View-ViewModel&#xff09;&#xff0c;它和MVC、MVP类似&#xff0c;主要目的都是为了实现视图和模型的分离&#xff0c;不…

深度学习之基于Yolov3的行人重识别

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 行人重识别&#xff08;Person Re-Identification&#xff0c;简称ReID&#xff09;是计算机视觉领域…

新品:LoRa扩频调制SOC无线模块-内置ARM、工业级晶振

LoRa-STM32WLE5是思为无线最新研发的一款SOC无线模块&#xff0c;模块主芯片采用了ST 公司的STM32WLE5芯片研发。模块采用LoRa调制&#xff0c;内置工业级晶振&#xff0c;并基于高性能的ArmCortex-m4 32位RISC核心&#xff0c;工作频率高达48 MHz。这个核心实现了一套完整的DS…

项目十二:简单的python基础爬虫训练

许久未见&#xff0c;甚是想念&#xff0c;今日好运&#xff0c;为你带好运。ok&#xff0c;废话不多说&#xff0c;希望这门案例能带你直接快速了解并运用。&#x1f381;&#x1f496; 基础流程 第一步&#xff1a;安装需要用到的requests库&#xff0c;命令如下 pip inst…

初始化是什么

定义 初始化&#xff08;Initialization&#xff09;是指在计算机科学和软件开发中&#xff0c;将系统、变量、对象或其他可用组件设置为其初始状态或初始值的过程。这通常是在程序开始执行或组件第一次使用之前进行的&#xff0c;以确保其处于可预测和稳定的状态。 初始化的…

844. 比较含退格的字符串

给定 s 和 t 两个字符串&#xff0c;当它们分别被输入到空白的文本编辑器后&#xff0c;如果两者相等&#xff0c;返回 true 。# 代表退格字符。 注意&#xff1a;如果对空文本输入退格字符&#xff0c;文本继续为空。 示例 1&#xff1a; 输入&#xff1a;s "ab#c&quo…