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

news/2024/7/14 22:03:47

  本文学习并分析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.mrgr.cn/p/11442217

相关文章

【vue/uniapp】ucharts 可以横向拖动查看数据(当图表数据过多时),避免叠加

效果参考: 实现: 需要在 opts 中配置:enableScroll: true 和 ontouch:true;在 opts 的 xAxis 中配置:itemCount: 5(值可以自定义,如图,为默认展示几个); …

翻转列表-力扣

题目 给你单链表的头节点 head ,请你反转链表,并返回反转后的链表。 示例 1: 输入:head [1,2,3,4,5] 输出:[5,4,3,2,1]示例 2: 输入:head [1,2] 输出:[2,1]示例 3: …

寻找峰值 ---- 二分查找

题目链接 题目: 分析: 因为题目中要找的是任意一个峰值即可, 所以和<山脉数组的峰值索引>这道题差不多因为峰值左右都小于峰值, 所以具有"二段性", 可以使用二分查找算法如果nums[mid] < nums[mid 1], mid一定不是峰值, 所以left mid 1如果nums[mid] &…

WXML模板语法-事件绑定

一、 1.事件 事件是渲染层到逻辑层的通讯方式&#xff0c;通过事件可以将用户在渲染层产生的行为&#xff0c;反馈到逻辑层进行业务的处理 2.小程序中常用的事件 3.事件对象的属性列表 当事件回调触发的时候&#xff0c;会收到一个事件对象event&#xff0c;其属性为&#x…

Java设计模式 _行为型模式_迭代器模式

一、迭代器模式 1、迭代器模式 迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为型设计模式&#xff0c;用于顺序访问集合对象的元素&#xff0c;不需要关心集合对象的底层表示。如&#xff1a;java中的Iterator接口就是这个工作原理。 2、实现思路 &#xff0…

基于SSM的大学生兼职管理系统

基于SSM的大学生兼职管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 登录界面 企业界面 前台学生界面 管理员界面 摘要 随着大学生兼职市场的日益繁…

AI大模型如何赋能智能座舱

AI 大模型如何赋能智能座舱 从上海车展上&#xff0c;我们看到由于智能座舱配置性价比较高&#xff0c;已经成为车企的核心竞争点之一&#xff0c;随着座舱硬件规模化装车&#xff0c;蔚小理、岚图、极狐等新势力开始注重座舱多模态交互&#xff0c;通过集成语音/手势/触控打造…

初识C语言——第二十八天

代码练习1&#xff1a; 用函数的方式实现9*9乘法表 void print_table(int n) {int i 0;int j 0;for (i 1; i< n; i){for (j 1; j< i; j){printf("%d*%d%-3d ", i, j, i * j);}printf("\n");}}int main() {int n 0;scanf("%d", &a…

弱监督语义分割-对CAM的生成过程进行改进3

三、擦除图像高响应部分以获取更多的分割领域 ECS-Net: Improving Weakly Supervised Semantic Segmentation by Using Connections Between Class Activation Maps&#xff08;ICCV,2021&#xff09; 1.引言 我们首先从图像中擦除高响应区域&#xff0c;并生成这些擦除图像…

Java类和对象(五)—— 抽象类、接口、Object类和内部类

抽象类 在继承体系下&#xff0c;父类有些方法可能是要被重写的&#xff0c;如果我们事先就知道某些方法需要重写的话&#xff0c;我们可以不用在父类里面具体实现这个方法&#xff0c;这时候我们会用到抽象方法&#xff0c;这时候我们会用到关键字abstract关键字来修饰 publ…

求第 N 个泰波那契数 | 动态规划

1.第 N 个泰波那契数 题目连接&#xff1a;1137. 第 N 个泰波那契数 泰波那契序列 Tn 定义如下&#xff1a; T0 0, T1 1, T2 1, 且在 n > 0 的条件下 Tn3 Tn Tn1 Tn2给你整数 n&#xff0c;请返回第 n 个泰波那契数 Tn 的值。 2.什么是动态规划 在解决这道问题之前…

常见的几种数据库通过SQL对表信息进行查询

一、前言 我们查询数据库表的信息&#xff0c;一般都使用界面化的连接工具查看&#xff0c;很少使用SQL语句去查&#xff0c;而且不同的数据库SQL语句又各自有差异。但如果通过代码去获取数据库表的信息&#xff0c;这时就需要通过SQL语句去查了&#xff0c;这个在逆向代码生成…

Delta Magisk root后解决adb的报错问题

adb root报错“adbd cannot run as root in production builds” su报错“Permission denied”之后再运行adb root或者su,不仅会报错,而且无论自动响应开的是 提示/运行/拒绝 都会有弹窗“shell已被拒绝超级用户权限”,只需最后一步

Vue从入门到实战Day12

一、Pinia快速入门 1. 什么是Pinia Pinia是Vue的最新状态管理工具&#xff0c;是Vuex的替代品 1. 提供更加简单的API&#xff08;去掉了mutation&#xff09; 2. 提供符合组合式风格的API&#xff08;和Vue3新语法统一&#xff09; 3. 去掉了modules的概念&#xff0c;每一…

gitlab-runner

gitlab账号密码 第一次登录 部署gitlab,第一登录,要注册,遇到问题 Your account is pending approval from your GitLab administrator and hence blocked. Please contact your GitLab administrator if you think this is an error.如果是第一次,不知道密码:如下查看,24…

机器学习云环境测试

等待创建完成后&#xff0c;点击 PyTorch 打开&#xff0c;创建一个全新的 notebook 在 Cell 中输入如下代码&#xff0c;并点击 Run 完成后点击 New Cell &#xff0c;在 New Cell 中输入如下代码 输入完成后点击 Run &#xff0c;运行 New Cell 。&#xff08;每个 Cell 代…

「杂文」应用基础实践一(网络+Java)实验报告

基于基于基于学长的学长的学长的代码的学长的学长的代码的学长的代码目录写在前面实验目的与要求实验(一)用JavaSocket编程开发聊天室实验(二)用JavaURL编程爬取并分析网页敏感词实验环境实验原理实验(一)Socket编程接口Java 中的 Socket 类Java SwingSQLite实验(二)网…

ssti(2)

WAF绕过&#xff1a; 1、{%%}绕过过滤{{}} 尝试{%%}&#xff0c;想回显内容在外面加个print就行&#xff0c; {%print("".__class__)%} 思路&#xff1a; 1、判断{{}}被过滤尝试{%%} 2、判断语句能否正常执行 {% if2>1%}Benben1{%endif%} {% if ”:class%}Benbe…

基于深度学习的表情识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着人工智能技术的快速发展&#xff0c;表情识别成为了人机交互领域的一个研究热点。表情识别技术旨…

golang通过go-aci适配神通数据库

1. go-aci简介 go-aci是神通数据库基于ACI(兼容Oracle的OCI)开发的go语言开发接口&#xff0c;因此运行时需要依赖ACI驱动和ACI库的头文件。支持各种数据类型的读写、支持参数绑定、支持游标范围等操作。 2. Linux部署步骤 2.1. Go安装&#xff1a; 版本&#xff1a;1.9以上…