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

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

<テンプレート>
    <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(エラー)
          })
      }
    }
  }
}
</スクリプト>

プロキシテーブル: {
        '/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
            }
        }
    },

// `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/>'
})

<?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]) を返します。
    }
 
}