Detaillierte Erklärung zur Verwendung von ElementUI in Vue

Detaillierte Erklärung zur Verwendung von ElementUI in Vue

Anmeldung + SessionStorage

Effektanzeige

Bildbeschreibung hier einfügen

Nach einer erfolgreichen Anmeldung wird die Benutzer-ID im Front-End-SessionStorage gespeichert. Der Interceptor fängt ab, je nachdem, ob die Benutzer-ID vorhanden ist. Die Berechtigungen des Benutzers können auch im SessionStorage gespeichert werden. Stellen Sie dann beim Zugriff auf eine bestimmte Seite in der Create-Methode fest, ob die Berechtigung verfügbar ist.

<Vorlage>
	<div Klasse="login-wrap">
		<el-form class="login-container" ref="loginFormRef" :model="loginForm">
			<h1 class="title">Benutzeranmeldung</h1>
			<el-form-item label="">
				<el-input type="text" placeholder="Benutzerkonto" v-model="loginForm.username" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="">
				<el-input type="text" placeholder="Benutzerpasswort" v-model="loginForm.password" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item>
				<el-radio-group v-model="loginForm.resource">
					<el-radio label="Administrator"></el-radio>
					<el-radio label="Normaler Benutzer"></el-radio>
				</el-radio-gruppe>
			</el-form-item>

			<el-form-item>
				<template slot-scope="Umfang">
					<el-button type="primary" @click="doLogin()" style="width: 100%;">Benutzeranmeldung</el-button>
					<!-- <el-button style="width: 48%;" @click="gotoRegister" >Benutzerregistrierung</el-button> -->
				</Vorlage>
			</el-form-item>
			<!-- <el-row style="text-align: center;">

                <el-link @click="gotoRegister()">Benutzerregistrierung</el-link>
                <el-link>Passwort vergessen?</el-link>

            </el-row> -->
		</el-form>
	</div>
</Vorlage>

<Skript>
	Standard exportieren {
		Daten: Funktion() {
			zurückkehren {

				Anmeldeformular: {
					Benutzername: '',
					Passwort: '',
					Ressource: ''
				}
			}
		},

		Methoden: {
			gotoRegister: Funktion() {
				dies.$router.push({
					Name: "Registrieren"
				});
			},
			doLogin() {
				let Ressource = this.loginForm.resource
				dies.$refs.loginFormRef.validate(async valid => {
					wenn (!gültig) zurückgeben;
					if (Ressource == "Administrator") {
						Konstante {
							Daten:res
						} = warte auf this.axios.post("http://localhost:8088/loginadmin", this.loginForm)

						wenn (res) {
							this.$message.success("Administrator-Anmeldung erfolgreich")
							sessionStorage.setItem("personid","ljhjiayou")
						
							dies.$router.push({
								Pfad: "/dong"
							});
						} anders {
							this.$message.error("Konto- oder Passwortfehler")
						}
						//Normale Benutzeranmeldung }else{
						
						Konstante {
							Daten:res
						} = warte auf this.axios.post("http://localhost:8088/loginuser", this.loginForm)
						
						wenn (res) {
							Konsole.log(res)
							this.$message.success("Normale Benutzeranmeldung erfolgreich")
							sessionStorage.setItem("Personen-ID",res)
							dies.$router.push({
								Pfad: "/Person"
							});
						} anders {
							this.$message.error("Konto- oder Passwortfehler")
						}
					}

				})
			}
		}
	}
</Skript>
//scoped="scoped" bedeutet, dass der Stil nur die aktuelle VUE regelt
<Stil scoped="Bereich">
	.login-wrap {
		Box-Größe: Rahmenbox;
		Breite: 100 %;
		Höhe: 100%;
		Polsterung oben: 10%;
		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzNjFweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDEzNjEgNjA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXAgMjE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQW50LURlc2lnbi1Qcm8tMy4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6LSm5oi35a+G56CB55m75b2VLeagoemqjCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc5LjAwMDAwMCwgLTgyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc3LjAwMDAwMCwgNzMuMDAwMDAwKSI++PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zOC4xMzU0NTE0LDg4LjM1MjAyMTUgQzQzLjg5ODQyMjcsODguMzUyMDIxNSA0OC41NzAyMzQsODMuNjgzODY0NyA0OC41NzAyMzQsNzcuOTI1NDAxNSBDNDguNTcwMjM0LDcyLjE2NjkzODMgNDMuODk4NDIyNyw2Ny40OTg3ODE2IDM4LjEzNTQ1MTQsNjcuNDk4NzgxNiBDMzIuMzcyNDgwMSw2Ny40OTg3ODE2IDI3LjcwMDY2ODgsNzIuMTY2OTM4MyAyNy43MDA2Njg4LDc3LjkyNTQwMTUgQzI3LjcwMDY2ODgsODMuNjgzODY0NyAzMi4zNzI0ODAxLDg4LjM1MjAyMTUgMzguMTM1NDUxNCw4OC4zNTIwMjE1IFoiIGlkPSJPdmFsLTMtQ29weSIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC40NSI++PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02My45MjYyMTg3LDMzLjUyMTU2MSBMNDMuNjcyMTMyNiw2OS4zMjUwOTUxIiBpZD0iUGF0aC0xNSIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjAuNzAyNjc4OTY0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjEuNDA1MzU3ODk5ODczMTUzLDIuMTA4MDM2OTUzNDY5OTgxIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjYuODUwOTIyLCAxMy41NDM2NTQpIHJvdGF0ZSgzMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI2Ljg1MDkyMiwgLTEzLjU0MzY1NCkgdHJhbnNsYXRlKDExNy4yODU3MDUsIDQuMzgxODg5KSIgZmlsbD0iI0NGREFFNiI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSI5LjEzNDgyNjUzIiBjeT0iOS4xMjc2ODA3NiIgcng9IjkuMTM0ODI2NTMiIHJ5PSI5LjEyNzY4MDc2Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOC4yNjk2NTMxLDE4LjI1NTM2MTUgQzE4LjI2OTY1MzEsMTMuMjE0MjgyNiAxNC4xNzk4NTE5LDkuMTI3NjgwNzYgOS4xMzQ4MjY1Myw5LjEyNzY4MDc2IEM0LjA4OTgwMTE0LDkuMTI3NjgwNzYgMCwxMy4yMTQyODI2IDAsMTguMjU1MzYxNSBMMTguMjY5NjUzMSwxOC4yNTUzNjE1IFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMTM0ODI3LCAxMy42OTE1MjEpIHNjYWxlKC0xLCAtMSkgdHJhbnNsYXRlKC05LjEzNDgyNywgLTEzLjY5MTUyMSkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYuMjk0NzAwLCAxMjMuNzI1NjAwKSByb3RhdGUoLTUuMDAwMDAwKSB0cmFuc2xhdGUoLTIxNi4yOTQ3MDAsIC0xMjMuNzI1NjAwKSB0cmFuc2xhdGUoMTA2LjI5NDcwMCwgMzUuMjI1NjAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMiIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC4yNSIgY3g9IjI5LjExNzY0NzEiIGN5PSIyOS4xNDAyNDM5IiByeD0iMjkuMTE3NjQ3MSIgcnk9IjI5LjE0MDI0MzkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjMiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjIxLjU2ODYyNzUiIHJ5PSIyMS41ODUzNjU5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMi1Db3B5IiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuNCIgY3g9IjE3OS4wMTk2MDgiIGN5PSIxMzguMTQ2MzQxIiByeD0iMjMuNzI1NDkwMiIgcnk9IjIzLjc0MzkwMjQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQkFDQUQ5IiBvcGFjaXR5PSIwLjUiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjEwLjc4NDMxMzciIHJ5PSIxMC43OTI2ODI5Ij48L2VsbGlwc2U++PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMCIgZmlsbD0iI0NGREFFNiIgY3g9IjIxOC4zODIzNTMiIGN5PSIxMzguNjg1OTc2IiByeD0iMS42MTc2NDcwNiIgcnk9IjEuNjE4OTAyNDQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMC1Db3B5LTIiIGZpbGw9IiNFMEI0QjciIG9wYWNpdHk9IjAuMzUiIGN4PSIxNzkuNTU4ODI0IiBjeT0iMTc1LjM4MTA5OCIgcng9IjEuNjE3NjQ3MDYiIHJ5PSIxLjYxODkwMjQ0Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMTAtQ29weSIgZmlsbD0iI0UwQjRCNyIgb3BhY2l0eT0iMC4zNSIgY3g9IjE4MC4wOTgwMzkiIGN5PSIxMDIuNTMwNDg4IiByeD0iMi4xNTY4NjI3NSIgcnk9IjIuMTU4NTM2NTkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjguOTk4NTM4MSwyOS45NjcxNTk4IEwxNzEuMTUxMDE4LDEzMi44NzYwMjQiIGlkPSJQYXRoLTExIiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuOCI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTEwIiBvcGFjaXR5PSIwLjc5OTk5OTk1MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA1NC4xMDA2MzUsIDM2LjY1OTMxNykgcm90YXRlKC0xMS4wMDAwMDApIHRyYW5zbGF0ZSgtMTA1NC4xMDA2MzUsIC0zNi42NTkzMTcpIHRyYW5zbGF0ZSgxMDI2LjYwMDYzNSwgNC42NTkzMTcpIj4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC03IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiIGN4PSI0My44MTM1NTkzIiBjeT0iMzIiIHJ4PSIxMS4xODY0NDA3IiByeT0iMTEuMjk0MTE3NiI++CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC42NTk3Mzg1LDI0LjgwOTY5NCBMNS43MTY2NjA4NCw0Ljc2ODc4OTQ1IiBpZD0iUGF0aC0yIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbCIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjAuOTQxMTc2NDcxIiBjeD0iMy4yNjI3MTE4NiIgY3k9IjMuMjk0MTE3NjUiIHJ4PSIzLjI2MjcxMTg2IiByeT0iMy4yOTQxMTc2NSI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLUNvcHkiIGZpbGw9IiNGN0UxQUQiIGN4PSIyLjc5NjYxMDE3IiBjeT0iNjEuMTc2NDcwNiIgcng9IjIuNzk2NjEwMTciIHJ5PSIyLjgyMzUyOTQxIj48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjYzMTI0NDMsMzkuMjkyMjcxMiBMNS4wNjM2NjY2Myw1OS43ODUwODIiIGlkPSJQYXRoLTEwIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xOSIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI4Mi41MzcyMTksIDQ0Ni41MDI4NjcpIHJvdGF0ZSgtMTAuMDAwMDAwKSB0cmFuc2xhdGUoLTEyODIuNTM3MjE5LCAtNDQ2LjUwMjg2NykgdHJhbnNsYXRlKDExNDIuNTM3MjE5LCAzMjcuNTAyODY3KSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDEuMzMzNTM5LCAxMDQuNTAyNzQyKSByb3RhdGUoMjc1LjAwMDAwMCkgdHJhbnNsYXRlKC0xNDEuMzMzNTM5LCAtMTA0LjUwMjc0MikgdHJhbnNsYXRlKDEyOS4zMzM1MzksIDkyLjUwMjc0MikiIGZpbGw9IiNCQUNBRDkiPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSIxMS42NjY2NjY3IiBjeT0iMTEuNjY2NjY2NyIgcj0iMTEuNjY2NjY2NyI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMy4zMzMzMzMzLDIzLjMzMzMzMzMgQzIzLjMzMzMzMzMsMTYuODkwMDExMyAxOC4xMDk5ODg3LDExLjY2NjY2NjcgMTEuNjY2NjY2NywxMS42NjY2NjY3IEM1LjIyMzM0NDU5LDExLjY2NjY2NjcgMCwxNi44OTAwMTEzIDAsMjMuMzMzMzMzMyBMMjMuMzMzMzMzMywyMy4zMzMzMzMzIFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjY2NjY2NywgMTcuNTAwMDAwKSBzY2FsZSgtMSwgLTEpIHRyYW5zbGF0ZSgtMTEuNjY2NjY3LCAtMTcuNTAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC01LUNvcHktNiIgZmlsbD0iI0NGREFFNiIgY3g9IjIwMS44MzMzMzMiIGN5PSI4Ny41IiByPSI1LjgzMzMzMzMzIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTQzLjUsODguODEyNjY4NSBMMTU1LjA3MDUwMSwxNy42MDM4NTQ0IiBpZD0iUGF0aC0xNyIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuNSwzNy4zMzMzMzMzIEwxMjcuNDY2MjUyLDk3LjY0NDk3MzUiIGlkPSJQYXRoLTE4IiBzdHJva2U9IiNCQUNBRDkiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUGF0aC0xOSIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciIHBvaW50cz0iMTQzLjkwMjU5NyAxMjAuMzAyMjgxIDE3NC45MzU0NTUgMjMxLjU3MTM0MiAzOC41IDE0Ny41MTA4NDcgMTI2LjM2Njk0MSAxMTAuODMzMzMzIj48L3BvbHlsaW5lPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNTkuODMzMzMzLDk5Ljc0NTM4NDIgTDE5NS40MTY2NjcsODkuMjUiIGlkPSJQYXRoLTIwIiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyIgb3BhY2l0eT0iMC42Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIwNS4zMzMzMzMsODIuMTM3MjEwNSBMMjM4LjcxOTQwNiwzNi4xNjY2NjY3IiBpZD0iUGF0aC0yNCIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjY2LjcyMzQyNCwxMzIuMjMxOTg4IEwyMDcuMDgzMzMzLDkwLjQxNjY2NjciIGlkPSJQYXRoLTI1IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNSIgZmlsbD0iI0MxRDFFMCIgY3g9IjE1Ni45MTY2NjciIGN5PSI4Ljc1IiByPSI4Ljc1Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTUtQ29weS0zIiBmaWxsPSIjQzFEMUUwIiBjeD0iMzkuMDgzMzMzMyIgY3k9IjE0OC43NSIgcj0iNS4yNSI+PC9jaXJjbGU++);
		/* Hintergrundfarbe: #112346; */
		Hintergrundwiederholung: keine Wiederholung;
		Hintergrundposition: Mitte rechts;
		Hintergrundgröße: 100 %;
	}

	.login-container {
		Rahmenradius: 10px;
		Rand: 0px automatisch;
		Breite: 350px;
		Polsterung: 30px 35px 15px 35px;
		Hintergrund: #fff;
		Rand: 1px durchgezogen #eaeaea;
		Textausrichtung: links;
		Kastenschatten: 0 0 20px 2px rgba (0, 0, 0, 0,1);
	}

	.Titel {
		Rand: 0px automatisch 40px automatisch;
		Textausrichtung: zentriert;
		Farbe: #505458;
	}
</Stil>

Paginierungstabelle

Effektanzeige

Bildbeschreibung hier einfügen

Die Seitennummerierung ist die Schwierigkeit und der springende Punkt! ! !
Die Methode handleSizeChange wählt die Paging-Größe aus
Die Methode handleCurrentChange wählt die Seite aus
loadData ruft die Backend-API-Schnittstelle auf, um paginierte Daten abzurufen

<Vorlage>
	<div>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column fixed prop="id" label="news id" width="150">
			</el-Tabellenspalte>
			<el-table-column prop="typeid" label="Nachrichtentitel" width="200">
			</el-Tabellenspalte>
			<el-table-column prop="otherid" label="Nachrichtenübersicht" width="200"> </el-table-column>
			<el-table-column prop="Geld" label="Nachrichteninhalt" width="200">
			</el-Tabellenspalte>
			<el-table-column prop="datetime" label="Zeitpunkt der Pressemitteilung" width="150"> </el-table-column>
			<el-table-column fixed="rechts" label="Operation" width="200">
				<template slot-scope="Umfang">
					<el-button @click="updateExercise(scope.row)" size="mesdium" type="primary">Ändern</el-button>
					<el-button @click="deleteExercise(scope.row)" type="warning" size="medium">Löschen</el-button>
				</Vorlage>
			</el-Tabellenspalte>
		</el-Tabelle>
		<div Klasse="Block">
			<el-pagination @size-change="Größenänderungshandle" @current-change="AktuelleÄnderungshandle"
				:current-page="aktuelleSeite" :page-sizes="[5, 10, 15, 20]" :page-size="Seitengröße"
				layout="Gesamt, Größen, Zurück, Pager, Weiter, Jumper" :total="Gesamtanzahl">
			</el-pagination>
		</div>
	</div>
</Vorlage>
<Skript>
	Standard exportieren {
		Methoden: {
			handleSizeChange(Wert) {
				//Konsole.log(Wert)
				diese.Seitengröße = Wert;
				dies.loadData( diese.aktuelleSeite, diese.Seitengröße);
			},
			handleCurrentChange(Wert) {
				console.log(Wert)
				diese.aktuelleSeite = Wert;
				dies.loadData( diese.aktuelleSeite, diese.Seitengröße);
			},
			//Daten vom Server lesen loadData: function(pageNum, pageSize) {
				lass _this = dies;
				console.log(diese.Seitennummer)
				dies.axios.get("http://localhost:8088/records/querystudentbypage?pageNum=" + pageNum +
					"&Seitengröße=" + diese.Seitengröße).dann(Funktion(res) {
					//Konsole.log(res.data.pagestudentdata.list)
					_this.tableData = res.data.pagestudentdata.list;
					_this.totalCount = res.data.number;

					
				}, Funktion() {
					console.log('fehlgeschlagen');
				});
			},
			
			
			

		},
		Daten() {
			zurückkehren {
				// aktuelleSeite1: 5,
				// aktuelleSeite2: 5,
				// aktuelleSeite3: 5,
				// aktuelleSeite4: 4,
				aktuelleSeite: 1,
				Tabellendaten: null,
				Seitengröße: 5,
				Gesamtanzahl: 15,
				Seitennummer: 1,
			};
		},
		erstellt() {
			// lass _this = dies;
			// axios.get("http://localhost:8088/records").then(Funktion(Antwort) {
			// _this.tableData = antwort.data
			// })
			dies.loadData(diese.Seitennummer, diese.Seitengröße)
		},
	}
</Skript>

hinteres Ende

@AntwortBody
    @RequestMapping(Wert = "/querystudentbypage", Methode = RequestMethod.GET)
    öffentliche Map<String, Object> querystudentbypage(@RequestParam(value="Seitennummer")int Seitennummer, @RequestParam(value="Seitengröße")int Seitengröße)
    {
        PageHelper.startPage(Seitennummer,Seitengröße);
        Liste<Datensätze> Kurse = RecordsMapper.selectList(null);
        PageInfo<Datensätze> Seite = neue PageInfo<>(Kurse);
        System.out.println("---------------"+Seite);
        Map<String, Objekt> map = neue HashMap<String, Objekt>();
        map.put("pagestudentdata", Seite);
        map.put("Zahl", page.getTotal());
        Rückfahrkarte;
    }

Referenzlinks

Schalter + Tab

Effektanzeige

Bildbeschreibung hier einfügen

Die Hauptmethode des Schalters ist switchChange
Die Registerkarte ist nicht schwierig. Wenn Sie den folgenden Code nicht verstehen, können Sie auf die offizielle Dokumentation verweisen.

Hauptcode des Frontend-Switchs

 <el-table-column prop="name" label="Ob eingefroren werden soll" width="150">
		  	<template slot-scope="Umfang">
		  		<el-switch v-model="scope.row.statusid" :aktiver-Wert="1" :inaktiver-Wert="2"
		  			@change="switchChange($event, scope.row)" aktiv-color="#13ce66"
		  			inaktive Farbe="#ff4949"></el-switch>
		  	</Vorlage>
 </el-Tabellenspalte>

Vollständiger Code

<Vorlage>
  <el-tabs v-model="aktiverName" @tab-click="handleClick">
    <el-tab-pane label="Alle Konten" name="first">
		<el-table :data="tableData" border style="width: 100%">
		  <el-table-column fixed prop="accoundid" label="Konto-ID" width="150">
		  </el-Tabellenspalte>
		  <el-table-column prop="password" label="Passwort" width="200">
		  </el-Tabellenspalte>
		  <el-table-column prop="balance" label="Balance" width="200"> </el-table-column>
		  <el-table-column prop="name" label="Ob eingefroren werden soll" width="150">
		  	<template slot-scope="Umfang">
		  		<el-switch v-model="scope.row.statusid" :aktiver-Wert="1" :inaktiver-Wert="2"
		  			@change="switchChange($event, scope.row)" aktiv-color="#13ce66"
		  			inaktive Farbe="#ff4949"></el-switch>
		  	</Vorlage>
		  </el-Tabellenspalte>
		  <el-table-column prop="Personen-ID" label="Personen-ID" width="200">
		  </el-Tabellenspalte>
		  <el-table-column fixed="rechts" label="Operation" width="200">
		    <template slot-scope="Umfang">
		      <el-button @click="Übung löschen(scope.row)" Typ="Warnung" Größe="mittel"
		        >Löschen</el-Button
		      >
		    </Vorlage>
		  </el-Tabellenspalte>
		</el-Tabelle>
	</el-tab-pane>
    <el-tab-pane label="Eingefrorenes Konto" name="second">
		<el-table :data="tableDatab" border style="width: 100%">
		  <el-table-column fixed prop="accoundid" label="Konto-ID" width="150">
		  </el-Tabellenspalte>
		  <el-table-column prop="personinfo.realname" label="name" width="200">
		  </el-Tabellenspalte>
		  <el-table-column prop="password" label="Passwort" width="200">
		  </el-Tabellenspalte>
		  <el-table-column prop="balance" label="Balance" width="200"> </el-table-column>
		  
		  <el-table-column fixed="rechts" label="Operation" width="200">
		    <template slot-scope="Umfang">
				<el-button @click="qiyong(scope.row)" Typ="Warnung" Größe="mittel"
				  >Aktivieren</el-button
				>
		    </Vorlage>
		  </el-Tabellenspalte>
		</el-Tabelle>
	</el-tab-pane>
    <el-tab-pane label="Aktivierte Konten" name="third">
		<el-table :data="tableDatabc" border style="width: 100%">
		  <el-table-column fixed prop="accoundid" label="Konto-ID" width="150">
		  </el-Tabellenspalte>
		  <el-table-column prop="personinfo.realname" label="name" width="200">
		  </el-Tabellenspalte>
		  <el-table-column prop="password" label="Passwort" width="200">
		  </el-Tabellenspalte>
		  <el-table-column prop="balance" label="Balance" width="200"> </el-table-column>
		  
		  <el-table-column fixed="rechts" label="Operation" width="200">
		    <template slot-scope="Umfang">
		      <el-button @click="dongjie(scope.row)" Typ="Warnung" Größe="mittel"
		        >Einfrieren</el-Schaltfläche
		      >
		    </Vorlage>
		  </el-Tabellenspalte>
		</el-Tabelle>
	</el-tab-pane>
  </el-tabs>
</Vorlage>
<Skript>
  Standard exportieren {
    Daten() {
      zurückkehren {
		Tabellendaten: null,
		tableDatab: null,
		tableDatabc: null,
        aktiverName: "Vorname"
      };
    },
    Methoden: {
      handleClick(tab, Ereignis) {
        console.log(Tab, Ereignis);
      },
	  switchChange(e, Daten) {
	  	wenn (e == 1) {
	  		axios.get('http://localhost:8088/accounts/kaiqi/' + data.accoundid).then((res) => {
	  			diese.$nachricht({
	  				Meldung: "Erfolgreich geöffnet",
	  				Typ: „Erfolg“
	  			});
	  			// Standort.neu laden()
	  		});
	  	} sonst wenn (e == 2) {
	  		axios.get('http://localhost:8088/accounts/dongjie/' + data.accoundid).then((res) => {
	  			diese.$nachricht({
	  				Meldung: "Einfrieren erfolgreich",
	  				Typ: „Erfolg“
	  			});
	  			// Standort.neu laden()
	  		});
	  	}
	  
	  
	  },
	  dongjie(Zeile) {
	    lass _dies=dies
	    this.$confirm('Sind Sie sicher, dass Sie das Konto von '+row.personinfo.realname+' einfrieren möchten?', 'Konto einfrieren', {
	    	confirmButtonText: 'Bestätigen',
	    	cancelButtonText: 'Abbrechen',
	    	Typ: "Warnung"
	    }).dann(()=>{
	    	axios.get('http://localhost:8088/accounts/dongjie/'+row.accoundid).then(Funktion (Antwort){
	    		wenn (Antwort.Daten) {
	    			_this.$alert(row.personinfo.realname+'Konto erfolgreich eingefroren!', 'Konto einfrieren',{
	    				confirmButtonText: 'Bestätigen',
	    				Rückruf: Aktion =>{
	    					Standort.neu laden()
	    				}
	    			});
	    		}
	    	})
	    }).fangen(()=>{
	    	
	    });
	  },
	  qiyong(Reihe) {
	    lass _dies=dies
	    this.$confirm('Möchten Sie das Konto wirklich mit '+row.personinfo.realname+' aktivieren?', 'Konto aktivieren', {
	    	confirmButtonText: 'Bestätigen',
	    	cancelButtonText: 'Abbrechen',
	    	Typ: "Warnung"
	    }).dann(()=>{
	    	axios.get('http://localhost:8088/accounts/kaiqi/'+row.accoundid).then(Funktion (Antwort){
	    		wenn (Antwort.Daten) {
	    			_this.$alert(row.personinfo.realname+'Das Konto wurde erfolgreich aktiviert!', 'Konto aktivieren',{
	    				confirmButtonText: 'Bestätigen',
	    				Rückruf: Aktion =>{
	    					Standort.neu laden()
	    				}
	    			});
	    		}
	    	})
	    }).fangen(()=>{
	    	
	    });
	  },
	  löscheÜbung(Zeile) {
	    lass _dies=dies
	    this.$confirm('Möchten Sie das Konto '+row.accoundid+' wirklich löschen?','Konto löschen',{
	    	confirmButtonText: 'Bestätigen',
	    	cancelButtonText: 'Abbrechen',
	    	Typ: "Warnung"
	    }).dann(()=>{
	    	axios.delete('http://localhost:8088/accounts/'+row.accoundid).then(Funktion (Antwort){
	    		wenn (Antwort.Daten) {
	    			_this.$alert(row.accoundid+'Konto erfolgreich gelöscht!', 'Konto löschen',{
	    				confirmButtonText: 'Bestätigen',
	    				Rückruf: Aktion =>{
	    					Standort.neu laden()
	    				}
	    			});
	    		}
	    	})
	    }).fangen(()=>{
	    	
	    });
	  },
    },
	erstellt(){
		lass _dies=dies;
		axios.get("http://localhost:8088/accounts").then(Funktion (Antwort){
			_this.tableData=Antwort.data
		})
		axios.get("http://localhost:8088/accounts/dongjie").then(Funktion (Antwort){
			_this.tableDatab=Antwort.Daten
		})
		axios.get("http://localhost:8088/accounts/qiyong").then(Funktion (Antwort){
			_this.tableDatabc=Antwort.Daten
		})
	},
  };
</Skript>

Frontend-Abfangjäger

Ermitteln Sie, ob für die Route eine Anmeldeberechtigung erforderlich ist

Haupt-JS

router.beforeEach((bis, von, weiter) => {
	// nächste()
	if (to.meta.requireAuth) { // Bestimmen Sie, ob die Route eine Anmeldeberechtigung erfordert if (sessionStorage.getItem("personid")) {
			nächste()
		} anders {
			// Nicht angemeldet, springe zur Anmeldeseite next('/')
		}
	} anders {
		nächste()
	}
})

route.js

Metadaten in Route hinzufügen: requireAuth: true
Gibt an, ob für den Zugriff eine Anmeldung erforderlich ist

{
		Pfad: '/listxw',
		Name: 'News Management',
		Komponente: Index,
		zeigen: wahr,
		Meta: {
			requireAuth: wahr
		},

		Weiterleitung: "/listxw",
		Kinder: [{
				Pfad: "/addxw",
				Name: "Neuigkeiten hinzufügen",
				Komponente: addxw,
				Meta: {
					requireAuth: wahr
				},

			},
			{
				Pfad: "/updatexw",
				Name: "Nachrichten ändern",
				Komponente: updatexw,
				Meta: {
					requireAuth: wahr
				},

			},
			{
				Pfad: '/listxw',
				Name: 'Nachrichtenliste',
				Komponente: listxw,
				Meta: {
					requireAuth: wahr
				},

			},
			{
				Pfad: '/Person',
				Name: „Persönliche Daten“,
				Komponente: Person,
				Meta: {
					requireAuth: wahr
				},

			},
			{
				Pfad: '/record',
				Name: 'Transaktionsdatensatz',
				Komponente: Datensatz,
				Meta: {
					requireAuth: wahr
				},
			
			}
		],
	},

Rich-Text-Editor

Effektanzeige
Die folgenden Namen werden mit dem Rich-Text-Editor angezeigt

Bildbeschreibung hier einfügen

Zuerst müssen Sie Vue-Quill-Editor installieren
Befehl: npm install vue-quill-editor --save
Quill herunterladen (Vue-Quill-Editor erfordert Abhängigkeiten)
npm installiere quill --save

Vollständiger Code

<Vorlage>
	<div>
		<el-form ref="loginFormRef" label-width="100px" style="width: 60%" :model="loginForm">
			<el-form-item label="Nachrichtentitel">
				<el-input v-model="loginForm.title"></el-input>
			</el-form-item>
			<el-form-item label="Nachrichtenübersicht">
				<el-input v-model="loginForm.newsabstract"></el-input>
			</el-form-item>
			<el-form-item label="Neuigkeiteninhalt">
				<div Klasse="Bearbeiten_Container" Stil="Breite: 100%">
					<quill-editor v-model="loginForm.text" ref="myQuillEditor" :options="editorOption"
						@blur="beimEditorBlur($event)" @focus="beimEditorFocus($event)" @change="beimEditorÄndern($event)">
					</Feder-Editor>
				</div>
			</el-form-item>



			<el-form-item>
				<el-button type="primary" @click="changePwd()">Neuigkeiten hinzufügen</el-button>
			</el-form-item>
		</el-form>
		<div v-html="str" ​​​​class="ql-editor">
			{{str}}
		</div>
	</div>

</Vorlage>



<Skript>
	importieren {
		Federeditor
	} von „vue-quill-editor“; //Editor aufrufen import 'quill/dist/quill.core.css';
	importiere „quill/dist/quill.snow.css“;
	importiere „quill/dist/quill.bubble.css“;

	Standard exportieren {
		Komponenten:
			Federeditor
		},

		Daten() {
			zurückkehren {

				Anmeldeformular: {
					Titel: "",
					newsabstract: "",
					text: "",
					Veröffentlichungsdatum: "",

				},
				str: '',
			};
		},

		Methoden: {
			changePwd: Funktion() {
				dies.$refs.loginFormRef.validate(async valid => {
					wenn (!gültig) zurückgeben;
					Konstante {
						Daten:res
					} = warte auf this.axios.put("http://localhost:8088/news", this.loginForm)
					wenn (res) {

						this.$message.success("Neuigkeiten erfolgreich hinzugefügt")
						dies.$router.push({
							Pfad: "/listxw"
						});
					} anders {
						this.$message.error("Neuigkeiten konnten nicht hinzugefügt werden")
					}
				})
			},
			onEditorReady(editor) { // Editor vorbereiten },
			onEditorBlur() {}, // Fokusverlust-Ereignis onEditorFocus() {}, // Fokusgewinn-Ereignis onEditorChange() {}, // Inhaltsänderungsereignis // Transkodierung escapeStringHTML(str) {
				str = str.replace(/&lt;/g, '<');
				str = str.replace(/&gt;/g, '>');
				gibt str zurück;
			}

		},
		berechnet: {
			Herausgeber() {
				gib dies zurück.$refs.myQuillEditor.quill;
			},
		},
		montiert() {
			let content = '<ul><li><strong>Anforderungszeichenfolge</strong></li><li><strong><u>Anforderungszeichenfolge</u></strong></li><li><strong><s><u>Anforderungszeichenfolge</u></s></strong></li><li><em>Anforderungszeichenfolge</em></li></ul>'; // Fordern Sie die vom Hintergrund zurückgegebene Inhaltszeichenfolge an this.str = this.escapeStringHTML(content);
		}



	};
</Skript>

<Stil>
</Stil>

Referenzlink zur Verwendung des Rich-Text-Editors in Vue

Lokales Quellcode-Frontend E:\VNC\project\capital_vue
Backend E:\VNC\project\capital

Dies ist das Ende dieses Artikels über die detaillierte Verwendung von ElementUI in Vue. Weitere relevante Inhalte zur Verwendung von Vue ElementUI finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Vue + ElementUI implementiert Paging-Funktion - MySQL-Daten
  • Vue + elementui realisiert Mehrfachauswahl- und Suchfunktionen der Dropdown-Tabelle
  • Vue Element-ui implementiert Baumsteuerungsknoten und fügt Symbole hinzu, detaillierte Erläuterung
  • Verwenden Sie vue2+elementui für Hover-Prompts
  • So installieren Sie Element UI und verwenden Vektorgrafiken in vue3.0

<<:  Analyse der MySQL-Transaktionsmerkmale und Ebenenprinzipien

>>:  Kommentare auf Webseiten verursachen Textüberlauf im Internet Explorer

Artikel empfehlen

Grundlegendes Verständnis und Verwendung der HTML-Auswahloption

Detaillierte Erklärung von HTML (Option auswählen)...

Installations- und Verwendungsschritte für vue-amap

Ich habe zuvor die Verwendung des asynchronen Lad...

MySQL-Datumsfunktionen und Datumskonvertierungs- und -formatierungsfunktionen

MySQL ist eine kostenlose relationale Datenbank m...

Implementierung der Docker-Container-Verbindung und -Kommunikation

Die Portzuordnung ist nicht die einzige Möglichke...

Linux-Installation Redis-Implementierungsprozess und Fehlerlösung

Ich habe heute Redis installiert und es sind eini...

MySQL-Implementierung für pessimistisches und optimistisches Sperren

Inhaltsverzeichnis Vorwort Tatsächlicher Kampf 1....

Detaillierte Erklärung und praktische Übungen zum Mysql-Tuning-Erklärtool (empfohlen)

MySQL-Tuning: Detaillierte Erläuterung und prakti...

Ausführliche Lektüre und Übungsaufzeichnungen zu bedingten Typen in TypeScript

Inhaltsverzeichnis Verwenden bedingter Typen in g...

Verwenden Sie einige Interviewfragen, um den Ausführungsmechanismus von JavaScript zu untersuchen

Inhaltsverzeichnis Vorherige Wörter Synchron und ...

So fügen Sie eine Festplatte in Vmware hinzu: Erweitern Sie die Festplatte

In diesem Artikel wird beschrieben, wie Sie eine ...

Die perfekte Lösung für Vue-Routing-Fallback (vue-route-manager)

Inhaltsverzeichnis Routenplaner Hintergrund Erste...

Einführung in die Verschachtelungsregeln von HTML-Tags

Es gibt viele XHTML-Tags: div, ul, li, dl, dt, dd...

Regeln für die Gestaltung des Anmeldeformulars

Ich habe „Patterns for Sign Up & Ramp Up“ vor ...

Detaillierte Schritte zum Erstellen eines Dateiservers in Windows Server 2012

Der Dateiserver ist einer der am häufigsten verwe...

Zusammenfassung häufig verwendeter SQL-Operationen in MySQL-Tabellen

1. Sehen Sie sich die Feldtypen in der Tabelle an...