开源博客项目Blog .NET Core源码学习（17：App.Hosting项目结构分析-5）

embedded/2024/10/18 14:16:14/

本文学习并分析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专用于本页面的初始化及函数定义，主要函数已在上方说明，在此不再赘述。