<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        vue-cli項目如何使用vue-resource獲取本地的json數據(模擬服務端返回數據)

        來源:懂視網 責編:小采 時間:2020-11-27 22:33:23
        文檔

        vue-cli項目如何使用vue-resource獲取本地的json數據(模擬服務端返回數據)

        vue-cli項目如何使用vue-resource獲取本地的json數據(模擬服務端返回數據):最近使用vue-cli做了一個小小的項目,在項目中需要使用vue-resource來與后臺進行數據交互,所以我使用了本地json數據來模仿后臺獲取數據的流程。 至于vue-resource的安裝和json的準備我就不贅述了、、 下面是操作方法: 1、首先介紹一下項目的結構:將
        推薦度:
        導讀vue-cli項目如何使用vue-resource獲取本地的json數據(模擬服務端返回數據):最近使用vue-cli做了一個小小的項目,在項目中需要使用vue-resource來與后臺進行數據交互,所以我使用了本地json數據來模仿后臺獲取數據的流程。 至于vue-resource的安裝和json的準備我就不贅述了、、 下面是操作方法: 1、首先介紹一下項目的結構:將

        最近使用vue-cli做了一個小小的項目,在項目中需要使用vue-resource來與后臺進行數據交互,所以我使用了本地json數據來模仿后臺獲取數據的流程。

        至于vue-resource的安裝和json的準備我就不贅述了、、、

        下面是操作方法:

        1、首先介紹一下項目的結構:將本地的json文件放在最外層和index.html在一起,姑且叫做data.json。

        我的json數據文件大概如此:

        {
         "seller": {
         "name": "粥品香坊(回龍觀)",
         "description": "蜂鳥專送",
         "bulletin": "會指定餐飲服務商。",
         "avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg",
         },
         "goods": [
         {
         "name": "熱銷榜",
         "type": -1
         },
         {
         "name": "熱銷榜",
         "type": -1
         }
         ],
         "ratings": [
         {
         "username": "3******c",
         "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
         "recommend": [
         "南瓜粥",
         "皮蛋瘦肉粥"
         ]
         },
         {
         "username": "2******3",
         "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
         "recommend": [
         "扁豆燜面"
         ]
         }
         ]
        }

        2、接著在build的dev-server.js中進行加入代碼:

        //模擬服務器返回數據--開始
        var appData = require('../data.json');
        var seller = appData.seller;
        var goods = appData.goods;
        var ratings = appData.ratings;
        
        var apiRoutes = express.Router();
        
        apiRoutes.get('/seller', function (req, res) {
         res.json({
         errno: 0,
         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
         });
        });
        
        app.use('/api', apiRoutes);
        //模擬服務器返回數據--結束
        
        

        特別注意:修改好后重新進行cnpm run dev(注意當dev-server.js和db.json改變后都需要進行該步驟)。

        解釋下以上代碼:

        1》首先請求根目錄下的data.json文件,獲取到文件內容并將其賦值給appData變量,然后獲取其中的各個字段數據,分別定義變量seller、goods,ratings來賦值。

        2》之后,通過express提供的Router對象及其一些方法(這里用的get方法)來設置接口(請求路徑)以及請求成功后的回調函數來處理要返回給請求端的數據。(errno這個類似以js請求中的code值)

        3》最后,我們要“使用”這個Router對象,為了統一管理api接口,我們在要請求的路由前邊都加上‘api/'來表明這個路徑是專門用來提供api數據的。在這個“接口”中,當我們訪問“http://localhost:8080/api/sites”路徑的時候,就會返回db.json里的sites對象給我們。

        3、使用resouce獲取這些數據,并使用

        export default{
         data () {
         return {
         seller: {}
         };
         },
         created () {
         this.$http.get('/api/seller').then((response) => {
         // console.log(response);
         response = response.body;
         const ERR_OK = 0;
         if (response.errno === ERR_OK) {
         let data = response.data;
         console.log(data);
         }
         });
         },
         components: {
         'v-header': header
         }
        };
        

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        vue-cli項目如何使用vue-resource獲取本地的json數據(模擬服務端返回數據)

        vue-cli項目如何使用vue-resource獲取本地的json數據(模擬服務端返回數據):最近使用vue-cli做了一個小小的項目,在項目中需要使用vue-resource來與后臺進行數據交互,所以我使用了本地json數據來模仿后臺獲取數據的流程。 至于vue-resource的安裝和json的準備我就不贅述了、、 下面是操作方法: 1、首先介紹一下項目的結構:將
        推薦度:
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲а∨天堂久久精品| 日本免费人成黄页在线观看视频| 免费人成网站在线高清| 亚洲fuli在线观看| 中文字幕在线免费| 亚洲一区二区影院| 一级毛片免费毛片一级毛片免费| 国产亚洲精品自在线观看| 美女黄频a美女大全免费皮| 夜夜爽免费888视频| 精品亚洲成在人线AV无码| 16女性下面无遮挡免费| 亚洲精品第一国产综合精品| 久久伊人免费视频| 无码久久精品国产亚洲Av影片| 你懂得的在线观看免费视频| 中文字幕亚洲不卡在线亚瑟| 一级做a爱过程免费视频高清| 婷婷亚洲天堂影院| 农村寡妇一级毛片免费看视频| 吃奶摸下高潮60分钟免费视频| 精品韩国亚洲av无码不卡区| 又黄又爽的视频免费看| 免费视频精品一区二区| 久久久久亚洲?V成人无码| 成全高清在线观看免费| 亚洲av无码一区二区三区网站| 无码一区二区三区免费| 亚洲福利秒拍一区二区| 免费大片黄在线观看yw| 中国亚洲呦女专区| 国产精品无码一二区免费| 狼色精品人妻在线视频免费| 久久影视综合亚洲| 日本免费大黄在线观看| 亚洲乱人伦精品图片| 国产在线观看www鲁啊鲁免费| 免费无码又爽又黄又刺激网站| 亚洲日韩精品射精日| 最近2019年免费中文字幕高清| 国产精品亚洲片夜色在线 |