Vueで実装された期末課題

終わりに、緊張感のある期末試験と 2 つの大規模なプロジェクトのプレゼンテーションを終えました。
唯一のオープンブックの試験である hadoop が一番自信がない科目だったのは驚きでした。教科書をめくっても試験の内容は見つからず、オペレーティングシステムも難しかったですが、他の科目と比べればまだマシでした（平時の成績の割合が 6 で期末試験の割合が 4）。
実は主な原因は自分があまり聞いていなかったことです、へへ。

ゼロ#

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

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

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

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

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

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

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

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

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

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

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

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

パラメータの問題#

まず、ページ間のパラメータの受け渡し方法について説明します。一つは query、もう一つは params です。

query パラメータの受け渡しと受け取り

パラメータの受け渡し

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

パラメータの受け取り

this.$route.query.id

params パラメータの受け渡しと受け取り

パラメータの受け渡し

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

パラメータの受け取り

this.$route.params.id

params パラメータを受け渡す場合、push のパスは name を指定する必要があります。params は name を使用してルートを参照する必要があります。path を指定すると、パラメータを受け取るページで undefined が表示されます。
また、パラメータの受け渡し方法には、query は GET リクエストのようなもので、パラメータがアドレスバーに表示されますが、params は 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 を使用します。
v-bind を使用して動的な props を親コンポーネントのデータにバインドし、親コンポーネントのデータが変更されると、子コンポーネントも変更されます：

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

次に、子コンポーネントで props を使用して受け取ります：

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

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

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

2. 最後に#

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