后台配置前台动态显示图片——善良公社

2023-11-23 17:40

本文主要是介绍后台配置前台动态显示图片——善良公社,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

        在善良公社项目中,首页的图片显示,不仅要求要根据客户的需要来切换图片,而且还是根据后台来配置,后台要求显示哪些图片那么前台就显示哪些图片。

       界面效果如下:下面总共显示了三种图片,可以滑动点击,在上面查看大图

      

        实现这些需求我是这样做的:

        在显示图片时利用flash,自己编写了XML文件,Flash读取XML文件,然后设置样式在首页上显示,其XML文件如下:这三张图片是默认的图片

<?xml version="1.0" encoding="utf-8"?>
<photos><photo filename="tp-1.jpg" thumbnail="tp-1.jpg" description="" />  <photo filename="tp-2.jpg" thumbnail="tp-2.jpg" description="" /><photo filename="tp-3.jpg" thumbnail="tp-3.jpg" description="" />
</photos>
        当这些齐全的时候只需要在前台写上如下,就可以正常显示了。

 <td  style="padding: 8px 8px 1px 8px; word-wrap:break-word; width:350px;">                <div id="idPicText"></div><table width="99%" height="102" border="0" cellpadding="0" cellspacing="0"><tr><td align="center" valign="top"><script type="text/javascript">//admin/SystemManager/AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0', 'width', '320', 'height', '300', 'src', 'Photos/photo_xml', 'quality', 'high', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'movie', 'Photos/photo_xml'); //end AC code</script></td></tr></table>
        紧接着就是如何在后台设置了要显示的图片后怎么在前台显示了,这里涉及到动态修改XML的。
后台界面如下:


当"是否显示"字段为N时不再首页显示该图片,当更改为Y时,在首页相应的图片,如下:


此时的XML文件更改为:

<?xml version="1.0" encoding="utf-8"?>
<photos><photo filename="tp-1.jpg" thumbnail="tp-1.jpg" description="" /><photo filename="tp-2.jpg" thumbnail="tp-2.jpg" description="" /><photo filename="tp-3.jpg" thumbnail="tp-3.jpg" description="" /><photo filename="../../Photos/1_20140204162259.png" thumbnail="../../Photos/1_20140204162259.png" description="" />
</photos>
如何修改XML文件,如下:

            if (EindexImg.IsShow == "N")                   //如果是否显示更改为N时{string strfile = "photos.xml";             //用到的xml文件名string fileName = context.Server.MapPath(strfile); ; //context.Server.MapPath获取当前aspx页所处的路径string[] splitByChar = fileName.Split('\\');   //将获取到的路径以\\分割string FileName = splitByChar[0] + "/" + splitByChar[1] + "/" + splitByChar[2] + "/" + splitByChar[3] + "/" + splitByChar[4] + "/" + splitByChar[5] + "/" + splitByChar[6] + "/" + "Photos/" + splitByChar[9]; //重新构建正确的xml地址 XmlDocument myXml = new XmlDocument();try{myXml.Load(FileName);   //加载XML文件}catch{myXml.Load(FileName);}XmlNode rootXml = myXml.SelectSingleNode("photos");   //查询XML文件的根节点("photos")XmlNode root = myXml.DocumentElement;XmlNodeList nodeList = root.ChildNodes;foreach (XmlNode node in nodeList)   //遍历子节点{if (node.Attributes["filename"].Value == EindexImg.IndexImgURL)  //当子节点中的地址与数据库中存入的地址相同{node.ParentNode.RemoveChild(node);     //删除这个节点,不让图片显示}}myXml.Save(FileName);  //保存XML文件}
      既然知道了当为“N”时如何修改XML,那么当为“Y”时就知道如何修改了。
      总结:其实对节点的操作,早在学习JS时就学了,说白了修改XML也就是对节点的修改,掌握基础知识很有必要,以少集多,慢慢的提高自己!


这篇关于后台配置前台动态显示图片——善良公社的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/419632

相关文章

VSCode配置Anaconda Python环境的实现

《VSCode配置AnacondaPython环境的实现》VisualStudioCode中可以使用Anaconda环境进行Python开发,本文主要介绍了VSCode配置AnacondaPytho... 目录前言一、安装 Visual Studio Code 和 Anaconda二、创建或激活 conda

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

IDEA连接达梦数据库的详细配置指南

《IDEA连接达梦数据库的详细配置指南》达梦数据库(DMDatabase)作为国产关系型数据库的代表,广泛应用于企业级系统开发,本文将详细介绍如何在IntelliJIDEA中配置并连接达梦数据库,助力... 目录准备工作1. 下载达梦JDBC驱动配置步骤1. 将驱动添加到IDEA2. 创建数据库连接连接参数

MyBatis的配置对象Configuration作用及说明

《MyBatis的配置对象Configuration作用及说明》MyBatis的Configuration对象是MyBatis的核心配置对象,它包含了MyBatis运行时所需的几乎所有配置信息,这个对... 目录MyBATis配置对象Configuration作用Configuration 对象的主要作用C

Python使用PIL库将PNG图片转换为ICO图标的示例代码

《Python使用PIL库将PNG图片转换为ICO图标的示例代码》在软件开发和网站设计中,ICO图标是一种常用的图像格式,特别适用于应用程序图标、网页收藏夹图标等场景,本文将介绍如何使用Python的... 目录引言准备工作代码解析实践操作结果展示结语引言在软件开发和网站设计中,ICO图标是一种常用的图像

IDEA与JDK、Maven安装配置完整步骤解析

《IDEA与JDK、Maven安装配置完整步骤解析》:本文主要介绍如何安装和配置IDE(IntelliJIDEA),包括IDE的安装步骤、JDK的下载与配置、Maven的安装与配置,以及如何在I... 目录1. IDE安装步骤2.配置操作步骤3. JDK配置下载JDK配置JDK环境变量4. Maven配置下

Springboot的自动配置是什么及注意事项

《Springboot的自动配置是什么及注意事项》SpringBoot的自动配置(Auto-configuration)是指框架根据项目的依赖和应用程序的环境自动配置Spring应用上下文中的Bean... 目录核心概念:自动配置的关键特点:自动配置工作原理:示例:需要注意的点1.默认配置可能不适合所有场景

Nginx配置系统服务&设置环境变量方式

《Nginx配置系统服务&设置环境变量方式》本文介绍了如何将Nginx配置为系统服务并设置环境变量,以便更方便地对Nginx进行操作,通过配置系统服务,可以使用系统命令来启动、停止或重新加载Nginx... 目录1.Nginx操作问题2.配置系统服android务3.设置环境变量总结1.Nginx操作问题

SpringBoot集成图片验证码框架easy-captcha的详细过程

《SpringBoot集成图片验证码框架easy-captcha的详细过程》本文介绍了如何将Easy-Captcha框架集成到SpringBoot项目中,实现图片验证码功能,Easy-Captcha是... 目录SpringBoot集成图片验证码框架easy-captcha一、引言二、依赖三、代码1. Ea

Keepalived+Nginx双机配置小结

《Keepalived+Nginx双机配置小结》本文主要介绍了Keepalived+Nginx双机配置小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录1.1 软硬件要求1.2 部署前服务器配置调优1.3 Nginx+Keepalived部署1.3