フロントエンドVueのプロジェクト - ページの開発およびAxios要求

ホームカルーセル図

1、elementUI回転ドア

　　回転ドアでelementUIカルーセル、限られたスペースにすることができ、ループ、その上のテキストや画像を、同じタイプのコンテンツを。

　　本明細書で使用される場合、インジケータパターンは、ポインタの表示位置は、容器の外側に配置されてもよいです。

<テンプレート> 
  <EL-カルーセルインジケータ位置= "外部"> 
    <EL-カルーセル項目V- ため = "4の項目"：キー= "項目"> 
      <H3> {{アイテム}} </ H3> 
    < / EL-カルーセル項目> 
  </ EL-カルーセル> 
</テンプレート>

　　表示位置の属性は、位置インジケータを定義します。デフォルトでは、に、回転ドア内に表示されます外側は外側に表示されている;にセットなしにはインジケータが表示されません。

2、ホームスタイルの指標の導入

　　SRC /コンポーネント/ホーム/ Home.vueファイルを書き込むと、次のようになります。

<テンプレート> 
  < EL-カルーセルインジケータ位置= "外部"高さ= "600PX"> 
    <EL-カルーセル項目V- 用 "lunboImgsアイテム" =：キー= "item.id"> 
      <IMG：SRC =」 item.imgSrc」ALT = ""> 
    </ EL-カルーセル項目> 
  < / EL-カルーセル > 
</テンプレート> 

<スクリプト> 
  輸出デフォルト{ 
    名： "ホーム" 、
    データ（）{ 
      リターン{
         lunboImgs： [ 
          { 
            ID ： 1 、
            IMGSRC：「https：//でhcdn1。luffycity.com/static/frontend/index/banner1(4)_1539945492.0492468.png」
          }、
          { 
            ID： 2 、
            IMGSRC： 'https://hcdn1.luffycity.com/static/frontend/index/骑士（1）_1539945488.713867.png' 
          }、
          { 
            ID： 3 、
            IMGSRC：「https：//でhcdn1.luffycity.com/static/frontend/index/banner11_1538122470.2779157.png ' 
          }、
          { 
            ID： 4 、
            IMGSRC： ' https://hcdn1.luffycity.com/static/frontend/index/home-banner4_1535545832.4715614。 PNG」
          } 
        ] 
      }。
    }  
    作成（）{
      にconsole.log（のlocalStorage）。
    } 
  }。
</ SCRIPT> 

<スタイルのlang = "CSSは"スコープ> 
IMG { 
  幅： 100％ 。
  高さ： 100％; 
}
 </スタイル>

　　次のように表示します。

　　

第二に、自由なコースページ

1、Axiosの導入と使用

　　Axiosの導入を必要とする使用する必要性に起因するAjaxの送信要求、。

　　Axiosは、HTTPライブラリの約束に基づいており、あなたは、ブラウザとのNode.jsを使用することができます。まず、Axiosをダウンロードしてください。

$のNPMはaxiosをインストール-S

　　追加のプラグインをインストールするときmain.jsとVue.use（）に直接導入することができるが、使用することができないaxiosは 、各コンポーネントのみリクエスト送信する必要が即時導入します。

2、main.jsで紹介axios

　　各コンポーネントでaxiosを導入することが当面の問題を解決するために、2つの開発のアイデアがある：まず、必要がaxios導入後のプロトタイプチェーンを変更するために、2番目はされVuex、パッケージのアクションを組み合わせました。

　　本明細書で使用されるように、プロトタイプチェーンの導入axiosを修正する方法main.jsが導入され、プロトタイプAxiosインスタンスに取り付けられました：

インポート「VUE」からVueの
アプリからのインポート「./App」
ルータからのインポート「./router」
 // ElementUIが導入 
ElementUI 『UI-要素』からインポート]を// ノートパターンは別々の導入に必要なファイル 
/インポート「要素-UI / libがチョーク・テーマ/ index.css' 
輸入」../static/global/global.css'
 // インポートAxiosのAxiosからのインポートAxios' 
Vue.prototype Axios = $ HTTP。 ;   // プロトタイプをマウントするに従うことができます任意のアセンブリで使用Axios.defaults.baseURL = 'https://www.luffycity.com/api/v1/';    // 設定パブリックURL // コールウィジェットVue.use（ElementUI）; 
Vue.config。productionTip = 偽;








/ * eslint-無効無新しい* / 
新しいヴュー（{ 
  EL： '#app' 、
  ルータ、
  コンポーネント：{アプリケーション}、
  テンプレート： '<APP />' 
}）。

　　赤でmain.jsに次の2行のコードを追加した後、あなたは、コンポーネントのメソッドで直接$をhttpコマンドを使用することができます。

3、無料コースのリストの実装

　　以下のように調製のsrc /コンポーネント/コース/ Course.vueファイルは、次のとおりです。

<テンプレート> 
  の<divクラス= "もちろん"> 
    <divのクラスは= "コンテナclearfix"> 
      <！ -课程分类- > 
      <ulのクラス= "coursebox"> 
        <LIのV- ための =」（カテゴリ、インデックス）でcategoryList "：キー=" category.id "> 
          {{category.name}}
         </ LI> 
        <LI> 
          Pythonの
         </ LI> 
      </ UL> 
      <DIV CLASS =" courseList "> 
        <DIV CLASS ="詳細」> 
          <DIV CLASS = "頭"> 
            <IMG SRC = "" ALT = ""クラス= "backImg"> 
            <=クラスB "マスク"> </ B> 
            <P> Pythonのエントリを開発するために21日</ P> 
          </ div> 
          <divのクラス= "コンテンツ"> 
            <四大主流の中で最も人気のあるとして知られているその、シンプルでエレガントなかつ効率的な機能を持つp型>のPython開発言語</ P>
            <DIV CLASS = "コンテンツ・ディテール"> 
              の<div> 
                <IMGのSRC = "データ：画像/ SVG + xmlの; base64で、PD9 ... 4K" ALT = ""> 
                <スパン> 1836 </ span>の
                <スパン>初级</スパン> 
                <スパンクラス= "span3"> 
                  <スパンクラス= "S">¥99.0 </スパン> 
                  <スパンクラス= "T">免费</ span>を
                </ span>の
                <スパンクラス= "span4 「> </ span>を
              </ DIV> 
            </ DIV> 
          </ DIV> 
        </ DIV> 
      </ DIV> 
    </ DIV> 
  </ DIV> 
</テンプレート> 

<スクリプト> 
  輸出デフォルト{ 
    名： "コース" 、
    データ（）{ 
      リターン{ 
        CategoryList：[]、// コースカテゴリリスト
      }; 
    } 
    // AJAXリクエスト開始のライフサイクル作成方法
    作成を（）{ 
      はconsole.log（これ。; $ HTTP）    // Axiosオブジェクト
      http.getこの$（ 'course_sub /カテゴリ/一覧/'）。    //は要求を取得送信 
        .then（RES => {    // 後に対応する要求の結果を
          にconsole.log（RES）; 
          （はconsole.log res.data.data）;    // 配列のリストを取得
          IF！（res.data.error_no）{
             この .categoryList =res.data.data; 
          } 
        }） 
        。キャッチ（ERR => { 
          にconsole.log（ERR）; 
        }）
    } 
  }。
</ SCRIPT>

（1）コースのリストを表示します

　　わずかなスタイル、ディスプレイは次のように：

　　

（2）作成したGETリクエストメソッドを送信します

// AJAXリクエスト開始のライフサイクル作成方法
作成（）{ 
  はconsole.log（この $のHTTPは。）;    // Axiosは、オブジェクトを
  、この。$ http.getを（ 'course_sub /カテゴリ/一覧/'）     // 取得送信要求を 
  。次いで、（RES => {    // 後に対応する要求結果
    にconsole.log（RES）
    にconsole.log（res.data.data）;    // 配列のリストを取得
    IF（！res.data.error_no）{
       この .categoryList = res.data.data; 
    } 
  }） 
  。キャッチ（ERR => { 
    にconsole.log（ERR）; 
  }）
}

　　リクエストが完了含まれている必要があり.thenと.catchを。リクエストが成功すると、それは.then、そうでない場合は、実行.catchを実行します。

4、axiosモジュールパッケージ

 　　VUEプロジェクトでは、背景データと対話するために取得ライブラリaxios通常です。axios要求が比較的単純な問題ですが、axiosは多重化をカプセル化していない場合は、プロジェクトが成長しているとき、コードは維持が困難となり、冗長なコードにつながる。開始使用 このように各成分のプロジェクトaxios二次包装の必要性は維持するために、コードをより簡単に、多重化要求とすることができます。

（1）パッケージのポイント 

• URL統一された構成。
• 統一されたAPI要求。
• 要求（リクエスト）インターセプタは、例えば：のようなトークン、最初の要求セットを取ります
• 以下のようなレスポンス（応答）インターセプタ、：統一されたエラー処理、ページのリダイレクト
• 需要に応じて、組み合わせVuexは、グローバルなエラー処理やロードのアニメーションを行います
• axios Vueのプラグインにカプセル化

 （2）axios成分が準備ができています

　　プロジェクトのsrcディレクトリには、新しい安らかフォルダ、http.jsを作成し、api.jsは内部のファイル。

　　http.jsはaxios、統合された管理ポートのapi.jsをパッケージ化するために使用されます。

 

カテゴリリストを達成するための5、