## 乐淘毕设
### 项目介绍
网站是中国主要的运动鞋、皮鞋网络零售网站,聚焦在垂直的鞋及其相关商品领域深耕。
凭借雄厚的资金实力和在电子商务业界的诚信积累,与Nike、Adidas、Converse、NewBalance等国际大牌深度合作。
保证了产品与专卖店同步更新,让您不出家门能最快速度买到当季新款名牌鞋。
### 功能介绍
| 平台 | 模块 | 功能 |
|:------:|:-----:|:-----:|
|移动端web端|首页|静态展示页面模块|
|移动端web端|分类|一级分类、二级分类|
|移动端web端|商品|搜索中心、商品列表、商品详情|
|移动端web端|购物车|购物车管理|
|移动端web端|用户|登录、注册、账户管理|
|移动端web端|收货地址|展示、添加、编辑、删除|
|-|-|-|
|pc端后台管理|登录|管理员登录|
|pc端后台管理|用户管理|用户权限管理|
|pc端后台管理|分类管理|一级分类、二级分类管理|
|pc端后台管理|商品管理|商品录入、删除、修改、展示|
### 项目架构
| 系统分层 | 使用技术 |
|------:|:----|
|数据层:|MYSQL|
|服务层:|NodeJs(express)|
|前端展示:|mobile web application,pc management system|
### 项目启动
- 使用 `mysql` 创建 `letao-shop` 数据库,导入 `docs` 下的 `sql` 文件
- 在项目根目录执行,安装依赖 `npm i`,启动项目 `npm start`
`models/db.js` 可以修改数据库密码
```js
'use strict';
const mysql = require('mysql2');
const pool = mysql.createPool({
host : '127.0.0.1',
user : 'root',
password : '12345678', // 设置为你的本地数据库密码即可
database : 'letao-shop'
});
```
移动端
- 预览 `http://localhost:3000/mobile/index.html`
- 用户名 itcast 密码 111111
- 接口文档 `./docs/前台接口文档.md`
后台管理端
- 预览 `http://localhost:3000/admin/index.html`
- 用户名 root 密码 123456
- 接口文档 `./docs/后台接口文档.md`
## 移动端
### 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),回弹动画使用原生动画
### 首页
- 充当移动端入口静态的
- 搭建页面主体架子
具体到页面功能: 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 证明需要去登录 需要传递给登录也 回跳的连接
### 用户中心
- 静态页面
- 动态渲染
+ 获取个人信息并且展示
+ 点击退出按钮进行退出
### 购物车
- 静态页面
- 商品列表
- 订单
- 动态渲染
- 初始化 展示购物车中的商品
- 删�
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
这里为你收集整理了关于毕业设计、课程设计可参考借鉴的资料一份,质量非常高,如果你投入时间去研究几天相信肯定对你有很大的帮助。到时候你会回来感谢我的。 本资源是经过本地编译测试、可打开、可运行的项目、文件或源码,可以用于毕业设计、课程设计的应用、参考和学习需求,请放心下载。 祝愿你在这个毕业设计项目中取得巨大进步,顺利毕业! 但还需强调一下,这些项目源码仅供学习和研究之用。在使用这些资源时,请务必遵守学术诚信原则和相关法律法规,不得将其用于任何商业目的或侵犯他人权益的行为。对于任何因使用本资源而导致的问题,包括但不限于数据丢失、系统崩溃或安全漏洞,风险自担哦!
资源推荐
资源详情
资源评论
收起资源包目录
毕业设计-乐淘鞋城毕业设计基于 MySQL 和 Express 的后台接口服务基于 Mui 的移动商城基于 Bo.zip (196个子文件)
bootstrap.css 143KB
bootstrap.min.css 118KB
mui.css 95KB
mui.min.css 74KB
font-awesome.css 32KB
font-awesome.min.css 27KB
bootstrap-theme.css 26KB
bootstrap-theme.min.css 23KB
common.css 3KB
product.css 3KB
cart.css 2KB
mui.picker.css 2KB
admin.css 2KB
search.css 2KB
index.css 1KB
nprogress.css 1KB
mui.poppicker.css 1KB
cate.css 1011B
user.css 818B
bootstrapValidator.min.css 484B
bootstrapValidator.css 472B
fontawesome-webfont.eot 69KB
glyphicons-halflings-regular.eot 20KB
.gitignore 584B
index.html 12KB
productManage.html 7KB
categorySecond.html 6KB
userManage.html 4KB
cart.html 4KB
categoryFirst.html 4KB
product.html 4KB
searchList.html 3KB
search.html 3KB
address.html 3KB
register.html 3KB
cate.html 3KB
index.html 3KB
password.html 3KB
addressManage.html 3KB
index.html 2KB
login.html 2KB
login.html 2KB
favicon.ico 1KB
detail.jpg 121KB
banner8.jpg 120KB
product.jpg 81KB
user.jpg 15KB
none.jpg 2KB
echarts.min.js 544KB
echarts.common.min.js 340KB
city.js 267KB
jquery.js 262KB
bootstrapValidator.js 259KB
mui.js 241KB
echarts.simple.min.js 227KB
mui.min.js 115KB
jquery.min.js 90KB
bootstrapValidator.min.js 87KB
bootstrap.js 68KB
jquery.fileupload.js 62KB
bootstrap.min.js 36KB
zepto.min.js 26KB
bootstrap-paginator.js 20KB
template-debug.js 16KB
jquery.ui.widget.js 16KB
gr_EL.js 15KB
bg_BG.js 14KB
template-native-debug.js 13KB
ar_MA.js 13KB
da_DK.js 12KB
nprogress.js 12KB
hu_HU.js 12KB
es_ES.js 12KB
it_IT.js 12KB
es_CL.js 12KB
vi_VN.js 12KB
product.js 12KB
pt_BR.js 12KB
fr_FR.js 11KB
tr_TR.js 11KB
de_DE.js 11KB
cs_CZ.js 11KB
mui.picker.js 11KB
en_US.js 11KB
pl_PL.js 11KB
nl_NL.js 11KB
zh_TW.js 11KB
zh_CN.js 11KB
be_NL.js 11KB
product.js 11KB
jquery.iframe-transport.js 10KB
bootstrap-paginator.min.js 9KB
mui.lazyload.js 8KB
product.js 6KB
productMange.js 6KB
touch.js 6KB
category.js 6KB
product.js 6KB
user.js 5KB
template.js 5KB
共 196 条
- 1
- 2
资源评论
高校毕业设计
- 粉丝: 210
- 资源: 384
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 62道Redis高频题整理(附答案背诵版).md
- 后台请求的数据解析的东西
- WinForms 绘制时钟.zip
- 工具变量巡回DID数据(2000-2022).txt
- EDA实验课设-基于FPGA设计的贪吃蛇小游戏quartus工程Verilog源码+课设文档报告.zip
- 111111111111111111111111111111
- 基于深度学习的肿瘤辅助诊断系统,以图像分割为核心,利用人工智能完成肿瘤区域的识别勾画并提供肿瘤区域的特征来辅助医生进行诊断
- EDA实验课设-基于FPGA设计的洗衣机控制器quartus工程Verilog源码+课设文档报告.zip
- ffmpeg2.tar.gz
- layer.open弹出框加载时间选择器
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功