网站主要做运动鞋、皮鞋网络零售,聚焦在垂直

优品购电商

网站主要做运动鞋、皮鞋网络零售,聚焦在垂直的鞋及其相关商品领域深耕。

技术

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://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),回弹动画使用原生动画

首页模块 页面骨架

<!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 二级分类删除 商品管理 商品分页展示 商品添加 商品修改 商品删除

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。