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

  本文学习并分析App.Hosting项目中前台页面的作品展示页面和首页页面。

作品展示页面

  作品展示页面总体上为上下布局,上方显示导航菜单,下方从左向右显示图片数据,支持放大查看图片和下载图片。整个页面使用了layui中的面包屑导航、弹出层、流加载等样式或模块,通过global.css文件设置样式,使用mixed_pic.js文件加载内容并显示wwwroot\favorite中的图片,并未与控制器类交互。
在这里插入图片描述
  面包屑导航。使用layui-breadcrumb预设类设置面包屑导航样式。
  导航菜单。使用global.css文件设置导航菜单样式。
  图片展示区。mixed_pic.js开头固化变量保存wwwroot\favorite下的图片信息,然后通过流加载方式逐个显示图片信息,并未使用模版方式设置图片信息样式,而是直接在js文件中拼接html字符串。每个图片提供查看大图按钮,调用layui的layer.photos显示大图。
  js文件。引用的mixed_pic.js专用于本页面的初始化及函数定义,主要函数已在上方说明,在此不再赘述。

首页页面

  首页页面总体布局如下图所示,整个页面使用了layui中的轮播、流加载、弹出层、模版等样式或模块,通过global.css、index.css等文件设置样式,使用index.js文件加载内容并调用HomeController和ArticleController中的相关函数获取或检索数据。
在这里插入图片描述在这里插入图片描述
  横幅。页面加载时,通过HomeController的Index函数传递给页面横幅集合信息,然后在前台使用layui的轮播组件周期性地显示横幅图片,并在index.js文件中调用carousel.render配置轮播样式。
在这里插入图片描述

  公告。页面加载时在Index.js文件中调用HomeController的Init函数获取公告集合,然后使用tipsview模版显示公告,并调用playNotice函数5秒切换一条公告信息。
  文章列表。页面加载时在Index.js文件中通过流加载方式调用ArticleController的Page函数分页显示文章列表,然后使用newsview模版显示每篇文章的图标、名称、作者、标签等信息。
  个人头像。固定内容,显示项目作者信息及交流方式。
  文章标签。页面加载时在Index.js文件中调用HomeController的Init函数获取文章标签集合,然后使用temptags模版显示标签名称及标签关联的文章数量,点击标签会跳转到文章专栏显示与标签相关的所有文章列表。
  热门文章。页面加载时在Index.js中调用HomeController的Init函数获取最热门6篇文章,然后使用hotview模板显示每条文章的基本信息链接,点击链接后会打开文章详情页面显示详细内容。
  博主介绍。固定内容,显示项目作者简介。
  友情链接。页面加载时在Index.js中调用HomeController的Init函数获取友情链接集合,然后使用linkview模板显示友情链接信息,点击链接后会跳转到对应的链接网址。
  模版定义。定义了tipsview、newsview、temptags、hotview、linkview模版供公告、文章列表、标签、热门文章、友情链接等功能调用。
  js文件。引用的Index.js专用于本页面的初始化及函数定义,主要函数已在上方说明,在此不再赘述。

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

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

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

相关文章

高通发布电脑CPU,比英特尔Ultra9领先51%

要说2024年最热门的关键词,那肯定非 AI 莫属,当前 AI 已经开始深入各行各业,AI 电视、AI 手机、AI 车机、AI 家电,以及 AI PC ,这些都意味着 AI 将对各个行业带来的新风向和不小的冲击。 2024 年了,PC 处理器还能卷出什…

偏微分方程算法之二阶双曲型方程紧差分方法

目录 一、研究目标 二、理论推导 三、算例实现 一、研究目标 前面我们已经介绍了二阶双曲型方程显式、隐式差分格式,可否像抛物型方程一样,构建更高精度的差分格式。接下来我们介绍紧差分格式。这里继续以非齐次二阶双曲型偏微分方程的初边值问题为研…

【JavaScriptThreejs】判断路径在二维平面上投影的方向顺逆时针

原理分析 可以将路径每个连续的两点向量叉乘相加,根据正负性判断路径顺逆时针性 当我们计算两个向量的叉积时,结果是一个新的向量,其方向垂直于这两个向量所在的平面,并且其大小与这两个向量构成的平行四边形的面积成正比。这个新…

Elasticsearch:崭新的打分机制 - Learning To Rank (LTR)

警告:“学习排名 (Learning To Rank)” 功能处于技术预览版,可能会在未来版本中更改或删除。 Elastic 将努力解决任何问题,但此功能不受官方 GA 功能的支持 SLA 的约束。 注意:此功能是在版本 8.12.0 中引入的,并且仅适…

【云计算】云数据中心网络(七):负载均衡

《云网络》系列,共包含以下文章: 云网络是未来的网络基础设施云网络产品体系概述云数据中心网络(一):VPC云数据中心网络(二):弹性公网 IP云数据中心网络(三)…

防火墙如何工作

防火墙是网络安全的重要组成部分,充当受信任的内部网络与外部世界之间的保护屏障。它根据预定的安全规则监视和控制传入和传出的网络流量。您是否知道防火墙的概念可以追溯到 20 世纪 80 年代,当时互联网还处于早期阶段?从那时起,…

SpringBoot项目启动的时候直接退出了?

SpringBoot项目启动的时候直接退出了? 如下图: 在启动SpringBoot项目的时候仅仅用了1.209s,然后直接退出了,也没有出现启动的项目对应的服务器端口号?为什么会这样呢?因为既然有服务器端口号 那么肯定会有…

linux系统是未来_大小写敏感_case_sensitive_编程原生态

修改 py 文件 🥊 回忆上次内容 上次尝试了 两个vim 同时打开 同一py文件 vim出现了Error 有各种选择 错误拼写 pront 导致 运行时 出现了NameError 添加图片注释,不超过 140 字(可选) 错误(Error) 不是 我们 无能的标记 …

k8s pod使用sriov

之前的文章中讲了k8s multus的使用,本章节来讲述下如何使用multus来实现sriov的使用。 一、sriov 简介 SR-IOV在2010年左右由Intel提出,但是随着容器技术的推广,intel官方也给出了SR-IOV技术在容器中使用的开源组件,例如&#…

力扣(leetcode) 407. 接雨水 II 3D接雨水

力扣(leetcode) 407. 接雨水 II 3D接雨水 给你一个 m x n 的矩阵,其中的值均为非负整数,代表二维高度图每个单元的高度,请计算图中形状最多能接多少体积的雨水。 示例 1: 输入: heightMap [[1,4,3,1,3,2],[3,2,1,3,2,4],[2,3,3,2,3,1]] 输…

Excel vlookup函数的使用教程 和 可能遇到的错误解决方法

使用VLOOKUP示例 被查询的表格 表一 A列B列C列A1aB2bC3c 要匹配的列 表二 F列G列H列ACBDA 要G列匹配字母,H列匹配数字 G 使用公式VLOOKUP(F5,A:D,3,0) 参数说明 F5 是表二 F列第五行的A A:D表是要匹配的数据列表在A到D列,就是表一 (注意…

day03-(docker)

文章目录 DockerDocker和虚拟机的差别docker在linux安装配置镜像命令容器命令介绍Docker-容器(基本操作)docker基本操作(数据卷)数据卷挂载直接挂载四.Dockerfile自定义镜像五.Docker-Compose 安装修改权限镜像仓库![在这里插入图…

在城市与自然中穿行:探索自然的全新方式,健康、环保、快乐的生活方式

一辆单车,三五好友,骑行穿过城市与大自然。无论是在悠闲的周末打卡城市古建筑,还是选择充满挑战的“川藏线”,无论是在城郊绿道感受清风拂面,还是在洱海湖畔欣赏美好风光……如今,越来越多人加入骑行队伍&a…

解读币安Megadrop:如何参加第一期BounceBit活动?

币安推出新的代币发行平台 Megadrop,第一期为 BounceBit。 跟 launchpool 相比, 主要不同是 1)锁仓 bnb 有收益的倍数加成 2)做任务有收益加成。 我认为核心目的有两个: 1)更多收益给 BNB 长期持有者&am…

Docker pull镜像名称 把本地镜像推送到远程详解

Docker pull镜像名称 把本地镜像推送到远程详解: Docker 镜像 仓库 容器介绍 以及镜像仓库详解 下载一个alpine的镜像演示,alpine是一个比较小的的linux镜像。 docker pull alpinedocker tag d4ff818577bc docker.io/itying/alpine:v1.0.1docker tag d4…

基于Linux的Ncurse库的贪吃蛇项目

贪吃蛇项目的意义 承上启下:从C语言基础的学习:数据结构链表基础、C变量、流程控制、函数、指针、结构体等。过渡到Linux系统编程:文件编程、进程、线程、通信、第三方等。 Linux终端图形库curses curses的名字起源于"cursor optimiz…

ELK创建仪表盘

仪表盘 一、保存search二、生成饼图三、创建仪表盘 一、保存search 首先保存一段时间内的search,可以添加想要的字段,并保存这个search方便下次直接打开该search,并方便在可视化和仪表盘中使用该search. 二、生成饼图 点击Visualize 选择…

C语言——内存函数的实现与模拟

1. memcpy 函数 与strcpy 函数类似 1.头文件 <string.h> 2.基本格式 • 函数memcpy从source的位置开始向后复制num个 字节 的数据到destination指向的内存位置。 • 这个函数在遇到 \0 的时候并不会停下来。 • 如果source和destination有任何的重叠&#xff0…

Redis入门到通关之数据结构解析-动态字符串SDS

文章目录 Redis数据结构-动态字符串动态扩容举例二进制安全SDS优点与C语言中的字符串的区别 欢迎来到 请回答1024 的博客 &#x1f353;&#x1f353;&#x1f353;欢迎来到 请回答1024的博客 关于博主&#xff1a; 我是 请回答1024&#xff0c;一个追求数学与计算的边界、时间…

Spring Kafka—— KafkaListenerEndpointRegistry 隐式注册分析

由于我想在项目中实现基于 Spring kafka 动态连接 Kafka 服务&#xff0c;指定监听 Topic 并控制消费程序的启动和停止这样一个功能&#xff0c;所以就大概的了解了一下 Spring Kafka 的几个重要的类的概念&#xff0c;内容如下&#xff1a; ConsumerFactory 作用&#xff1a;…