Web前端移动开发进阶教程-乐淘移动商城项目（28.01-35.08）商品展示

最新推荐文章于 2023-01-03 12:34:09 发布

@阿猫阿狗~

最新推荐文章于 2023-01-03 12:34:09 发布

阅读量415

点赞数

本文链接：https://blog.csdn.net/qq_25741071/article/details/106659923

版权

本文介绍了在Web前端移动开发中使用art-template模板引擎进行数据渲染，强调其性能优势和易维护性。内容涵盖模板引擎的基础概念、特性，以及在商品搜索功能中的应用，包括搜索关键字处理、localStorage数据存储、分页加载和排序跳转等关键环节。

摘要由CSDN通过智能技术生成

文章目录

相关接口

音乐播放器接口
歌曲搜索：https://autumnfish.cn/search?keywords=齐天
获取歌曲地址：https://autumnfish.cn/song/url?id=481859794
歌曲详情获取：https://autumnfish.cn/song/detail?ids=481859794
歌曲评论获取：https://autumnfish.cn/comment/hot?type=0&id=481859794

28.01-实现商品搜索（上）(Av31072906,P28).mp4
29.02-实现商品搜索（下）(Av31072906,P29).mp4
30.03-实现搜索结果分页（上）(Av31072906,P30).mp4
31.04-实现搜索结果分页（中）(Av31072906,P31).mp4
32.05-实现搜索结果分页（下）(Av31072906,P32).mp4
33.06-实现商品按照价格排序(Av31072906,P33).mp4
34.07-商品排序更正this指向(Av31072906,P34).mp4
35.08-实现页面跳转(Av31072906,P35).mp4

1、使用art-template模板引擎渲染数据
2、模板引擎 – art-template

一：什么是art-template
art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。使用art-template也便于维护代码，以前我们渲染数据是以模板字符串的形式在js文件中写入的html内容，如果html内容需要修改，我们需要在js中修改。而用了模板引擎以后，我们只需要html文件中修改html内容。还有使用了模板引擎以后DOM操作的效率也会更高一点。

二：art-template特性
拥有接近 JavaScript 渲染极限的的性能
调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点(Webpack Loader)
支持 Express、Koa、Webpack
支持模板继承与子模板
浏览器版本仅 6KB 大小

五：安装art-template，有以下2种方式：
npm install art-template --save
也可以在浏览器中实时编译，进入链接ctrl+s保存文件至项目目录中：lib/template-web.js（gzip: 6kb这个源码是压缩过的）

六：art-template语法
art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。（例如再使用循环时，标准语法只能使用each循环遍历，而原始语法还可以使用for，while等循环）
标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。

引入：

<script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/index.min.js"></script>

在这里插入图片描述

1、模板引擎 art-template 循环打印列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>20200610-template-web-keywords=华晨宇</title>
    <script type="text/javascript" src="https://image.tiancity.com/common/js/jquery-1.7.2.min.js"></script>
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
</head>

<body>
    <div id="container"></div>
    <script type="text/html" id="tpl">
        <ul>
            {
   {
   each result as value index}}
            <li>
                {
   {
   value.id}} ---- {
   {
   value.name}}
            </li>
            {
   {
   /each}}
        </ul>
    </script>
    <script>
        $.ajax({
   
            url: 'https://autumnfish.cn/search?keywords=华晨宇',
            type: 'get',
            success: function (response) {
   
                //所谓模板引擎：作用就是用来帮我们将数据和HTML拼接好 将拼接好的结果 返回给我们
                // console.log(response);
                var html = template('tpl', {
   
                    result: response.result.songs
                })
                console.log(html);
                var container = document.querySelector('#container');
                container.innerHTML = html;
            }
        });
    </script>
</body>
</html>

2、22.09-制作搜索中心样式(上).html

在这里插入图片描述
公共部分

	<nav class="mui-bar mui-bar-tab my-footer">
		<a class="mui-tab-item" href="#tabbar">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item mui-active" href="#tabbar-with-chat">
			<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-contact">
			<span class="mui-icon"><i class="fa fa-shopping-cart"></i></span>
			<span class="mui-tab-label">购物车</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-map">
			<span class="mui-icon mui-icon-gear"></span>
			<span class="mui-tab-label">设置</span>
		</a>
	</nav>

3、输入的搜索关键字、 localStorage、数据存储为、数组、数据清除

<!doctype html>
<html lang="en">
<head>
<!--
项目所查资料：
集成mui的样式（底部样式 简书）：https://www.jianshu.com/p/c1b5e58ea13f
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
<title>22.09-制作搜索中心样式(上)</title>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://dcloud.io/hellomui/css/mui.min.css" rel="stylesheet">
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/js/mui.min.js"></script> -->
<!-- <link href="css/mui.min.css" rel="stylesheet"> -->
<!-- <script src="js/mui.min.js"></script> -->
<script src="https://image.tiancity.com/common/js/jquery-1.7.2.min.js"></script>
<script src="https://dcloud.io/hellomui/js/mui.min.js"></script>
<script src="build/template-web.min.js"></script>
<style type="text/css">
*{
   padding:0;margin:0;}
img{
   display:block;border: none;width:100%;}
ul{
   margin:0;padding:0;list-style: none;overflow:hidden;}
.my-