vue + tp5 realisiert eine einfache Anmeldefunktion

Vue von „vue“ importieren
Router von „vue-router“ importieren
importiere HelloWorld aus '@/components/HelloWorld'
Login aus „@/views/login/index.vue“ importieren
 
Vue.use(Router)
 
exportiere standardmäßig einen neuen Router({
  Routen: [
    {
      Weg: '/',
      Name: "Hallo Welt",
      Komponente: HelloWorld
    }, {
      Pfad: '/login',
      Komponente: Login
    }
  ]
})

<Vorlage>
    <div id="app-1">
        <div Klasse="Inhalt">
            <div Klasse="Inhaltseingabe">
                <div Klasse="Titel">
                    <p>Administrator-Anmeldung</p>
                </div>
                <el-input v-model="Benutzername" clearable placeholder="Benutzername"></el-input>
                <el-input v-model="Passwort" clearable show-password placeholder="Passwort"></el-input>
                <div Klasse="Inhaltsschaltfläche">
                    <el-button type="primary" @click="SignIn">Anmelden</el-button>
                </div>
            </div>
        </div>
    </div>
</Vorlage>
 
<Skript>
importiere '@/assets/css/style.css'
const axios = erfordern('axios')
Standard exportieren {
  Name: 'Login',
  Daten () {
    zurückkehren {
      Benutzername: '',
      Passwort: ''
    }
  },
  Methoden: {
    Anmelden () {
      lass das = dies
      let username = that.Benutzername
      let password = das.Passwort
      if (!Benutzername) {
        dies.$notify.error({
          Titel: 'Fehler',
          Meldung: „Benutzername darf nicht leer sein“
        });
        return false
      } sonst wenn (!Passwort) {
        dies.$notify.error({
          Titel: 'Fehler',
          Meldung: „Das Passwort darf nicht leer sein“
        })
        return false
      } anders {
        // Übergeben Sie die Informationen zur Verarbeitung an das Backend axios.post('/api/login/doLogin', {
          Name: Benutzername,
          psw: Passwort
        })
          .then(Funktion (Antwort) {
            console.log(Antwort)
          })
          .catch(Funktion (Fehler) {
            console.log(Fehler)
          })
      }
    }
  }
}
</Skript>

Proxy-Tabelle: {
        '/api/*': { // API ist eine Proxy-Schnittstelle target: 'http://localhost:8085/index.php/index', // Hier leite ich den lokalen Dienst changeOrigin weiter: true,
            PfadNeu schreiben: {
              // Hiermit wird ein Link angehängt. Wenn die Schnittstelle beispielsweise wirklich /api enthält, ist diese Konfiguration erforderlich.
              '^/api': '/', // und die folgenden beiden Schreibweisen variieren je nach den Anforderungen der einzelnen Benutzer.
              // Entspricht /api + /api == http://localhost:54321/api
              // Wenn als '^/api' geschrieben: '/'
              // Entspricht /api + / == http://localhost:54321/
              // /api hier == http://localhost:54321
            }
        }
    },

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias ​​festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router von „vue-router“ importieren
Router aus „./router“ importieren
Axios von „Axios“ importieren
importiere ElementUI von „element-ui“
importiere 'element-ui/lib/theme-chalk/index.css'
importiere 'font-awesome/css/font-awesome.min.css'
 
Vue.use(ElementUI)
Vue.use(Router)
 
Vue.config.productionTip = falsch
Vue.prototype.$axios = axios
 
/* eslint-deaktivieren Sie no-new */
neuer Vue({
  el: '#app',
  Router,
  Komponenten: { App },
  Vorlage: '<App/>'
})

<?php
/**
 * Erstellt von PhpStorm.
 * Benutzer: mx1
 * Datum: 09.11.2021
 * Uhrzeit: 15:21
 */
 
Namespace App\Index\Controller;
 
 
verwenden Sie think\Controller;
 
Klasse „Login“ erweitert Controller
{
    öffentliche Funktion doLogin(){
        $name=Eingabe('Beitrag.name');
        $psw=input('post.psw');
        gibt json zurück([$name,$psw]);
    }
 
}