vue+tp5はシンプルなログイン機能を実現

vue+tp5はシンプルなログイン機能を実現

この記事では、参考までに、簡単なログイン機能を実装するためのvue+tp5の具体的なコードを紹介します。具体的な内容は次のとおりです。

準備: package.jsonに示されているように、vue-cli、element-uiをインストールします。インストール手順に従ってください。

1. srcディレクトリにビューページを作成する

2. /src/router/index.js に次のコードを記述します。

'vue' から Vue をインポートします
'vue-router' から Router をインポートします。
'@/components/HelloWorld' から HelloWorld をインポートします。
'@/views/login/index.vue' からログインをインポートします。
 
Vue.use(ルーター)
 
デフォルトの新しいルーターをエクスポートします({
  ルート: [
    {
      パス: '/'、
      名前: 'HelloWorld',
      コンポーネント: HelloWorld
    }, {
      パス: '/login',
      コンポーネント: ログイン
    }
  ]
})

3. app.vue を次の図のように復元します。

4. /src/views/login/index.vue でコードの記述を開始します (ログイン テンプレートを見つけます)。

<テンプレート>
    <div id="app-1">
        <div class="content">
            <div class="content_input">
                <div class="title">
                    <p>管理者ログイン</p>
                </div>
                <el-input v-model="UserName" clearable placeholder="ユーザー名"></el-input>
                <el-input v-model="PassWord" clearable show-password placeholder="Password"></el-input>
                <div class="content_button">
                    <el-button type="primary" @click="SignIn">ログイン</el-button>
                </div>
            </div>
        </div>
    </div>
</テンプレート>
 
<スクリプト>
'@/assets/css/style.css' をインポートします
定数 axios = require('axios')
エクスポートデフォルト{
  名前: 'ログイン',
  データ () {
    戻る {
      ユーザー名: '',
      パスワード: ''
    }
  },
  メソッド: {
    サインイン () {
      それを = これとする
      ユーザー名 = that.UserName とします
      パスワード = that.PassWord とします
      if (!ユーザー名) {
        this.$notify.error({
          タイトル: 「エラー」、
          メッセージ: 'ユーザー名は空欄にできません'
        });
        偽を返す
      } そうでなければ (!パスワード) {
        this.$notify.error({
          タイトル: 「エラー」、
          メッセージ: 「パスワードは空欄にできません」
        })
        偽を返す
      } それ以外 {
        // 処理のために情報をバックエンドに渡す axios.post('/api/login/doLogin', {
          名前: ユーザー名、
          psw: パスワード
        })
          .then(関数 (応答) {
            console.log(応答)
          })
          .catch(関数 (エラー) {
            コンソール.log(エラー)
          })
      }
    }
  }
}
</スクリプト>

5. config/index.js で proxytable を設定し、クロスドメインリクエストに axios を使用する

プロキシテーブル: {
        '/api/*': { // api はプロキシインターフェースです target: 'http://localhost:8085/index.php/index', // ここでローカルサービスにプロキシします changeOrigin: true,
            パス書き換え: {
              // これはリンクを追加します。たとえば、インターフェースに実際に /api が含まれている場合、この構成は必須です。
              '^/api': '/', // と次の 2 つの書き方があり、人によってニーズが異なります。
              // /api + /api == http://localhost:54321/api と同等
              // '^/api' と記述した場合: '/'
              // /api + / == http://localhost:54321/ と同等
              // /api ここ == http://localhost:54321
            }
        }
    },

6. /src/main.js

// `import` コマンドで読み込む Vue ビルド バージョン
// (ランタイムのみまたはスタンドアロン) が webpack.base.conf にエイリアスとともに設定されています。
'vue' から Vue をインポートします
'./App' から App をインポートします
'vue-router' から Router をインポートします。
'./router' からルーターをインポートします
'axios' から axios をインポートします
'element-ui' から ElementUI をインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。
'font-awesome/css/font-awesome.min.css' をインポートします。
 
Vue.use(要素UI)
Vue.use(ルーター)
 
Vue.config.productionTip = false
Vue.prototype.$axios = axios
 
/* eslint を無効にする no-new */
新しいVue({
  el: '#app',
  ルーター、
  コンポーネント: { アプリ },
  テンプレート: '<App/>'
})

7.tp5バックエンドのindex/controller/Login.phpで:

<?php
/**
 * PhpStorm によって作成されました。
 * ユーザー: mx1
 * 日付: 2021/11/9
 * 時間: 15:21
 */
 
名前空間 app\index\controller;
 
 
think\Controller を使用します。
 
クラスLoginはControllerを拡張します
{
    パブリック関数doLogin(){
        $name=input('post.name');
        $psw=入力('post.psw');
        json([$name,$psw]) を返します。
    }
 
}

注: 設定したプロキシテーブルが機能しない場合は、インターフェースが正しいことを確認してから、cmd でプロジェクト ディレクトリを見つけて、npm run dev を実行します。

効果:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueはログインしていないときにログインページにジャンプする方法を実装します
  • Vue 学習ロード ログイン登録サンプルコード
  • Vue WeChat 認証ログインソリューション
  • Vue+springboot フロントエンドとバックエンドの分離により、シングルサインオンのクロスドメイン問題解決を実現
  • Vue はログイン後に前のページへのページジャンプを実装します
  • Vue.jsとElement-UIを使用してシンプルなログインページを作成する例
  • vueルーティングジャンプ時にユーザーがログインしているか判断する実装
  • Vueはログインインターフェースの検証コード機能を実装します
  • Vue はログインページの検証コードと検証プロセスの分析を実装します (初心者向け)
  • Vue.jsは、ユーザーコメント、ログイン、登録、情報変更機能を実装します。

<<:  ChromeとIEに対応したWMPに埋め込まれたHTMLの詳細な紹介

>>:  CSS 要素を表示および非表示にする 9 つの方法

推薦する

JS での Reduce() メソッドの使用の概要

目次1. 文法2. 例3. その他の関連方法長い間、reduce() メソッドの具体的な使い方を理解...

MySQL 増分バックアップとブレークポイントリカバリスクリプトの例

導入増分バックアップとは、完全バックアップまたは最後の増分バックアップの後、後続の各バックアップでは...

Vue 仮想リストの実例

目次序文デザイン成し遂げるまとめ序文最近は、いつも延々とスワイプしています。 Weibo をチェック...

jQuery ステップ進行軸プラグインの実装コード

毎日のjQueryプラグイン - ステップ進捗軸 ステップ進捗軸ツール系のサイトでは入門チュートリア...

CSS と JS を使用して下線効果を実装する方法の例

この記事では、主に 2 種類の下線の動的効果について説明します。1 つ目は、ホバーすると X 軸が内...

MySQLでバッチを更新するいくつかの方法

通常、フィールド値を更新するには次の SQL ステートメントを使用します。 mytable を更新し...

MySQLは外部SQLスクリプトファイルのコマンドを実行します

目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...

MySQL の制限パフォーマンス分析と最適化

1. 結論構文: 制限オフセット、行結論: 同じ行条件では、オフセット値が大きいほど、limitステ...

Docker コンテナ ソース コードのデプロイ httpd ストレージ ボリュームを使用して Web サイトをデプロイする (推奨)

目次Dockerコンテナのソースコードを使用してhttpdをデプロイし、ストレージボリュームを使用し...

JavaScript ES 新機能ブロックスコープ

目次1. ブロックスコープとは何ですか? 2. ブロックスコープが必要なのはなぜですか? 3. 関数...

Linux crontab コマンドの使用

1. コマンドの紹介contab (cron テーブル) コマンドは、Windows のスケジュール...

nginx を最適化する 6 つの方法

1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...

MySQL でストアド プロシージャを作成し、ループでレコードを追加する方法

この記事では、例を使用して、MySQL でストアド プロシージャを作成し、ループでレコードを追加する...

Linux 環境で crontab コマンドを使用して、スケジュールされた定期的な実行タスクを設定します (PHP 実行コードを含む)

この記事では、Linux 環境で crontab コマンドを使用して、タスクの定期的な実行をスケジュ...

Vue はシームレスなカルーセル効果 (マーキー) を実現します

この記事では、シームレスなカルーセル効果を実現するためのVueの具体的なコードを例として紹介します。...