需求分析
1.从页面来分，分为头部和内容区。其中头部包括展示的那部分和一个浮层。内容区包括评价页，商品页和商家详情页。
2.项目所做的是SPA单页面应用，所以切换子页面时，不会去刷新整个页面。
3.对于头部，当我们点击公告和上面的数字时，需要展示黑色浮层(最后一张图片)，浮层上有关闭按钮，点击按钮，浮层关闭。
4.对于内容区，最复杂的是商品页，商品页拆分为左右两栏，左侧是商品的分类，右侧是商品的实际列表。当实际商品的展示区是哪个分类时，对应左侧的分类高亮显示。当左右两侧内容超过可视区域时，两边都可以滚动。注意：当滚动右侧内容区，左侧对应的列表也要保持联动的效果。当右侧快速滚动时，左侧也要保持联动的效果。这样实现一个外卖app的体验。(将这个滚动当做一个技术难点)
5.页面底部是一个购物车，当我们点击加号，即购买某个商品时候，购物车会自动，联动购买的商品总数和金额这两部分。当金额超过最小配送费(比如20元起送)时，右下角展示区结算的按钮，可以点击该按钮进行结算。当购物车数量为0时，点击购物车没反应，当购物车数量不为0时，点击购物车时，会显示购物车列表。再点击购物车，该列表会隐藏。其中购物车列表也有最大高度，超过最大高度时，内部也可以滚动。在购物车列表内部，也可以完成购买流程，其中在内部点击按钮改变商品数量时，内容页的也会有联动的效果。
当我们点击某个具体的商品时，会展示该商品详情页的一个浮层。该页面有一个与手机屏幕自适应的宽和高相同的大图。接着是商品的一些介绍，然后我们点击加入购物车按钮，一样可以完成购买流程，该数据也是和购物车做联动的。底下是一个评论区，我们可以条件查看。当整个浮层页面超过手机高度时，可以滚动。页面左侧有一个返回按钮，点击返回按钮，该页面会关闭。
6.页面的第2部分：评论区，当评论区超过手机页面高度时，也可以滚动。
7.页面的第3部分：商家详情页，主要是商家的一些信息的展示。其中页面有个收藏的区块，我们可以点击这个按钮，收藏和关注商家。
对于商家实景图，当它的宽度超过手机屏幕宽度时，是可以进行滚动的。
项目目录
对于图片，一般移动端都需要切2x和3x图，以适应不同dpr的手机，dpr的定义如下：
在一些视网膜屏幕，比如常说的retina屏幕，dpr都会大于1，比如：iphone6为2，iphone6plus为3。比值越大，显示的密度越高。
为什么要切成单张的图片？
通常使用css sprites精灵图将多张icon图片合成一张图片，减少图片的请求个数，以达到性能优化的目的。webpack构建项目中，一般使用单张图片，因为webpack的urlLoader会帮我们做图片打包的事情，将图片先转为base64，然后打包到js文件中，这样设置连一个图片请求的资源都没有。
svg图片
svg是矢量图片，它的优势是可以伸缩，当我们将它放大时，图片质量不会下降。在移动端开发时，通常将一些色彩单一的图片做成矢量图片。在代码中，通过使用工具将svg图片转为图标字体文件来使用，然后在css中引入图片字体文件来使用。
使用iconMoon做图标字体
点击iconMoon App按钮，点击到import icons按钮，然后选择所有的svg图片，上传到iconMoon的网站中，选中这些小图标，点击右下角的generate font按钮生成图标字体，
点击get code，显示如下：，通过以下方式来使用图标字体，Html和css模板如下，两者都不可缺少。
点击页面的preference按钮，可以设置font-name，类名前缀以及浏览器的支持。
点击download将其下载，将zip文件加压缩。
项目目录设计
项目所有的代码都放在src文件下面，入口文件：main.js，app.vue文件是整个页面的vue实例文件，即把整个页面看成vue的一个大组件。
components目录
components存在组件文件，组件一个很重要的设计原则是：就近维护，把组件相关的资源都放在目录下，对外是隔离的，有利于代码的维护。
common目录
包含一些公共的资源，有fonts,js和stylus三个文件，stylus是css的预处理器，和less，sass的功能差不多，语法上略有差别。
将style.css改名为icon.styl，语法也更改一下：将括号和分号删除，如下：
现在流行的开发方式是前后端分离的方式。前后端分离各司其职，各自开发，最后放在一起整合。前后端交互方式是通过ajax请求去获取数据。
之前写的图标字体，项目目录和mock数据都不见了，伤心(这块还是看视频吧，为什么每次用markdown都出问题，搞不懂)
mock数据，模拟后台数据
数据都放在data.json文件中，模拟的数据请求时从data.json中读取一些数据。接下来编写这些接口。build目录下的dev-server.js文件是webpack打包的入口文件，
var appData=require("../data.json");
var seller=appData.seller;
var goods=appData.goods;
var ratings=appData.ratings;以上通过三个变量seller，goods和ratings保存三种数据。
var express=require("express");// 引入了 express 模块
var app = express();// express() 是一个由 express 模块导出的入口（top-level）函数。通过express框架启动node server，利用express的router编写这些接口请求，如下所示：
var apiRoutes=express.Router();//express router编写接口请求
//编写一些接口
apiRoutes.get('/seller',function (req,res) {
//服务端收到这个请求后，需要给客户端传一个json类型的数据，
res.json({
errno:0, //开发规范中，都会在返回一个接口时，有一个字段为errno，通过errno为0，这个请求对象是正常的。errno是业务方自己定的一些错误码。
data:seller
});
});
apiRoutes.get('/goods',function (req,res) {
res.json({
errno:0,
data:goods
});
});
apiRoutes.get('/ratings',function (req,res) {
res.json({
errno:0,
data:ratings
});
});
//use的第一个参数为path,所有接口相关的api都会通过api路由，比如：通过/api/goods就可以请求到数据
app.use('/api',apiRoutes);通过npm run dev启动项目。比如以下通过/api/seller请求到数据：
问题：本地的数据是如何通过express router获取到数据的？？