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

  本文学习并分析App.Hosting项目中前台页面的文章专栏页面和文章详情页面。<

文章专栏页面

  文章专栏页面总体上为左右布局,左侧显示文章列表,右侧从上向下为关键词搜索、分类导航、热门文章等内容。整个页面使用了layui中的面包屑导航、表单、模版、流加载等样式或模块,通过global.css、article.css、animate.css等文件设置样式,使用article.js文件加载内容并调用ArticleController中的相关函数获取或检索数据。
在这里插入图片描述在这里插入图片描述
  面包屑导航。使用layui-breadcrumb预设类设置面包屑导航样式。
  文章列表。页面加载时默认显示所有文章,也支持显示按关键词检索的文章列表,亦或显示分类导航相关的文章列表。article.js文件定义的search函数调用ArticleController的Views函数检索并分页显示文章列表,然后使用newsview模版显示每篇文章的图标、名称、作者等信息。
  输入关键词检索。article.js文件设置针对submit(search)的事件响应函数,最终还是调用search函数分页显示检索结果。
  显示分类导航。页面加载时在article.js中调用ArticleController的Module函数获取分类导航信息,然后使用categoryview模板显示每类导航的名称链接,点击链接后在页面左侧显示分类下的文章列表。
  显示热门文章。页面加载时在article.js中调用ArticleController的Module函数获取最热门6篇文章,然后使用hotview模板显示每条文章的基本信息链接,点击链接后会打开文章详情页面显示详细内容。
  模版定义。定义了newsview、categoryview、hotview模版供显示文章、分类导航及热门文章功能调用。
  js文件。引用的article.js专用于本页面的初始化及函数定义,主要函数已在上方说明,在此不再赘述。

文章详情页面

  文章详情页面总体上为左右布局,左侧从上向下为文章标题、文章内容、提交评论区、评论列表,右侧从上向下为分类导航、热门文章、随便看看等内容。整个页面使用了layui中的面包屑导航、模版、流加载等样式或模块,通过global.css、detail.css等文件设置样式,使用detail.js文件加载内容并调用ArticleController和HomeController中的相关函数获取数据。
加粗样式
在这里插入图片描述
  面包屑导航。使用layui-breadcrumb预设类设置面包屑导航样式。
  文章标题、正文。在页面显示ArticleController的Detail函数传递给页面的文章标题、作者、正文等数据。
  编写并提交评论。detail.js文件设置针对submit(formLeaveMessage)的事件响应函数,调用HomeController的Comment函数提交用户编写的评论,提交成功后刷新历史评论区。
  历史评论及回复。detail.js文件定义showmsg函数调用HomeController的Msg函数分页显示评论及回复,然后使用msgview模板逐条显示评论,且评论支持回复,detail.js文件设置针对submit(formReply)的事件响应函数调用HomeController的Reply函数保存回复信息。
  显示分类导航。页面加载时在detail.js中调用ArticleController的DetailModule函数获取分类导航信息,然后使用categoryview模板显示每类导航的名称链接,点击链接后会跳转到文章专栏页面。
  显示热门文章。页面加载时在detail.js中调用ArticleController的DetailModule函数获取最热门6篇文章,然后使用hotview模板显示每条文章的基本信息链接。
  随便看看。页面加载时在detail.js中调用ArticleController的DetailModule函数随机获取10篇文章,然后使用randomview模板显示每条文章的基本信息链接。
  模版定义。定义了hotview、categoryview、randomview、msgview、moreview模版供显示热门文章、分类导航、随便看看、回复及更多回复功能调用。
  js文件。引用的detail.js专用于本页面的初始化及函数定义,主要函数已在上方说明,在此不再赘述。

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

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

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

相关文章

MySQL数据库外键约束打开与关闭 ️

MySQL数据库外键约束打开与关闭 &#x1f6e0;️ MySQL数据库外键约束打开与关闭 &#x1f6e0;️摘要 &#x1f4dd;引言 &#x1f680;正文内容&#xff08;详细介绍&#xff09; &#x1f4a1;关闭外键约束检查外键约束检查关闭的作用风险与最佳实践建议 &#x1f914; QA环…

使用Spring进行文件的上传和下载

概览 使用Spring进行文件的上传和下载Spring上传文件接口设计dubbo接口设计上传文件流的RPC的接口设计 Spring文件下载接口设计dubbo接口设计下载文件流的RPC的接口设计 spring上传文件大小控制 使用Spring进行文件的上传和下载 本文主要介绍在Spring框架下面调用微服务的dubb…

LeetCode36: 有效的数独(Java)

题目&#xff1a; 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例…

vue 性能优化

data 层级不要太深 data 层级太深会增加响应式监听的计算&#xff0c;导致页面初次渲染时卡顿。 合理使用 v-show 和 v-if 频繁切换时&#xff0c;使用 v-show无需频繁切换时&#xff0c;使用 v-if 合理使用 computed computed 有缓存&#xff0c;data 不变时不会重新计算&…

一次Ambari安装记录

引言 Ambari是一个开源的Apache项目,它提供了一个直观易用的Web界面,用于管理、监控和配置Apache Hadoop集群。它是一个集群管理工具,可以帮助管理员轻松地部署、管理和监控Hadoop集群的各种组件,如HDFS、YARN、MapReduce、Hive、HBase等。通过Ambari,用户可以在集群中添…

pwn程序已经运行了,payload字节数组包含不可见字符,无法进行utf8编码,这个时候怎么输入?

假设./your_elf_program已经运行了,payload字节数组包含不可见字符,无法进行utf8编码,这个时候怎么输入? 如果 ./your_elf_program 已经在运行,并且你需要发送包含不可见字符的 payload 字节数组,你不能直接通过常规的命令行输入,因为终端不支持非 UTF-8 编码的数据输入…

OerOerlikonTCO1200欧瑞康LPCVD system操作使用说明

OerOerlikonTCO1200欧瑞康LPCVD system操作使用说明

DNS的背景工作原理和作用

1.背景: DNS的背景起源于20世纪60年代末的美国国防部高级研究计划局&#xff08;ARPA&#xff09;建立的试验性计算机网络ARPAnet。DNS&#xff0c;全称域名系统&#xff08;Domain Name System&#xff09;&#xff0c;是为了解决互联网上主机名与IP地址对应关系而发展起来的…

java中类A的所有实例方法都可以在A的子类中进行覆盖(Override)吗

在Java中&#xff0c;类A的所有非静态的实例方法&#xff08;也被称为实例成员方法&#xff09;理论上都可以在A的子类中进行覆盖&#xff08;Override&#xff09;&#xff0c;但这有几个重要的前提和注意事项&#xff1a; 访问权限&#xff1a;被覆盖的方法在父类中的访问权…

算法训练营day18

文章目录 一、找树左下角的值二、路径总和1 & 2从路径总和1 & 2体会什么情况下递归需要返回值&#xff0c;什么时候不需要返回值路径总和1初始递归DFSBFS路径总和2 三、从中序与后序遍历序列构造二叉树四、从前序和中序遍历序列构造二叉树 一、找树左下角的值 参考链接…

运行python脚本下载官网安装包进行安装

背景介绍&#xff1a;1.由于公司业务人员window系统没有管理员用户权限&#xff0c;使用的是普通用户权限登陆的&#xff0c;因此不能自己安装软件。但是有时候涉及到软件的大批量更新&#xff0c;人工一个一个的去安装&#xff0c;效率太低&#xff0c;人工成本太高&#xff0…

DQ-DETR: DETR WITH DYNAMIC QUERY FOR TINY OBJECTDETECTION 学习笔记

论文地址&#xff1a;https://arxiv.org/pdf/2404.03507.pdf 此DQ-DETR与IDEA提出的同名&#xff0c;该文主要集中于小目标的检测 尽管之前的类似DETR的方法在通用目标检测中取得了成功&#xff0c;但在小目标检测方面仍然具有挑战性&#xff0c;因为目标 Query 的位置信息并未…

LWIP开启ARP之后进入硬件错误中断

遇到个很奇怪的问题&#xff0c;如下图只要开启ARP之后&#xff0c;就会进入硬件错误中断&#xff0c;关掉就好了。 而无法开启ARP&#xff0c;就不能ping 通&#xff0c;所以必须要解决这个问题。 最终debug发现死在memcpy函数位置 这样原因就很好分析了&#xff0c; 共4个拷…

通过linux工具iftop命令查看视频监控平台是否收到监控摄像头的视频流(视频监控平台接收和转发的视频流)

目录 一、需求描述 二、解决思路 &#xff08;一&#xff09;问题分析 &#xff08;二&#xff09;解决思路 1、通过抓包的方式 2、通过一些linux的网络监视工具 三、需求实现 &#xff08;一&#xff09;抓包工具 1、tcpdump 2、Wireshark 3、tcptrace &#xff0…

【刷题】 二分查找进阶

送给大家一句话&#xff1a; 你向神求助是因为相信神&#xff0c;神没有回应你是因为神相信你 ε≡٩(๑>₃<)۶ &#xfeff;ε≡٩(๑>₃<)۶ &#xfeff;ε≡٩(๑>₃<)۶ 一心向学 二分查找进阶 1 前言Leetcode 852. 山脉数组的峰顶索引题目描述算法思…

【EtherCAT】FMMU和SM简介

目录 一、简介 1、 FMMU 2、SM (1) 缓冲模式 (2)邮箱模式 3、FMMU将物理存储器映射到逻辑过程数据映射的配置原理 二、FMMU和SM在EtherCAT从站控制器的存储空间分配 三、FMMU和SM部分寄存器描述(LAN9253) 1、FMMU 2、SM 四、FMMU和SM的数据结构&#xff08;soem主站&…

什么是AIoT?

什么是AIoT? AIoT&#xff0c;即人工智能物联网&#xff0c;是一种将人工智能&#xff08;AI&#xff09;技术与物联网&#xff08;IoT&#xff09;相结合的新型应用形态。它不仅实现了设备之间的互联互通&#xff0c;还赋予了它们更智能化的特性。AIoT的核心在于通过AI的数据…

什么是知乎知+广告推广?

知乎作为中国领先的知识分享社区和高质量用户群体汇聚地&#xff0c;其广告价值日益凸显&#xff0c;其中&#xff0c;“知”作为知乎官方推出的创新广告形式&#xff0c;正逐渐成为品牌与消费者深度连接的重要桥梁。知广告推广不仅局限于传统意义上的硬性推广&#xff0c;更强…

解锁棋盘之谜:探索N皇后问题的全方位解决策略【python 力扣51题】

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 欢迎加入社区&#xff1a;码上找工作 作者专栏每日更新&#xff1a; LeetCode解锁1000题: 打怪升级之旅 python数据分析…

QML 中引用 js 文件闪退问题

问题描述 在移植 Android 中遇到这样一个引用兼容性问题&#xff0c;起因是这样的&#xff0c;Windows 版本的采用了 QML 分离的方式加载&#xff0c;而 Android 版本又采用了 qrc 的方式。而 Qt 中的机制是采用 QML 分离方式时则使用相对路径的方式引用 js 文件&#xff0c;而…