<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
        主站蜘蛛池模板: 七次郎成人免费线路视频| 大地影院MV在线观看视频免费| 亚洲熟妇av午夜无码不卡| 狠狠综合亚洲综合亚洲色| 三年在线观看免费观看完整版中文| 在线成人爽a毛片免费软件| 四虎永久免费地址在线网站| 久久国产精品亚洲综合| 亚洲av永久无码天堂网| 阿v免费在线观看| 亚洲免费在线视频播放| 亚洲综合伊人久久大杳蕉| 97久久国产亚洲精品超碰热| 久久久久久久久久免免费精品 | 99麻豆久久久国产精品免费| 妞干网免费视频在线观看| 亚洲AV无码国产精品色午友在线 | 亚洲综合激情另类专区| 亚洲女人18毛片水真多| 免费萌白酱国产一区二区三区| 亚洲精品国产美女久久久| 免费手机在线看片| 韩国二级毛片免费播放| 亚洲国产综合精品| 免费特级黄毛片在线成人观看| 美景之屋4在线未删减免费| 中文字幕亚洲电影| 欧亚一级毛片免费看| 国产亚洲精品高清在线| 久久国产免费观看精品3| 99999久久久久久亚洲| 日韩精品电影一区亚洲| 亚洲欧洲精品成人久久曰| 黄网站色在线视频免费观看| 亚洲AV成人一区二区三区AV| 桃子视频在线观看高清免费完整| 337p欧洲亚洲大胆艺术| 9420免费高清在线视频| 国产精品亚洲专区无码牛牛| 在线日韩日本国产亚洲| 无码人妻一区二区三区免费手机|