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

MySQL data loss troubleshooting case

Table of contents Preface On-site investigation C...

Detailed explanation of the role of key in React

Table of contents Question: When the button is cl...

MySQL million-level data paging query optimization solution

When there are tens of thousands of records in th...

How to design a web page? How to create a web page?

When it comes to understanding web design, many p...

Solution to the IP address not being displayed under Linux

Table of contents Preface Solution: Step 1 Step 2...

How to play local media (video and audio) files using HTML and JavaScript

First of all, for security reasons, JavaScript ca...

CentOS installation mysql5.7 detailed tutorial

This article shares the detailed steps of install...

Hover zoom effect made with CSS3

Result:Implementation code: html <link href=&#...

How to get the height of MySQL innodb B+tree

Preface The reason why MySQL's innodb engine ...

How to capture exceptions gracefully in React

Table of contents Preface ErrorBoundary Beyond Er...

JavaScript to implement drop-down list selection box

This article example shares the specific code of ...

Detailed code for implementing 3D tag cloud in Vue

Preview: Code: Page Sections: <template> &l...

How to install golang under linux

Go is an open source programming language that ma...

Detailed tutorial on customizing the installation path of MySQL 5.7.18 version (binary package installation)

Installation path: /application/mysql-5.7.18 1. P...

Tutorial on installing Ceph distributed storage with yum under Centos7

Table of contents Preface Configure yum source, e...