## 乐淘电商
### 项目启动
- 创建 letao 数据库，导入docs下的sql文件
- 启动 `npm start`，在项目根目录执行
### 移动端
#### 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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
<title>乐淘首页</title>
<link rel="stylesheet" href="assets/mui/css/mui.css"/>
<link rel="stylesheet" href="css/common.css"/>
</head>
<body>
<div class="lt_container">
<header class="lt_topBar"></header>
<div class="lt_content">
1
</div>
<footer class="lt_tabBar"></footer>
</div>
<script src="assets/mui/js/mui.js"></script>
</body>
</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目录下面
页面基本模板
```
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>后台管理系统-登录</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/admin.css"/>
</head>
<body>
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="js/admin.js"></script>
</body>
</html>
```
#### 登录
- 静态的页面
- 动态交互
+ 前端校验功能
1.用户名不能为空
2.密码不能为空
3.密码在6-18个字符内
+ 重置功能（内容、校验）
+ 登录功能
1.点击按钮 发送登录请求 后台管
最接近原生APP体验的高性能前端框架（电商）
需积分: 5 170 浏览量
2023-03-26
15:59:11
上传
评论
收藏 18.7MB ZIP 举报
最接近原生APP体验的高性能前端框架（电商） （366个子文件） 
config 298B bootstrap.css 149KB bootstrap.css 149KB bootstrap.min.css 118KB bootstrap.min.css 118KB mui.css 100KB mui.css 100KB mui.min.css 74KB mui.min.css 74KB font-awesome.css 39KB font-awesome.css 34KB font-awesome.css 34KB font-awesome.min.css 30KB font-awesome.min.css 27KB font-awesome.min.css 27KB bootstrap-theme.css 26KB bootstrap-theme.css 26KB bootstrap-theme.min.css 23KB bootstrap-theme.min.css 23KB index.css 14KB bootstrap-table.css 7KB common.css 3KB common.css 3KB product.css 3KB cart.css 2KB mui.picker.css 2KB admin.css 2KB search.css 2KB main.css 2KB index.css 2KB nprogress.css 2KB nprogress.css 2KB user.css 1KB mui.poppicker.css 1KB category.css 1KB search.css 1KB cate.css 1KB user.css 882B searchList.css 831B product.css 672B bootstrapValidator.min.css 494B bootstrapValidator.css 493B base.css 303B index.css 181B mixin.css 0B variable.css 0B description 73B fontawesome-webfont.eot 162KB fontawesome-webfont.eot 69KB fontawesome-webfont.eot 69KB glyphicons-halflings-regular.eot 20KB glyphicons-halflings-regular.eot 20KB exclude 240B .gitignore 622B HEAD 174B HEAD 174B HEAD 32B HEAD 23B
productList.html 19KB index.html 13KB categorySecond.html 13KB index.html 9KB categoryFirst.html 8KB productManage.html 7KB categorySecond.html 6KB index.html 6KB cart.html 5KB userManage.html 4KB cart.html 4KB categoryFirst.html 4KB product.html 4KB product.html 4KB searchList.html 4KB searchList.html 3KB login.html 3KB login.html 3KB search.html 3KB index.html 3KB search.html 3KB address.html 3KB register.html 3KB cate.html 3KB index.html 3KB password.html 3KB category.html 3KB addressManage.html 3KB index.html 2KB login.html 2KB login.html 2KB favicon.ico 1KB favicon.ico 1KB pack-d5695bc6138f3a4f8ef0105e5ea1071b85ba08ed.idx 14KB index 37KB
detail.jpg 121KB detail.jpg 121KB banner8.jpg 120KB banner8.jpg 120KB product.jpg 81KB product.jpg 81KB user.jpg 15KB共 366 条
- 1
- 2
- 3
- 4
资源评论
嵌入式职场
- 粉丝: 4w+
- 资源: 44
最新资源
- 基于matlab开发的根据rvm回归模型自己编的matlab程序.rar
- 高效C++学生成绩管理系统：教育技术+C++17编程+数据管理+教务自动化
- 基于matlab开发的Tipping的相关向量机RVM的回归MATLAB程序，有英文注释，可以运行.rar
- 一个点击正反转程序实例，可实现案件电机正反转
- 搜索链接淘特搜索引擎共享版-tot-search-engine.rar
- 第十八届全国大学生智能汽车竞赛 摄像头组/镜头组
- 基于matlab开发的AUV惯性导航系统matlab仿真程序，包括轨迹生成、gps和sins组合、gps和dvl组合.rar
- 基于SSM的“个性化电子相册”的设计与实现.zip
- 如何在撰写科研文献时，使用ai工具辅助去完成科研工作
- 吉林大学计组笔记 自用 基于b站翼云图灵的课.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
