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

  本文学习并分析App.Hosting项目中前台页面的关于本站页面和点点滴滴页面。

关于本站页面

  关于本站页面相对而言布局简单,与后台控制器类的交互也不算复杂。整个页面主要使用了layui中的面包屑导航、选项卡、模版、流加载等样式或模块。
在这里插入图片描述
  面包屑导航。使用layui-breadcrumb预设类设置面包屑导航样式。
  选项卡。使用layui-tab(layui-tab-title、layui-tab-content、layui-tab-brief等)设置简约风格的选项卡样式,包括关于博客、关于作者、友情链接、留言墙4个标签,除留言墙之外都使用Animate.css设置相关元素的动画(参考文献3)。
  1)关于博客标签和关于作者标签。这两个标签中都是静态内容,未与后台交互,使用about.css、Animate.css、layui.css等设置动画及样式;
  2)友情链接标签。该页签使用about.js调用HomeController的Link函数获取友情链接列表,然后使用linkview模版显示友情链接图标及文本。
  3)留言墙标签。该页签支持留言及对留言进行回复,同时显示历史留言及回复。页签中使用about.js的systemTime定期更新显示时间,同时使用showmsg函数调用HomeController的Msg函数获取分页留言信息,然后使用msgview模版显示留言及回复信息。页签中类名为leavemessage的div元素支持维护及提交留言,使用about.js通过监听表单按钮事件调用HomeController的Comment和Reply函数保存留言及回复信息。

  模版定义。定义了linkview、msgview、moreview模版供显示友情链接、留言及更多留言功能调用。
  js文件。引用的about.js专用于本页面的初始化及函数定义,主要函数已在上方说明,在此不再赘述。

点点滴滴页面

  点点滴滴页面内容较少,整个页面按年份、月份显示事件或动态,主要使用了layui中的面包屑导航、模版、流加载等样式或模块(并未使用layui的时间线样式)。
在这里插入图片描述
  面包屑导航。使用layui-breadcrumb预设类设置面包屑导航样式。
  时光轴。使用timeline.css、Animate.css等设置时光轴样式及动画,同时引用的about.js采用流加载方式调用HomeController的Line函数分页返回时光轴明细数据,数据按年份、月份组织,在页面中显示数据时,对于新增年份,则调用lineview模版显示该年份时光轴数据,如果已有年份但月份时光轴数据不存在,则调用monthview模版追加月份数据,如果已有月份,则调用dayview模版追加月份内数据。
  模版定义。定义了lineview、monthview、dayview模版供显示时光轴功能调用。
  js文件。引用的timeline.js专用于本页面的初始化,主要功能已在上方说明,在此不再赘述。

参考文献:
[1]https://gitee.com/miss_you/Blog
[2]https://layui.dev/docs/2/
[3]https://animate.style/

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

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

相关文章

Web前端 Javascript笔记3

1、垃圾回收机制 内存中的生命周期 1、内存分配 2、内存使用(读写) 3、内存回收,使用完毕之后,垃圾回收器完成 内存泄漏:该回收的,由于某些未知因素,未释放,叫做内存泄漏 栈&#xf…

PostgreSQL入门到实战-第二十九弹

PostgreSQL入门到实战 PostgreSQL中数据分组操作(四)官网地址PostgreSQL概述PostgreSQL中CUBE命令理论PostgreSQL中CUBE命令实战更新计划 PostgreSQL中数据分组操作(四) 如何使用PostgreSQL CUBE生成多个分组集 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不…

Linux配置程序后台运行(前后台来回切换)

Linux配置程序后台运行 在日常开发过程中,会遇到我们在前台运行程序,此时我们临时有事,但不能关闭终端,否则程序就会在电脑熄屏(终端session断开后)停止运行。 那么作为一个合格的开发,就必须要…

Matlab 2024安装教程(附免费安装包资源)

鼠标右击软件压缩包,选择“解压到MatlabR2024a“。 2.打开解压后的文件夹,鼠标右击“MATHWORKS_R2024A“选择装载。 鼠标右击“setup“选择”以管理员身份运行“。点击“是“,然后点击”下一步“。复制一下密钥粘贴至输入栏,然后…

数据结构——双向链表的实现

文章目录 一、双向链表的结构二、实现双向链表创建双向链表的项目双向链表的结构List.h申请结点初始化打印尾插头插尾删头删查找在pos位置之后插入数据删除pos结点销毁 三、所有源代码List.hList.ctest.c 一、双向链表的结构 带头双向循环链表 注意:这⾥的“带头…

数据交换格式

一、什么是数据交换格式 在计算机的不同程序之间,或者不同的编程语言之间进行交换数据,也需要一种大家都能听得懂得‘语言’,这就是数据交换格式,它通过文本以特定的形式来进行描述数据。 二、常用的几种数据交换格式 客户端常…

图像处理ASIC设计方法 笔记17 连通域的图像标记算法

目录 (一)主要环节图像初步标记 -等价表初始化与等价关系记录 -整理等价表 -图像标记代换 -(二)详细算法步骤:1 等价表的操作:2 整理等价表:3 图像标记代换:连通域的图像标记算法有若干步骤,除了图像初步标记,还有等价表初始化、等价关系记录、整理等价表、图像标记代…

【C++】深度解析---赋值运算符重载(小白一看就懂!!)

目录 一、前言 二、 运算符重载 🍎运算符重载 ① 概念引入 ② 语法明细 ③ 练习巩固 ④ 代码展示 🍇赋值运算符重载 ① 语法说明及注意事项 ② 默认的赋值运算符重载 ③ 值运算符不能重载成全局函数! 三、总结 四、共勉 一、前言…

前端console用法分享

console对于前端人员来讲肯定都不陌生,相信大部分开发者都会使用console来进行调试,但它能做的绝不仅限于调试。 最常见的控制台方法 作为开发者,最常用的 console 方法如下: 控制台打印结果: 今天我分享的是一些 co…

Qt快速入门(MV架构之TableView + QStandardItemModel + 自定义代理小案例)

Qt快速入门(MV架构之TableView QStandardItemModel 自定义代理小案例) 关于MV架构的简单介绍 在Qt框架中,代理(Delegate)、模型(Model)和视图(View)之间的关系构成了…

jvisualVM分析jvm内存使用快照dump

服务发生内存溢出,就需要查看服务器上Java服务的jvm堆内存使用情况,可以使用dump命令生成dump文件,然后下载到本地,然后使用jvisualVM工具打开,即可实现可视化分析。 生成dump文件常用的两种方式: 第一种…

linux fixmap分析

本文基于Linux-4.19.125, ARM V7,dual core, MMU采用2级页表(未开启LPAE)。 1 为什么需要fixmap Linux内核启动过程中,经过汇编阶段后,mmu功能已经开启,后续只能通过虚拟地址来访问DDR&#x…

RAG应用开发实战02-相似性检索的关键 - Embedding

1 文本Embedding 将整个文本转化为实数向量的技术。 Embedding优点是可将离散的词语或句子转化为连续的向量,就可用数学方法来处理词语或句子,捕捉到文本的语义信息,文本和文本的关系信息。 ◉ 优质的Embedding通常会让语义相似的文本在空…

Linux 添加启动服务--Service

1,服务配置service文件 Service 服务的实际作用是开启后自动启动服务,运行一些不须要登录的程序,任务。 实例1、上电自动连接WIFI热点 1.1 新建.service文件 /etc/systemd/system/wificonnect.service [Unit] DescriptionService [wifico…

记录linux从0部署java项目(宝塔)

目录 一、安装宝塔可视化界面 二、部署前端 三、部署后端 1、配置并连接Mysql数据库 2、配置并连接redis 3、安装jdk 这里先记录一个安装后遇到的问题 安装openJDK 四、检查 一、安装宝塔可视化界面 宝塔面板下载,免费全能的服务器运维软件 运行安装脚本 安…

MySQL 社区版 安装总结

很早就安装过MySQL,没有遇到过什么问题,直接next就行了,这次在新电脑上安装却遇到了一些问题,记录一下。 安装的是MySQL社区版,下载地址是www.mysql.com,进入后选择DOWNLOAD页面,选择MySQL Com…

基本的数据类型在16位、32位和64位机上所占的字节大小

1、目前常用的机器都是32位和64位的,但是有时候会考虑16位机。总结一下在三种位数下常用的数据类型所占的字节大小。 数据类型16位(byte)32位(byte)64位(byte)取值范围char111-128 ~ 127unsigned char1110 ~ 255short int / short222-32768~32767unsigned short222…

HarmonyOS实战开发-自定义通知角标、如何设定应用的桌面图标角标的功能。

介绍 本示例主要展示了设定应用的桌面图标角标的功能,使用ohos.notificationManager 接口,进行桌面角标的设置,通知的发送,获取等。 效果预览 使用说明 在使用本应用时,需安装并启动仿桌面应用;在主界面…

LeetCode 57—— 插入区间

阅读目录 1. 题目2. 解题思路3. 代码实现 1. 题目 2. 解题思路 第一步,我们先寻找新区间和原始区间列表的重叠部分。 假设新区间为 [ x 1 , x 2 ] [x_1, x_2] [x1​,x2​],原始区间列表中的其中一个区间为 [ y 1 , y 2 ] [y_1, y_2] [y1​,y2​]&…

PostgreSQL入门到实战-第三十弹

PostgreSQL入门到实战 PostgreSQL教程网站官网地址PostgreSQL概述更新计划 PostgreSQL教程网站 https://www.postgresqltutorial.com/ 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://www.postgresql.org/PostgreS…