开源博客项目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/

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

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

相关文章

强化学习2:Q-learning 算法

如果对强化学习没有了解,推荐先学习一下:强化学习基本原理 1 Q-Learning:简介 Q-Learning 是一种基于价值迭代的强化学习算法,用于解决马尔可夫决策过程(MDP)中的问题。在 Q-Learning 中,代理…

SAP DMS创建文档根目录操作简介

前面我们已经对DMS的后台进行了系统的配置,本文开始我们对DMS的前台操作进行说明 1、CV01N创建文档 注意:EDIPUBLICROOTFOLDER为根目录的凭证号,不允许更改。 输入好后回车。进入下图所示: 点击文档浏览器,进入下一屏如下图: 注意:点击创建新的私人文件夹按创建是创…

关于pdf.js中文本坐标尺寸的使用

一个电子教材项目中有这样一个需求: 用户向网站上传一个PDF书籍后,网站可以对PDF书籍进行解析,并支持用户对PDF书籍的每一页做一些操作,比如:为英语课本的单词和句子添加音频热区。因为热区数量很多,所以&a…

埋点,自己写插件,自己写的按钮埋点,掘金同款投递简历

20分钟掌握 Vite 插件开发 - 掘金 vite的生命周期啥的 1.浏览器的控制台输出有样式的字 // const randomLetterPlugin ()>{ // const letters [wwwwwww,000000000000,888888888888]; // //随机获取一个字符并打印 // const printRandomLetter ()>{ // …

PHP校验15位和18位身份证号

第十八位数字的计算方法为: 1.将前面的身份证号码17位数分别乘以不同的系数。从第一位到第十七位的系数分 别为:7 9 10 5 8 4 2 1 6 3 7 9 10 5 8 4 2 2.将这17位数字和系数相乘的结果相加。 3.用加出来和除以11,看余数是多少? 4…

【MySQL 数据宝典】【磁盘结构】- 005 Undo log 撤销日志

一、基本介绍 ​ 每当我们要对一条记录做改动时(这里的改动可以指 INSERT 、 DELETE 、 UPDATE ),都需要留一手 -> 把回滚时所需的东西都给记下来 ​ 你插入一条记录时,至少要把这条记录的主键值记下来,之后回滚的…

自定义数据 微调CLIP (结合paper)

CLIP 是 Contrastive Language-Image Pre-training 的缩写,是一个擅长理解文本和图像之间关系的模型,下面是一个简单的介绍: 优点: CLIP 在零样本学习方面特别强大,它可以(用自然语言)给出图像…

【深度学习】行人跌倒行为检测软件系统

行人跌倒检测系统在各个领域的应用都对社会的整体健康、安全和福祉产生积极影响,为人们的生活和工作提供了更加安全和可靠的环境, 本文主要使用YOLOV8深度学习框架自训练了一个“行人跌倒检测模型”,基于此模型使用PYQT5实现了一款界面软件用…

Visual Studio2022中使用水晶报表

1.创建水晶报表项目 选择需要的表 自动生成连接 选项:可跳过 后续还有一些 都能跳过 看你自己的需求 自己选的样式

39. 【Android教程】触摸事件分发

用户在使用 Andriod 系统的时候会不断的和我们的 App 进行各种类型的交互(类似点击、滑动等等),“事件”就是一个非常有效的用来收集用户行为的方式。在前面章节有提到过:Android 系统采用一个先进先出(FIFO&#xff0…

PostgreSQL 免费的对象-关系数据库

目录 一、什么是数据库 二、ORDBMS 的一些术语 三、PostgreSQL 概述 四、PostgreSQL数据库优点和缺点 4.1PostgreSQL数据库的优点 4.2PostgreSQL数据库的缺点 4.3PostgreSQL 特征 五、Linux 上安装 PostgreSQL 5.1Yum 安装 PostgreSQL 5.1.1安装postgreSQL的官方yum仓…

54、图论-实现Trie前缀树

思路: 主要是构建一个trie前缀树结构。如果构建呢?看题意,应该当前节点对象下有几个属性: 1、next节点数组 2、是否为结尾 3、当前值 代码如下: class Trie {class Node {boolean end;Node[] nexts;public Node(…

如何在PostgreSQL中使用索引覆盖扫描提高查询性能?

文章目录 解决方案1. 创建合适的索引2. 确保查询能够使用索引覆盖扫描3. 调整查询以利用索引覆盖扫描4. 监控和调优 示例代码1. 创建索引2. 编写查询3. 检查是否使用索引覆盖扫描4. 调整索引 总结 在PostgreSQL中,索引是提高查询性能的关键工具之一。索引允许数据库…

文章生成器免费版有哪些,哪个好用?

作为一个长期需要写作的人,对文章生成器自然是非常了解,如果搜文章生成器互联网上多到让人应接不暇,但小编今天要谈的是文章生成器免费版,因为看到很多写手朋友都想找一个免费的文章生成器来用,但是大家在网上搜可能很…

GITHUB的VB代码无法加载的问题解决

GITHUB里有不少好的VB代码,但是下载之后,经常出现工程加载出错的问题,例如: LOG文件为: 不能加载 0 行 0: 不能加载文件 D:\xxxx\Semi VB API Loader\frmMain.frm 。 原因其实很简单,github里的换行符是u…

Promise.all 的方法还没执行完就执行了.then

碰见一个问题,接盘了一个有问题的页面修改。 改变日期后 查询很多数据再去重新加载页面上的数据显示相关的组件。 问题就来了。 加载异常捏…… 最后我一通查: 重点来了 是因为这个Promise.all(数组),里边这个数组的问题。现在是在数据中…

【机器学习】分类与预测算法的评价与优化

以实际案例解析F1值与P-R曲线的应用 一、分类算法与性能评价的重要性二、F1值与P-R曲线的概念与意义三、实例解析:以垃圾邮件检测为例四、代码实现与结果分析五、结论与展望 在数据驱动的时代,机器学习算法以其强大的数据处理和分析能力,成为…

Linux - tar (tape archive)

tar 的全称是 Tape Archive。它最初是在 Unix 系统中用于将数据写入磁带的工具,但现在它通常用于创建、维护、修改和提取文件的归档文件。尽管 tar 可以用于压缩和解压缩文件,但它本身并不进行压缩,而是通常与 gzip 或 bzip2 等压缩工具一起使…

【圆桌论坛】个人作为嘉宾参与问答环节的总结,Create 2024百度AI开发者大会之AI智能体开发与应用论坛

目录 ⭐前言⭐讨论话题✨本质和价值✨端侧部署✨应用商业模式✨商业模式 ⭐主题总结⭐有趣分享 ⭐前言 首先,非常荣幸和开心作为开发者和创业者代表参加百度Create AI大会分论坛圆桌论坛的问答环节。 在分论坛活动开始前,参加了文心智能体平台&#xff…

vi编辑器的用法linux中的vim编辑器大全

vim的介绍 vi 和 vim 命令是linux中强⼤的⽂本编辑器, 由于Linux系统⼀切皆⽂件,⽽配置⼀个服务就是在修改其配置⽂件的参数。 vim 编辑器是运维⼯程师必须掌握的⼀个⼯具, 没有它很多⼯作都⽆法完成。 其中有vi和vim两种 vi和vim的区别 Vim是Vi的升级版本&#…