乐淘鞋城,毕业设计;基于 MySQL 和 Express 的后台接口服务,基于 Mui 的移动商城,基于 Bootstrap 的后台管理系统
网站是中国主要的运动鞋、皮鞋网络零售网站,聚焦在垂直的鞋及其相关商品领域深耕。 凭借雄厚的资金实力和在电子商务业界的诚信积累,与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
可以修改数据库密码
'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
./docs/前台接口文档.md
后台管理端
http://localhost:3000/admin/index.html
./docs/后台接口文档.md
特点
具体到页面功能: 1.顶部通栏 2.轮播图 3.导航栏 4.运动生活专区 5.底部页签
<!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>
/*初始化区域滚动组件 当超过了父容器大小的时候生效*/
mui(".mui-scroll-wrapper").scroll();
/*轮播图的初始化*/
mui(".mui-slider").slider({
interval: 4000,
});
左侧边栏 里面的信息内容是 一级分类
右侧内容 里面的信息比尔是 二级分类
/*初始左侧滚动*/
mui(".lt_cateLeft").scroll();
/*初始右侧滚动*/
mui(".lt_cateRight").scroll();
图片如果加载不成功显示默认图片 onerror="失败的时候去替换原来错误的地址 为默认图片的地址" onerror="this.src = 'images/none.jpg' "
静态页面
搜索表单 包含了搜索框和按钮
历史搜索
两种情况
没有历史记录的情况 显示没有搜索历史记录
有历史记录的情况 显示 历史记录 清空操作 历史列表
动态渲染
静态页面
动态渲染
效果
1.下拉刷新
2.上拉加载
3.加载中状态
功能
初始化渲染
1.获取地址栏关键字
2.通过关键字去后台获取和关键字相关的商品数据
3.渲染商品列表
当前页搜索
1.点击搜索按钮 获取到关键字
2.通过关键字去后台获取和关键字相关的商品数据
3.渲染商品列表
排序展示
1.点击排序按钮 获取排序方式
2.通过当前的关键字和排序方式去后台获取相关的商品数据
3.渲染商品列表
下拉刷新
1.当用户下拉页面
2.通过关键字去后台重新获取和关键字相关的商品数据
3.渲染商品列表
上拉加载
1.当用户上拉页面
2.通过关键字去后台获取和关键字相关的商品数据(而且是根据当前页面进行获取)
3.渲染商品列表 当时是追加到页面当中
- 静态页面
- 动态渲染
+ 获取个人信息并且展示
+ 点击退出按钮进行退出
目录结构:后台的目录全部在admin目录下面
页面基本模板
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>后台管理系统-登录</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/admin.css"/>
</head>
<body>
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="js/admin.js"></script>
</body>
</html>
```
静态的页面
动态交互
基于 bootstrap 的前端校验插件 《bootstrapvalidator》
文档参考 http://blog.csdn.net/nazhidao/article/details/51542508 http://blog.csdn.net/u013938465/article/details/53507109 http://www.cnblogs.com/v-weiwang/p/4834672.html?ptvd http://bootstrapvalidator.votintsev.ru/api/
between:检测输入的值是否在两个指定的值之间。
callback:通过回调函数返回验证信息。
creditCard:验证信用卡格式。
different:如果输入值和给定的值不同返回true。
digits:如果输入的值只包含数字返回true。
emailAddress:验证电子邮件格式是否有效。
greaterThan:如果输入的值大于或等于指定的值返回true。
hexColor:验证一个hex格式的颜色值是否有效。
identical:验证输入的值是否和指定字段的值相同。
lessThan:如果输入的值小于或等于指定的值返回true。
notEmpty:检测字段是否为空。
regexp:检测输入值是否和指定的javascript正则表达式匹配。
remote:通过AJAX请求来执行远程代码。
stringLength:验证字符串的长度。
uri:验证URL地址是否有效。
usZipCode:验证美国的邮政编码格式。
defaultSubmit 默认提交表单
disableSubmitButtons禁用或启用提交按钮
enableFieldValidators 启用/禁用所有给定的字段验证器 (如果 true,使字段验证器。如果 false禁用字段验证器)
getFieldElements 检索字段元素的名字
isValid 返回 true如果所有的表单字段是有效的。否则,返回 false.
resetForm 重置表单
updateElementStatus 更新验证给定元素的结果
updateStatus(field, status, validatorName) 更新为给定字段验证器的结果,status可以
NOT_VALIDATED, VALIDATING, INVALID或 VALID,validatorName 字符串 验证器的名称。如果 null所有验证器,更新方法有效性的结果
渲染图表
数据可视化 插件 echarts http://echarts.baidu.com/ 数据可视化 插件 echarts https://www.hcharts.cn/demo/highcharts