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

Benutzerdefinierte optionale Zeitkalenderkomponente von Vue

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Schritte zur Installation der Node.js-Umgebung und Pfadkonfiguration unter Linux

Es gibt zwei Möglichkeiten, nodejs unter Linux zu...

So blockieren Sie IP und IP-Bereich in Nginx

Vorne geschrieben Nginx ist nicht nur ein Reverse...

Lösung für das Problem der Zeilenhöhe der Elementtabellenkopfzeile

Inhaltsverzeichnis Vorwort 1. Ursache des Problem...

So verwenden Sie Vue+ElementUI Tree

Die Verwendung von Vue + ElementUI Tree dient zu ...

Lösung zur Verwendung der Baidu-Freigabe auf der HTTPS-Seite

Seit der Aktivierung des https-Zugriffs für die g...

IE8 verwendet den Multikompatibilitätsmodus, um Webseiten normal anzuzeigen

IE8 wird mehrere Kompatibilitätsmodi haben. Der IE...

So optimieren Sie MySQL-Indizes

1. Wie MySQL Indizes verwendet Indizes werden ver...

Natives JS zur Implementierung der Drag-Position-Vorschau

In diesem Artikel wird eine kleine Demo gezeigt, ...

jQuery löst das Problem, dass das ursprüngliche Ereignis nach dem Hinzufügen von Elementen nicht ausgeführt wird

Schauen wir uns zunächst meinen Fehlercode an. ht...

So stellen Sie MongoDB-Container mit Docker bereit

Inhaltsverzeichnis Was ist Docker einsetzen 1. Zi...

Lösung für das Absturzproblem beim Öffnen des Befehlszeilenfensters nach der Installation von MySQL 5.7

Vorwort Ich habe vor Kurzem MySQL 5.7 installiert...

Google Translate Tool: Mehrsprachige Webseiten schnell umsetzen

Google China hat ein Übersetzungstool veröffentlic...

Detaillierte Erklärung der Verwendung von publicPath in Webpack

Inhaltsverzeichnis Ausgabe Ausgabepfad Ausgabe.öf...

Zusammenfassung einiger Grundsätze, die bei der Ausgabe von HTML-Seiten beachtet werden sollten

1. DOCTYPE ist unverzichtbar. Der Browser bestimm...