网页与制作毕业论文-基于DedeCMS的买买网的设计_与实现.doc

编号 淮安信息职业技术学院淮安信息职业技术学院 毕毕业业论论文文 题 目 基于 DedeCMS 的买买网的设计 与实现 学生姓名 学 号 院 系 专 业 班 级 指导教师 顾问教师 二一六年十月 摘 要 I 摘摘 要要 20 世纪后期互联网在我国取得了快速的发展，31 世纪随着高科技技术的 发展计算机早已渗透到生活中的各行各业，它早已在各个领域中扮演重要角色， 例如医院医疗、教学科研、金融政治、生活购物等等一系列，随着信息化建设 的不断推进，网站的作用超越了传统的信息获取，交流它更能体现传统难以表 达的风采，网购是如今的热潮，类似淘宝网那种做工美观的网页更能吸引客户 的购买欲。所以，建立一个美观的，易于管理的网站已经势在必行。 本文设计开发的买买网信息管理系统是根据现在购物网站特性而编写的， 用现代科技优势扩展营销，应用现代化信息管理系统对其进行设计以及科学管 理是一个不可或缺的手段，根据需要本系统对品种分类、页面设计、添加删除 种类内容、各个页面的跳转的管理等进行加以说明。在页面的布局中，HTML 将元素进行定义，CSS 对展示的元素进行修改定位，再通过 JavaScript 实现相应 的交互效果，最后通过织梦 DEDE 后台来进行对数据的增删改查。虽然表面上 看来很简单，但是这里面需要理解的东西绝对不会少。在进行开发前，需要弄 清楚这些概念，然后才能便于开发。 关键词：HTML、CSS、 JS、织梦 Dede、信息管理系统 Abstract II A Abstractbstract In late twentieth Century, the Internet has made rapid development in our country in thirty-first Century, with the development of computer technology has already penetrated into all walks of life, it has played an important role in various fields, such as medical treatment, teaching and scientific research, finance, shopping and so on a series of political life, along with the continuous promotion of information construction, the website function beyond the traditional information exchange, which can better reflect the traditional style to express, is now online shopping boom, similar to that of “beautiful workmanship can attract more customers to buy. Therefore, the establishment of a beautiful, easy to manage the site has been imperative. Shopping information management system developed in this paper is based on the characteristics and the preparation of the shopping website now, with the expansion of marketing advantage of modern science and technology, modern information management system for the design and application of scientific management is an indispensable means, according to the needs of the system of classification, page design, add and delete content, each page jump the management are illustrated. In the layout of the page, HTML will be defined to display elements, CSS elements to modify the location, and then through the JavaScript to achieve the effect of the corresponding interaction, and finally through the dream of DEDE background data crud. Although the surface seems very simple, but it needs to understand the things that are absolutely not less. Before the development, we need to clarify these concepts, and then to facilitate the development of. Keywords: HTML, CSS, JS, Dede, Information management system. 目 录 III 目录目录 摘摘 要要I ABSTRACT II 目录目录.III 第一章第一章 绪论绪论.1 1.1 课题研究的背景.1 1.2 购物网规划设计的主要任务1 1.3 可行性分析1 1.4 系统分析2 第二章第二章 相关软件介绍相关软件介绍.3 2.1 PHOTOSHOP3 2.2 DREAMWEAVER3 2.3 织梦内容管理系统3 2.4 WAMPSERVER环境.3 第三章第三章 静态页面制作静态页面制作.5 3.1 首页静态页面5 3.1.1 头部部分.5 3.1.2 主体内容部分.6 3.1.3 尾部部分.9 3.2 列表静态页面11 3.3 内容静态页面14 第四章第四章 动态网页后台管理动态网页后台管理.15 4.1 DEDECMS 织梦后台环境准备 .15 4.2 织梦后台栏目及内容添加.15 4.2.1 栏目添加.15 4.2.1 文章添加.16 4.3 DEDECMS 标记使用 .17 4.3.1 首页 DedeCMS 标记代码插入 17 4.3.2 列表页 DedeCMS 标记代码插入 18 4.3.3 内容页 DedeCMS 标记代码插入 19 淮安信息职业技术学院毕业设计论文 IV 第五章第五章 总结与展望总结与展望.20 致致 谢谢.21 参考文献参考文献.22 第一章 绪论 第一章第一章 绪论绪论 1.1 课题研究的课题研究的背景背景 如今的互联网已经渗透到我们生活的每一个层面，网站的内容也越来越丰 富全面，建设一个网站的时候比较重要的就是网站本身的整体美观度，也就是 网页设计的整体的视觉效果，是否能够充分吸引眼球。 近几年购物网站吸引了很多卖家和顾客，淘宝网是中国深受欢迎的网购零 售平台，拥有近 5 亿的注册用户数，每天有超过 6000 万的固定访客，同时每天 的在线商品数已经超过了 8 亿件，平均每分钟售出 4.8 万件商品。这足以看出购 物网在人民生活中占据了多大的地位，购物网可以让人足不出户就可以以理想 的价格买到理想的品质，这样一来，一个购物网的美观就至关重要了，吸引顾 客的目光，让顾客满意是作为一个购物网站必须要做到的。 1.2 购物网规划设计的主要任务购物网规划设计的主要任务 网站规划是指在网站建设前对市场进行分析、确定网站的目的和功能，并 根据需要对网站建设中的技术、内容、费用、测试、维护等作出规划。网站规 划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。 所以，要规划设计一个购物网站，要做到以下几点： 1.要针对购物网站的特点以及需求，确定市场定位、风格、功能。 2.确定技术路线和平台。包括栏目、美工、网页、程序。 3.做好网站前端网页的 PS 效果规划图，这样不仅可以看到整个网页的大概 描述，更便于修改。 4.在有了效果图的基础上，对网页进行明确的划分，包括大整体、头部、 中部、尾部的大部分以及大部分之中的小划分等，这样不会动一步动全身。 5.网页制作，使用样式表对网页进行定义，设计，定位等操作，使网页更 规范。也便于网页的修改。 6.使用 Javascript 作出一些小程序来使网站更精美。 1.3 可行性分析可行性分析 本系统拟采用 HTML（Hyper Text Markup Languane)、Jacascript、 CSS(Cascading Style Sheets)和织梦 Dede 分别作为前端和后端的开发工具。 HTML 是利用标记（Tag）来描述网页的字体、大小、颜色及页面布局的语言， 使用任何文本剪辑器都可以对它进行编辑。HTML 与 VB、C+等编程语言有着本 质的区别，使用一些网页编辑软件（如 Dreamweaver）可以快速生成 HTML 代码。 淮安信息职业技术学院毕业设计论文 Javacript 是一种脚本语言，通过嵌入或整合在标准 HTML 中实现，也就是 说，JavaScript 的程序直接加入在 HTML 文档里，当浏览器读取到 HTML 文件中 的 JavaScript 程序，就立即解释并执行有关的操作，无需编译器。利用 JavaScript 技术可以制作动态按钮、滚动字幕等网页特效。 CSS 是一种数据表文件，在改数据表中存储了网页结构语言的各种样式以及 显示方式等内容，并通过表的 ID、标签以及类等选择器供 XHTML 调用，利用 CSS 技术，可以有效地对页面的布局，字体、颜色、背景和其他效果实现更加精 密的控制。对相应的代码做一些简单的修改，就可以改变同一页面的不同部分， 或者改变不同页数页面的外观和格式。在 W3C 网页标准中，CSS 属于网页的表现 技术。 因此从技术方面讲开发此系统是可行的。 1.4 系统分析系统分析 完整的网站设计大体可以分两大部分，静态（界面）部分和动态（互动功 能）部分，网站在确定了其栏目、链接结构和网站整体风格之后，就可以正式 动手制作页面了。 本系统使用的是“三”字型布局，页面上横两条色块，将页面整体分割为 4 个部分，色块中放广告条。 首先设计 PS 效果图，其次在效果图做好后便是根据效果图来制作页面了， 使用 DIV+CSS 来完成页面的制作。主页 index.html 制作好之后，还要制 article_article.html 以及 list_article.html 页面，这两个页面就是后面要 显示的内容列表页（list_article.html）和内容页（article_article.html）。 在静态页面都制作好之后，就是动态网站页面的制作了。本次任务主要完成买 买网静态页面模板导入 DedeCMS 环境，掌握 DedeCMS 标记的使用，并将标记应 用到买买网网站设计中；掌握买买网网站后台模板的管理及应用，并利用买买 网网站管理平台添加网站内容。 第二章 相关软件介绍 第二章第二章 相关软件介绍相关软件介绍 本系统采用 HTML+CSS+JS+PHP 进行开发，其中前台用 CSS+JS 嵌入 HTML 进 行页面开发和设计，提示信息完善，界面友好有亲和力；后台采用 PHP（织梦后 台系统），下面介绍这个系统所用到的软件。 2.1 PhotoShop Adobe Photoshop，简称“PS”，是由 Adobe Systems 开发和发行的图像处 理软件。 Photoshop 主要处理以像素所构成的数字图像。使用其众多的编修与 绘图工具，可以有效地进行图片编辑工作。ps 有很多功能，在图像、图形、文 字、视频、出版等各方面都有涉及。在此系统中，使用 Photoshop 主要是为了进 行设计 PS 网页静态效果图，以及对做网站所需要的素材进行处理的功能。 2.2 DreamweaverDreamweaver Adobe Dreamweaver，简称“DW”，中文名称 “梦想编织者“，是美国 MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器， DW 是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以 轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Adobe Dreamweaver 使用所见即所得的接口，亦有 HTML（标准通用标记语言下的一个 应用）编辑的功能。 2.3 织梦内容管理系统织梦内容管理系统 织梦内容管理系统（DedeCMS）以简单、实用、开源而闻名，是国内最知名 的 PHP 开源网站管理系统，也是实用用户最多的 PHP 类 CMS 系统， DedeCMS 免 费版的主要目标用户锁定在个人站长，功能更专注于个人网站或中小型门户的 构建，当然也不乏企业用户和学校等使用本系统。织梦内容管理系统 （DedeCMS）基于 PHP+MYSQL 的技术架构，完全开源加上强大稳定的技术架构， 使用户无论是目前打算做个小型网站，还是想让网站在不断壮大后仍能的刀随 意扩充都有充分的保证。 此次网购系统中，使用织梦内容管理系统来完成子页面的内容链接以及内容的 增删改查等操作。 2.4 WampServerWampServer 环境环境 WampServer 是一款由法国人开发的 Apache Web 服务器、PHP 解释器以 及 MySQL 数据库的整合软件包。在 windows 下将 Apache+PHP+Mysql 集成环境，拥 有简单的图形和菜单安装和配置环境。PHP 扩展、Apache 模块，开启/关闭鼠标 淮安信息职业技术学院毕业设计论文 点点就搞定，再也不用亲自去修改配置文件了，WAMP 它会去做。再也不用到处 询问 php 的安装问题了，wampserver 一切都搞定了。 第三章 静态页面布局 第三章第三章 静态页面静态页面制作制作 网站首页的展示直面影响着顾客对整个网站的好感度以及观赏欲。首先，分 析一下买买网效果图，主页效果图可以划分出相应的布局区域，共划分为 head 首部、main 中间部分、foot 尾部。接着需要内容页以及列表页还有一个 index_article 页来进行后台代码处理。使用 DIV+CSS 布局方式构建网页。 3.1 首页静态页面首页静态页面 首页主要分为 3 个部分，其中每个的布局都采用的不同的样式，最重要的就 是中部 main 页面，运用的脚本语言方式比较多。 3.1.1 头部部分头部部分 头部部分包括 logo、导航、过渡三个部分，在导航部分中添加下拉框特效， 代码如图 3-1head 布局： 图 3-1 head 布局 css 样式： #headwidth:1024px;background-color:#FFFFFF;float:left; .logoposition:relative;height:65px; .logo imgposition:absolute;top:9px;left:7px; .clearclear:both; .dhfloat:left;height:35px;margin-top:3px;margin-bottom:3px; .menuwidth:1020px;float:left;height:35px;margin-top:3px; margin-bottom:3px;background-color:f83b4d; .menu ulfloat:left;line-height:37px; .menu ul lifloat:left;line-height:37px;margin-left:45px; .menu ul li acolor:#FFF;text-decoration:none;padding-left:10px; .mainmenufloat:left;width:110px;height:35px;list-style-type:none; margin-right:5px;margin-top:5px; li.mainmenu ul margin:0;width:90px; li.mainmenuwidth:200px;display:block;text-decoration:none; background:#f83b4d;color:#fff;padding:0.5em;border-bottom:1px solid #fff; ul#dropdownmenu li a:hoverbackground:#FFCCCC; lilist-style: none; 淮安信息职业技术学院毕业设计论文 .mainmenu ulposition: relative;left:50px; .flawidth:1022px;height:400px;float:left; 预览如下图 3-2 head 部分预览效果显示： 图 3-2 head 部分预览效果 3.1.2 主体内容部分主体内容部分 中间主体部分是整个页面的内容部分，一个网页的精髓展示便在这里，所 以这个部分也是比较麻烦的。这个部分分为了 top、center、bottom 三个部分。 Top 部分布局部分代码-如下所示： 今日品牌 更多品牌特卖 1.3 折起 进入活动 Css 样式代码如下图 3-3 所示： 图 3-3 top 部分 css 样式 预览效果如图 3-4 第三章 静态页面布局 图 3-4 top 部分预览效果 center 部分布局部分代码-如下所示： 今日新品 每日 10 点上新 更多新品 包邮思洛芙德针织衫 ￥129 这里 center 部分使用了 JS 代码来实现鼠标滑动到图片上方图片放大的效果，JS 代码 如图 3-5 所示： 图 3-5 放大图片 JS 代码 淮安信息职业技术学院毕业设计论文 接着用 CSS 代码来对 center 部分定义： .centerwidth:1024px;float:left; .center_topfloat:left;width:1024px;height:30px;margin-top:20px; .center_top imgfloat:left;margin-left:12px; .jrxpfloat:left;width:70px;height:30px;line-height:30px;margin-left:8px;font-family:“ 黑体“;font-size:16px; .jrxpbzfloat:left;width:100px;height:30px;line-height:30px;color:#CCCCCC;font- size:12px;margin-left:5px; .center_contentfloat:left;margin-left:13px;border-bottom: 3px solid #CCCCCC;border-right:1px solid #CCCCCC;margin-top:8px; #tooltipposition:absolute;border:1px solid #333;background:#f7f5d1;padding:1px;color:#333;display:none; .center_content acolor:#333;font-family:“宋体“;line-height:30px;text- decoration:none; .center_content imgfloat:left;margin-left:10px;margin-top:8px;margin-bottom:5px; .center_content_textdisplay:block;margin-left:13px;width:226px;height:20px;font- size:14px;line-height:20px; .jgfloat:left;color:#FF0000;font-size:16px;font- weight:bold;display:block;width:100px;height:25px;line-height:25px;margin- left:20px;margin-top:20px; 最终实现效果如图 3-6 所示 图 3-6 中间部分预览效果 bottom 部分是由一组滚动图组成，使用 JS 实现鼠标滑动到图片上，滚动停止，鼠标一 开，继续滚动的效果。 主要运用的是表单和表格的知识，布局部分代码-如下图 3-7 所示： 图 3-7 bottom 布局代码 第三章 静态页面布局 JS 代码如图 3-8 所示： 图 3-8 bottom 部分 JS 代码 Css 代码如下所示： .bottomfloat:left;width:990px;margin-top:30px;margin- left:8px;overflow:hidden; .bottom_bjfloat:left;margin-top:20px; .bottom_top_aleftfloat:left; .bottom_topwidth:990px;height:30px; .bottom_top imgfloat:left;margin-left:8px; .bottom_top_txtfont-size:14px;font-weight:bold;line- height:25px;float:left;margin-left:8px;margin-top:2px; .bottom_morefloat:right;line-height:30px;color:#999999;font-family:“宋体 “;font-size:14px;margin-right:5px; .bottom_more acolor:#999999;font-family:“宋体“;line-height:30px;text- decoration:none; 预览效果如图 3-9 所示： 图 3-9bottom 部分预览效果 3.1.3 尾部部分尾部部分 尾部 foot 部分一般都是版权信息，联系方式等内容的模块，相对上面的 main 部分比较简单一点，这里买买网所要实现的 foot 部分内容包括二维码，版 权信息，许可证，以及几个公众号的内容。 Foot 部分(尾部部分) 淮安信息职业技术学院毕业设计论文 江苏淮安网络科技有限公司 苏 ICP 备 4545121 号| ICP 许可证号： 苏 454564123123 食品流通许可证 SP42019915100418HJ8| Copyright 2010 -2016 MAIMAI.com All Rights Reserved Css 样式： #footerwidth:1001px;height:180px;float:left;background-color:#f8f8fc;border- top:2px solid #CCCCCC;margin-top:5px; .bqfloat:left; .bq imgfloat:left;margin-top:30px;margin-left:15px; .bqpdisplay:block;float:right;width:800px;height:40px;font- size:13px;color:#999;line-height:20px;padding-top:15px;margin-left:30px;padding- bottom:5px; .gsfloat:right;width:700px; .gs imgpadding-bottom:15px; 尾部的预览效果如下图 3-10 所示： 图 3-10 尾部预览效果 首页效果预览如图 3-11 所示: 第三章 静态页面布局 图 3-11 首页预览效果 3.2 列表静态页面列表静态页面 列表页（list_article.html）是后台显示子页面内容的必要页，头部和尾 部和首页静态页面一样，需要改变的就是 main 主题内容部分。main 部分分成左 右两块。 左边部分布局代码: 热销 TOP +More 添加 内容 淮安信息职业技术学院毕业设计论文 css 样式如图 3-12 所示: 图 3-12 左边部分样式 左边显示的效果如图 3-13 所示： 图 3-13 左边预览效果 右边部分布局代码如图 3-14 所示: 第三章 静态页面布局 图 3-14 右边部分布局代码 Css 样式： #list_rightwidth:737px; height:500px; float:right; padding-right:5px; #list_right ul margin:0; padding:0; list-style:none; .list_right_topwidth:737px;height:34px;background:url(/images/list_righttoup.j pg) no-repeat; .intro text-indent:2em; margin-top:-5px; .list_right_top_text color:#000; line-height:36px; float:left; padding-left:20px; .list_right_cenwidth:760px; height:440px; border-left:2px #d1d1d1 solid; border-right:2px #d1d1d1 solid; margin-left:1px; _margin-left:1px; .list_right_duwidth:737px; height:9px; background:url(/images/list_rightdu.jpg) no-repeat; #list_rightwidth:734px;height:auto;float:left;padding-left:10px;padding- bottom:10px; padding-top:10px; .list_rigtallwidth:730px; height:35px; background:url(/images/productDt.jpg) no-repeat; margin:0 auto; .list_rightbiline-height:43px; padding-left:40px; float:left; width:100px; height:35px; font-size:14px; font-weight:bold; .list_rigtjp float:right; padding-right:15px; line-height:35px; .list_right_centerwidth:760px; /*height:auto;*/ padding-top:12px; margin:0 auto; color:#343233; line-height:25px; 这样整个列表页便完成了，最终效果如图 3-15 所示： 淮安信息职业技术学院毕业设计论文 图 3-15 列表页预览效果 3.3 内容静态页面内容静态页面 内容页和列表页一样，只是中间部分的右边内容改变了，内容页是展示的具体内容。 右边部分代码如下 右边效果显示如图 3-16 所示： 图 3-16 内容页右边效果 第四章 动态网页后台管理 第第 4 4 章章 动态网页后台管理动态网页后台管理 静态页面部分完成之后就是用来管理的动态页面的制作，买买网这里用到 了织梦后台 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:/localhost/uploads/dede（后台登录，登录名为 admin,密码为 admin）,织梦系统安装好之后，将做好的前台页面文件夹 sp 拷贝到 www/uploads/templets 下，将 sp 文件夹中的 images、JS、style以及主页面 index.htm 文件拷贝一份到 uploads 目录下。 4.2 织梦后台栏目及内容添加织梦后台栏目及内容添加 4.2.1 栏目添加栏目添加 选择如图 4-2 所示的网站栏目管理进行添加栏目 图 4-2 网站栏目管理 淮安信息职业技术学院毕业设计论文 添加女装、今日新品、今日品牌、运动、母婴、美妆、居家、鞋包、男装、热 销新品等顶级栏目，接着在各个顶级栏目中添加子栏目。如图 4-3 所示： 图 4-3 栏目列表 将各个栏目以及子栏目的高级选项的模板改成自己的模板，如图 4-4 所示： 图 4-4 模板选择 4.2.1 文章添加文章添加 在栏目中添加文章，如图 4-5 所示： 图 4-5 添加文章 为各个栏目添加文章后，选择生成按钮进行更新，如图 4-6： 第四章 动态网页后台管理 图 4-6 更新网站 在更新主页 HTML 栏选择主页模板为自己的模板，如图 4-7： 图 4-7 选择主页模板 选择系统栏目中的系统基本参数，将模板默认风格改成自己的模板名称，来使 前台主页能够显示出自己所制作的的模样。如图 4-8 所示： 图 4-8 默认模板风格 分别更新文档、更新栏目、更新主页。 4.3 DedeCMSDedeCMS 标记使用标记使用 织梦模板引擎是一种使用 XML 名字空间形式的模板解析器，想要让前台静 态页面变成动态页面，一定要用到织梦模板引擎的代码，所以要在前台几个页 面中插入标记代码。 4.3.1 首页首页 DedeCMS 标记代码插入标记代码插入 使用 DW 打开 uploads/templets/sp 下的 index_article.htm 页面。这个页 面需要插入修改标记代码的有导航栏部分、图片素材、CSS 样式表。 导航栏部分：这里以一个女装栏目展示，代码如图 4-2 所示： 淮安信息职业技术学院毕业设计论文 图 4-2 导航标记代码插入 这段标记代码可实现导航栏和后来添加栏目的对接。要注意的是 type 以及 typeid 的更换。 图片部分：在所有图片链接路径前添加以下标记代码： dede:global.cfg_templets_skin/ 来使图片能够在使用 Dedecms 的情况下能显示。 CSS 样式表部分：在演示表链接地址前添加标记代码： dede:global.cfg_templets_skin/ 为了样式能够在动态首页下被应用。 4.3.2 列表页列表页 DedeCMS 标记代码插入标记代码插入 这个页面需要插入修改标记代码的有导航栏部分、图片素材、CSS 样式表、 以及中间左右部分的内容栏。导航栏、图片素材、CSS 样式表标记代码都与 index_article.htm 一样修改，这里需要注意的就是内容栏的标记代码插入。 在如图 4-3 所示位置添加标记代码： dede:arclist row=7 orderby=click field:title/ /dede:arclist 图 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/ field:title/ /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 内容页效果展示 最后就完成了买买网的前后台页面的交互设计与实现。 淮安信息职业技术学院毕业设计论文 第五章第五章 总结与展望总