外卖需求分析:
可参考 饿了么外卖
从页面来分{
头部{
商家描述,
公告,--> 浮层 -->有个关闭按钮 ---> 关闭,
详情,--> 浮层
}
内容区{
商品页,
评价页,
商家详情页,
点击按钮可进行页面切换(由于是spa的单页面,所以点击按钮时不会刷新整个页面)
}
}
商品页{
左{
商品分类
}
右{
商品列表{
加号,--> 点击可联动购物车,
减号
}
}
底部{
购物车{
当金额大于最小配送费时,可以点击去结算按钮,
当购物车数量为零时,点击购物车,无反应,
当不为零时,点击后显示购物车列表,再次点击后,列表进行隐藏,
有一个最大高度,当列表超过最大高度时,可以进行滚动
}
}
}
商品{
点击商品时,会出现详情页浮层,
各种数据,也要和购物车进行联动,
底部有评论区,我们可以条件查看,
页面超过手机屏高时,可以进行滚动,
页面左上角有返回按钮,点击浮层关闭
}
评论区{
上面是 商家评星级别,
下面是具体评论区(与商品底部评论区大同小异)
}
商家详情页{
商家的各种信息;
有个收藏按钮,点击后,可进行收藏,关注商家
当图片内容超出手机屏宽时,可进行滚动,
当详情页超出手机屏高时,可进行滚动
}
素材需求
最好将图片变为单张图片
因为在webpack的urlLoader会将图片转换为base64,然后打包到资源文件中,这样就不需要请求图片资源了
图标字体文件生成:
首先需要有些svg文件
1.打开 icomoon.io 这个网站
2.点击 icomoon app
3.点击 import icons
4.选择自己的svg文件
5.选择所有的untitled set
6.点击右下角的generate font
7.右下角download
8.解压出来
9.将fonts文件夹放入src/common (没有common的话创建一个)
10.style.css放入 src/common/stylus 并改名为icon.styl
11.将上一步的文件中的所有 分号 和所有的 大括号 删掉(stylus语法)
12.完成
数据模拟
首先需要些模拟数据放入/sell/data.json里(需要自己创建)
1.打开/build/webpack.dev.conf.js
2.在第13行后插入下列代码
//获取数据
const app = express() //请求server
var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
//请求路由
var apiRoutes = express.Router();
//定义完后,想要通过express使用,需要调用express app
app.use('/api', apiRoutes); //这样就可以通过 "/api/goods" 来请求数据
3.在devServer:{
}
的首行插入以下代码
before(app) {
app.get('/api/seller', (req, res) => {
res.json({
errno: 0,
data: seller
})//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
})
app.get('/api/goods', (req, res) => {
res.json({
errno: 0,
data: goods
})
})
app.get('/api/ratings', (req, res) => {
res.json({
errno: 0,
data: ratings
})
})
},
4.用 npm run dev 进行测试
5.可以使用/api/goods可以进行路由
6.如果嫌弃路由现实的数据格式不好看,可以安装一个jsonview插件(chrom的插件)