乐淘首页

# letao **Repository Path**: js-class/letao ## Basic Information - **Project Name**: letao - **Description**: 乐淘项目 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2017-12-09 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 乐淘电商 ### 移动端 #### Mui介绍 - 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 - 原生UI 鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标 MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件 - 流畅体验下拉刷新为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上， DIV动画经常出现卡顿现象（特别是图文列表的情况）； mui通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，而是一个完整的webview（子webview），回弹动画使用原生动画 #### 首页 - 充当移动端入口静态的 - 搭建页面主体架子具体到页面功能： 1.顶部通栏 2.轮播图 3.导航栏 4.运动生活专区 5.底部页签 + 页面架子 ```html 乐淘首页

``` + 初始区域滚动插件 ```javascript /*初始化区域滚动组件当超过了父容器大小的时候生效*/ mui('.mui-scroll-wrapper').scroll(); ``` + 初始化轮播图 ```javascript /*轮播图的初始化*/ mui('.mui-slider').slider({ interval:4000 }); ``` #### 分类页 - 静态页面左侧边栏里面的信息内容是一级分类右侧内容里面的信息比尔是二级分类 ```javascript /*初始左侧滚动*/ mui('.lt_cateLeft').scroll(); /*初始右侧滚动*/ mui('.lt_cateRight').scroll(); ``` - 渲染动态 + 左侧分类需要获取一级分类数据渲染在页面当中 + 默认选中一个分类加载出第一个分类对应的数据渲染二级分类（右侧内容） + 点击一级分类的时候需要去加载对应的分类数据渲染二级分类（右侧内容）图片如果加载不成功显示默认图片 onerror="失败的时候去替换原来错误的地址为默认图片的地址" onerror="this.src = 'images/none.jpg' " #### 搜索页 - 静态页面 + 搜索表单包含了搜索框和按钮 + 历史搜索两种情况没有历史记录的情况显示没有搜索历史记录有历史记录的情况显示历史记录清空操作历史列表 - 动态渲染 + 输入搜索关键字点击搜索跳转搜索列表页（把关键字传递给搜索列表页同时记录这一次的搜索记录） + 需要页面初始化的时候渲染上一次的搜索记录（获取本地存储的数据转换成js可以使用的数据进行渲染） + 点击搜索记录对应的删除按钮删除当前对应的历史记录（获取本机的记录删除一条从新记录到本地存储当中） + 点击情况历史记录情况所有记录（把本来存储的数据清空）需求记录10数据如果超过加一条删一条如果有一样的删除记录新的 #### 搜索列表页 - 静态页面 + 搜索表单 + 搜索排序 + 搜索列表 - 动态渲染 + 效果 1.下拉刷新 2.上拉加载 3.加载中状态 + 功能初始化渲染 1.获取地址栏关键字 2.通过关键字去后台获取和关键字相关的商品数据 3.渲染商品列表当前页搜索 1.点击搜索按钮获取到关键字 2.通过关键字去后台获取和关键字相关的商品数据 3.渲染商品列表排序展示 1.点击排序按钮获取排序方式 2.通过当前的关键字和排序方式去后台获取相关的商品数据 3.渲染商品列表下拉刷新 1.当用户下拉页面 2.通过关键字去后台重新获取和关键字相关的商品数据 3.渲染商品列表上拉加载 1.当用户上拉页面 2.通过关键字去后台获取和关键字相关的商品数据（而且是根据当前页面进行获取） 3.渲染商品列表当时是追加到页面当中 #### 商品详情页 - 静态页面 + 顶部通栏 + 底部操作栏以前是切换 + 商品图片轮播图 + 商品名称只显示两行 + 商品价格原价现价 + 商品尺寸选择按钮 + 商品数量选择数量 + 商品详情描述 - 动态渲染 + 默认初始化页面的时候渲染商品信息 + 点击重加载按钮刷新商品信息 + 尺码选择 + 数量选择 + 加入购物车 #### 登录 - 静态页面 + 用户名 + 密码 + 登录按钮 + 注册连接 - 动态渲染 + 看登录的来源 1.从需要登录的页面跳转过来登录成功之后会跳源页面 2.直接是登录页面登录成功之后默认进入用户首页 3.一种接口需要登录才能调通的接口 400 证明需要去登录需要传递给登录也回跳的连接 ```json {error: 400, message: "未登录！"} ``` #### 用户中心 - 静态页面 - 动态渲染 + 获取个人信息并且展示 + 点击退出按钮进行退出 #### 购物车 - 静态页面 + 商品列表 + 订单 - 动态渲染 + 初始化展示购物车中的商品 + 删除购物车当中的商品 + 修改购物车当中的商品商品的数量和商品的尺码 + 计算订单总金额购物车操作后 ### 后台管理端目录结构：后台的目录全部在admin目录下面页面基本模板 ``` 后台管理系统-登录 ``` #### 登录 - 静态的页面 - 动态交互 + 前端校验功能 1.用户名不能为空 2.密码不能为空 3.密码在6-18个字符内 + 重置功能（内容、校验） + 登录功能 1.点击按钮发送登录请求后台管理员 root 123456 2.登录成功前端跳转到首页 3.登录失败恢复可提交状态，具体的提示某一个表单元素的错误信息。 4.进度显示在ajax请求过程当中使用进度显示功能 - 基于bootstrap的前端校验插件《bootstrapvalidator》 + 文档参考 http://blog.csdn.net/nazhidao/article/details/51542508 http://blog.csdn.net/u013938465/article/details/53507109 http://www.cnblogs.com/v-weiwang/p/4834672.html?ptvd http://bootstrapvalidator.votintsev.ru/api/ ```html between：检测输入的值是否在两个指定的值之间。 callback：通过回调函数返回验证信息。 creditCard：验证信用卡格式。 different：如果输入值和给定的值不同返回true。 digits：如果输入的值只包含数字返回true。 emailAddress：验证电子邮件格式是否有效。 greaterThan：如果输入的值大于或等于指定的值返回true。 hexColor：验证一个hex格式的颜色值是否有效。 identical：验证输入的值是否和指定字段的值相同。 lessThan：如果输入的值小于或等于指定的值返回true。 notEmpty：检测字段是否为空。 regexp：检测输入值是否和指定的javascript正则表达式匹配。 remote：通过AJAX请求来执行远程代码。 stringLength：验证字符串的长度。 uri：验证URL地址是否有效。 usZipCode：验证美国的邮政编码格式。 defaultSubmit 默认提交表单 - disableSubmitButtons 禁用或启用提交按钮 - enableFieldValidators 启用/禁用所有给定的字段验证器（如果 true,使字段验证器。如果 false禁用字段验证器） - getFieldElements 检索字段元素的名字 - isValid 返回 true如果所有的表单字段是有效的。否则,返回 false. - resetForm 重置表单 - updateElementStatus 更新验证给定元素的结果 - updateStatus(field, status, validatorName) 更新为给定字段验证器的结果，status可以 NOT_VALIDATED, VALIDATING, INVALID或 VALID，validatorName 字符串验证器的名称。如果 null所有验证器,更新方法有效性的结果 ``` - 基于jquery的前端进度插件《nprogress》 + 文档参考 http://blog.csdn.net/joyhen/article/details/24458427 #### 管理主体结构 - 静态的页面 + 侧边栏 1.顶部logo 2.用户信息 3.菜单（一级，二级） + 主体内容 1.顶部通栏 2.路径导航 3.不同页面不同的内容 - 动态交互 1.手风琴菜单 2.收起和展开侧边栏 3.退出弹出对话狂确定是否退出 #### 首页 - 渲染图表 + 注册人数的柱状图 + 几款热门的商品销售情况饼图数据可视化插件 echarts http://echarts.baidu.com/ 数据可视化插件 echarts https://www.hcharts.cn/demo/highcharts + 现在后台没有提供对应的数据接口但是我们可以模拟 + 给大家带来以后工作当中可能会遇到的问题 #### 用户管理 - 用户信息的展示 + 序号用户名手机号状态（禁用、正常）操作（禁用、启用） - 用户信息的分页 + 基于bootstrap的分页插件 bootstrap-paginator - 禁用某个用户 - 启用某个用户