智慧电商后台子页面开发_第1页
智慧电商后台子页面开发_第2页
智慧电商后台子页面开发_第3页
智慧电商后台子页面开发_第4页
智慧电商后台子页面开发_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《物联网Web前端开发基础》课程

智慧电商后台子页面开发【任务8-7】智慧电商后台子页面开发后台首页打开content\index.html，编写后台首页子页面。【任务8-7】智慧电商后台子页面开发后台首页继续编写content\index.html，创建一个<table>表格来展示数据。在css\common.css中编写公共的表格样式。【任务8-7】智慧电商后台子页面开发分类管理页在真实项目中，页面的数据是分离出来的，由服务器返回一段JSON数据。前端只需要通过代码解析数据，展示到页面中即可。为了模拟从服务器获取的数据，我们将分类页的数据保存在data\category.json文件中。修改js\main.js，编写一个$.get()方法，用来从服务器获取数据。【任务8-7】智慧电商后台子页面开发分类管理页若要判断服务器返回的是一个JSON，可以检测服务器的响应头中的Content-Type的值。使用Ajax对象xhr.getResponseHeader()方法可以获取响应头。如果Content-Type的值中包含application/json字符串，就表示当前是JSON数据。【任务8-7】智慧电商后台子页面开发分类管理页在content\category.html文件中测试程序。首先需要在<head>中引入js\main.js，然后在页面打开后通过$.get()获取JSON数据。【任务8-7】智慧电商后台子页面开发art-template模板引擎为了将数据输出到页面中，我们可以借助art-template模板引擎来实现。从本项目的配套源代码中可以获取art-template模板引擎。目录位于libs\art-template，将其复制到当前项目中。【任务8-7】智慧电商后台子页面开发art-template模板引擎在content\category.html文件中将其引入。在content\category.html中找到<script>标签上方的位置，

编写代码，准备一个<div>标签的容器。在<script>标签上方的位置，再添加一个用<script>标签编写的模板。【任务8-7】智慧电商后台子页面开发art-template模板引擎art-template模板引擎引入后，就会得到一个template()函数。该函数的第1个参数表示模板id，第2个参数表示传给模板的数据，返回值表示渲染后的HTML结果。【任务8-7】智慧电商后台子页面开发art-template模板引擎在模板中使用{{}}语法可以输出数据。art-template给我们提供了数组遍历的语法。【任务8-7】智慧电商后台子页面开发分类管理页细节完善为“编辑”和“删除”加上链接和图标。在css\common.css中美化一下样式。在表格的顶部加上一个“添加分类”按钮。【任务8-7】智慧电商后台子页面开发模态框模态框是一种整个页面只有一个的框，当模态框弹出来时，用户无法进行其他操作，

只能操作模态框里的元素。当用户单击“添加分类”按钮，或者单击“编辑”链接时，我们希望让页面出现一个模态框，显示一个编辑分类表单。我们将模态框的HTMl结构写在父页面index.html中。【任务8-7】智慧电商后台子页面开发模态框在css\common.css中，为模态框添加一个半透明背景，用于遮挡整个页面。【任务8-7】智慧电商后台子页面开发模态框为了方便后面的开发，在测试完成后，我们在css\common.css中把模态框隐藏起来。修改content\category.html，在分类列表模板的下方增加一个新模板“分类编辑模板”。为“添加分类”按钮和“编辑”链接添加class为j-edit，从而方便获取元素。【任务8-7】智慧电商后台子页面开发模态框在$.get()方法的第2个参数（success回调函数）中添加代码，为按钮绑定单击事件。在按钮单击后，将分类编辑模板渲染到父页面的模态框容器中。【任务8-7】智慧电商后台子页面开发模态框在css\common.css中为模态框美化一下样式。在content\category.html中为按钮添加class来设置样式。【任务8-7】智慧电商后台子页面开发模态框为模态框中的“取消”按钮绑定事件，用来隐藏模态框。在class为j-edit的元素的单击事件中，为j-cancel元素绑定单击事件。测试模态框中的“取消”按钮是否可以隐藏模态框。【任务8-7】智慧电商后台子页面开发商品管理页打开content\goods.html，引入art-template和main.js文件。创建data\goods.json文件，从配套源代码中复制完整代码。在content\goods.html的<body>中进行数据的加载和展示。【任务8-7】智慧电商后台子页面开发商品管理页通过列表渲染来输出数据。为“编辑”和“删除”文本添加图标和链接。【任务8-7】智慧电商后台子页面开发商品管理页利用条件渲染语法来显示状态值。{{if变量}}用来判断变量的值是否为true或false，根据判断结果显示相应的内容。在css\main.css中为小图标设置颜色来区分。【任务8-7】智慧电商后台子页面开发商品管理页将“新品”“特

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论