优品购电商
网站主要做运动鞋、皮鞋网络零售，聚焦在垂直的鞋及其相关商品领域深耕。
技术
mui、bootstrap、mysql
功能介绍
| 平台 | 模块 | 功能 |
|---|---|---|
| 移动端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/ForeManWang/mui_bootstrap_letao
- 可使用git拉取源代码
git仓库地址 https://github.com/ForeManWang/mui_bootstrap_letao
克隆项目：$ git clone https://github.com/ForeManWang/mui_bootstrap_letao
进入目录：$ cd mui_bootstrap_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
接口列表
移动端接口列表
- 用户模块
- 产品模块
- 分类模块
- 购物车
- 收货地址模块
pc端接口列表
- 员工模块
- 产品模块
- 分类模块
- 用户模块
移动端web端
MUI
-
Mui 是一个ui框架 针对移动端开发的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），回弹动画使用原生动画
首页模块
- 页面骨架
<!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">
<div class="lt_wrapper"></div>
</div>
<footer class="lt_tabBar"></footer>
</div>
<script src="assets/mui/js/mui.js"></script>
</body>
</html>- 轮播图
- 导航栏
- 商品区
分类浏览
- 分类页面
- 菜单区域滚动
- 一级菜单渲染
- 二级分类联动渲染
搜索中心
- 搜索中心页面
- 搜索查询功能
- 搜索记录管理
商品列表
- 商品列表页面
- 搜索查询功能
- 商品列表渲染
- 列表排序功能
- 上拉刷新功能
- 下拉加载功能
商品详情
- 商品详情页面
- 商品数据展示
- 商品尺码选择
- 商品数量选中
- 加入购物车
购物车
- 购物车商品展示
- 购物车商品删除
- 购物车商品编辑
- 购物车下拉刷新
- 购物车总额计算
用户模块
-
用户登录
1.1 用户登录页面 1.2 异步登录 1.3 登录回跳 -
个人中心
2.1 个人中心页面 2.2 个人信息展示 2.3 退出功能 -
用户注册
3.1 用户注册页面 3.2 获取短信验证 3.3 用户注册功能
pc端后台管理
bootstrap
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。
还有很多基于bootstrap的插件，如paginator,validator
管理员登录
- 管理员登录页面
- 异步登录交互
首页模块
- 首页快速搭建
- 菜单功能
- 退出功能
- 数据可视化
用户管理
1.用户分页展示 2.用户禁用启用
分类管理
-
一级分类管理
1.1 一级分类分页展示 1.2 一级分类添加 1.3 一级分类删除 -
二级分类管理
1.1 二级分类分页展示 1.2 二级分类添加 1.3 二级分类删除
商品管理
- 商品分页展示
- 商品添加
- 商品修改
- 商品删除