本文学习并分析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/