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

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

最近在做一个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#实现方式):

#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(inputString); m.Success; m = m.NextMatch())
            {
                imageUrl = m.Groups[1].Value;
                i++;
                imageUrlList.Add(imageUrl);
            }
            return imageUrlList;
        }
        #endregion

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

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

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

NewsId NewsTitle NewsContent IsEnabled IsShow ImageUrl

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-03 14:45:16

网站首页轮番图的后台管理的相关文章

MVC5 网站开发实践 2、后台管理

目录 MVC5 网站开发实践 概述 MVC5 网站开发实践 1.建立项目   从这一部分开始做后台管理,首先是基本框架的 一.Data项目 1.项目添加EntityFramework引用 在Data项目的引用上右键-> 管理NuGet程序包. 在弹出的窗口中选择 EntityFramework 安装 2.添加排序枚举 在Data项目上点右键新建文件夹Type.在文件夹内添加类[OrderType],代码如下 //创建2014.12.8 namespace Data.Types { /// <s

Day5作业,商城+ATM机+后台管理

晚来了....东西太多,需要写的blog内容太多,re讲的渣渣,不明白为什么oldboy经常换老师,吐槽下吧,真心不爱了.... github地址在这:https://github.com/ccorzorz/ATM-shoppmall 商城用原来的,先上图吧: 商城图: ATM后台管理: ATM终端: README: 1.测试帐号: 商城测试帐号:cc/123 或者自己注册 ATM 终端测试帐号:cc/123 alex/123 或者自己注册 ATM 管理员测试帐号:admin/admin 2.需

【tornado】系列项目(二)基于领域驱动模型的区域后台管理+前端easyui实现

本项目是一个系列项目,最终的目的是开发出一个类似京东商城的网站.本文主要介绍后台管理中的区域管理,以及前端基于easyui插件的使用.本次增删改查因数据量少,因此采用模态对话框方式进行,关于数据量大采用跳转方式修改,详见博主后续博文. 后台界面展示: 地区管理包含省市县的管理.详见下文. 一.数据库设计 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 class Province(Base):  

django-17.admin后台管理

前言 通常一个网站开发,需要有个后台管理功能,比如用后台管理发布文章,添加用户之类的操作.django的admin后台管理主要可以实现以下功能 基于admin模块,可以实现类似数据库客户端的功能,对数据进行增删改查 于该模块的数据管理功能,可以二次定制一些实用的功能. settings.py配置 在INSTALLED_APPS中,默认已经添加相关模块, 可以不用管 django.contrib.admin 管理站点 django.contrib.auth 认证系统 django.contrib.

MVC5 网站开发之七 用户功能 1、角色的后台管理

角色是网站中都有的一个功能,用来区分用户的类型.划分用户的权限,这次实现角色列表浏览.角色添加.角色修改和角色删除. 目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 MVC5 网站开发之三 数据存储层功能实现 MVC5 网站开发之四 业务逻辑层的架构和基本功能 MVC5 网站开发之五 展示层架构 MVC5 网站开发之六 管理员 1.登录.验证和注销 MVC5 网站开发之六 管理员 2.添加.删除.重置密码.修改密码.列表浏览 MVC5 网站开发之七 用

网狐源码下载网狐V5、网狐6603网站后台管理

网狐源码下载网狐V5.网狐6603网站后台管理 冲值系统 2.1 实卡管理: 冲值以生成会员卡类型,附送游戏币的模式.在此模块可进行点卡类型,点卡生成,以及点卡库存明细查询. 概览图: PS:所用源码要为完整源码,本次 所以源码来自网狐源码下载maliwl.com l 类型管理:必须先生成实卡的类型.设置实卡类型的名称,价格,赠付的金币,以及赠送的会员等级,以及此充值卡的用户和服务权限.(注:用户和服务权限慎用.) 问题点:类型里面的赠送金币和会员卡生成的赠送金币是否是重复.这样误导不知道以哪个

ActiveMQ部署步骤和后台管理网站Service Unavailable问题解决笔记

最近部署ActiveMQ的时候,发现有的服务器可以打开后台管理网址,有的服务器无法打开,Jetty报503 Service Unavailable. 搞了很久终于发现了问题,现将部署和解决过程做笔记如下: 安装部署步骤: # 查看是否自带了Javarpm -qa | grep java# 卸载Linux自带的OpenJava yum remove -y java# 或者rpm -e java # 上传或联网下载JDK 7 rz jdk-7u79-linux-x64.rpm or wget htt

后台管理-基于 Bootstrap 开发的网站后台管理面板

Bootstrap 开发框架真的很强大,今天推荐几个非常不错的基于 Bootstrap 开发的网站后台管理面板,全部都是响应式布局,细节做得都很不错.可以搜索keenthemes. Metronic Demo : http://www.keenthemes.com/preview/metronic/ Matrix Admin Demo:http://themedesigner.in/demo/matrix-admin/index.html Stilearn Demo:http://stilear

基于jQuery的网站首页宽屏焦点图幻灯片

今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <!-- index-focus begin --> <div class="sliderWrap"> <section class="banner-TAL"> <div class