vue后台（一）

ES6模块暴露和导入复习
    1. 导出方式一: 默认一次性导出 (只能有一个)
            export default xxx
            本质: 整个模块是一个对象, 对象中有default属性, 即: {default: xxx}
    2. 导出方式二: 非默认分别导出 (可以有多个)
            export yyy
            export zzz
            本质: 整个模块是一个对象, 对象中有yyy和zzz属性, 即: {yyy, zzz}
    3. 导出方式三: 非默认统一导出 (可以有多个)
            export {yyy, zzz}
            本质:  整个模块是一个对象, 对象中有yyy和zzz属性, 即: {yyy, zzz}  
        
    4. 导入方式一: 导入默认导出的模块
            简洁写法: import xxx from './test' // 可以是任意名称
            完整写法: import {default as xxx} from './test'
    5. 导入方式二: 导入分别导出的模块
            import {yyy, zzz} from './test'  // 必须是指定的名称
    6. 导入方式三: 导入整个/所有模块(包括默认与非默认导出的)
            import * as obj from './test' // 可以是任意名称
        obj的结构: {default, yyy, zzz}

    7. 导入并导出: 对导入的模块同时做导出的操作
           export {default as xxx} from './test'
        export {yyy, zzz} from './test'

import request from '@/utils/request'

//截取公共路径
const api_name = '/admin/product'

export default {
  /*
  获取品牌分页列表(带搜索)
  GET /admin/product/baseTrademark/{page}/{limit}

  */
 getPageList(page, limit) {
    //对象写法
    return request({
      url: `${api_name}/baseTrademark/${page}/${limit}`,
      method: 'get',
    })
  },

  /*
  增加或者修改品牌
  POST /admin/product/baseTrademark/save
  PUT /admin/product/baseTrademark/update

trademark是个对象，请求体
  {
  "id": 0,
  "logoUrl": "string",
  "tmName": "string"
}
  */ 
  addOrUpdate(trademark){
 if(trademark.id){
      //修改put请求需要有id
      return request({
        url:`${api_name}/baseTrademark/update`,
        method:'put',
        //请求体
        data:trademark
      })
    }else{
      //增加数据不需要id,post请求
      return request({
        url:`${api_name}/baseTrademark/save`,
        method:'post',
        data:trademark
      })
    }
  },
  /*
  删除 DELETE /admin/product/baseTrademark/remove/{id}
  */
  delete(id){
    return request({
      url:`${api_name}/baseTrademark/remove/${id}`,
      method:'delete'
    })
  }
  
}

export {default as login} from './acl/login'
export {default as user} from './acl/user'
export {default as role} from './acl/role'
export {default as permission} from './acl/permission'
export {default as category} from './category'
export {default as clientUser} from './clientUser'
export {default as order} from './order'
export {default as trademark} from './trademark' //先把trademark的默认暴露引入进来

// 引入包含所有接口请求函数模块的API对象
import * as API from '@/api'
Vue.prototype.$API = API
// this.$API.trademark.getPageList

{
  "code": 200,
  "message": "成功",
  "data": {
    "records": [
      {
        "id": 245,
        "tmName": "摩托罗拉",
        "logoUrl": "http://182.92.128.115:8080/group1/M00/00/49/rBFUDF9I276APAugAAAV9aU5b64934.png"
      },
      {
        "id": 246,
        "tmName": "诺基亚",
        "logoUrl": "http://182.92.128.115:8080/group1/M00/00/2D/rBFUDF8hkeCAVX2oAAEGp0OpqNA105.png"
      },
      {
        "id": 247,
        "tmName": "苹果（Apple)",
        "logoUrl": "http://182.92.128.115:8080/group1/M00/00/34/rBFUDF8sAE2AACP7AAAPN5YrVxw528.jpg"
      }
    ],
    "total": 32,
    "size": 3,
    "current": 1,
    "pages": 11
  },
  "ok": true
}

data(){
    return {
      page:1,
      limit:5,
      total:100,
      trademarkList:[]
    }
  },

  mounted(){
    this.getreqPageList()
  },

  methods:{
    async  getreqPageList(){
      let result = await  this.$API.trademark.getPageList(this.page, this.limit)
      if(result.code ===200){
        this.trademarkList= result.data.records
        this.total= result.data.total
      }
    }
  }
};

<template>
  <div>
    <el-button type="primary"icon="el-icon-plus">添加</el-button>
    
    <el-table  :data="trademarkList"border stripe  style="100%; margin:20px 0">
      <el-table-column 

        label="序号"align="center"type="index"width="80">
      </el-table-column>
       <el-table-column 
        align="center"label="品牌名称"prop="tmName"width="width">
      </el-table-column>
       <el-table-column 
      
        label="品牌Logo"
        width="width">
        <template slot-scope="{row, $index}">
          <img :src="row.logoUrl"style="height:80px;">
        </template>

      </el-table-column>
       <el-table-column 
      
       label="操作"
        width="width">
        <template  slot-scope="{row, $index}">
            <el-button type="warning"size="mini"icon="el-icon-edit"></el-button>
            <el-button type="danger"size="mini"icon="el-icon-delete" ></el-button>
            
        </template>

      </el-table-column>
    </el-table>
    <el-pagination
     style="text-align:center":current-page="page":page-sizes="[3, 5, 7, 9]":page-size="limit"layout=" prev, pager, next, jumper ,->, sizes,total "@current-change="getreqPageList"@size-change="handleSizeChange":total="total">
    </el-pagination>
    
  </div>
</template>