api的集中管理

src/common/http.api.js

@@ -0,0 +1,31 @@
+// 常量 更多是用大写来代替
+// url不用写完整的, 已经在http封装配置好了
+
+// 首页轮播图
+const SWIPERDATA_URL = "/home/swiperdata"
+// 首页导航
+const CATITEMS_URL = "/home/catitems"
+// 首页楼层
+const FLOORDATA_URL = "/home/floordata"
+
+// 分类
+const CATEGORIES_URL = "/categories"
+
+// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作
+const install = (Vue, vm) => {
+
+  // 首页
+  const getSwiperdata = (params = {}) => vm.$u.get(SWIPERDATA_URL, params)
+  const getCatitems = (params = {}) => vm.$u.get(CATITEMS_URL, params)
+  const getFloordata = (params = {}) => vm.$u.get(FLOORDATA_URL, params)
+
+  // 分类页
+  const getCategories = (params = {}) => vm.$u.get(CATEGORIES_URL, params)
+
+  // 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
+  vm.$u.api = { getSwiperdata, getCatitems, getFloordata, getCategories }
+}
+
+export default {
+  install,
+}

src/main.js

@@ -5,6 +5,9 @@ import uView from "uview-ui";
 // http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径
 import httpInterceptor from '@/common/http.interceptor.js'
 
+// api 集中管理
+import httpApi from '@/common/http.api.js'
+
 Vue.use(uView);
 Vue.config.productionTip = false
 
@@ -17,4 +20,7 @@ const app = new Vue({
 // 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)
 Vue.use(httpInterceptor, app)
 
+// api集中管理文件的使用
+Vue.use(httpApi, app)
+
 app.$mount()