En11x / letao_shop

乐淘商城 移动端 mui+ 后端 express

letao_shop

乐淘商城 移动端 mui+ 后端 express

移动端

• mui 回一个ui框架,针对移动端开发的框架.只能适配移动端

特点

• 最接近原生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.底部页签

分类页

左侧边栏 里面的信息内容是 一级分类

右侧内容 里面的信息比尔是 二级分类

• 渲染动态
  • 左侧分类 需要获取一级分类数据 渲染在页面当中
  • 默认选中一个分类 加载出第一个分类对应的数据 渲染二级分类（右侧内容）
  • 点击一级分类的时候 需要去加载对应的分类数据 渲染二级分类（右侧内容）

搜索页

• 静态页面

  • 搜索表单 包含了搜索框和按钮
  • 历史搜索 两种情况
    没有历史记录的情况 显示没有搜索历史记录 有历史记录的情况 显示 历史记录 清空操作 历史列表

• 动态渲染

  • 输入搜索关键字 点击搜索 跳转搜索列表页 （把关键字传递给搜索列表页 同时记录这一次的搜索记录）
  • 需要页面初始化的时候 渲染上一次的搜索记录 （获取本地存储的数据 转换成js可以使用的数据 进行渲染）
  • 点击搜索记录对应的删除按钮 删除当前对应的历史记录 （获取本机的记录删除一条从新记录到本地存储当中）
  • 点击情况历史记录 情况所有记录 （把本来存储的数据清空）

  需求 记录10数据 如果超过加一条 删一条 如果有一样的删除 记录新的

搜索列表页

• 静态页面

  • 搜索表单
  • 搜索排序
  • 搜索列表

• 动态渲染

  • 效果

  1.下拉刷新

  2.上拉加载

  3.加载中状态

  • 功能

  初始化渲染
  1.获取地址栏关键字
  2.通过关键字去后台获取和关键字相关的商品数据
  3.渲染商品列表

  当前页搜索
  1.点击搜索按钮 获取到关键字
  2.通过关键字去后台获取和关键字相关的商品数据
  3.渲染商品列表

  排序展示
  1.点击排序按钮 获取排序方式
  2.通过当前的关键字和排序方式去后台获取相关的商品数据
  3.渲染商品列表

  下拉刷新
  1.当用户下拉页面
  2.通过关键字去后台重新获取和关键字相关的商品数据
  3.渲染商品列表

  上拉加载
  1.当用户上拉页面
  2.通过关键字去后台获取和关键字相关的商品数据（而且是根据当前页面进行获取）
  3.渲染商品列表 当时是追加到页面当中

商品详情页

• 静态页面
  • 顶部通栏
  • 底部操作栏 以前是切换
  • 商品图片 轮播图
  • 商品名称 只显示两行
  • 商品价格 原价 现价
  • 商品尺寸 选择按钮
  • 商品数量 选择数量
  • 商品详情 描述
• 动态渲染
  • 默认初始化页面的时候 渲染商品信息
  • 点击重加载按钮 刷新商品信息
  • 尺码选择
  • 数量选择
  • 加入购物车

登录

• 静态页面
  • 用户名
  • 密码
  • 登录按钮
  • 注册连接
• 动态渲染
  • 看登录的来源 1.从需要登录的页面跳转过来 登录成功之后会跳源页面
    2.直接是登录页面 登录成功之后默认进入用户首页
    3.一种接口 需要登录才能调通的接口 400 证明需要去登录 需要传递给登录也 回跳的连接

用户页面

• 展示用户信息

购物车页面

• 静态页面
  • 商品列表
  • 订单
• 动态渲染
  • 初始化 展示购物车中的商品
  • 删除购物车当中的商品
  • 修改购物车当中的商品 商品的数量和商品的尺码
  • 计算订单总金额 购物车操作后

后台管理端

用户管理

• 管理移动端登录用户，修改登录状态，禁用登录
• 管理后台管理员账号

分类管理

• 移动端分类页的管理，管理一级分类和二级分类
• 后台可以手动添加一级分类和二级分类
• 移动端会实时更新数据

商品管理

• 后台管理可以分类里面上架商品和下架商品
• 移动端会实时更新商品信息

项目启动

• 克隆项目到本地
• 导入数据库文件，注意导入sql文件时，字符编码格式选择utf-8
• 查看数据库配置，mysql 账号 root 密码 123456 端口号 3306，如果不一致，在letao/models/db.js文件中修改配置

启动项目

• 在项目根目录下，打开命令行窗口
• npm start 启动项目
• http://localhost:3000/manage 后台管理端
• http://localhost:3000/mobile 移动端
• 移动端账号：test 密码: 111111
• 后端账号：root 密码：123456

这是一个简单的学习项目，对初学者有一定的帮助