需求分析
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獲取到數據的？？