バックエンドデータを取得するためのVue Elementフロントエンドアプリケーション開発

<テンプレート>
  
</テンプレート>

<スクリプト>
エクスポートデフォルト{

}
</スクリプト>

<スタイル>

</スタイル>

'@/api/product' から { GetTopBanners, GetProductList } をインポートします。

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {};
  },
  メソッド: {
    // コンポーネントメソッド},
  時計：
    // watch は 1 つのデータが複数のデータに影響を与えるシナリオの処理に適しています},
  計算: {
    // computed は、1 つのデータが複数のデータによって影響を受けるシナリオの処理に適しています},
  beforeCreate: 関数() {
    // インスタンスの初期化後、データ オブザーバーとイベント/ウォッチャーの構成前に呼び出されます。
  },
  作成: 関数() {
    // インスタンスが作成された後に呼び出されます。このステップでは、インスタンスはデータ オブザーバー、プロパティとメソッドの操作、およびウォッチ/イベント コールバックの構成を完了しています。ただし、マウント フェーズはまだ開始されておらず、$el プロパティは現在表示されません。
  },
  マウント前: 関数() {
    // マウント開始前に呼び出されます。関連するレンダリング関数が初めて呼び出されます。
  },
  マウント: 関数() {
    // コンパイルされた HTML がページにマウントされた後にイベント フックが実行されます。// el は新しく作成された vm.$el に置き換えられ、インスタンスにマウントされた後にフックが呼び出されます。
    // このフック関数は通常、データ初期化用のデータを取得するためにいくつかの Ajax リクエストを実行します。console.log("Home done");
  },
  beforeUpdate: 関数() {
    // 仮想 DOM が再レンダリングされパッチが適用される前に、データが更新されたときに呼び出されます。 このフックでさらに状態を変更することができますが、追加の再レンダリングはトリガーされません。
  },
  更新: 関数() {
    // このフックは、データの変更により仮想 DOM が再レンダリングされ、パッチが適用された後に呼び出されます。
    // このフックが呼び出されると、コンポーネントの DOM はすでに更新されているため、DOM に依存する操作を実行できるようになります。ただし、ほとんどの場合、この期間中に状態を変更することは避けてください。無限更新ループが発生する可能性があります。
    // このフックはサーバー側のレンダリング中には呼び出されません。
  },
  beforeDestroy: 関数() {
    // インスタンスが破棄される前に呼び出されます。この段階では、インスタンスはまだ完全に使用可能です。
  },
  破棄: 関数() {
    // Vue インスタンスが破棄された後に呼び出されます。呼び出し後、Vue インスタンスによって指し示されるすべてのものがバインド解除され、すべてのイベント リスナーが削除され、すべての子インスタンスが破棄されます。 このフックはサーバー側のレンダリング中には呼び出されません。
  }
};
</スクリプト>

エクスポートデフォルト{
  データ（） {
    戻る {
      アクティブ名: 'すべて',
      currentDate: 新しい日付()、
      バナー: [],
      製品リスト: [],
      ページ情報: {
        ページインデックス: 1,
        ページサイズ: 10,
        合計: 0
      },
      製品タイプ: 'すべて'
    };
  },
  作成された() {
    this.loadbanners()
    this.getlist()
  },

<el-row :gutter="20" style="padding:20px">
  <el-button type="primary" icon="el-icon-search" :plain="producttype !='all'" @click="handleClick($event, 'all')">すべて</el-button>
  <el-button type="success" icon="el-icon-search" :plain="producttype !='1'" @click="handleClick($event, '1')">フレームワーク製品</el-button>
  <el-button type="warning" icon="el-icon-search" :plain="producttype !='2'" @click="handleClick($event, '2')">ソフトウェア製品</el-button>
  <el-button type="danger" icon="el-icon-search" :plain="producttype !='3'" @click="handleClick($event, '3')">開発コンポーネント</el-button>
</el-row>

<el-col :span="4"><div class="grid-content bg-purple" />
<el-card クラス="ボックスカード">
  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="画像">
  <div style="padding: 14px;">
    <span>おいしいハンバーガー</span>
    <div class="bottom clearfix">
      <time class="time">価格：200円</time>
      <el-button type="text" class="button" @click="loadbanners()">アクションボタン</el-button>
    </div>
  </div>
</el-card>
</el-col>

<el-col v-for="(item, index) in productlist" :key="index" :span="4" style="min-width:250px">
<div class="grid-content bg-purple">
  <el-card クラス="ボックスカード">
    <img :src="item.Picture" class="image" style="width:200px;height:200px">
    <div style="padding: 14px;">
      <span>{{ item.ProductName }}</span>
      <div class="bottom clearfix">
        <!-- <time class="time">価格: ￥{{ item.Price }}</time> -->
        <el-button type="text" class="button">操作ボタン</el-button>
      </div>
    </div>
  </el-card>
</div>
</el-col>

 <el-ページネーション
      背景
      レイアウト="前へ、ページャ、次へ"
      :ページサイズ="[10,20,50]"
      :total="ページ情報合計"
      :current-page="ページ情報.ページインデックス"
      :page-size="ページ情報.ページサイズ"
      @size-change="ハンドルサイズ変更"
      @current-change="現在の変更を処理する"
    />

取得リスト() {
      //ページングクエリ条件を構築 var param = {
        タイプ: this.producttype === 'all' ? '' : this.producttype,
        ページインデックス: this.pageinfo.pageindex、
        ページサイズ: this.pageinfo.pagesize
      };

      this.listLoading = true
      // データクエリ要求を開始し、ローカルデータの値を設定します GetProductList(param).then(data => {
        this.productlist = データリスト
        this.pageinfo.total = データ.total_count
        this.listLoading = false
      })
    },

// カテゴリをクリックすると、クエリhandleClick(e, type) {
      // console.log(e, タイプ);

      this.producttype = タイプ
      this.pageinfo.pageindex = 1;

      this.getlist()
    },
    // ページ数の変更後のクエリ処理 handleSizeChange(val) {
      console.log(`ページあたり${val}項目`);
      this.pageinfo.pagesize = val;
      this.getlist()
    },
    // ページ番号変更後のクエリ処理 handleCurrentChange(val) {
      console.log(`現在のページ: ${val}`);
      this.pageinfo.pageindex = val;
      this.getlist()
    }