第四章 动态网页后台管理
第四章 动态网页后台管理
静态页面部分完成之后就是用来管理的动态页面的制作，买买网这里用到了织梦后台DedeCMS软件，使用后台引擎代码对前台页面进行应用，添删改查栏目和内容，进行内容添加，并且将网页内容和子栏目、字内容串联起来，使其能够跳转显示。
4.1 DedeCMS织梦后台环境准备
由于DedeCMS安装需要Apache和mysql环境，所以我们先安装wampserver软件。wampservaer安装好之后，重要的就是www这个文件夹，在运动wamp环境时，进入localhost时所展示的内容就是www文件夹下的内容。
从织梦官网下载一个免费的DedeCMS素材压缩包，解压后，提取uploads这个文件夹放在www文件夹下，接着启动wampserver环境，进入http://localhost/uploads,出现一个mysql页面，点击确定后，进入一个DedeCMS安装界面，如图4-1。
4-1 安装Dedecms环境
点击继续后，就是环境检测页面，继续就是参数配置，不要添加密码，如果有需要编辑数据库名称的则编辑名称，这里是没有编辑的，一直继续，到安装成功后，打开http://localhost/uploads（前台展示）页面，以及新打开一个http://localhosthttps://www.77cn.com.cn/uploads/dede（后台登录，登录名为admin,密码为admin）,织梦系统安装好之后，将做好的前台页面文件夹sp拷贝到wwwhttps://www.77cn.com.cn/uploads/templets下，将sp文件夹中的images、JS、style\\以及主页面index.htm文件拷贝一份到uploads目录下。
4.2 织梦后台栏目及内容添加
4.2.1栏目添加
选择如图4-2所示的网站栏目管理进行添加栏目
图4-2 网站栏目管理
15
淮安信息职业技术学院毕业设计论文
添加女装、今日新品、今日品牌、运动、母婴、美妆、居家、鞋包、男装、热销新品等顶级栏目，接着在各个顶级栏目中添加子栏目。如图4-3所示：
图4-3 栏目列表
将各个栏目以及子栏目的高级选项的模板改成自己的模板，如图4-4所示：
图4-4 模板选择
4.2.1文章添加
在栏目中添加文章，如图4-5所示：
图4-5 添加文章
为各个栏目添加文章后，选择生成按钮进行更新，如图4-6：
16
第四章 动态网页后台管理
图4-6 更新网站
在更新主页HTML栏选择主页模板为自己的模板，如图4-7：
图4-7 选择主页模板
选择系统栏目中的系统基本参数，将模板默认风格改成自己的模板名称，来使前台主页能够显示出自己所制作的的模样。如图4-8所示：
图4-8 默认模板风格
分别更新文档、更新栏目、更新主页。
4.3 DedeCMS标记使用
织梦模板引擎是一种使用XML名字空间形式的模板解析器，想要让前台静态页面变成动态页面，一定要用到织梦模板引擎的代码，所以要在前台几个页面中插入标记代码。
4.3.1首页DedeCMS标记代码插入
使用DW打开uploads/templets/sp下的index_article.htm页面。这个页面需要插入修改标记代码的有导航栏部分、图片素材、CSS样式表。
导航栏部分：这里以一个女装栏目展示，代码如图4-2所示：
17
淮安信息职业技术学院毕业设计论文
图4-2 导航标记代码插入
这段标记代码可实现导航栏和后来添加栏目的对接。要注意的是type以及typeid的更换。
图片部分：在所有图片链接路径前添加以下标记代码：
{dede:global.cfg_templets_skin/}/
CSS样式表部分：在演示表链接地址前添加标记代码：
{dede:global.cfg_templets_skin/}/
来使图片能够在使用Dedecms的情况下能显示。
为了样式能够在动态首页下被应用。 4.3.2列表页DedeCMS标记代码插入
这个页面需要插入修改标记代码的有导航栏部分、图片素材、CSS样式表、以及中间左右部分的内容栏。导航栏、图片素材、CSS样式表标记代码都与index_article.htm一样修改，这里需要注意的就是内容栏的标记代码插入。 在如图4-3所示位置添加标记代码：
{dede:arclist row=7 orderby=click}
图4-3 列表左边栏
来实现中间左部分内容的显示。 在如图4-4的所示位置添加标记代码：
{dede:field name='position'/}
图4-4 列表位置栏
来显示当前浏览者所在的位置。
在newlist位置添加标记代码：
{dede:list pagesize='10'}
[[field:pubdate function=MyDate('y-m-d',@me)/]] [[field:typelink/]]
18
第四章 动态网页后台管理
/li> {/dede:list}
这段代码的作用就是可以实现右边部分显示当前栏目所有的内容，以列表的形式来呈现。分别更新栏目、更新主页。最终效果如图4-5显示：
图4-5 列表页效果展示
4.3.3内容页DedeCMS标记代码插入
这个页面与list_article像似，同样要改变导航栏，图片的标记代码以及CSS样式表的标记代码，中间左边的标记代码内容和列表页一样。只是中间右边部分插入的标记代码不同，同样的也要有 “您现在的位置: {dede:field name='position'/}”。
在content盒子中，插入标记代码：{dede:field.body/} 这是为了让一个内容能够详细的在一个页面中显示出来。
分别更新文档、更新栏目、更新主页。最终效果如图4-6所示：
图4-6 内容页效果展示
最后就完成了买买网的前后台页面的交互设计与实现。
19