整合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>然后运行
前台页面：
来源：oschina
链接：https://my.oschina.net/u/4277063/blog/3497917