Schritte zum Erstellen des Projekts vite+vue3+element-plus

$ npm init vite-app <Projektname>
$ cd <Projektname>
$ npm installieren
$ npm ausführen dev

npm installiere element-plus --save

importiere { createApp } von 'vue'
importiere ElementPlus von „element-plus“;
importiere „element-plus/lib/theme-chalk/index.css“;
App aus „./App.vue“ importieren;

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

npm ich sass -D

npm und eslint -D

npx eslint --init

npm installiere vue-router@4

importiere * als VueRouter von „vue-router“

const Routen = [
  {
    Weg: '/',
    Komponente: () => import('../page/Home.vue')
  }, {
    Pfad: '/login',
    Komponente: () => import('../page/Login.vue')
  }
]

exportiere Standard-VueRouter.createRouter({
  Verlauf: VueRouter.createWebHashHistory(),
  Routen
})

Router aus „./router“ importieren
//...
app.use(Router)

npm installiere vuex@next --save

importiere { createStore } von 'vuex'

exportiere Standard createStore({
  Zustand () {
    zurückkehren {
      Benutzername: ''
    }
  },
  Mutationen:
    setUserName (Status, Nutzlast) {
      Status.Benutzername = Nutzlast
    }
  }
})

vuex aus „./store“ importieren
//...
app.use(vuex)

npm und axios

// axios.js
Axios von „Axios“ importieren
// Konfiguration aus „../../config“ importieren
importiere { useRouter } von 'vue-router'

Standardfunktion exportieren () {
  // 1. Wenn beim Senden einer Anfrage ein Token vorhanden ist, muss es an den Anfrageheader angehängt werden const token = localStorage.getItem('token')
  let-Instanz = axios

  wenn (Token) {
    Instanz = axios.create({
      // Basis-URL: Konfigurationsserver,
      Überschriften: {
        Autorisierung: 'Bearer' + Token
      }
    })
  }

  const router = useRouter()
  Instanz.Interceptors.Antwort.Verwenden(
    (bzw.) => {
      // 2. Wenn beim Antworten ein Token vorhanden ist, speichern Sie das Token lokal (localstorage).
      if (bzw.Daten.Daten.Token) {
        localStorage.setItem('Token', bzw. Daten.Daten.Token)
      }
      // 3. Wenn beim Antworten der Antwortnachrichtencode 403 lautet (kein Token, Token ungültig), löschen Sie das Token lokal
      wenn (bzw.Datencode === 403) {
        localStorage.removeItem('Token')
        localStorage.removeItem('Benutzername')
        router.push({ Name: 'Anmelden' })
      }
      Rückkehr bzw.
    },
    (fehler) => {
      returniere Promise.reject(err)
    }
  )

  Rückgabeinstanz
}

Importanforderung von „./axios.js“
Konfiguration aus „../../config“ importieren
Standard exportieren {
  // Anmelden login (Parameter) {
    Rückgabeanforderung (). Post (`${config.server}/login`, Parameter)
  },
  // Benutzerliste abrufen getUserList (params) {
    returniere Anfrage().get(`${config.server}/user/list`, {
      Parameter: Parameter
    })
  },
  // Einen Benutzer hinzufügen createUser (params) {
    Rückgabeanforderung (). Post (`${config.server}/user/`, Parameter)
  },
  //...

<Vorlage>
  <div Klasse="Benutzer-Wrap">
      <el-Schaltfläche
        Klasse="create-btn"
        Typ="Erfolg"
        Größe="klein"
      @click="handleCreate">Benutzer hinzufügen+</el-button>
      <el-Tabelle
        :data="Tabellendaten"
        Stil="Breite: 100%">
        <el-table-column
            label="Benutzername"
            prop="Benutzername">
        </el-Tabellenspalte>
        <el-table-column
            label="Passwort"
            prop="Passwort">
        </el-Tabellenspalte>
        <el-table-column
            align="rechts">
            <Vorlage #header>
                <el-Eingabe
                v-model="Suche"
                @blur="Suchbenutzer"
                Größe="mini"
                Platzhalter="Benutzernamen für die Suche eingeben"/>
            </Vorlage>
            <Vorlage #default="Umfang">
                <el-Schaltfläche
                Größe="mini"
                @click="handleEdit(scope.$index, scope.row)">Bearbeiten</el-button>
                <el-Schaltfläche
                Größe="mini"
                Typ="Gefahr"
                @click="handleDelete(scope.$index, scope.row)">Löschen</el-button>
            </Vorlage>
        </el-Tabellenspalte>
    </el-Tabelle>
    <el-pagination
      :hide-on-single-page="AufEinzelnerSeiteausblenden"
      Klasse="Seitenumbruch"
      @size-change="Größenänderungsgriff"
      @current-change="AktuelleÄnderung handhaben"
      :current-page="aktuelleSeite"
      :Seitengrößen="[10, 20, 30, 40]"
      :page-size="Seitengröße"
      Layout = "Gesamt, Größen, Zurück, Pager, Weiter, Jumper"
      :total="Gesamtzahl">
    </el-pagination>
    <el-dialog title="Benutzerinformationen" v-model="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="Benutzername" :label-width="formLabelWidth">
                <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="Passwort" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <Vorlage #Fußzeile>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Abbrechen</el-button>
                <el-button type="primary" @click="confirmUser">Bestätigen</el-button>
            </span>
        </Vorlage>
    </el-dialog>
  </div>
</Vorlage>

<Skript>
importiere { ref, berechnet } von 'vue'
API importieren aus '../../../api/index'
importiere { ElMessage, ElMessageBox } von 'element-plus'

Standard exportieren {
  aufstellen () {
    let status = ''
    let userId = null
    const formLabelWidth = ref('120px')

    // Benutzerliste abrufen const tableData = ref([])
    asynchrone Funktion getList (Parameter) {
      const res = warte auf api.getUserList(params)
      wenn (res.data.success) {
        tableData.value = res.data.data.userList
        totalCount.value = res.data.data.count
        Suchwert = ''
      } anders {
        ElMessage.error('Benutzerliste konnte nicht abgerufen werden:' + res.data.msg)
      }
    }
    getList()

    Konstante Form = ref({
      Benutzername: '',
      Passwort: ''
    })

    const dialogFormVisible = ref(false)

    // Benutzerinformationen übermitteln async function confirmUser () {
      // Überprüfen Sie, ob die Informationen vollständig sind, wenn (!(form.value.username && form.value.password)) {
        ElMessage.error('Unvollständige Formularinformationen')
        zurückkehren
      }
      Schalter (Status) {
        Fall 'erstellen':
          Benutzer erstellen(Formular.Wert)
          brechen
        Fall 'Bearbeiten':
          updateUser(Benutzer-ID, Formularwert)
          brechen
      }
    }

    // Benutzer hinzufügen asynchrone Funktion handleCreate () {
      form.value = {
        Benutzername: '',
        Passwort: ''
      }
      dialogFormVisible.value = true
      Status = "Erstellen"
    }
    // Benutzerinformationen hinzufügen async function createUser (params) {
      const res = warte auf api.createUser(params)
      wenn (res.data.success) {
        getList()
        ElMessage.success({
          Meldung: „Erfolgreich hinzugefügt“,
          Typ: "Erfolg"
        })
        dialogFormVisible.value = false
      } anders {
        ElMessage.error('Hinzufügen fehlgeschlagen:' + res.data.msg)
      }
    }

    // Benutzer bearbeiten asynchrone Funktion handleEdit (Index, Zeile) {
      console.log(Index, Zeile)
      dialogFormVisible.value = true
      Status = "Bearbeiten"
      form.value.username = row.username
      form.value.password = row.password
      Benutzer-ID = Zeile.ID
    }
    // Benutzerinformationen ändern async function updateUser (id, params) {
      const res = warte auf api.updateUser(id, params)
      wenn (res.data.success) {
        ElMessage.success({
          Meldung: 'Änderung erfolgreich',
          Typ: "Erfolg"
        })
        getList()
        dialogFormVisible.value = false
      } anders {
        ElMessage.error('Änderung fehlgeschlagen: ' + res.data.msg)
      }
    }

    // Benutzer löschen const handleDelete = async (index, row) => {
      ElMessageBox.confirm('Dieser Vorgang löscht den Benutzer dauerhaft. Möchten Sie fortfahren?', 'Prompt', {
        confirmButtonText: 'Bestätigen',
        cancelButtonText: 'Abbrechen',
        Typ: "Warnung"
      }).dann(async () => {
        warte auf delUser(row.id)
      }).catch(() => {
        ElMessage({
          Typ: "Info",
          Nachricht: ‚Gelöscht‘
        })
      })
    }
    // Benutzerinformationen löschen async function delUser (id) {
      const res = warte auf api.delUser(id).
      wenn (res.data.success) {
        getList()
        ElMessage.success({
          Typ: "Erfolg",
          Nachricht: „Erfolgreich gelöscht!“
        })
      } anders {
        ElMessage.error('Löschen fehlgeschlagen: ' + res.data.msg)
      }
    }

    // Benutzer suchen const search = ref('')
    asynchrone Funktion searchUser () {
      aktuellerSeitenwert = 1
      Seitengröße.Wert = 10
      wenn (Suchwert === '') {
        getList({ Seitenindex: aktuelleSeite.Wert, Seitengröße: Seitengröße.Wert })
        zurückkehren
      }
      aktuelleSeite.val = 1
      const res = warte auf api.findUserByUsername({ Benutzername: Suchwert })
      wenn (res.data.success) {
        tableData.value = res.data.data.userList
        ElMessage.success({
          Meldung: 'Suche erfolgreich',
          Typ: "Erfolg"
        })
      } anders {
        ElMessage.error('Änderung fehlgeschlagen: ' + res.data.msg)
      }
    }

    // Seitenbezogen const totalCount = ref(0)
    const aktuelleSeite = ref(1)
    const Seitengröße = ref(10)
    Funktion handleSizeChange (Wert) {
      Seitengröße.Wert = Wert
      getList({ Seitenindex: aktuelleSeite.Wert, Seitengröße: Wert })
    }
    Funktion handleCurrentChange (Wert) {
      aktuelleSeite.Wert = Wert
      getList({ Seitenindex: Wert, Seitengröße: Seitengröße.Wert })
    }
    // Blende das Paging-Plugin aus, wenn mehr als eine Seite vorhanden ist. const hideOnSinglePage = computed(() => {
      gibt totalCount.value <= 10 zurück
    })

    zurückkehren {
      Tabellendaten,
      suchen,
      DialogFormSichtbar,
      bilden,
      Formlabelbreite,
      Benutzer erstellen,
      Griff
      handleDelete,
      Benutzer bestätigen,
      GriffErstellen,
      Suchbenutzer,
      aktuelleSeite,
      Gesamtanzahl,
      Größenänderung des Griffs,
      Aktuelle Änderung behandeln,
      Seitengröße,
      AufEinzelseiteausblenden
    }
  }
}
</Skript>

<style lang="scss" scoped>
    .Benutzer-Wrap{
        Breite: 100 %;
        Mindestbreite: 500px;
        .erstellen-btn{
            Rand unten: 10px;
            Anzeige: Flex;
            Inhalt ausrichten: Flex-Ende;
        }
        .Seitenumbruch{
            Rand oben: 10px;
        }
    }
</Stil>