后台数据获取与封装

使用vue框架时获取后台数据,将axios封装的代码:
一.首先在src新建utils文件夹再建index.js文件,在此做数据的封装.
import axios from 'axios';

// process.env.NODE_ENV环境
let baseURL;
if (process.env.NODE_ENV === 'development') {
baseURL = 'http://132.232.87.95:3000/api'
} else {
//生产地址
baseURL = '/xxxx'
}

// 配置baseUrl
const $http = axios.create({
baseURL,
})

export const get = (url, params) => {
params = params || {};
return new Promise((resolve, reject) => {
http.post(url, params).then(res => {
if (res.data.status === 0) {
resolve(res.data);
} else {
alert(res.data.msg);
}
}).catch(error => {
alert('网络异常');
})
});
}

第二步到main.js 将封装函数导入.
import {get,post} from './utils/index'//文件路径自己看情况写
Vue.prototype.$http = {
get,
post
}

第三步在到需要使用后台数据的index.vue的页面中引用(如my里面的index.vue)
export default {
data() {
return {
cinemas: []
};
},
created() {
this.getFilmList();
},
methods: {
async getFilmList() {
const url = "/cinema/getList";
const res = await this.$http.get(url);
this.cinemas = res.cinemas;
}
}
};

第四步渲染页面：

<div class="mg-t-15 bd-gray" v-for="(item,index) in cinemas" :key="index">
  <div class="flex-sb">
    <p class="f14 mg-l-15">{{item.name}}</p>
    <p class="orangr f6 mg-r-15">
      &yen;
      <span class="f16">{{item.lowPrice/100}}</span>起
    </p>
  </div>
  <div class="flex-sb mg-t-8 pd-b-15">
    <p class="ell f12 gray mg-l-15">{{item.address}}</p>
    <p class="gray f12 mg-r-15">{{item.Distance.toFixed(2)}}km</p>
  </div>
</div>

</div>
</template>

<script>
export default {
data() {
return {
cinemas: []
};
},
created() {
this.getFilmList();
},
methods: {
async getFilmList() {
const url = "/cinema/getList";
const res = await this.$http.get(url);
this.cinemas = res.cinemas;
}
}
};
</script>