この記事では、参考までに、簡単なログイン機能を実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ChromeとIEに対応したWMPに埋め込まれたHTMLの詳細な紹介
目次1. 文法2. 例3. その他の関連方法長い間、reduce() メソッドの具体的な使い方を理解...
導入増分バックアップとは、完全バックアップまたは最後の増分バックアップの後、後続の各バックアップでは...
目次序文デザイン成し遂げるまとめ序文最近は、いつも延々とスワイプしています。 Weibo をチェック...
毎日のjQueryプラグイン - ステップ進捗軸 ステップ進捗軸ツール系のサイトでは入門チュートリア...
この記事では、主に 2 種類の下線の動的効果について説明します。1 つ目は、ホバーすると X 軸が内...
通常、フィールド値を更新するには次の SQL ステートメントを使用します。 mytable を更新し...
目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...
1. 結論構文: 制限オフセット、行結論: 同じ行条件では、オフセット値が大きいほど、limitステ...
目次Dockerコンテナのソースコードを使用してhttpdをデプロイし、ストレージボリュームを使用し...
目次1. ブロックスコープとは何ですか? 2. ブロックスコープが必要なのはなぜですか? 3. 関数...
1. コマンドの紹介contab (cron テーブル) コマンドは、Windows のスケジュール...
1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...
この記事では、例を使用して、MySQL でストアド プロシージャを作成し、ループでレコードを追加する...
この記事では、Linux 環境で crontab コマンドを使用して、タスクの定期的な実行をスケジュ...
この記事では、シームレスなカルーセル効果を実現するためのVueの具体的なコードを例として紹介します。...