- 了解电商全端项目的背景和项目架构开发模式
- 能搭建好项目的开发环境
- 主页的页面布局和样式
- 主页的轮播图插件使用
- 主页区域滚动插件的使用
- 分类页面的布局和样式
- 分类页面的区域滚动
- 分类页面的左侧分类数据动态渲染
- 分类左侧点击渲染对应的右侧分类商品
网站是**主要的运动鞋、皮鞋网络零售网站，聚焦在垂直的鞋及其相关商品领域深耕。 凭借雄厚的资金实力和在电子商务业界的诚信积累，与Nike、Adidas、Converse、NewBalance等国际大牌深度合作。 保证了产品与专卖店同步更新，让您不出家门能最快速度买到当季新款名牌鞋。
| 平台 | 模块 | 功能 |
|---|---|---|
| 移动端web端 | 首页 | 静态展示页面模块 |
| 移动端web端 | 分类 | 一级分类、二级分类 |
| 移动端web端 | 商品 | 搜索中心、商品列表、商品详情 |
| 移动端web端 | 购物车 | 购物车管理 |
| 移动端web端 | 用户 | 登录、注册、账户管理 |
| 移动端web端 | 收货地址 | 展示、添加、编辑、删除 |
| - | - | - |
| pc端后台管理 | 登录 | 管理员登录 |
| pc端后台管理 | 用户管理 | 用户权限管理 |
| pc端后台管理 | 分类管理 | 一级分类、二级分类管理 |
| pc端后台管理 | 商品管理 | 商品录入、删除、修改、展示 |
| 系统分层 | 使用技术 |
|---|---|
| 数据层： | MYSQL |
| 服务层： | NodeJs(express) |
| 前端展示： | mobile web application,pc management system |
- 前后分离：
-
一种是前端先写一个静态页面，写好后，让后端去套模板。 静态页面可以本地开发，也无需考虑业务逻辑只需要实现页面即可。 不足是还需要后端套模板，这些前端代码后端需要浏览一遍，以免出错。
-
另一种协作模式是，前端直接去写模板。 这样做的问题在于，前端编写过程中很依赖与后端环境，需要依赖后台提供的接口。 这种模式可认为是前后分离模式，也是接口化开发。
-
不管哪一种开发模式都需要对服务层session有所了解。
- 了解session
- 在计算机中，尤其是在网络应用中，称为会话控制。 Session 对象存储特定用户会话所需的属性及配置信息。 这样，当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失， 而是在整个用户会话中一直存在下去。当用户请求来自应用程序的 Web 页时， 如果该用户还没有会话，则 Web 服务器将自动创建一个 Session 对象。 当会话过期或被放弃后，服务器将终止该会话。Session 对象最常见的一个用法就是存储用户的首选项。
一般在进行前后分离开发需要配置好本地开发环境，
也就是说需要在本地搭建后台开发环境，node，java，php，等后台编程语言，提供接口支持。
- 项目后台编程语言是nodejs所有必须安装nodejs软件
- 项目github主页 https://github.com/zhousg/letao
- 可使用git拉取源代码
git仓库地址 https://github.com/zhousg/letao.git
克隆项目：$ git clone https://github.com/zhousg/letao.git
进入目录：$ cd letao/
拉取项目：$ git pull origin master
- 下载源码需要依赖的外部文件，其实就是包。
npm i 或者 npm install
- 创建数据库直接在数据库中执行建库脚本 letao初始化.sql
- 修改数据库连接
//修改models文件夹里面的db.js中的数据库链接信息
const pool = mysql.createPool({
host : '127.0.0.1',
user : 'root',
password : '',
database : 'letao'
});
//a) host 数据库的ip地址
//b) user 数据库的用户名
//c) password 数据库密码
//d) database 数据库的库名- 启动项目
//进入项目目录
npm start
- bootstrap 也是一个ui框架 响应式的ui框架 兼容不同终端 可以适配pc端 也可以适配 移动端
- Mui 是一个ui框架 针对移动端开发的ui框架 只能适配移动端（流式布局）
- 学习官网 http://dev.dcloud.net.cn/mui/
- 官方文档 http://dev.dcloud.net.cn/mui/ui/
- 组件展示 http://dcloud.io/hellomui/
特点
- 最接近原生APP体验的高性能前端框架
- 轻量 追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征； MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K
- 用来实现移动端DOM的操作
- 已经$.ajax 请求后台API数据接口
-
用来实现移动端字体图标
- 用来实现数据页面渲染
- artTemplate 中文文档 https://aui.github.io/art-template/zh-cn/docs/
- 实现less的编译
- 中文文档 http://lesscss.cn/
- 添加首页站点图标 在head标签里面加上站点图标的引入
<link type="image/x-icon" rel="shortcut icon" href="images/favicon.ico">
- 添加移动端的视口
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- 准备工作
- 安装node js （服务器需要nodejs启动） 移动web第三天教学资料 》nodejs安装 一路next安装
- 安装mysql数据库 phpstudy里面自带数据
- 安装数据库管理工具 电商项目day2 教学资料 》 x32 x64 一路next安装
- 开启服务器
- 开启mysql 启动phpstudy
- 管理工具里面连接mysql数据
- 数据库管理工具里面初始化数据库 电商项目day02 > 教学资料 》letao_init.sql 把它拖到管理工具里面打开 选中所有代码执行一次
- 使用nodejs服务器链接mysql数据库 》 找到letao-master项目文件夹 》 models > db.js 修改数据库连接的用户和密码 改密码为root password : 'root',
- 打开letar-master文件夹所在的黑窗 空白处shift+鼠标右键 或者顶部输入cmd回车
- 启动nodejs的服务器 npm start 如果遇到一些问题及时提出
Port 3000 is already in use 表示3000端口已经被使用(开了多个黑窗)
npm 不是内部或外部命令 （没有安装nodeJs）
注意黑窗打开了不能关闭 - 去浏览器访问前端移动web页面和后台管理系统页面
- 前端移动web地址 http://localhost:3000/mobile/index.html
- 后台管理系统地址 http://localhost:3000/manage/login.html
- 前端的用户名itcast 密码 111111
- 后台管理系统root 密码123456
- 搭建我的乐淘
- 进入letao-master > public 创建一个m文件夹
- 把项目依赖包放到m文件夹里面
- lib 》 教学资料 》 lib文件拷到m文件里面
- 把letao-master > pulic > images文件夹拷贝到m里面
- 创建我的乐淘需要的文件夹和文件
- less文件夹
- js文件夹
- index.html
- 要启动乐淘数据库服务器 回到letao-master文件夹 打开黑窗（关掉其他黑窗） 输入npm start 注意黑窗打开了不能关闭
- 访问我的乐淘
- 前端移动web地址 http://localhost:3000/m/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<!-- 1. 引入mui的css文件 -->
<link rel="stylesheet" href="lib/mui/css/mui.css">
<!-- 2. 引入字体图标的css文件 -->
<link rel="stylesheet" href="lib/fontAwesome/css/font-awesome.css">
<!-- 3. 引入主页的less文件 -->
<link rel="stylesheet/less" href="less/index.less">
<!-- 4. 引入less的编译器文件 -->
<script src="lib/less/less.js"></script>
</head>
<body>
<!-- 5. 引入mui的JS文件 -->
<script src="lib/mui/js/mui.js"></script>
<!-- 6. 引入模板引擎的JS文件 -->
<script src="lib/artTemplate/template.js"></script>
<!-- 7. 引入zepto的Js文件 -->
<script src="lib/zepto/zepto.js"></script>
<!-- 8. 引入主页的JS文件 -->
<script src="js/index.js"></script>
<script src="js/rem.js"></script>
</body>
</html>
<!-- 头部区域 -->
<header id="header">
</header>
<!-- 主体内容 -->
<main id="main">
<!-- 轮播图区域 -->
<section id="slide">
</section>
<!-- 导航区域 -->
<nav id="nav">
</nav>
<!-- 品牌专区 -->
<section id="brand-aria">
</section>
<!-- 运动专区 -->
<section id="sport-aria">
</section>
<!-- 女士专区 -->
<section id="women-aria">
</section>
<!-- 男士专区 -->
<section id="man-aria">
</section>
</main>
<!-- 底部区域 -->
<footer id="footer">
</footer>
<!-- 头部区域 -->
<header id="header">
<h4>乐淘云购</h4>
<a href="" class="fa-search"></a>
</header> <!-- 底部区域 -->
<footer id="footer">
<div class="mui-row">
<a href="index.html" class="mui-col-xs-3 fa-home active">
<span>首页</span>
</a>
<a href="category.html" class="mui-col-xs-3 fa-bars">
<span>分类</span>
</a>
<a href="cart.html" class="mui-col-xs-3 fa-shopping-cart">
<span>购物车</span>
</a>
<a href="my.html" class="mui-col-xs-3 fa-user">
<span>会员中心</span>
</a>
</div>
</footer>
- 页面结构
<!-- 轮播图区域 -->
<section id="slide">
<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!--第四个内容区-->
<div class="mui-slider-item mui-slider-item-duplicate">
<!-- 具体内容 -->
<a href="#">
<img src="images/banner4.png" alt="">
</a>
</div>
<!--第一个内容区容器-->
<div class="mui-slider-item mui-active">
<!-- 具体内容 -->
<a href="#">
<img src="images/banner1.png" alt="">
</a>
</div>
<!--第二个内容区-->
<div class="mui-slider-item">
<!-- 具体内容 -->
<a href="#">
<img src="images/banner2.png" alt="">
</a>
</div>
<!--第三个内容区-->
<div class="mui-slider-item">
<!-- 具体内容 -->
<a href="#">
<img src="images/banner3.png" alt="">
</a>
</div>
<!--第四个内容区-->
<div class="mui-slider-item">
<!-- 具体内容 -->
<a href="#">
<img src="images/banner4.png" alt="">
</a>
</div>
<!--第一个内容区容器-->
<div class="mui-slider-item mui-slider-item-duplicate">
<!-- 具体内容 -->
<a href="#">
<img src="images/banner1.png" alt="">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</section>- JS初始化
//获取轮播图容器
var slider = mui(".mui-slider");
// 初始化轮播图
slider.slider({
interval: 1000 //自动轮播图的时间
});-
注意点
-
要添加无缝轮播图需要在 轮播图的图片容器里面 添加一个类名mui-slider-loop
<div class="mui-slider-group mui-slider-loop"> -
需要在轮播图的第一张放最后一张
<!--第四个内容区--> <div class="mui-slider-item mui-slider-item-duplicate"> <!-- 具体内容 --> <a href="#"> <img src="images/banner4.png" alt=""> </a> </div> -
需要在轮播图的最后一张放第一张图
<!--第一个内容区容器--> <div class="mui-slider-item mui-slider-item-duplicate"> <!-- 具体内容 --> <a href="#"> <img src="images/banner1.png" alt=""> </a> </div>
- MUI的栅格系统的使用
<!-- 品牌专区 -->
<section id="brand-aria">
<a href="#" class="brand-title">
<img src="images/title0.png" alt="">
</a>
<div class="mui-row brand-body">
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand1.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand2.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand3.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand4.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand5.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand6.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand7.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand8.png" alt=""></a>
</div>
</div>
</section>
<!-- 品牌专区 -->
<section id="brand-aria">
<a href="#" class="brand-title">
<img src="images/title0.png" alt="">
</a>
<div class="mui-row brand-body">
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand1.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand2.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand3.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand4.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand5.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand6.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand7.png" alt=""></a>
</div>
<div class="mui-col-xs-3">
<a href="#"><img src="images/brand8.png" alt=""></a>
</div>
</div>
</section>
- 给首页的主体内容容器加上一个滚动的父容器类名
<main id="main" class="mui-scroll-wrapper">
- 给主体容器里面添加一个子容器把所有内容装在一个容器里面
<div class="mui-scroll">
- 调用JS初始化区域滚动插件
// 初始化mui的滚动插件
mui('.mui-scroll-wrapper').scroll({
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
bounce: true //是否启用回弹
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分类页面</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- 1.引入Mui的CSS文件 -->
<link rel="stylesheet" href="lib/mui/css/mui.css">
<!-- 2. 引入字体图标的css文件 -->
<link rel="stylesheet" href="lib/fontAwesome/css/font-awesome.css">
<!-- 3. 引入分类页的less文件 -->
<link rel="stylesheet/less" href="less/category.less">
<!-- 4. 引入less.js编译器文件 -->
<script src="lib/less/less.js"></script>
</head>
<body>
<!-- 5. 引入mui的JS文件 -->
<script src="lib/mui/js/mui.js"></script>
<!-- 6. 引入模板引擎JS文件 -->
<script src="lib/artTemplate/template.js"></script>
<!-- 7. 引入zepto定制版 -->
<script src="lib/zepto/zepto.min.js"></script>
<!-- 8. 引入分类的JS文件 -->
<script src="js/category.js"></script>
</body>
</html>
<!-- 头部区域 -->
<header id="header">
<a href="#" class="fa-arrow-left"></a>
<form action="#">
<input type="search" placeholder="请输入要搜索的商品">
</form>
<a href="#" class="fa-search"></a>
</header>
<main id="category">
<div class="category-left">
</div>
<div class="category-right">
</div>
</main>
<!-- 底部区域 -->
<footer id="footer">
<div class="mui-row">
<a href="index.html" class="mui-col-xs-3 fa-home active">
<span>首页</span>
</a>
<a href="category.html" class="mui-col-xs-3 fa-bars">
<span>分类</span>
</a>
<a href="cart.html" class="mui-col-xs-3 fa-shopping-cart">
<span>购物车</span>
</a>
<a href="my.html" class="mui-col-xs-3 fa-user">
<span>会员中心</span>
</a>
</div>
</footer>
<ul>
<li class="active"><a href="#">运动馆</a></li>
<li><a href="#">女士馆</a></li>
<li><a href="#">男士馆</a></li>
<li><a href="#">帆布馆</a></li>
<li><a href="#">户外馆</a></li>
</ul>
<ul class="category-detail mui-row mui-scroll">
<li class="mui-col-xs-4">
<a href="#">
<img src="images/brand1.png" alt="">
<p>耐克</p>
</a>
</li>
<li class="mui-col-xs-4">
<a href="#">
<img src="images/brand2.png" alt="">
<p>阿迪</p>
</a>
</li>
<li class="mui-col-xs-4">
<a href="#">
<img src="images/brand3.png" alt="">
<p>新百伦</p>
</a>
</li>
<li class="mui-col-xs-4">
<a href="#">
<img src="images/brand4.png" alt="">
<p>哥伦比亚</p>
</a>
</li>
<li class="mui-col-xs-4">
<a href="#">
<img src="images/brand5.png" alt="">
<p>匡威</p>
</a>
</li>
</ul>
- 给category-right里面加一个滚动区域的父容器
<div class="mui-scroll-wrapper">
- 给滚动区域的父容器里面添加一个子容器把所有内容装在一个容器里面
<ul class="category-detail mui-row mui-scroll">
- 调用JS初始化区域滚动插件
// 初始化mui的滚动插件
mui('.mui-scroll-wrapper').scroll({
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
bounce: true //是否启用回弹
});
- 请求左侧分类菜单的接口 查看数据 http://localhost:3000/category/queryTopCategory
- 使用zepto的$.ajax请求接口的数据
$.ajax({
url: '/category/queryTopCategory',
success: function(data) {
}
})
- 创建左侧分类菜单的模板
<!-- 定义左侧分类的模板 -->
<script id="categoryLeftTmp" type="text/html">
{{each rows as value i}}
<li data-id="{{value.id}}"><a href="#">{{value.categoryName}}</a></li>
{{/each}}
</script>
- 调用模板引擎的方法渲染模板 同时给第一个li添加active类名
$.ajax({
url: '/category/queryTopCategory',
success: function(data) {
var html = template('categoryLeftTmp', data);
$('.category-left ul').html(html);
$('.category-left ul li').eq(0).addClass('active');
}
})
- 分类左侧的点击样式切换
// 左侧分类的点击
$('.category-left ul').on('click', function(e) {
$('.category-left ul li').removeClass('active');
var li = $(e.target.parentNode);
li.addClass('active');
});
-
获取当前点击的li的id 通过分类id获取分类的商品列表
- 在模板引擎里面绑定左侧分类的时候绑定分类id到data-id属性上
<li><a href="#" data-id="{{value.id}}">{{value.categoryName}}</a></li>- 在JS里面获取当前点击的分类的id 通过分类id获取分类的商品列表
// 点击显示右侧的对应的分类商品 把点击的li的分类id传入 getCategoryRightData(li.data('id')) -
根据分类id获取分类的商品列表
- 调用分类商品的接口 http://localhost:3000/category/querySecondCategory?id=1
- 使用zepto的$.ajax请求接口根据分类的id获取数据
//获取右侧分类的数据 需要传入分类id function getCategoryRightData(id) { $.ajax({ url: '/category/querySecondCategory', data: { id: id }, success: function(data) { var html = template('categoryRightTmp', data); if (html) { $('.category-detail').html(html); } else { $('.category-detail').html('<li>没有数据</li>'); } } }) }
-
引包
- 引入mui的css文件
- 引入字体图标的css
- 引入自己的less文件
- 引入less的编译器文件
- 引入zepto
- 引入mui的JS文件
- 引入模板引擎的JS文件
- 引入自己的JS文件
-
写首页的结构
-
制作公共的头部和底部结构和样式 头部是固定定位在顶部 position:fixed; width:100% 底部固定在底部 left:0px; bottom:0px position:fixed; width:100%
-
头部里面使用字体图标
- 进入字体图标的网站 http://www.fontawesome.com.cn/faicons/
- 搜索需要的图标（只能输入英文）
- 把图标的类名复制到标签上
-
内容区域制作
- 轮播图制作
- 拷贝轮播图基本结构
- 实现自动轮播 使用JS初始化轮播图传入自动轮播的时间 //获得slider插件对象 调用slider初始化轮播图的方法 mui('.mui-slider').slider({ // 1. 开启自动轮播图 毫秒数 interval: 1000 //自动轮播周期，若为0则不自动播放，默认为0； });
- 实现轮播图的无缝轮播
- 给轮播图的图片容器添加一个 mui-slider-loop类名
- 把第一张图放到最后一张 把最后一张图放到第一张
- 同时多加的前后两张图都需要添加 mui-slider-item-duplicate （前后类名都是一样）
- 轮播图制作
-
导航区域的制作
- 要使用mui的栅格系统 .mui-col-xs-4
- 设置里面图片宽度高度
-
广告区域的制作
- 使用mui栅格系统 分为左边和右边 左边.mui-col-xs-8 右边.ui-col-xs-4
- 左侧广告里面 还分为2列 .mui-col-xs-6
- 样式设置图片宽度100%
-
专区的制作
- 使用mui的栅格系统 .mui-col-xs-6
- 里面有一根商品容器 容器里面有商品图片 商品文字 商品价格 商品购买按钮
- 给商品盒子加一个盒阴影 box-shadow:0px 0px 5px #ccc;
- 商品的名字只显示2行 固定为2行的高度 加overflow:hidden;
- 按钮使用mui的按钮
-
区域滚动插件的使用
- 给main父容器加一个区域滚动父容器的类名 mui-scroll-wrapper
- 在main里面放一个子容器（把所有内容包起来）添加类名 mui-scroll-wrapper
- 调用JS初始化区域滚动 // 初始化mui的区域滚动 传入父容器的选择器 mui('.mui-scroll-wrapper').scroll({ scrollY: true, //是否竖向滚动 scrollX: false, //是否横向滚动 startX: 0, //初始化时滚动至x startY: 0, //初始化时滚动至y indicators: false, //是否显示滚动条 deceleration: 0.001, //阻尼系数,系数越小滑动越灵敏 bounce: true //是否启用回弹 });
-
克隆和启动项目
-
如何去github上克隆下来 git clone 仓库地址
-
进入项目 npm i 安装项目依赖
-
启动数据库服务器
-
在项目里面打开黑窗 （数据库连接如果有修改数据库连接 models文件夹里面 db.js 修改账号密码）
-
在黑窗运行npm start
-
打开localhost:3000/m
-
分类页面的搭建
-
在pulic文件下的m文件夹里面创建分类页面category.html
-
引入分类页面需要的包
- muicss
- 字体图标的css
- 分类的less
- less.js
- 引入zepto
- muijs
- 模板引擎
- 分类JS
-
写分类页面的结构 header 从主页复制 main footer 从主页复制
-
修改分类头部的结构和样式
-
添加分类头部的图标 只需要在表示里面加 fa-arrow-left 省略fa类名 把fa类名的样式提取到字体图标的公共样式里面 [class^="fa-"],[class*=" fa-"] { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; }
-
制作分类主体内容
- 左侧分类菜单 固定宽度
- 右侧分类商品 宽度自适应
-
给右侧分类添加 区域滚动效果
- 给 category-right 添加区域滚动的父容器类名mui-scroll-wrapper
- 给 category-right 添加一个子容器 （把所有商品包起来） 添加一个 mui-scroll
- 调整样式
category-right 因为添加了mui-scroll-wrapper类名会添加一些样式定位 宽度100%之类的样式
- 去掉100% width:atuo;
- 调整右侧分类的位置（绝对定位不会参照父元素的padding） top 和bottom
- 把子容器改成相对定位（为了让子容器能够撑开父容器的高度宽度）
- 调用JS代码初始化区域滚动插件 // 初始化mui的区域滚动 传入父容器的选择器 mui('.mui-scroll-wrapper').scroll({ scrollY: true, //是否竖向滚动 scrollX: false, //是否横向滚动 startX: 0, //初始化时滚动至x startY: 0, //初始化时滚动至y indicators: false, //是否显示滚动条 deceleration: 0.001, //阻尼系数,系数越小滑动越灵敏 bounce: true //是否启用回弹 });
-
分类左侧动态渲染
- 调用分类左侧菜单的接口 》 项目 》 docs文件夹 》 前端接口文档 找到分类一级菜单API
- 发生ajax请求分类菜单API
- 定义分类菜单的模板引擎
- 调用模板引擎的方法传入ajax获取的数据
- 把生成好的html放到分类菜单页
- 实现点击搜索添加当前搜索的内容 到本地存储里面 并且添加的时候不能有重复
- 给搜索按钮添加点击事件 获取输入框输入的搜索内容
- 获取本地存储对象 往里面设置当前搜索的内容
- 点击右边的x删除某个搜索历史记录（删除本地存储中的搜索记录）
- 给删除的x添加点击事件
- 获取当前要删除的记录 （在绑定列表的时候给a添加一个自定义属性 绑定他需要删除的值）
- 在点击事件里面获取当前x父元素a的自定义属性的值
- 获取本地存储的值 转成数组
- 在数组里面查找当前要删除的值（是否存在）
- 如果存在把当前的值删掉
- 删除之后要重新保存到本地存储中
- 查询 当页面加载的时候显示所有的搜索历史记录（查询本地存储搜索历史记录渲染到历史记录列表）
- 获取本地存储的搜索历史记录
- 把获取的搜索历史记录转换成数组 如果为空就赋值为空数组
- 定义模板引擎生成记录记录模板
- 调用模板引擎生成html
- 把生成的模板放到页面上
- 清空搜索记录 （清空本地存储里面的所有搜索记录）
- 给清空记录添加点击事件
- 直接把本地存储搜索历史记录的值清空
- 点击某个搜索链接跳转到对应的商品列表页面 同时传入当前点击的搜索历史记录