开源博客项目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 中,代理…

【后端】python2和python3的语法差异

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、为何要了解不同版本的语法差异二、python2和python3的语法差异三、总结 前言 随着开发语言及人工智能工具的普及,使得越来越多的人会主动学习使…

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 UNION

组合查询 UNION UNION 运算符用于合并两个或多个 SELECT 语句的结果集,去除重复行。它在 SQL 中非常有用,可以用于多种场景,例如: 1. 从不同的表中获取相似数据: 假设有两个表,customers 和 leads,都包含…

智能小车-轮趣wheeltec(原版代码)

上一届大佬的 红绿灯识别代码,此代码需要在ubuntu系统下,与ROS配合使用: Xtrak 塔克小车巡线代码以及红绿灯识别相关小改动_search_top0 mask-CSDN博客 line.follow原版 源代码: #------------------------------------------…

现代C++新特性——constexpr

在计算机科学中,字面量(literal)是在源代码中的 value 的文本表示。字面量和变量、常量是同一个级别的概念,常被用于初始化变量。字面量是编译期常量,效率极高。 常量表达式(const expression)是…

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

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

【后端】django查询时的性能优化技巧

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、为什么需要性能优化二、性能优化的常用技巧三、总结 前言 随着开发语言的不断普及,越来越多的项目建设场景会遇到性能瓶颈,本文就介…

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

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

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

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

Visual Studio2022中使用水晶报表

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

Linux中的高级IO函数(三)fcntl

Linux提供了很多高级的I/O函数。它们并不像Linux基础I/O函数(比如open和read)那么常用(编写内核模块时一般要实现这些I/O函数),但在特定的条件下却表现出优秀的性能。这些函数大致分为三类: 用于创建文件描…

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

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

使用IPEX-LLM加速大语音模型LLM

IPEX-LLM是一个用于在英特尔CPU和GPU(如本地PC的iGPU、独立显卡如Arc、Flex和Max)上加速本地LLM推理和微调的PyTorch库。 IPEX-LLM是BigDL-LLM的升级版。IPEX-LLM基于英特尔PyTorch扩展库(IPEX)以及llama.cpp、bitsandbytes、vLL…

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(…

Jammy@Jetson Orin - Tensorflow Keras Get Started

JammyJetson Orin - Tensorflow & Keras Get Started 1. 源由2. 步骤3. 预期&展望4. 总结5. 参考资料 1. 源由 之前过年的时候,花了两周的时间过了一遍 《ubuntu22.04laptop OpenCV Get Started》。 后续更多的时间需要再GPU算法上下功夫,目前…