Detailed explanation of the use of ElementUI in Vue

Detailed explanation of the use of ElementUI in Vue

Login + sessionStorage

Effect display

insert image description here

After a successful login, the user ID will be stored in the front-end sessionStorage. The interceptor will intercept based on whether the user ID exists. The user's permissions can also be stored in sessionStorage. Then, when accessing a certain page, determine whether the permission is available in the create method.

<template>
	<div class="login-wrap">
		<el-form class="login-container" ref="loginFormRef" :model="loginForm">
			<h1 class="title">User login</h1>
			<el-form-item label="">
				<el-input type="text" placeholder="User account" v-model="loginForm.username" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="">
				<el-input type="text" placeholder="User password" 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="Ordinary user"></el-radio>
				</el-radio-group>
			</el-form-item>

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

                <el-link @click="gotoRegister()">User registration</el-link>
                <el-link>Forgot your password?</el-link>

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

<script>
	export default {
		data: function() {
			return {

				loginForm: {
					username: '',
					password: '',
					resource: ''
				}
			}
		},

		methods: {
			gotoRegister: function() {
				this.$router.push({
					name: 'register'
				});
			},
			doLogin() {
				let resource = this.loginForm.resource
				this.$refs.loginFormRef.validate(async valid => {
					if (!valid) return;
					if (resource == "Administrator") {
						const {
							data:res
						} = await this.axios.post("http://localhost:8088/loginadmin", this.loginForm)

						if (res) {
							this.$message.success("Administrator login successful")
							sessionStorage.setItem("personid","ljhjiayou")
						
							this.$router.push({
								path: "/dong"
							});
						} else {
							this.$message.error("Account or password error")
						}
						//Ordinary user login }else{
						
						const {
							data:res
						} = await this.axios.post("http://localhost:8088/loginuser", this.loginForm)
						
						if (res) {
							console.log(res)
							this.$message.success("Ordinary user login successful")
							sessionStorage.setItem("personid",res)
							this.$router.push({
								path: "/person"
							});
						} else {
							this.$message.error("Account or password error")
						}
					}

				})
			}
		}
	}
</script>
//scoped="scoped" means the style only regulates the current VUE
<style scoped="scoped">
	.login-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 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++);
		/* background-color: #112346; */
		background-repeat: no-repeat;
		background-position: center right;
		background-size: 100%;
	}

	.login-container {
		border-radius: 10px;
		margin: 0px auto;
		width: 350px;
		padding: 30px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		text-align: left;
		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	}

	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}
</style>

Pagination table

Effect display

insert image description here

Pagination is the difficulty and the key point! ! !
handleSizeChange method selects the paging size
handleCurrentChange method selects the page
loadData calls the backend API interface to obtain paginated data

<template>
	<div>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column fixed prop="id" label="news id" width="150">
			</el-table-column>
			<el-table-column prop="typeid" label="News title" width="200">
			</el-table-column>
			<el-table-column prop="otherid" label="News Summary" width="200"> </el-table-column>
			<el-table-column prop="money" label="News content" width="200">
			</el-table-column>
			<el-table-column prop="datetime" label="News release time" width="150"> </el-table-column>
			<el-table-column fixed="right" label="Operation" width="200">
				<template slot-scope="scope">
					<el-button @click="updateExercise(scope.row)" size="mesdium" type="primary">Modify</el-button>
					<el-button @click="deleteExercise(scope.row)" type="warning" size="medium">Delete</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	export default {
		methods: {
			handleSizeChange(val) {
				//console.log(val)
				this.pageSize = val;
				this.loadData( this.currentPage, this.pageSize);
			},
			handleCurrentChange(val) {
				console.log(val)
				this.currentPage = val;
				this.loadData( this.currentPage, this.pageSize);
			},
			//Read data from the server loadData: function(pageNum, pageSize) {
				let _this = this;
				console.log(this.pageNum)
				this.axios.get("http://localhost:8088/records/querystudentbypage?pageNum=" + pageNum +
					"&pageSize=" + this.pageSize).then(function(res) {
					//console.log(res.data.pagestudentdata.list)
					_this.tableData = res.data.pagestudentdata.list;
					_this.totalCount = res.data.number;

					
				}, function() {
					console.log('failed');
				});
			},
			
			
			

		},
		data() {
			return {
				// currentPage1: 5,
				// currentPage2: 5,
				// currentPage3: 5,
				// currentPage4: 4,
				currentPage: 1,
				tableData: null,
				pageSize: 5,
				totalCount: 15,
				pageNum: 1,
			};
		},
		created() {
			// let _this = this;
			// axios.get("http://localhost:8088/records").then(function(response) {
			// _this.tableData = response.data
			// })
			this.loadData(this.pageNum, this.pageSize)
		},
	}
</script>

rear end

@ResponseBody
    @RequestMapping(value = "/querystudentbypage", method = RequestMethod.GET)
    public Map<String, Object> querystudentbypage(@RequestParam(value="pageNum")int pageNum, @RequestParam(value="pageSize")int pageSize)
    {
        PageHelper.startPage(pageNum,pageSize);
        List<Records> courses = recordsMapper.selectList(null);
        PageInfo<Records> page = new PageInfo<>(courses);
        System.out.println("---------------"+page);
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("pagestudentdata", page);
        map.put("number", page.getTotal());
        return map;
    }

Reference Links

Switch + Tab

Effect display

insert image description here

The main method of the switch is switchChange
The tab page is not difficult. If you don't understand the following code, you can refer to the official documentation.

Front-end switch main code

 <el-table-column prop="name" label="Whether to freeze" width="150">
		  	<template slot-scope="scope">
		  		<el-switch v-model="scope.row.statusid" :active-value="1" :inactive-value="2"
		  			@change="switchChange($event, scope.row)" active-color="#13ce66"
		  			inactive-color="#ff4949"></el-switch>
		  	</template>
 </el-table-column>

Complete code

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="All Accounts" name="first">
		<el-table :data="tableData" border style="width: 100%">
		  <el-table-column fixed prop="accoundid" label="Account id" width="150">
		  </el-table-column>
		  <el-table-column prop="password" label="Password" width="200">
		  </el-table-column>
		  <el-table-column prop="balance" label="Balance" width="200"> </el-table-column>
		  <el-table-column prop="name" label="Whether to freeze" width="150">
		  	<template slot-scope="scope">
		  		<el-switch v-model="scope.row.statusid" :active-value="1" :inactive-value="2"
		  			@change="switchChange($event, scope.row)" active-color="#13ce66"
		  			inactive-color="#ff4949"></el-switch>
		  	</template>
		  </el-table-column>
		  <el-table-column prop="personid" label="personid" width="200">
		  </el-table-column>
		  <el-table-column fixed="right" label="Operation" width="200">
		    <template slot-scope="scope">
		      <el-button @click="deleteExercise(scope.row)" type="warning" size="medium"
		        >Delete</el-button
		      >
		    </template>
		  </el-table-column>
		</el-table>
	</el-tab-pane>
    <el-tab-pane label="Frozen Account" name="second">
		<el-table :data="tableDatab" border style="width: 100%">
		  <el-table-column fixed prop="accoundid" label="Account id" width="150">
		  </el-table-column>
		  <el-table-column prop="personinfo.realname" label="name" width="200">
		  </el-table-column>
		  <el-table-column prop="password" label="Password" width="200">
		  </el-table-column>
		  <el-table-column prop="balance" label="Balance" width="200"> </el-table-column>
		  
		  <el-table-column fixed="right" label="Operation" width="200">
		    <template slot-scope="scope">
				<el-button @click="qiyong(scope.row)" type="warning" size="medium"
				  >Enable</el-button
				>
		    </template>
		  </el-table-column>
		</el-table>
	</el-tab-pane>
    <el-tab-pane label="Enabled Accounts" name="third">
		<el-table :data="tableDatabc" border style="width: 100%">
		  <el-table-column fixed prop="accoundid" label="Account id" width="150">
		  </el-table-column>
		  <el-table-column prop="personinfo.realname" label="name" width="200">
		  </el-table-column>
		  <el-table-column prop="password" label="Password" width="200">
		  </el-table-column>
		  <el-table-column prop="balance" label="Balance" width="200"> </el-table-column>
		  
		  <el-table-column fixed="right" label="Operation" width="200">
		    <template slot-scope="scope">
		      <el-button @click="dongjie(scope.row)" type="warning" size="medium"
		        >Freeze</el-button
		      >
		    </template>
		  </el-table-column>
		</el-table>
	</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
		tableData: null,
		tableDatab: null,
		tableDatabc: null,
        activeName: 'first'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
	  switchChange(e, data) {
	  	if (e == 1) {
	  		axios.get('http://localhost:8088/accounts/kaiqi/' + data.accoundid).then((res) => {
	  			this.$message({
	  				message: "Open successfully",
	  				type: "success"
	  			});
	  			// location.reload()
	  		});
	  	} else if (e == 2) {
	  		axios.get('http://localhost:8088/accounts/dongjie/' + data.accoundid).then((res) => {
	  			this.$message({
	  				message: "Freeze successful",
	  				type: "success"
	  			});
	  			// location.reload()
	  		});
	  	}
	  
	  
	  },
	  dongjie(row) {
	    let _this=this
	    this.$confirm('Are you sure you want to freeze the account of '+row.personinfo.realname+'?', 'Freeze account', {
	    	confirmButtonText: 'Confirm',
	    	cancelButtonText: 'Cancel',
	    	type: 'warning'
	    }).then(()=>{
	    	axios.get('http://localhost:8088/accounts/dongjie/'+row.accoundid).then(function (response){
	    		if (response.data) {
	    			_this.$alert(row.personinfo.realname+'Account frozen successfully!', 'Freeze account',{
	    				confirmButtonText: 'Confirm',
	    				callback: action =>{
	    					location.reload()
	    				}
	    			});
	    		}
	    	})
	    }).catch(()=>{
	    	
	    });
	  },
	  qiyong(row) {
	    let _this=this
	    this.$confirm('Are you sure you want to enable the account with '+row.personinfo.realname+'?', 'Enable account', {
	    	confirmButtonText: 'Confirm',
	    	cancelButtonText: 'Cancel',
	    	type: 'warning'
	    }).then(()=>{
	    	axios.get('http://localhost:8088/accounts/kaiqi/'+row.accoundid).then(function (response){
	    		if (response.data) {
	    			_this.$alert(row.personinfo.realname+'The account is enabled successfully!', 'Enable account',{
	    				confirmButtonText: 'Confirm',
	    				callback: action =>{
	    					location.reload()
	    				}
	    			});
	    		}
	    	})
	    }).catch(()=>{
	    	
	    });
	  },
	  deleteExercise(row) {
	    let _this=this
	    this.$confirm('Are you sure you want to delete the account'+row.accoundid+'?','Delete account',{
	    	confirmButtonText: 'Confirm',
	    	cancelButtonText: 'Cancel',
	    	type: 'warning'
	    }).then(()=>{
	    	axios.delete('http://localhost:8088/accounts/'+row.accoundid).then(function (response){
	    		if (response.data) {
	    			_this.$alert(row.accoundid+'Account deleted successfully!', 'Delete account',{
	    				confirmButtonText: 'Confirm',
	    				callback: action =>{
	    					location.reload()
	    				}
	    			});
	    		}
	    	})
	    }).catch(()=>{
	    	
	    });
	  },
    },
	created(){
		let _this=this;
		axios.get("http://localhost:8088/accounts").then(function (response){
			_this.tableData=response.data
		})
		axios.get("http://localhost:8088/accounts/dongjie").then(function (response){
			_this.tableDatab=response.data
		})
		axios.get("http://localhost:8088/accounts/qiyong").then(function (response){
			_this.tableDatabc=response.data
		})
	},
  };
</script>

Front-end interceptor

Determine whether the route requires login permission

main.js

router.beforeEach((to, from, next) => {
	// next()
	if (to.meta.requireAuth) { // Determine whether the route requires login permission if (sessionStorage.getItem("personid")) {
			next()
		} else {
			// Not logged in, jump to the login page next('/')
		}
	} else {
		next()
	}
})

route.js

Add meta in route: requireAuth: true
Indicates whether login is required to access

{
		path: '/listxw',
		name: 'News Management',
		component: Index,
		show: true,
		meta: {
			requireAuth: true
		},

		redirect: "/listxw",
		children: [{
				path: "/addxw",
				name: "Add News",
				component: addxw,
				meta: {
					requireAuth: true
				},

			},
			{
				path: "/updatexw",
				name: "Modify News",
				component: updatexw,
				meta: {
					requireAuth: true
				},

			},
			{
				path: '/listxw',
				name: 'News List',
				component: listxw,
				meta: {
					requireAuth: true
				},

			},
			{
				path: '/person',
				name: 'Personal Information',
				component: person,
				meta: {
					requireAuth: true
				},

			},
			{
				path: '/record',
				name: 'Transaction Record',
				component: record,
				meta: {
					requireAuth: true
				},
			
			}
		],
	},

Rich text editor

Effect display
The following names are displayed using the rich text editor

insert image description here

First you need to install Vue-Quill-Editor
Command: npm install vue-quill-editor --save
Download quill (Vue-Quill-Editor requires dependencies)
npm install quill --save

Complete code

<template>
	<div>
		<el-form ref="loginFormRef" label-width="100px" style="width: 60%" :model="loginForm">
			<el-form-item label="News title">
				<el-input v-model="loginForm.title"></el-input>
			</el-form-item>
			<el-form-item label="News Summary">
				<el-input v-model="loginForm.newsabstract"></el-input>
			</el-form-item>
			<el-form-item label="News content">
				<div class="edit_container" style="width: 100%">
					<quill-editor v-model="loginForm.text" ref="myQuillEditor" :options="editorOption"
						@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
					</quill-editor>
				</div>
			</el-form-item>



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

</template>



<script>
	import {
		quillEditor
	} from "vue-quill-editor"; //Call editor import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';

	export default {
		components:
			quillEditor
		},

		data() {
			return {

				loginForm: {
					title: "",
					newsabstract: "",
					text: "",
					releasedate: "",

				},
				str: '',
			};
		},

		methods: {
			changePwd: function() {
				this.$refs.loginFormRef.validate(async valid => {
					if (!valid) return;
					const {
						data:res
					} = await this.axios.put("http://localhost:8088/news", this.loginForm)
					if (res) {

						this.$message.success("News added successfully")
						this.$router.push({
							path: "/listxw"
						});
					} else {
						this.$message.error("Failed to add news")
					}
				})
			},
			onEditorReady(editor) { // Prepare editor },
			onEditorBlur() {}, // Loss of focus event onEditorFocus() {}, // Gain of focus event onEditorChange() {}, // Content change event // Transcoding escapeStringHTML(str) {
				str = str.replace(/&lt;/g, '<');
				str = str.replace(/&gt;/g, '>');
				return str;
			}

		},
		computed: {
			editor() {
				return this.$refs.myQuillEditor.quill;
			},
		},
		mounted() {
			let content = '<ul><li><strong>李佳豪</strong></li><li><strong><u>陈刚</u></strong></li><li><strong><s><u>李锦鸣</u></s></strong></li><li><em>杨军</em></li></ul>'; // Request the content string returned by the background this.str = this.escapeStringHTML(content);
		}



	};
</script>

<style>
</style>

Reference link for using rich text editor in vue

Local source code front end E:\VNC\project\capital_vue
Backend E:\VNC\project\capital

This is the end of this article about the detailed usage of ElementUI in vue. For more relevant vue ElementUI usage content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue+ElementUI implements paging function-mysql data
  • Vue+elementui realizes multiple selection and search functions of drop-down table
  • Vue Element-ui implements tree control node adding icon detailed explanation
  • Use vue2+elementui for hover prompts
  • How to install Element UI and use vector graphics in vue3.0

<<:  Analysis of Mysql transaction characteristics and level principles

>>:  Web page comments cause text overflow in IE

Recommend

A complete example of Vue's multi-level jump (page drill-down) function for related pages

background During the project development process...

Adobe Brackets simple use graphic tutorial

Adobe Brackets is an open source, simple and powe...

Detailed explanation of JavaScript primitive data type Symbol

Table of contents Introduction Description Naming...

JS ES new features: Introduction to extension operators

1. Spread Operator The spread operator is three d...

Introduction to container data volumes in Docker

Table of contents Docker container data volume Us...

Detailed explanation of Javascript Echarts air quality map effect

We need to first combine the air quality data wit...

Implementation of CSS loading effect Pac-Man

emmm the name is just a random guess 2333 Preface...

Docker learning method steps to build ActiveMQ message service

Preface ActiveMQ is the most popular and powerful...

Vue realizes the card flip effect

This article example shares the specific code of ...

JavaScript implements the detailed process of stack structure

Table of contents 1. Understanding the stack stru...

Graphic tutorial on installing Mac system in virtual machine under win10

1. Download the virtual machine version 15.5.1 I ...

Build Maven projects faster in Docker

Table of contents I. Overview 2. Conventional mul...

Analysis of the principle of Nginx using Lua module to implement WAF

Table of contents 1. Background of WAF 2. What is...

Quickly solve the problem of slow startup after Tomcat reconfiguration

During the configuration of Jenkins+Tomcat server...

Install CentOS 7 on VMware14 Graphic Tutorial

Introduction to CentOS CentOS is an enterprise-cl...