网站主要做运动鞋、皮鞋网络零售,聚焦在垂直
网站主要做运动鞋、皮鞋网络零售,聚焦在垂直的鞋及其相关商品领域深耕。
技术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 对象最常见的一个用法就是存储用户的首选项。
环境搭建项目后台编程语言是nodejs所有必须安装nodejs软件 项目github主页 https://github.com/ForeManWang/mui_bootstrap_letao 可使用git拉取源代码一般在进行前后分离开发需要配置好本地开发环境,
也就是说需要在本地搭建后台开发环境,node,java,php,等后台编程语言,提供接口支持。
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、网站不提供资料下载,如需下载请到原作者页面进行下载。