vue高仿餓了麼APP(三)

2022-03-07 12:36:16 字數 1593 閱讀 1367

一·需求分析

二,製作css字型圖示的製作和使用

前面已經有人做過總結,我就直接引用了

css字型圖示的製作和使用。

三,專案目錄結構設計

1,每乙個元件都單獨建立乙個資料夾,例如商品頁建立goods資料夾,goods資料夾放商品頁元件,goods.vue以及商品頁需要用到的等資源。就近維護。

在src目錄下再新建乙個common資料夾,存放公共的js,css以及字型圖示檔案·。

三,mock資料(模擬後台資料)

1,首先我們有乙個data.json,這個檔案儲存的就是我們需要的資料,它的位置與(index.html)同級。模擬的資料請求是從data.json中讀取資料。

2,在此次開發過程中要去本地資料位址進行請求,而原版配置在dev-server.js中,新版vue-webpack-template已經刪除dev-server.js,改用webpack.dev.conf.js代替,所以配置本地訪問在webpack.dev.conf.js裡配置即可。

在webpack.dev.conf.js中新增以下**:

/*

*載入模擬資料

*/const express = require('express')

請求server

載入本地資料檔案

獲取對應的本地資料

var apiroutes =express.router()

通過路由請求資料

2)編寫路由及相應介面

呼叫get方法,傳入seller介面。傳送請求,服務端接收請求,返回給客戶端乙個json型別的資料。(包括 errno 及資料),其中 errno 是開發規範所有,當其值為0時,表示返回的資料正常,當遇到一些比如許可權限制時,errno 可能不為0,具體值是由也業務方規定的。因為本次專案使用的是模擬資料,所以 errno 一定為0。

res.json()

//介面返回json資料,上面配置的資料seller就複製給data請求後呼叫

}), res.json()

//介面返回json資料,上面配置的資料seller就複製給data請求後呼叫

}), res.json()

//介面返回json資料,上面配置的資料seller就複製給data請求後呼叫

}) }

3)執行

npm run dev,啟動後輸入http://localhost:8080/api/seller,如果資料正常顯示,則資料能正常返回。

Vue高仿餓了麼專案(2) mock資料

mock資料即模擬後台收據,此專案提供了乙個data.json的檔案,包括用於展示所需要的資料資訊,模擬了乙個資料來源,對於真實的實際生產情況就是乙個資料庫,此節要解決編寫一些介面,實現與這些資料的互動。接下來要編寫一些路由 var apiroutes express.router apiroute...

仿餓了麼載入動畫

使用 loadingview.addbitmap r.mipmap v4 orloadingview.addbitmap bitmap orloadingview.addbitmaps mbitmaplist set the shadow color loadingview.setshadowcol...

仿餓了麼網頁布局

1.在頁面中常遇到兩個div排在一排的情況 class head class content left div class content right div div 一種解決方法 head content left head content right 2.在頁面中我們遇到旁的字型會離有一小段距離...