*** 《饿了吗》外卖商家页面***
一、项目需求分析
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就是一个外壳框架，所以就只需要在这里引入该样式即可。
作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论