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

简介: 如下图,很多CMS的首页都会有实时更新的轮番图的需求:

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


15.png


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

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

<span style="font-family:SimSun;font-size:18px;"><div>
<span style="white-space:pre">  </span><ul>
<span style="white-space:pre">    </span><li><a href="#">
                    <img src="images/Index/show/01.jpg" alt="学校正门" /></a></li>
                <li><a href="#">
                    <img src="images/Index/show/02.jpg" alt="学校操场" /></a></li>
                <li><a href="#">
                    <img src="images/Index/show/03.jpg" alt="建工学院古建筑模型展" /></a></li>
                <li><a href="#">
                    <img src="images/Index/show/04.jpg" alt="舞蹈学院毕业生" /></a></li>           
<span style="white-space:pre">  </span></ul>
</div></span>

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


   这里仅和大家分享思路。


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


   数据库中,新闻表主要字段为:                


NewsId NewsTitle NewsContent IsShow ImageUrl IsEnabled


   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标签等方式。


相关文章
|
7月前
|
数据安全/隐私保护
|
SQL 安全 前端开发
OA项目之用户登录&首页展示(一)
OA项目之用户登录&首页展示
|
小程序 容器
培训小程序首页开发
培训小程序首页开发
|
4月前
|
前端开发
HTML+CSS 速成10分钟!一键实现你的后台管理系统首页梦想!
HTML+CSS 速成10分钟!一键实现你的后台管理系统首页梦想!
|
6月前
|
搜索推荐
discuz未登录情况下首页tdk显示“首页”
discuz未登录情况下首页tdk显示“首页”
37 1
discuz未登录情况下首页tdk显示“首页”
|
7月前
|
JavaScript
首页功能的实现
首页功能的实现。
49 1
|
7月前
当当网新用户注册界面——界面源码
当当网新用户注册界面——界面源码
|
JSON 小程序 前端开发
小程序搭建OA项目首页布局界面
小程序搭建OA项目首页布局界面
102 0
|
小程序 前端开发 容器
小程序首页搭建
小程序首页搭建
49 0

热门文章

最新文章