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

Zusammenfassung einiger gängiger Möglichkeiten zum Abkürzen von Javascript-Code

Inhaltsverzeichnis Vorwort Pfeilfunktionen Beherr...

Linux entfernt node.js vollständig und installiert es über den Befehl yum neu

erster Schritt Einmaliges Löschen mit der integri...

HTML+CSS-Beispielcode für zusammengeführte Tabellenränder

Wenn wir Tabellen- und td-Tags Rahmen hinzufügen,...

Allgemeine Symbole in Unicode

Unicode ist ein von einer internationalen Organis...

So stellen Sie Go-Webanwendungen mit Docker bereit

Inhaltsverzeichnis Warum brauchen wir Docker? Bei...

So verwenden Sie Axios, um Netzwerkanforderungen in React Native zu stellen

In der Front-End-Entwicklung gibt es viele Möglic...

Hinweise zur Verwendung des Blockquote-Tags

<br />Semantisierung lässt sich nicht mit we...

Lösung für das Problem, dass Java keine Verbindung zu MySQL 8.0 herstellen kann

In diesem Artikel finden Sie eine Sammlung von Ja...

Zusammenfassung der Datenspeicherstruktur des Nginx-HTTP-Moduls

Ab diesem Abschnitt erklären wir das Implementier...

Lösung für das Problem, dass der obere Rand des untergeordneten Elements dazu führt, dass sich das übergeordnete Element verschiebt

Problembeschreibung Als ich heute den Seitenstil ...

vue.js lädt Bilder entsprechend der Bild-URL herunter

Als ich kürzlich an einem Frontend-Docking-Funkti...

Verwenden von CSS3 und JavaScript zum Entwickeln von Beispielcode für die Web-Farbauswahl

Die Web-Farbauswahlfunktion in diesem Beispiel ve...

Grafisches Tutorial zur Konfigurationsmethode für die Installationsversion von MySQL5.7.17 winx64 unter Windows Server 2008 R2

Installieren Sie mysql5.7 unter Win. Zu Ihrer Inf...

Detaillierte Erklärung von Cgroup, dem Kernprinzip von Docker

Das leistungsstarke Tool cgroup im Kernel kann ni...

Lösen Sie das Problem, dass Zeilenhöhe = Elementhöhe, der Text aber nicht vertikal zentriert ist

Lassen Sie mich zunächst erklären, warum der Text...