Vueをベースにユーザーが登録・ログインできるTodo-Listリスト

使用されている技術

  1. ヴュー
  2. 足場
  3. ルーティング
  4. 要素UI

ファイルディレクトリ

  1. 送信元
    1. コンポーネント
      1. Enter.view
      2. MyBanner.vue
      3. MyFooter.vue
      4. MyHeader.vue
      5. MyItem.view
      6. MyList.vue
    2. ページ
      1. Login.vue
      2. register.vue
      3. 時間ビュー
      4. Todolist.vue
    3. ルーター
      1. インデックス.js
    4. app.vue
    5. main.js

実装手順

ページ全体は 2 つのモジュールに分かれており、上部のバナーにはウェルカムメッセージと、その下のユーザーが必要とするログイン登録カウントダウンページの再ログイン操作が表示されます。

以下のコンポーネントは 4 つのボタンに対応し、ルーティングを使用して切り替えを実現します。

ここに画像の説明を挿入

メインコンテンツ(todoリスト)

4 つのコンポーネント:

  1. ヘッドマイヘッダー
  2. 中間コンテンツ: MyList
    1. マイアイテム
  3. 下: マイフッター

ここに画像の説明を挿入

カウントダウンページ

主にこれら 5 つの属性を計算し、データをページに配置する必要があります。特定のコードの背後にあるコード リンクは次のとおりです。

ここに画像の説明を挿入

ログイン、コンポーネントの登録

入力フォームの内容を2つ入力します

ここに画像の説明を挿入

ルーティング

プログラムによるルーティングを通じてコン​​ポーネント間をジャンプし、スタックへのプッシュと置換を巧みに使用して元のサイトをカバーし、ユーザー情報のセキュリティを保護します

ソースコード

VsCode スキャフォールディング環境を通じてファイル プロジェクトを実行し、src ディレクトリでファイルを見つけて実行する必要があります。

リンク: https://pan.baidu.com/s/1poYKKa4EgcLEgz7P7CLwdQ?pwd=ae69
抽出コード: ae69

おすすめ

転載: blog.csdn.net/Chen__sir__/article/details/127634515