*** 《饿了吗》外卖商家页面***
一、项目需求分析
![](https://i-blog.csdnimg.cn/blog_migrate/d544272bb13d896e58746387f53d2d59.jpeg)
SPA(单页面开发): 快、局部刷新、减少请求大小、体验有明显变化;
实现原理: 在页面中,如果只是锚点发生变化时,是不会有任何的请求操作的,只是在当前页面找对应的锚点位置;另外锚点值发生变化时是可以监听到的,所以可以利用JS当锚点值的改变时,向服务器发起数据请求,获取到数据之后,只需要局部刷新页面即可
二、项目资源
在webpack构建项目中,最好都是使用单张图,因为webpack会帮我们将图片进行打包,将图片图片base64之后打包到js文件中,即没有大图时根本都不会有图片请求操作(只有大于10KB的图片才会生成静态文件)。另外,移动端图片一般都分普通图、2倍图、3倍图,不同屏幕分辨率对应不同图片。
屏幕像素关于设备像素比
字体图标
为什么使用字体图标,字体图标的制作,字体图标的使用,查看Bootstrap之字体图标。
三、项目目录
index.html即是一个空壳,里面装了一个App.vue大组件,页面显示都是一个个小的组件组合,添加到App.vue中。
- src项目源码文件
-
components
目录组件资源,但一般一个组件又会对应一个文件夹,方便管理该组件对应的资源,组件维护是就近原则; -
common
目录存放公共的模块、公共的资源,在该目录下一般会创建js
、fonts
、stylus
;
将字体图标字体拷贝到fonts目录中,另外将字体样式
style.css
拷贝到stylus目录中,文件名改为icon.styl
,就是使用stylus
语法,另外还需要对文件进行简单的处理(删除{}
,删除;
)
-assets
目录可以不需要,直接删除; -
四、项目数据
项目是前后端分离,项目中的数据获取数据一般通过ajax异步获取到数据。
seller: 商家信息
goods: 商品列表
ratings: 评论列表
-
dev-server.js
启动node服务,即可以在dev-server.js
中利用express
模块来定义接口请求
var express = require('express');
var app = express();
// 路由器
var routes = express.Router();
// 网站首页接受 GET 请求
routes.get('/seller', (req, res) => {
// 客户端的相应即返回一个json数据
res.json({
data: {name: '张三'},
errno: 0 // 表示没有错误
});
});
routes.get('/goods', (req, res) => {
...
});
// 注意: 是express中的API,不是Vue中的
// app.use 加载用于处理http请求的middleware(中间件),当一个请求来的时候先经过中间件处理
app.use('/api', routes);
json格式化工具:
- http://tool.oschina.net/codeformat/json
- http://json.cn/
- 谷歌浏览器jsonview插件
五、页面标签样式的重置
页面中很多样式都需要重置的,而这个代码不需要编译生成,所以就是添加在static
目录中,可以自动手动写,也可以参考其他网站写法,或者直接使用cssreset。另外index.html
就是一个外壳框架,所以就只需要在这里引入该样式即可。