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

news2024/12/26 10:59:19

  本文学习并分析App.Hosting项目中后台管理页面的标签管理页面、轮播图维护页面。

标签管理页面

  标签管理页面用于显示、检索、新建、编辑、删除标签数据,以便在前台页面的首页及文章专栏等页面显示标签数据。标签管理页面附带一新建及编辑页面,以支撑新建和编辑标签数据。整个页面使用了layui中的表格、表单、颜色选择器等样式或模块,并未使用独立的js文件,而是直接在页面内嵌js代码,并调用BlogManage/TagsController的相关函数处理数据。
在这里插入图片描述

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

在这里插入图片描述
  除上述设置之外,还定义了工具栏、操作按钮、排序事件、检索按钮的响应函数,排序和检索的处理逻辑类似,使用table.reload调用BlogManage/TagsController的Index函数获取并显示结果,其余的添加、编辑和删除按钮中,删除按钮的事件处理函数逻辑为调用BlogManage/TagsController的Delete函数删除数据,然后使用table.reload重载页面数据。
在这里插入图片描述

  调用form.on('switch(enabled)'设置表格中标签状态列开关事件的事件处理函数,其内部调用tools.submitConfrim函数提示用户是否在启用和禁用间切换,确定的话则调用BlogManage /TagsController的Enable函数更新标签状态,同时更新页面数据,取消的话则还原标签状态列之前的显示值。
在这里插入图片描述
  新建和编辑标签数据使用的同一页面,位置为BlogManage\Views\Tags\Form.cshtml页面,使用layui的表单组件、颜色选择器组件设置样式。如果是新建标签,则直接弹出页面,主页面会通过url传递total参数以初始化新数据的默认顺序号,而编辑数据的话,主页面会通过url传递key参数,在编辑页面中调用BlogManage/TagsController的Detail函数获取标签数据初始化编辑页面的对应元素数据。新建或编辑完成后,主页面的js中设置了回调函数,最终调用BlogManage/TagsController的Form函数新增或更新数据。
在这里插入图片描述

轮播图维护页面

  轮播图维护页面用于显示、新建、编辑、删除标签数据,以便在前台页面的首页循环显示轮播图。轮播图维护页面附带一新建及编辑页面,以支撑新建和编辑轮播图数据。整个页面使用了layui中的表格、表单、上传组件、弹出层等样式或模块,并未使用独立的js文件,而是直接在页面内嵌js代码,并调用BlogManage/BannerController的相关函数处理数据。
在这里插入图片描述
  轮播图维护页面仅包含单个元素以表格形式显示全部轮播图数据或者检索结果。

<table id="laytable" lay-filter="bannerList"></table>

  内置的js代码主要用于设置表格样式及处理事件。调用layui的table.render函数设置表格样式,主要包括:
  1)用elem属性设置表格容器元素,同时用url设置调用BlogManage/BannerController的Index函数分页获取所有轮播图数据;
  2)用limit、limits、page属性设置数据分页显示;
  3)用toolbar属性设置头部工具栏,指定的元素id定义在_AminLayout.cshtml内,且根据不同的页面显示不同的工具栏内容,在本页面中工具栏中有添加按钮(按钮在系统管理->按钮管理中配置);
  4)用where属性设置调用Index时附加的其它参数;
  5)用cols属性设置表格显示列,其中第一列采用type:‘number’设置为序号列,其它列对应Index函数返回值的属性,打开方式列(对应字段Link)和图片列(对应字段ImgUrl)采用templet属性以模版函数方式设置显示属性值,最后一列用templet属性以模版选择器形式指定_AminLayout.cshtml文件中定义的按钮模版(按钮在系统管理->按钮管理中配置)。

在这里插入图片描述
  除上述设置之外,还定义了工具栏、操作按钮、点击事件的响应函数,同时删除按钮的事件处理函数逻辑为调用BlogManage/BannerController的Delete函数删除数据,然后使用table.reload重载页面数据。
在这里插入图片描述
  新建和编辑轮播图数据使用的同一页面,位置为BlogManage\Views\Banner\Form.cshtml页面,使用layui的表单组件设置样式,同时使用上传组件上传图片。如果是新建轮播图,则直接弹出页面,主页面会通过url传递total参数以初始化新数据的默认顺序号,而编辑数据的话,主页面会通过url传递key参数,在编辑页面中调用BlogManage/BannerController的Detail函数获取轮播图数据初始化编辑页面的对应元素数据,同时调用BlogManage/BannerController的UploadImg函数上传图片文件。新建或编辑完成后,主页面的js中设置了回调函数,最终调用BlogManage/BannerController的Form函数新增或更新数据。
在这里插入图片描述
参考文献:
[1]https://gitee.com/miss_you/Blog
[2]https://layui.dev/docs/2/
[3]https://animate.style/

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

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

相关文章

OpenStack与Kubernetes:云计算平台的两大巨头及其差异

目录 一、引言 二、OpenStack概述与特点 三、Kubernetes概述与特点 四、OpenStack与Kubernetes的比较 OpenStack上创建虚拟机的代码案例 Kubernetes上部署应用的代码案例 五、OpenStack与Kubernetes的协同工作 六、结论 一、引言 在数字化转型的时代&#xff0c;云计算…

gitlab push 代码,密码正确,仍然提示HTTP Basic: Access denied. The provided password

HTTP Basic: Access denied. The provided password or token is incorrect or your account has 2FA enabled and you must use a personal access token instead of a password gitlab 登录账户密码确认正确&#xff0c;登录获取代码仍然提示以上问题&#xff0c;解决方案 …

揭秘成绩等级背后的逻辑:小明的语文分数转换记

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言 二、成绩等级转换规则 三、小明的语文成绩转换过程 四、总结与展望 一、引言 在…

蓝桥杯备赛——DP续【python】

一、小明的背包2 试题链接&#xff1a;https://www.lanqiao.cn/problems/1175/learning/ 输入示例 5 20 1 6 2 5 3 8 5 15 3 3 输出示例 120 问题分析 这题是完全背包&#xff0c;每个物品有无数个&#xff0c;所以对于任意dp[i][j]&#xff08;其表示的意思为选到第i个…

新手福利:这个模块/工具让你开发的程序轻松实现自动升级功能!

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 项目介绍 📒📝 模块功能📝 安装📝 使用⚓️ 相关链接 ⚓️📖 介绍 📖 你是否在开发应用程序时,为如何实现自动软件升级而苦恼?特别是对于 Python 新手开发者来说,编写更新代码可能不是一件容易的事。今天,我将向…

Android 11 触摸小圆点显示流程

在开发者选项中&#xff0c;打开 “显示点按操作反馈” 开关&#xff0c;当我们在触摸屏幕时&#xff0c;会显示一个小圆点&#xff0c;来分析下小圆点的显示流程。 操作这个开关时&#xff0c;其实就是操作Settings数据库中的 SHOW_TOUCHES //packages\apps\Settings\src\com…

HTTP请求拦截器链

文章目录 HTTP请求拦截器链需求定义写一个Controller方法接口写三个http请求拦截器把拦截器加入到配置中&#xff0c;并且配置拦截规则在postman里面发送请求&#xff0c;看下测试结果是否正确 HTTP请求拦截器链 需求定义 我们写一个包含三个HTTP请求拦截器的拦截器链&#x…

如何让UE4.26使用VS2022【Windows,源码下载】

使用UE5一直用的是VS2022&#xff0c;都是因为团队需要&#xff0c;只能用UE4&#xff0c;而我电脑中拥有的UE4的版本是UE4.26以及VS2022&#xff0c;我不可能去下载VS2019来为这么一个项目&#xff0c;所以就研究了一下是哪里阻止了UE4.26不让我使用VS2022. 首先下载UE4.26源码…

Langchain-Chatchat之pdf转markdown格式

文章目录 背景开发环境loader文本解析步骤markdown格式的文本为什么选择markdown格式测试markdown格式提取表格原pdf表格markdown格式的表格 测试markdown格式的知识库运行项目修改文件加载器loader 其他问题运行项目报错查看系统当前的max_user_watches修改sysctl.conf配置 图…

【Linux】Linux下centos更换国内yum源

&#x1f331;博客主页&#xff1a;青竹雾色间 &#x1f331;系列专栏&#xff1a;Linux &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注 目录 1. 备份旧的 YUM 源文件2. 下载国内的 YUM 源文件阿里云&#xff1a;网易&#xff1a; 3. 清理 YUM 缓存4. 更新…

【c++leetcode】69. Sqrt(x)

问题入口 二分搜索 最困难的是能否意识到用二分搜索法解题。 算术平方根的区间在[1, x] 。代码如下&#xff1a; class Solution { public:int mySqrt(int x) {if (x 1 || x 0){return x;}int64_t start 1;int64_t end x;while (start < x){int64_t mid start (en…

开箱元宇宙| 探索家乐福如何在The Sandbox 中重新定义零售和可持续发展

有没有想过 The Sandbox 如何与世界上最具代表性的品牌和名人的战略保持一致&#xff1f;在本期的 "开箱元宇宙 "系列中&#xff0c;我们与家乐福团队进行了对话&#xff0c;这家法国巨头率先采用web3技术重新定义零售和可持续发展。 家乐福的用户平均游玩时间为 57 …

06_知识点总结(JS高级)

一、进程与线程 1. 进程(process)&#xff1a;程序的一次执行, 它占有一片独有的内存空间 2. 线程(thread)&#xff1a; 是进程内的一个独立执行单元&#xff0c;CPU的基本调度单元, 是程序执行的一个完整流程 3. 进程与线程 * 应用程序必须运行在某个进程的某个线程上 * 一个…

tinyrenderer-渲染器着色

整理了代码&#xff0c;创建了一个相机类&#xff0c;控制镜头 class Camera { public:Camera(Vec3f cameraPos, Vec3f target, Vec3f up):cameraPos_(cameraPos), target_(target), up_(up) {}Matrix getView();Matrix getProjection(); private:Vec3f cameraPos_;Vec3f targ…

来自学术界的知识库 RAG 调优方案实践(一)

背景介绍 在之前的文章详细梳理过工业界的 RAG 方案 QAnything 和 RagFlow&#xff0c;这次主要整理下来自学术界的一系列 RAG 优化方案。 主要关注优化方案对应的设计思想以及相关的实现&#xff0c;希望可以对大家的 RAG 服务效果提升有所帮助。 基础介绍 在综述论文 Ret…

【ARM+Codesys案例】T3/RK3568/树莓派+Codesys锂电池测试设备控制解决方案

锂电池诞生于上世纪60年代&#xff0c;90年代开始由日本索尼公司实现商业化。锂离子电池凭借快速充放电、长循环寿命、无记忆效应等众多优点&#xff0c;成为当今数码产品及电动汽车大规模应用的第一选择。与镍氢电池、铅酸电池相比&#xff0c;锂电池可以存储更多电能。现在&a…

Word如何绘制三线表及设置磅值

插入表格&#xff0c; 开始 边框 边框和低温 设置磅值 先全部设置为无边框 上边 1.5 0.5 以上内容未完善&#xff0c;请等待作者更新

春秋云境CVE-2018-20604

简介 雷风影视CMS是一款采用PHP基于THINKPHP3.2.3框架开发&#xff0c;适合各类视频、影视网站的影视内容管理程序&#xff0c;该CMS存在缺陷&#xff0c;可以通过 admin.php?s/Template/edit/path/*web*..*..*..*..*1.txt 的方式读取任意文件。 正文 1.进入靶场 2./admin…

机器学习(五) -- 监督学习(4) -- 集成学习方法-随机森林

系列文章目录及链接 上篇&#xff1a;机器学习&#xff08;五&#xff09; -- 监督学习&#xff08;3&#xff09; -- 决策树 下篇&#xff1a;机器学习&#xff08;五&#xff09; -- 监督学习&#xff08;5&#xff09; -- 线性回归1 前言 tips&#xff1a;标题前有“***”…

pip安装软件包提示“没有那个文件或目录”问题的处理

文章目录 一、Python.h&#xff1a;没有那个文件或目录二、lber.h&#xff1a;没有那个文件或目录 一、Python.h&#xff1a;没有那个文件或目录 pip install -I python-ldap3.0.0b1 #异常提示In file included from Modules/LDAPObject.c:3:0:Modules/common.h:9:20: 致命错…