网站首页轮番图的后台管理

一时失言乱红尘 2022-08-01 15:45 246阅读 0赞

如下图，很多CMS的首页都会有实时更新的轮番图的需求：

![Center][]

最近在做一个CMS的过程中，就遇到了这样的需求。

之前曾经做过一个校园网站的项目（自己做着玩玩），但前台的轮番图是写死在页面上的，即：

但是在实际项目中肯定是要做活的，即能够在后台管理，动态修改首页显示图片与链接地址。

这里仅和大家分享思路。

比如需求是这样的：首页轮番显示的图片都是新闻中的图片，点击图片跳转到相应的新闻内容页面，所以后台可以设置每个新闻是否在首页显示图片，如果显示的话，则选择这条新闻在首页所显示的图片（每条新闻中可能有多张图片），选择后，更新数据库；当然还可以取消在首页显示。

数据库中，新闻表主要字段为：

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:center"><span style="font-family:SimSun; font-size:18px">NewsId</span></td> 
   <td><span style="font-family:SimSun; font-size:18px">NewsTitle</span></td> 
   <td><span style="font-family:SimSun; font-size:18px">NewsContent</span></td> 
   <td><span style="font-family:SimSun; font-size:18px">IsShow</span></td> 
   <td><span style="font-family:SimSun; font-size:18px">ImageUrl</span></td> 
   <td><span style="font-family:SimSun; font-size:18px">IsEnabled</span></td> 
  </tr> 
 </tbody> 
</table>

NewsContent为新闻内容，是经过富文本编辑器编辑后，以html形式存储的（其中会包含新闻中的图片路径），IsShow表示是否在首页显示（“是”或“否”），ImageUrl表示如果在首页显示的话，所显示图片的路径。

先说取消新闻在首页显示：

取消在首页显示很简单，直接更新数据库字段IsShow为 “否”，因为首页加载时，只会查询IsShow字段为 “是” 的新闻。

再说设置某条新闻在首页显示：

如果要设置某条新闻的图片在首页显示，则需要先查出来此新闻内容中都包含哪些图片（只需要获取它们的路径就行），用正则在新闻内容中获取这些图片路径的的核心代码如下（C\#实现方式）：

<span style="white-space:pre">	</span>#region InterceptImagesUrl-从HTML格式的新闻内容中获取图片路径-胡玉洋
            /// <summary>
            /// 从HTML格式的新闻内容中获取图片路径
            /// </summary>
            /// <param name="content">新闻内容</param>
            /// <returns>List<String>类型</returns>
            List<String> InterceptImagesUrl(string content）
            {
                Regex r;
                Match m;
                int i = 0;
                List<String> imageUrlList = new List<string>();
                string imageUrl = "";
                r = new Regex("src\\s*=\\s*(?:\"(?<1>[^\"]*)\"|(?<1>\\S+))", RegexOptions.IgnoreCase | RegexOptions.Compiled);
                for (m = r.Match(content); m.Success; m = m.NextMatch())
                {
                    imageUrl = m.Groups[1].Value;
                    i++;
                    imageUrlList.Add(imageUrl);
                }
                return imageUrlList;
            }
     <span style="white-space:pre">	</span>#endregion

此函数最终会根据新闻内容截取出所有新闻中的图片地址集合，然后只需要将这些图片显示出来，选择一张，更新到数据库中ImageUrl字段并更新IsShow为 “是” 即可。

最后，设置显示与取消显示都能是实现了，在首页显示当然也就好办了。

查询数据库中在首页显示（IsShow字段为 “是” ）的新闻，在首页显示时，在.net环境下如果用的.aspx方式，可以用C\#语法遍历显示，也可以用repeater等；如果用的MVC，可以用razor语法进行遍历显示。在jsp环境下，可以用java语法遍历，也可以用jstl标签等方式。

[Center]: /images/20220731/7ac5a642350d4845b04e9a8e0bb4451d.png