個人メディアのPC管理プラットフォームは、主に記事のリリース、素材管理を実現するためだけでなく、ファン管理や個人情報の設定のためのいくつかの機能のプロジェクト全体としてvueフレームワークに基づいて、単一ページのWeb開発を完了するには、プロジェクトは、分析のより困難な点が含まれます：。
まずはログイン機能検証編。 ★
elment-uiのレイアウトを使用してログインページ、ユーザーの携帯電話と検証コード形式の検証の必要性は、 elment-uiを使用して、単一のフォーム項目の検証のためのフォームコンポーネントの検証ルールが付属しています、続いて全体的なフォーム項目の検証 。
1.1 単一のフォーム項目のバリデーションのロジックは、主に次のような方法でel-formフォームになります: model = "form "データオブジェクトをバインドすると同時に、次のようにする必要があります: rules = "results "フィールド名にprop属性バインディングを通してフォームをバリデートする必要性にバリデーションルールオブジェクトを動的にバインドします。
1.2 いくつかの特殊なフォーム項目については、カスタムチェックサムが必要です。 チェックサムのロジックはバリデータによって設定されます。
チェックサムルールでチェックサム関数を指定するには、data オプション return で関数を設定する必要があります。チェックサム関数のルール値 callback には、現在のフィールドに対応するチェックサムルール、現在のフィールドに対応する値、チェックサムが完了したときに呼び出される必要のあるコールバック関数を参照する 3 つの削除があります。callback,error("エラー・メッセージ")
1.3 全体的なバリデーションのロジック ユーザーがログインをクリックすると、全体的なフォームバリデーションが実行されます。主な原則は、el-form フォームに ref 属性を追加して $refs からフォームオブジェクトを取得し、コンポーネントの validate 関数を呼び出してバリデーションを実行することです。
ローカルに保存されたユーザー情報のログインアクセス権と設定★。
ログインアクセス権の部分についてですが、vueの方法でガードをナビゲートしているのですが、ルートジャンプをする際にバリデーションを行う必要があります。 バリデーションルールとは、ログインページでないページにアクセスした場合や、ローカルにユーザー情報がない場合は、ログインページにジャンプさせてログインさせる必要があります。
リクエストメソッド・アクシオスの構成 ★★★★★★!
バックエンドサーバーへのリンクは非常に長く不便なので、リクエストが行われるたびにリクエストヘッダ情報を運ぶ必要があるため、axiosの設定は別のsrc/api/index.jsファイルに置かれます。
ロジックコードの実装 アクシオスのインポート
1.ベースアドレス設定
axios.defaults,baseURl="xxxx "でベースアドレスを設定しておくと、axiosを使うときにその後ろにルートを直接書くだけでよくなります。
2.リクエストヘッダの設定
最初の方法：axios.defaults.header.Authorizationのリクエストヘッダ情報を直接設定する方法ですが、トークンがローカルに保存されていない場合、トークンが未定義のときに他のページにアクセスするというバグが発生しやすくなります。これは、ログイン画面からインデックス画面へ遷移する際に、経路間でナレッジが転送されるため、トークンの値を取得できないためです。 トークンをローカルに保存するためには、一度リフレッシュする必要があります。
2つ目の方法は、各リクエストの前にリクエストインターセプターをセットアップして、ローカルトークンをリクエストヘッダに追加する方法です。
リクエスト・インターセプターとレスポンス・インターセプターは、axios流に属します。ロジックの具体的な使用方法は、基本的にaxios.interceptors.request.useの形式です（成功コールバック関数、失敗コールバック関数）
axios.interceptors.response.use(** 成功コールバック関数, ** 失敗コールバック関数)
この2つの違いは、リクエストとレスポンスの後に 、区別をしなければならないということです。
具体的な用途：
リクエストインターセプターの成功コールバック関数は、config.headerを通してリクエストヘッダを設定する設定情報のオブジェクトを参照するconfigパラメータを持ちます。
レスポンス・インターセプターの使用は、主に失敗コールバック関数の使用のためです。例えば、トークンが失敗コールバック関数のエラー・オブジェクトによる検証に失敗した後など error.response status code 失敗コールバック関数は、promis.reject(err) エラーの結果を返します。
スロットの使用
プロジェクトで使用されるスロットには、デフォルトスロットとスコープスロットの2種類があります。
具体的な使用方法について少し。
パンくずコンポーネントの親コンポーネントの駅を介してコンテンツ管理上のコンポーネントラベルに直接使用するように、それの使用することができます。
スコープスロットの最初のレンダリング位置の使用は、プレースホルダを介して内部は、任意のhtmlタグや要素- UIコンポーネントのマークアップを記述することができます scope.rowを介してデータを使用する場合は、フィールドのデータを取得するには
コンポーネントのパッケージ化プロセスとプラグインの使用
このプロジェクトでは、パンくずコンポーネント、ドロップダウンボックスコンポーネント、イメージアップロードコンポーネントの3つのコンポーネントをカプセル化しています。
パンくずコンポーネントは、このスロットと組み合わせて使うのが比較的簡単です。
ドロップダウンボックスコンポーネントをラップすると、少し複雑になりますが、許容範囲です。 ビジネスロジックは次のようになります:★★★★★。
まず、el-selectコンポーネントを使ってレイアウトを完成させますが、このコンポーネントに依存するデータをバインドする必要があります。el-selectでは、データを表示する値の識別やidであるvalueをバインドする必要があります。このプロジェクトでは、el-optionを使用しています。el-optionも依存する値をバインドする必要があります。 コンポーネントの独立した機能が完成したら、このコンポーネントではchannel_idが関係する値の受け渡しの問題を考える必要があります。このコンポーネントでは、channel_idが関係しているので、値は親コンポーネントから渡さ れ、prop経由で受け取りますが 、注意点として、 渡された値は一方向で変更できないので 、サブコンポーネントに値をバインドするときに、双方向バインディングを使用することはできません 。:modelを:valueに変更することで値をバインドし、 サブコンポーネントが値を受け取ったときに、親コンポーネントに新しい値を返す必要があります。子コンポーネントが値を受け取った後、親コンポーネントに新しい値を返す必要があります。 ここでのロジックは、el-selectコンポーネントの@changeイベントを使用することです。 このイベントはデフォルトで、変更されたオプションの新しい値を参照するパラメータを持ちます。 新しい値valを取得した後、親コンポーネントのカスタム@inputメソッドを$emit()によってトリガーし、change_idに変更を加えることで、双方向通信の効果を実現します。value と @input を使うことで、v-model の省略記法を使うこともできます。
写真をアップロードするロジック：より複雑な、しかし、場所の複雑さは、双方向通信ではありませんが、ページの動的な効果では、試しに数回書くことができます データを通信するコンポーネントとしては、イメージリンクのアドレスに設定されている articleForm.cover.images [0] つまり、データをアップロードする必要がある記事の記事をクリック ★★★★★
リッチテキストとチェックサムの使用
使用方法：3ステップ インストール ----> ローカル登録 ----> コンポーネントの使用
インストール:npm install vue-quill-editor
部分登録：スタイルのインポートも必要
import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import { quillEditor } from 'vue-quill-editor'export default { components: { quillEditor }}
中古部品。
<quill-editor v-model="content" :options="editorOption" /> <!-- editorOption コンフィギュレーション・オブジェクト：コンフィギュレーション・リッチテキストの機能とは--。>
リッチテキストチェックサム。
バリデーションはelement-uiが提供するコンポーネントによって行われます。 バリデーションのタイミングも、ぼかしやルールの変更に基づいて設定されます。イベントがトリガーされたら、コンポーネントオブジェクトを取得し、validateField("content")を使ってバリデーションする必要があります。 それと、contentフィールドのバリデーションルールを設定する必要もあります。
チャンネルコンポーネントとアップロードコンポーネントはelement-uiコンポーネントなので、直接チェックできます。
親子以外の構成要素間のコミュニケーション ★★★★★★。
このロジックは子から親に値を渡す場合とよく似ていますが、値がコンポーネントオブジェクトである this オブジェクトを通して渡され、それが vue オブジェクトに置き換えられている点が異なります。ユーザーのname属性を変更する場合、右上に表示されるニックネームを変更するために、変更された値をフロントページのレイアウトコンポーネントに渡す必要があります。 はい？
使い方。
src/eventBus.jsでのvueの導入とコンストラクタのエクスポート
import Vue from 'vue'export default new Vue()
設定でeventBusをインポートし、eventBus経由で値を渡します。
レイアウトにもeventBusをインポートし、eventBus.@on(カスタム関数名,data=>{)を渡します。
バラバラバラ、大変なだけで、大丈夫でしょう。
})
安全な最大数の処理
カスタマイズされた方法でイメージをアップロードします。
通常のイメージのアップロードは、axiosを経由してアップロードされるのではなく、el-uploadというelement-uiコンポーネントを経由してアップロードされるので、このコンポーネントにアクティブヘッダ（リクエストヘッダ）の名前（フィールド名）を設定する必要があります。また、このコンポーネントはデフォルトでpostリクエストメソッドを使用するようになっているので、それほど難しくはないのですが、少し複雑です。少し複雑です。
バックエンドリクエストの方法が異なるため、カスタムアップロードを実現するには http-request 属性を必要とするパッチリクエストを行う必要があります。 この方法では、パラメータはコンポーネントの設定情報であり、イメージ情報は {file} を通して取得します。 formdata のインスタンス化によってイメージ情報を渡した後、axios を通して直接渡すことで可能となります。注意すべき点がいくつかあります。第一に、http-requestはコンポーネントの設定情報を受け取り、ファイルを抽出する必要があること、第二に、リクエストを送信する方法はelement-uiコンポーネントの内部動作であることです。 これはすでに設定されているため、axios経由で行われ、直接データを送信することができます。
記事の編集ページと記事の公開ページをマージします。
核心的な点は、 ルートジャンプの変更はコンポーネントの初期化に関与 しますが、記事の投稿と編集を使用する場合、ルートの変更には関与しません。 もしroute.query.idがあれば、通常のget dataを通して$route.query.idをリッスンし、データがなければデータをレンダリングします。
ルートパラメータの違い
paramsとqueryの違い。
まず、paramsは通常、例えばパラメータを持つ場合、nameと一緒に使われます。
{ name:'user', params:{ id:10000}
ルートによってレンダリングされる/userは、urlに反映されないパラメータを持ちますが、渡されたパラメータを取得する場合、$route.params.idを介して取得することができます。
パラメータを取るクエリは通常パスと組み合わされ、取るべきパラメータがある場合は、例えばクエリの中に書かれます。
{ path:'/user, query:{ id:10000 }}
これは /user?id=00100としてルートに表示されます。
この値は $route.query.id で取得できます。
しかし、もうひとつ注意しなければならないのは、以下のようなルーティング・コンフィギュレーションがあることです。
{ path:'/user/:id',}
ブラウザに表示されるスタイルは/user/10000のようなもので、$route.params.idから取得する必要があります。
