Vueを使用して実装された期末課題

終わりました緊張した期末試験と 2 つの大きなプロジェクトのプレゼンテーション。
最も自信がなかった科目は、この学期唯一のオープンブックテストである hadoop でした。私は本をめくっても試験の内容を見つけることができませんでした。オペレーティングシステムも難しかったですが、他の科目は普段の成績が 6 で期末試験が 4 の割合で評価されました。
実際のところ、主な問題は自分自身があまり聞いていなかったことです、へへ。

ゼロ#

この学期、私たちのクラスにはソフトウェアエンジニアリングという科目があります。幸運なことに、この科目には期末試験はありませんが、不運なことに、この先生は私たちに 6000 文字の論文を書くように要求しました（6000 文字！）。
論文はいくつかのトピックから選んで書くことができ、書きやすく理解しやすいものを選びました。また、Google や Baidu で多くのサンプルがあるため、コピーしやすいものを選びました。私たちのグループは学生の学籍管理システムを選びました。
先生: "この課題は重複チェックされませんし、このプロジェクトを実装する必要もありません。私が提供したサンプルを模倣して書いてください"
最初の 6000 文字に比べて、私には半分の衝撃がありました。私の文章はかなり悪いですが、コピー＆ペーストは本当に雑ではありません。

それで、私はこの課題をどうやって乗り切るかを必死に考えました。しかし、人は時々怠け者になり、他の人の努力に不安を感じます。締め切りが近づいて手を動かそうとしていたとき、ルームメイトがルームメイトのグループチャットで情報を爆撃しました。
"xx は本当に彼らが選んだプロジェクトを作りました！"
"何のこと？"
"ソフトウェアエンジニアリングのこと"
私も感嘆の声を上げることができ、その後はベッドで携帯電話をいじりながら安心して期末試験を乗り切りました。一歩引いて、海は広く、空は広い、しかし、我慢するとますます腹が立つ。

誰かが勝たなければならない、だから私がなぜ勝たないのか？

私も何か作らなければならない、前に vue を見たので、それを練習するために使うことにしました。だから、失敗しても理由があると考えました（自己満足）。

1. 検索エンジン向けプログラミング#

正直言って、これが初めての実際のプロジェクトだということを考えると、多くの問題にぶつかるだろうと思っていましたが、最初から私に厳しい試練が与えられるとは思いませんでした。

ページ上部に白いバーがある問題#

最初にログインと登録のページを作成しましたが、どんなに CSS のプロパティを変更しても、ページの上部に白いバーが表示されました。Google で検索しても、CSS のプロパティの設定に関する情報がたくさん表示されました（確かにスタイルの問題です）。
最後に私はこの問題について頭を抱えて、答えを探し続けましたが、最終的にはこの問題とは全く関係のない記事で解決策を見つけました。同時に、本当に多くのことを学びました。

まず、index.html はプロジェクトの実行エントリーポイントであり、body 内には 1 つの div タグしかありません。その id は app で、この id は src/main.js の内容に接続されます。
次に、main.js では vue のインスタンスを初期化します。つまり、main.js を介して App.vue コンポーネントに関連付けられます。
そして、App.vue コンポーネントでは、ルーター関連のコンテンツがこの div にレンダリングされます。ルーターの内容は index.js にあります。
index.js では、私たちが作成したコンポーネントをルーターに公開します。

これが vue プロジェクトの実行と読み込みのプロセスです。次に、ページのプロパティを確認するためにウェブページで F12 を押し、body のプロパティを見つけました。body には 8px のマージンが設定されていることがわかりましたが、私が作成したログインページ（コンポーネント）は背景をフルに設定していました。そして、私たちのコンポーネントは App.vue の div にレンダリングされます。つまり、div にマージン 0 のスタイルを追加すれば解決するのではないかと思いました。
したがって、App.vue の div にスタイルを追加し、マージンを 0 に設定し、望んだ結果が表示されるようにしました。

<template>
  <div id="app" style="margin: 0px;">
    <router-view/>
  </div>
</template>

最終的に、すべてのルートは index.html にロードされるため、html の body にマージン 0 のスタイルを追加することでもこの問題を解決できます。

パラメータの問題#

まず、ページ間の遷移時にパラメータを渡す方法について説明します。一つはクエリ、もう一つはパラメータです。

クエリパラメータの送信と受信

送信

this.$router.push({
       path: '/Home',
       query: {
         id: res.objectId,
       }
     })

受信

this.$route.query.id

パラメータの送信と受信

送信

this.$router.push({
       name: 'Home',
       params: {
         id: res.objectId,
       }
     })

受信

this.$route.params.id

パラメータを送信する場合、push 内のパスは name を記述する必要があります。また、params は name を使用してルートを参照する必要があります。path を書いてしまうと、パラメータを受け取るページで undefined が表示されます。
また、クエリは GET リクエストのようなもので、パラメータがアドレスバーに表示されますが、パラメータは POST のようなもので、アドレスバーに渡されたパラメータは表示されません。

さて、ページ遷移時のパラメータの受け渡し方法を知っていますが、オブジェクトを渡したときに受け取ったデータは「[object object]」でした。え？？？それで型をチェックしてみましたが、文字列です... オブジェクトはどこに行ったのですか？

Google で検索した後、渡す前にオブジェクトを JSON 文字列に変換する必要があることがわかりました。

JSON.stringify(res);

そして、受け取るページで JSON 文字列をオブジェクトに戻すことができます。

JSON.parse(this.$route.query.res)

v-bind と v-model について#

これらの 2 つの要素は、このプロジェクトを急いでいるときによく出てきて、私を混乱させることがよくありました。なぜなら、どちらもデータをバインドするからです。

v-bind

v-bind は単方向のバインディング（モデルからビューへ）しか実現できず、双方向のバインディングはできません。
テキストをバインドするために使用できます：

<p>{{message}}</p>
<p v-bind="message"></p>

属性をバインドするために使用できます：

<img v-bind:src="res">

v-model

v-model は双方向のバインディングを実現できますが、フォーム内でのみ使用できます。
テキストをバインドする：

<input type="text" v-model="val" />

ラジオボタンをバインドする：

<input type="radio" value="one" v-model="radioResult" />
<input type="radio" value="two" v-model="radioResult" />

ここで、radioResult の値は、ラジオボタンのクリックに応じて one または two になります。

画像をクリックして画像を変更する#

この機能は少しトリッキーです。最初は頭が回らず、他の人の実装を見てから素晴らしいと思いました...
まず、画像のタグとファイル選択のタグを作成し、画像にクリックイベントリスナーを追加します。

<img  v-bind:src="icon" @click="selectIcon" class="icon">

次に、ファイル選択のタグを非表示にし、display スタイルを設定し、ref 属性で参照情報を登録し、change イベントを設定します。複数選択する場合は multiple 属性を設定できます。

<input type="file" ref="btn_file" @change="getFile" style="display:none">

この時点では、画像だけが表示され、ファイル選択ボタンは表示されません。画像をクリックした後に呼び出されるメソッドで、$refs を使用してファイル選択ボタンを参照し、それをトリガーします。

selectIcon: function(){
          let selectFile = this.$refs.btn_file;
          selectFile.click();
      }

これでファイル選択がトリガーされます。画像を選択すると、change イベントが発生します。

getFile: function(){
           this.file = event.target.files[0];
           //選択したファイルの形式をチェック
           if(this.file.type!="image/png"&&this.file.type!="image/bmp"&&this.file.type!="image/jpeg"&&this.file.type!="image/jpg"){
               window.alert("png、bmp、jpeg、jpgファイルのみサポートしています");
               return;
           }
           //このメソッドは、ファイルの内容を指定するDOMStringを返します。
           this.icon = window.URL.createObjectURL(this.file);
       }

ファイルのアップロードタイプを制限する場合は、accept 属性をタグに追加することもできます。**accept="image/gif, image/jpeg"** のように書くこともできます。画像形式を制限しない場合は、**accept="image/*"** と書くこともできます。ただし、accept 属性は使用しないことをお勧めします。一部のブラウザでは応答が遅くなったりサポートされなかったりすることがあり、時には指定された形式以外のファイルを選択できることがあります。JavaScript のバリデーションやバックエンドサーバーでの判断を行うべきです。

コンポーネントで他のコンポーネントを参照し、データを渡す#

ホームページを作成する際に、サイドバーのメニューをクリックすると、右側の画面に異なる画面が表示されるようにしたかったので、右側のサブコンポーネントを切り替えることにしました。
まず、サブコンポーネントを現在のコンポーネントにインポートします：
import selectClass from '…/components/selectClass’
次に、components で宣言します：

components: {
  selectClass
},

data で宣言します：

data(){
  return{
    ···
    selectClass:'selectClass',
    ···
  }
}

必要な場所で is を使用してインポートします：

<div :is="contentView" ></div>

次に、親コンポーネントから子コンポーネントにデータを渡す必要があります。いくつかの方法がありますが、ここでは props を使用します。
動的な props を親コンポーネントのデータにバインドするために v-bind を使用し、親コンポーネントのデータが変更されると、子コンポーネントも変更されます。

<div :is="contentView"   v-bind:objectId="objectId"></div>

次に、子コンポーネントで props を使用してデータを取得します：

<script>
  export default{
    props:['objectId']
    data(){
      return{

      }
    }
  },
  ······
</srcipt>

次に、子コンポーネント内で this.objectId を使用して親コンポーネントから渡されたパラメータを呼び出すことができます。

2. 最後に#

これは 3 日間で急いで作ったものです（提出しなければならないので）。だから、初めて vue を使って作ったこのプロジェクトにはかなり満足しています（へへ）。しかし、現時点ではまだ多くの改善の余地があると思います。もう少し詳しく調べてから他のことを学ぶべきだと思います。また、自分の CSS スタイルにはまだ慣れていないので、見るだけではダメです。自分で書いてみると、本当に多くの問題にぶつかることができます。自己満足にならないようにしましょう。

この期末課題は、混乱している人が強制的に運営されると言えるでしょう。