整合vue-router&Vuex
先創建工程
vue create vue-axios
然后選擇
勾選
回車，出現是否使用history mode？選擇y，代表URL地址里面不會出現#。選擇n，代表URL里面帶有#。這里我們選擇n，看自己需要了。
回車，出現ESLint，直接選第一個即可
回車，勾選默認
回車，選擇把配置放在package.json文件里
回車，最后一個選項，問你是否要存儲當前的配置為預設配置。你根據需要選擇即可。
回車之后開始安裝了。
Vuex 用法：修改store.js 和 Home.vue
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 定義一個狀態，並賦值 name: '待改名' }, mutations: { // 接受 state 作為第一個參數，你可以傳入額外的參數，即 mutation 的 載荷（payload）。在大多數情況下，載荷應該是一個對象，這樣可以包含多個字段並且記錄的 mutation 會更易讀 setName(state, payload) { state.name = payload.name; } }, actions: {} })
Home.vue
<template> <div class="home"> <h1>{{globalName}}</h1> <div> <button @click="changeStatus">更改狀態</button> </div> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'home', components: { HelloWorld }, computed: { // 從 store 實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態 globalName: function () { return this.$store.state.name; } }, methods:{ // 更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation;你不能直接調用一個 mutation handler,要喚醒一個 mutation handler，你需要以相應的 type 調用 store.commit 方法 changeStatus: function () { this.$store.commit('setName',{ name: '阿貓阿狗' }); } } } </script>
頁面：
點擊按鈕
整合Axios
你可以進入工程目錄執行以下命令，或者用WebStorm打開后，在Terminal里執行以下命令來安裝Axios。
$ npm install axios
測試運行
先看一下工程目錄結構
然后修改文件 main.js
加入
import Axios from 'axios' // 引入Axios Vue.prototype.$axios = Axios; // 全局變量
再修改 About.vue，內容如下（由於懶得寫接口測試了，直接調用的墨跡天氣，然后由於跨域問題，無法訪問，所以我把catch塊中寫了死數據）
<template> <div class="about"> <table style="width: 300px;margin: 0 auto;"> <tbody> <tr v-for="w in dataList.hour24" :key="w.Fpredict_hour"> <td>{{w.Fpredict_date}}</td> <td>{{w.Fpredict_hour}}點</td> <td>{{w.Fcondition}}</td> </tr> <tr> <td colspan="3">一共{{totalCount}}條數據</td> </tr> </tbody> </table> </div> </template> <script> export default { name: 'about', data: ()=> ({ dataList: {}, totalCount: 0 }), mounted: function () { let me = this; me.getDataForTable() .then(data => { me.dataList = data.data me.totalCount = data.count }) }, methods: { getDataForTable () { let me = this; return new Promise((resolve, reject) => { // 額外的參數，比如headers // let options = { // headers: { // 'token': '00000' // } // } // 參數 let params = {}; me.$axios.post('http://tianqi.moji.com/index/getHour24',params/*,options*/) // 請求成功后 .then(function (response) { let data = response.data; let count = data.hour24.length resolve({ data, count }) }) // 請求失敗處理 .catch(function (error) { console.log(error); let data = { "hour24": [ { "Fpredict_date": "2019-06-18", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 28, "Fwspd": 16.92, "Fwind_dir_id": 8, "Ffeelslike": 40, "Fpredict_hour": 12, "Fhumidity": 89, "id": 892, "wind_degrees": "135", "Fcondition": "陰", "Fwdir": "SSE", "wind_level": 3 }, { "Fpredict_date": "2019-06-18", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 28, "Fwspd": 18.72, "Fwind_dir_id": 9, "Ffeelslike": 40, "Fpredict_hour": 13, "Fhumidity": 88, "id": 892, "wind_degrees": "180", "Fcondition": "陰", "Fwdir": "S", "wind_level": 3 }, { "Fpredict_date": "2019-06-18", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 28, "Fwspd": 20.88, "Fwind_dir_id": 9, "Ffeelslike": 36, "Fpredict_hour": 14, "Fhumidity": 75, "id": 892, "wind_degrees": "180", "Fcondition": "陰", "Fwdir": "S", "wind_level": 4 }, { "Fpredict_date": "2019-06-18", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 28, "Fwspd": 19.8, "Fwind_dir_id": 9, "Ffeelslike": 37, "Fpredict_hour": 15, "Fhumidity": 76, "id": 892, "wind_degrees": "180", "Fcondition": "陰", "Fwdir": "S", "wind_level": 0 }, { "Fpredict_date": "2019-06-18", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 28, "Fwspd": 18.72, "Fwind_dir_id": 9, "Ffeelslike": 37, "Fpredict_hour": 16, "Fhumidity": 76, "id": 892, "wind_degrees": "180", "Fcondition": "陰", "Fwdir": "S", "wind_level": 3 }, { "Fpredict_date": "2019-06-18", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 17.28, "Fwind_dir_id": 9, "Ffeelslike": 35, "Fpredict_hour": 17, "Fhumidity": 80, "id": 892, "wind_degrees": "180", "Fcondition": "陰", "Fwdir": "S", "wind_level": 3 }, { "Fpredict_date": "2019-06-18", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 16.2, "Fwind_dir_id": 9, "Ffeelslike": 35, "Fpredict_hour": 18, "Fhumidity": 81, "id": 892, "wind_degrees": "180", "Fcondition": "陰", "Fwdir": "S", "wind_level": 3 }, { "Fpredict_date": "2019-06-18", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 14.76, "Fwind_dir_id": 9, "Ffeelslike": 35, "Fpredict_hour": 19, "Fhumidity": 83, "id": 892, "wind_degrees": "180", "Fcondition": "陰", "Fwdir": "S", "wind_level": 3 }, { "Fpredict_date": "2019-06-18", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 13.68, "Fwind_dir_id": 8, "Ffeelslike": 33, "Fpredict_hour": 20, "Fhumidity": 83, "id": 892, "wind_degrees": "135", "Fcondition": "陰", "Fwdir": "SSE", "wind_level": 3 }, { "Fpredict_date": "2019-06-18", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 12.6, "Fwind_dir_id": 8, "Ffeelslike": 33, "Fpredict_hour": 21, "Fhumidity": 84, "id": 892, "wind_degrees": "135", "Fcondition": "陰", "Fwdir": "SSE", "wind_level": 3 }, { "Fpredict_date": "2019-06-18", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 11.52, "Fwind_dir_id": 8, "Ffeelslike": 33, "Fpredict_hour": 22, "Fhumidity": 84, "id": 892, "wind_degrees": "135", "Fcondition": "陰", "Fwdir": "SSE", "wind_level": 0 }, { "Fpredict_date": "2019-06-18", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 10.8, "Fwind_dir_id": 8, "Ffeelslike": 34, "Fpredict_hour": 23, "Fhumidity": 91, "id": 892, "wind_degrees": "135", "Fcondition": "陰", "Fwdir": "SSE", "wind_level": 2 }, { "Fpredict_date": "2019-06-19", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 10.08, "Fwind_dir_id": 8, "Ffeelslike": 34, "Fpredict_hour": 0, "Fhumidity": 93, "id": 892, "wind_degrees": "135", "Fcondition": "陰", "Fwdir": "SSE", "wind_level": 2 }, { "Fpredict_date": "2019-06-19", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 9.72, "Fwind_dir_id": 8, "Ffeelslike": 31, "Fpredict_hour": 1, "Fhumidity": 94, "id": 892, "wind_degrees": "135", "Fcondition": "陰", "Fwdir": "SSE", "wind_level": 2 }, { "Fpredict_date": "2019-06-19", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 9.36, "Fwind_dir_id": 8, "Ffeelslike": 31, "Fpredict_hour": 2, "Fhumidity": 95, "id": 892, "wind_degrees": "135", "Fcondition": "陰", "Fwdir": "SSE", "wind_level": 2 }, { "Fpredict_date": "2019-06-19", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 9, "Fwind_dir_id": 8, "Ffeelslike": 31, "Fpredict_hour": 3, "Fhumidity": 95, "id": 892, "wind_degrees": "135", "Fcondition": "陰", "Fwdir": "SSE", "wind_level": 2 }, { "Fpredict_date": "2019-06-19", "Ficon_id": 33, "Fcondition_id": 15, "Ftemp": 27, "Fwspd": 8.28, "Fwind_dir_id": 8, "Ffeelslike": 31, "Fpredict_hour": 4, "Fhumidity": 94, "id": 892, "wind_degrees": "135", "Fcondition": "陣雨", "Fwdir": "SSE", "wind_level": 2 }, { "Fpredict_date": "2019-06-19", "Ficon_id": 33, "Fcondition_id": 15, "Ftemp": 27, "Fwspd": 7.56, "Fwind_dir_id": 8, "Ffeelslike": 31, "Fpredict_hour": 5, "Fhumidity": 89, "id": 892, "wind_degrees": "135", "Fcondition": "陣雨", "Fwdir": "SSE", "wind_level": 2 }, { "Fpredict_date": "2019-06-19", "Ficon_id": 1, "Fcondition_id": 8, "Ftemp": 27, "Fwspd": 7.56, "Fwind_dir_id": 8, "Ffeelslike": 34, "Fpredict_hour": 6, "Fhumidity": 89, "id": 892, "wind_degrees": "135", "Fcondition": "多雲", "Fwdir": "SSE", "wind_level": 2 }, { "Fpredict_date": "2019-06-19", "Ficon_id": 1, "Fcondition_id": 8, "Ftemp": 27, "Fwspd": 7.92, "Fwind_dir_id": 9, "Ffeelslike": 33, "Fpredict_hour": 7, "Fhumidity": 88, "id": 892, "wind_degrees": "180", "Fcondition": "多雲", "Fwdir": "S", "wind_level": 2 }, { "Fpredict_date": "2019-06-19", "Ficon_id": 1, "Fcondition_id": 8, "Ftemp": 27, "Fwspd": 8.28, "Fwind_dir_id": 9, "Ffeelslike": 38, "Fpredict_hour": 8, "Fhumidity": 94, "id": 892, "wind_degrees": "180", "Fcondition": "多雲", "Fwdir": "S", "wind_level": 2 }, { "Fpredict_date": "2019-06-19", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 10.08, "Fwind_dir_id": 9, "Ffeelslike": 38, "Fpredict_hour": 9, "Fhumidity": 93, "id": 892, "wind_degrees": "180", "Fcondition": "陰", "Fwdir": "S", "wind_level": 2 }, { "Fpredict_date": "2019-06-19", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 11.88, "Fwind_dir_id": 9, "Ffeelslike": 41, "Fpredict_hour": 10, "Fhumidity": 91, "id": 892, "wind_degrees": "180", "Fcondition": "陰", "Fwdir": "S", "wind_level": 0 }, { "Fpredict_date": "2019-06-19", "Ficon_id": 2, "Fcondition_id": 13, "Ftemp": 27, "Fwspd": 13.68, "Fwind_dir_id": 10, "Ffeelslike": 37, "Fpredict_hour": 11, "Fhumidity": 91, "id": 892, "wind_degrees": "225", "Fcondition": "陰", "Fwdir": "SSW", "wind_level": 3 } ], "sunset": { "date": "2019-06-18", "sunrise": "2019-06-19 05:40:00", "sundown": "2019-06-18 19:10:00", "sunrise_h": "05", "sundown_h": "07" } }; let count = data.hour24.length resolve({ data, count }) }); }) } } } </script>
然后運行
前台頁面：
