准备UI设计稿
小图片切图, svg===> iconfont—> 字体图标
2x, 3x图片区别?
移动端,适应不同像素比, dpl
https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
对移动端:
1: 尺寸还原技巧.
如果是iphone6: dpl=2====> 设计稿高度为80px, 则 实际物理像素 = 40px
实际物理像素(代码中) * dPL = 设计稿高度
2. 文件根目录引入视口, meta 标签, 禁止缩放, 重置样式 reset.css
3.
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>selltitle>
<link rel="stylesheet" href="static/css/reset.css">
head>
<body>
<div id="app">div>
body>
html>
loader(url-loader), 将图片打包为base64,将文件打包到js文件中,
2.2 SVGsvg是矢量图片, 优势可以伸缩, 放大时候图片图片质量不会下降.
(将色彩单一图片制作为 svg 图片), 不能直接使用, 需要将文字转换为
icon-font,字体文件, 通过(icon-moon 网站 *** 作), 在css 中引入图标字体文件.
三 制作图标字体文件https://blog.csdn.net/qq_35812380/article/details/125076675
四 项目目录设计
├─build
├─config
├─node_modules
├─resource-------资源文件
├─src
│ ├─common-----公共资源
│ │ ├─fonts
│ │ ├─js
│ │ └─stylus----预处理模块: .styl格式的文件/ .less , .scss文件
│ └─components—组件资源
│ └─header
└─static
前后端分离方式, 前后端各司其职, 各自开发, 联调
SPA中(单页应用中), 前后端联调,
前端需要一些Mock(假数据), 模拟服务端请求.
设计数据结构, 最后形成真正的生成中的数据库
首先:
需要设计服务端返回的数据结构, 这块也是问题的重点, 根据需求具体抽象出合理的数据结构, 进行业务上的抽象, 这点最难也最重要,
从需求中提取出需要的字段? 如何更合理的取用, 进行合理的交互?
seller(商家相关字段)
goods:(商品相关字段)
ratings: 商家的一些评论
参考别人的接口返回数据, 多思考…
为了模拟数据源, 真实生产环境的数据库…
从源中读取数据
{
"seller": {
"name": "粥品香坊（回龙观）",
"description": "蜂鸟专送",
"deliveryTime": 38,
"score": 4.2,
"serviceScore": 4.1,
"foodScore": 4.3,
"rankRate": 69.2,
"minPrice": 20,
"deliveryPrice": 4,
"ratingCount": 24,
"sellCount": 90,
"bulletin": "粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。",
"supports": [
{
"type": 0,
"description": "在线支付满28减5"
},
{
"type": 1,
"description": "VC无限橙果汁全场8折"
},
{
"type": 2,
"description": "单人精彩套餐"
},
{
"type": 3,
"description": "该商家支持发票,请下单写好发票抬头"
},
{
"type": 4,
"description": "已加入“外卖保”计划,食品安全保障"
}
],
"avatar": "http://www.kaotop.com/file/tupian/20220606/seller_avatar_256px.jpg",
"pics": [
"http://www.kaotop.com/file/tupian/20220606/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180",
"http://www.kaotop.com/file/tupian/20220606/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180",
"http://www.kaotop.com/file/tupian/20220606/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180",
"http://www.kaotop.com/file/tupian/20220606/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180"
],
"infos": [
"该商家支持发票,请下单写好发票抬头",
"品类:其他菜系,包子粥店",
"北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340",
"营业时间:10:00-20:30"
]
},
"goods": [
{
"name": "热销榜",
"type": -1,
"foods": [
{
"name": "皮蛋瘦肉粥",
"price": 10,
"oldPrice": "",
"description": "咸粥",
"sellCount": 229,
"rating": 100,
"info": "一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Qd与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "很喜欢的粥",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 1,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "扁豆焖面",
"price": 14,
"oldPrice": "",
"description": "",
"sellCount": 188,
"rating": 96,
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 1,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"info": "",
"icon": "http://www.kaotop.com/file/tupian/20220606/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "葱花饼",
"price": 10,
"oldPrice": "",
"description": "",
"sellCount": 124,
"rating": 85,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 1,
"text": "没啥味道",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 1,
"text": "很一般啊",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "牛肉馅饼",
"price": 14,
"oldPrice": "",
"description": "",
"sellCount": 114,
"rating": 91,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 1,
"text": "难吃不推荐",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "招牌猪肉白菜锅贴/10个",
"price": 17,
"oldPrice": "",
"description": "",
"sellCount": 101,
"rating": 78,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 1,
"text": "不脆,不好吃",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "南瓜粥",
"price": 9,
"oldPrice": "",
"description": "甜粥",
"sellCount": 91,
"rating": 100,
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "红豆薏米美肤粥",
"price": 12,
"oldPrice": "",
"description": "甜粥",
"sellCount": 86,
"rating": 100,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "八宝酱菜",
"price": 4,
"oldPrice": "",
"description": "",
"sellCount": 84,
"rating": 100,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "红枣山药糙米粥",
"price": 10,
"oldPrice": "",
"description": "",
"sellCount": 81,
"rating": 91,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "糊塌子",
"price": 10,
"oldPrice": "",
"description": "",
"sellCount": 80,
"rating": 93,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750"
}
]
},
{
"name": "单人精彩套餐",
"type": 2,
"foods": [
{
"name": "红枣山药粥套餐",
"price": 29,
"oldPrice": 36,
"description": "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
"sellCount": 17,
"rating": 100,
"info": "",
"ratings": [
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750"
}
]
},
{
"name": "冰爽饮品限时特惠",
"type": 1,
"foods": [
{
"name": "VC无限橙果汁",
"price": 8,
"oldPrice": 10,
"description": "",
"sellCount": 15,
"rating": 100,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "还可以",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
}
]
},
{
"name": "精选热菜",
"type": -1,
"foods": [
{
"name": "娃娃菜炖豆腐",
"price": 17,
"oldPrice": "",
"description": "",
"sellCount": 43,
"rating": 92,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "菜量还可以,味道还可以",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "手撕包菜",
"price": 16,
"oldPrice": "",
"description": "",
"sellCount": 29,
"rating": 100,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "香酥黄金鱼/3条",
"price": 11,
"oldPrice": "",
"description": "",
"sellCount": 15,
"rating": 100,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750"
}
]
},
{
"name": "爽口凉菜",
"type": -1,
"foods": [
{
"name": "八宝酱菜",
"price": 4,
"oldPrice": "",
"description": "",
"sellCount": 84,
"rating": 100,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "拍黄瓜",
"price": 9,
"oldPrice": "",
"description": "",
"sellCount": 28,
"rating": 100,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/750/h/750"
}
]
},
{
"name": "精选套餐",
"type": -1,
"foods": [
{
"name": "红豆薏米粥套餐",
"price": 37,
"oldPrice": "",
"description": "红豆薏米粥,三鲜干蒸烧卖,拍黄瓜",
"sellCount": 3,
"rating": 100,
"info": "",
"ratings": [
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "皮蛋瘦肉粥套餐",
"price": 31,
"oldPrice": "",
"description": "",
"sellCount": 12,
"rating": 100,
"info": "",
"ratings": [
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/750/h/750"
}
]
},
{
"name": "果拼果汁",
"type": -1,
"foods": [
{
"name": "蜜瓜圣女萝莉杯",
"price": 6,
"oldPrice": "",
"description": "",
"sellCount": 1,
"rating": "",
"info": "",
"ratings": [],
"icon": "http://www.kaotop.com/file/tupian/20220606/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "加多宝",
"price": 6,
"oldPrice": "",
"description": "",
"sellCount": 7,
"rating": 100,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "VC无限橙果汁",
"price": 8,
"oldPrice": 10,
"description": "",
"sellCount": 15,
"rating": 100,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "还可以",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
}
]
},
{
"name": "小吃主食",
"type": -1,
"foods": [
{
"name": "扁豆焖面",
"price": 14,
"oldPrice": "",
"description": "",
"sellCount": 188,
"rating": 96,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 1,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "葱花饼",
"price": 10,
"oldPrice": "",
"description": "",
"sellCount": 124,
"rating": 85,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 1,
"text": "没啥味道",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 1,
"text": "很一般啊",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "牛肉馅饼",
"price": 14,
"oldPrice": "",
"description": "",
"sellCount": 114,
"rating": 91,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 1,
"text": "难吃不推荐",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "招牌猪肉白菜锅贴/10个",
"price": 17,
"oldPrice": "",
"description": "",
"sellCount": 101,
"rating": 78,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 1,
"text": "不脆,不好吃",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "糊塌子",
"price": 10,
"oldPrice": "",
"description": "",
"sellCount": 80,
"rating": 93,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750"
}
]
},
{
"name": "特色粥品",
"type": -1,
"foods": [
{
"name": "皮蛋瘦肉粥",
"price": 10,
"oldPrice": "",
"description": "咸粥",
"sellCount": 229,
"rating": 100,
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "很喜欢的粥",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 1,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "南瓜粥",
"price": 9,
"oldPrice": "",
"description": "甜粥",
"sellCount": 91,
"rating": 100,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "红豆薏米美肤粥",
"price": 12,
"oldPrice": "",
"description": "甜粥",
"sellCount": 86,
"rating": 100,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "红枣山药糙米粥",
"price": 10,
"oldPrice": "",
"description": "",
"sellCount": 81,
"rating": 91,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "鲜蔬菌菇粥",
"price": 11,
"oldPrice": "",
"description": "咸粥",
"sellCount": 56,
"rating": 100,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": ""
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/750/h/750"
},
{
"name": "田园蔬菜粥",
"price": 10,
"oldPrice": "",
"description": "咸粥",
"sellCount": 33,
"rating": 100,
"info": "",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "2******3",
"rateTime": 1469271264000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
},
{
"username": "3******b",
"rateTime": 1469261964000,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png"
}
],
"icon": "http://www.kaotop.com/file/tupian/20220606/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://www.kaotop.com/file/tupian/20220606/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/750/h/750"
}
]
}
],
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"deliveryTime": 30,
"score": 5,
"rateType": 0,
"text": "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": [
"南瓜粥",
"皮蛋瘦肉粥",
"扁豆焖面",
"娃娃菜炖豆腐",
"牛肉馅饼"
]
},
{
"username": "2******3",
"rateTime": 1469271264000,
"deliveryTime": "",
"score": 4,
"rateType": 0,
"deliveryTime": "",
"text": "服务态度不错",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": [
"扁豆焖面"
]
},
{
"username": "3******b",
"rateTime": 1469261964000,
"score": 3,
"rateType": 1,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "1******c",
"rateTime": 1469261864000,
"deliveryTime": 20,
"score": 5,
"rateType": 0,
"text": "良心店铺",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "2******d",
"rateTime": 1469251264000,
"deliveryTime": 10,
"score": 4,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "9******0",
"rateTime": 1469241964000,
"deliveryTime": 70,
"score": 1,
"rateType": 1,
"text": "送货速度蜗牛一样",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "d******c",
"rateTime": 1469231964000,
"deliveryTime": 30,
"score": 5,
"rateType": 0,
"text": "很喜欢的粥店",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "2******3",
"rateTime": 1469221264000,
"deliveryTime": "",
"score": 4,
"rateType": 0,
"text": "量给的还可以",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "3******8",
"rateTime": 1469211964000,
"deliveryTime": "",
"score": 3,
"rateType": 1,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "a******a",
"rateTime": 1469201964000,
"deliveryTime": "",
"score": 4,
"rateType": 0,
"text": "孩子喜欢吃这家",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": [
"南瓜粥"
]
},
{
"username": "3******3",
"rateTime": 1469191264000,
"deliveryTime": "",
"score": 4,
"rateType": 0,
"text": "粥挺好吃的",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "t******b",
"rateTime": 1469181964000,
"deliveryTime": "",
"score": 3,
"rateType": 1,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "f******c",
"rateTime": 1469171964000,
"deliveryTime": 15,
"score": 5,
"rateType": 0,
"text": "送货速度很快",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "k******3",
"rateTime": 1469161264000,
"deliveryTime": "",
"score": 4,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "u******b",
"rateTime": 1469151964000,
"deliveryTime": "",
"score": 4,
"rateType": 0,
"text": "下雨天给快递小哥点个赞",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "s******c",
"rateTime": 1469141964000,
"deliveryTime": "",
"score": 4,
"rateType": 0,
"text": "好",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "z******3",
"rateTime": 1469131264000,
"deliveryTime": "",
"score": 5,
"rateType": 0,
"text": "吃了还想再吃",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "n******b",
"rateTime": 1469121964000,
"deliveryTime": "",
"score": 3,
"rateType": 1,
"text": "发票开的不对",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "m******c",
"rateTime": 1469111964000,
"deliveryTime": 30,
"score": 5,
"rateType": 0,
"text": "好吃",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "l******3",
"rateTime": 1469101264000,
"deliveryTime": 40,
"score": 5,
"rateType": 0,
"text": "还不错吧",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "3******o",
"rateTime": 1469091964000,
"deliveryTime": "",
"score": 2,
"rateType": 1,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "3******p",
"rateTime": 1469081964000,
"deliveryTime": "",
"score": 4,
"rateType": 0,
"text": "很喜欢的粥",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "o******k",
"rateTime": 1469071264000,
"deliveryTime": "",
"score": 5,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
},
{
"username": "k******b",
"rateTime": 1469061964000,
"deliveryTime": "",
"score": 4,
"rateType": 0,
"text": "",
"avatar": "http://www.kaotop.com/file/tupian/20220606/default_header.png",
"recommend": []
}
]
}
然后; 技术上模拟服务端请求, 本地联调后, 联调真实服务端.
方式1 :本地data.json 文件, 通过 $.getJSON , 读取文件 / 直接使用模块导入变量, (es6 规范, ------CMD, modules.exports/ exports方式导出,AMD方式)
方式2: 使用本地自建服务, node-api,服务, 结合 express/Koa框架, 服务端使用Mysql / MongoDB,…等方式
本地启动一个node-server, / json server api 方式, 进行前后端模拟
使用开源Mock网站, 如通用的 easyMock, Mock.js ,等方式, 进行模拟
缺点: 需要使用特定规则进行生成模板, 需要掌握特定写法, 不够灵活
依照需求, 推荐使用: 方式1/ 2
为了模拟数据源, 真实生产环境的数据库…
在本框架中使用express方式, 暴露接口, 模拟用户的请求
(express 框架如何快速生成一个本地的server端进行模拟?)
Express 手写Node服务器…
https://www.expressjs.com.cn/
const express = require('express')
// 导入模拟数据
const appData = require('./../data.json')
// 模拟后台请求
var app = express()
var apiRoutes = express.Router()// 拿到路由
apiRoutes.get('/seller', function (req, res){
res.json({
errno: 0, // 请求数据错误
data:appData.seller
})
})
apiRoutes.get('/goods', function (req, res){
res.json({
errno: 0,
data:appData.goods
})
})
apiRoutes.get('/ratings', function (req, res){
res.json({
errno: 0,
data:appData.ratings
})
})
// 这样每个接口,通过 /api/seller 方法调用
// 启动后,
本地打开
http://localhost:8080/api/seller,
http://localhost:8080/api/goods ,
http://localhost:8080/api/ratings,
查看页面数据
Vue-router
https://blog.csdn.net/weixin_45606067/article/details/112617190#1vuerouter_4
模块分治
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）