轉載自? Vue.js2.0從入門到放棄---入門實例（三）

今天就來簡單說一下vue-resource，這是vue的一個與服務器端通信的HTTP插件，用來從服務器端請求數據。話不多說，直接上干貨吧。

這里PS一下，有人反映之前的代碼下載下來，運行會報錯而且會有上百個之多，這是因為在我初始化項目的時候沒有啟用eslint，eslint是用來檢測代碼風格的，我是覺得格式要求嚴的有點過分，所以禁用了eslint。如果對eslint感興趣的朋友，可以看?eslint的官網?了解一下格式的要求和一些相應的配置。

我們主要來了解一下以下內容：

• 模擬服務端返回數據
• 用vue-resource向服務器請求數據

模擬服務器返回數據

我們用vue-cli創建的項目中，已經給我們提供了模擬服務器端返回數據的地方和接口。如下圖所示，在項目目錄的build目錄下，有一個dev-server.js，在這個文件中，我們就可以來做一些模擬數據的工作。

1、準備一個data.json文件

在項目根目錄下，新建一個data.json。這個文件里的內容就是我們要模擬的服務端返回的數據。 data.json的內容如下： {"books": [{ "price": "111.00", "title": "語文", "img": "http://imgsrc.baidu.com/forum/w%3D580/sign=688d19b6422309f7e76fad1a420f0c39/0e143912b31bb051dfdebf0a327adab44bede0f9.jpg" },{ "price": "123.00", "title": "數學", "img": "http://shopimg.kongfz.com.cn/20130826/1746508/1746508YTGtm0_b.jpg"},{ "price": "113.00", "title": "英語", "img": "http://www.shiyi910.com/UploadFiles/2014-01/170/2014011322414554305.jpg"},{ "price": "112.00", "title": "物理", "img": "http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=b62ac53d4b36acaf59b59ef849e9a126/f603918fa0ec08fa2cf895a359ee3d6d55fbda3e.jpg"}] } 這里，books字段里的每一個對象表示一本書的信息。

2、“寫接口”

修改dev-server.js文件，在大概第19行左右的?var app = express()之后，添加上如下內容 var appData = require('../data.json') var books = appData.booksvar apiRoutes = express.Router() apiRoutes.get('/books', function(req, res){res.json({data: books}) })app.use('/api', apiRoutes) 簡單說明一下，這段代碼就是通過請求醒目根目錄下的data.json文件，拿到文件的內容并賦值給appData變量，取到里面的books字段內容保存在books變量中。然后，通過express提供的Router對象，以及Router對象的一些方法（這里是get方法）來設置請求的路徑，以及請求成功后的回調函數來處理要返回給請求端的數據。最后，我們要“使用”這個Router對象，為了統一管理api接口，我們在要請求的路由前邊都加上‘api/’來表明這個路徑是專門用來提供api數據的。在這個“接口”中，當我們訪問“http://localhost:8080/api/books”路徑的時候，就會返回data.json里的books對象給我們。
這里我們先來簡單驗證一下是否能成功返回數據，打開命令行，cd到當前項目目錄，運行 npm run dev ，等項目運行成功之后，在瀏覽器地址欄輸入http://localhost:8080/api/books，看到如下圖所示，數據正常返回，OK！“接口”就開發完成了。
PS：在你的瀏覽器上可能看到的是沒有經過格式化的數據，我的瀏覽器上裝了一個json格式化的插件，這不是重點，重點是“接口”正常工作了，不是嗎。

用vue-resource向服務器請求數據

1、安裝vue-resource

打開命令行，cd到項目目錄，運行?npm install vue-resource --save或者cnpm install vue-resource --save,等待安裝完成即可。

2、在main.js里導入并使用vue-resource

修改main.js如下 // main.js// 導入Vue，這個是必需的，在使用Vue之前，必須先導入 import Vue from 'vue'// 導入 vue-router，并使用 import VueRouter from 'vue-router' Vue.use(VueRouter)// 導入 vue-resource，并使用 import VueResource from 'vue-resource' Vue.use(VueResource)// 導入 pages 下的 Home.vue import Home from './pages/Home' import Detail from './pages/Detail'// 定義路由配置 const routes = [{path: '/',component: Home},{path: '/detail',component: Detail} ]// 創建路由實例 const router = new VueRouter({routes })// 創建 Vue 實例 new Vue({el: '#app',data(){return {transitionName: 'slide'}},router,watch: {// 監視路由，參數為要目標路由和當前頁面的路由'$route' (to, from){const toDepth = to.path.substring(0, to.path.length-2).split('/').length// 官方給出的例子為 const toDepth = to.path.split('/').length 由于現在只有兩個路由路徑'/'和'/detail'// 按照官方給的例子，這兩個路由路徑深度都為 2 ，所以，這里稍作調整，不知道有什么不妥// 但目前在這個demo中能正常運行，如果知道更好的方法，歡迎留言賜教const fromDepth = from.path.substring(0, from.path.length-2).split('/').lengththis.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'// 根據路由深度，來判斷是該從右側進入還是該從左側進入}} })

3、修改Home.vue和List.vue來接收服務端返回的數據

Home.vue修改如下： <!-- Home.vue --> <template><div class="container"><!-- 由于html不區分大小寫，所以js中駝峰命名方式在html中要改成用短橫線連接的形式 --><home-header></home-header><div class="content"><ul class="cont_ul"><listv-for="item in items":price="item.price":title="item.title":img="item.img"><!-- 通過v-bind（簡寫為“:”）綁定props來從父組件給子組件傳值 --></list></ul></div></div> </template> <style>.container {max-width: 640px;margin: 0 auto;overflow-x: hidden;}.cont_ul {padding-top: 0.05rem;margin: 0 -0.12rem;}.cont_ul:after {content: "";display: block;width: 0;height: 0;clear: both;} </style> <script>// 導入要用到的子組件import HomeHeader from '../components/HomeHeader'import List from '../components/List'export default {data () {return {items: []}},// 在components字段中，包含導入的子組件components: {HomeHeader,List},// 在組件創建完成時，執行的鉤子函數created (){// 在main.js里導入并使用vue-resource之后，就可以通過this.$http來使用vue-resource了，這里我們用到了get方法this.$http.get('/api/books').then((data) => {// 由于請求成功返回的是Promise對象，我們要從data.body.data拿到books數組this.items = data.body.data;})}} </script>
List.vue修改如下： <!-- List.vue --> <template><li class="sec_li"><router-link to="/detail" class="lp_li_a"><div class="lp_li_imgWrap"><img :src="img" alt=""></div><p class="lp_li_name">{{ title }}</p><p class="lp_li_price">￥{{ price }}元</p></router-link></li> </template><style scoped>.sec_li {float: left;width: 50%;margin-bottom: 0.1rem;}.lp_li_a {display: block;padding: 0.3rem 0;margin: 0 0.05rem;text-align: center;background: #fff;}.lp_li_imgWrap {padding: 0.24rem 0;}.lp_li_imgWrap > img {width: auto;height: 2.3rem;}.lp_li_name {height: 0.5rem;line-height: 0.5rem;font-size: 16px;color: #333;}.lp_li_price {height: 0.5rem;line-height: 0.5rem;font-size: 16px;color: #fb3b3b;} </style><script>export default {// 接收父組件傳過來的以下幾個屬性props: ['price', 'title', 'img'],} </script>
然后，再回到瀏覽器，應該會看到如下圖的效果了。



搞定！數據成功接入，可以來杯咖啡放松一下，回味一下整個過程的實現了。

總結

以上是生活随笔為你收集整理的Vue.js2.0开发环境搭建（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。