欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue中的ElementUI的使用详解

程序员文章站 2022-04-06 21:06:19
登录+sessionstorage效果展示登录成功后会把用户id存入前端的sessionstorage,拦截器会根据是否存在用户id来进行拦截也可以将用户权限存入sessionstorage,然后当访...

登录+sessionstorage

效果展示

vue中的ElementUI的使用详解

登录成功后会把用户id存入前端的sessionstorage,拦截器会根据是否存在用户id来进行拦截
也可以将用户权限存入sessionstorage,然后当访问某个页面的时候在created方法中判断是否具有权限

<template>
	<div class="login-wrap">
		<el-form class="login-container" ref="loginformref" :model="loginform">
			<h1 class="title">用户登陆</h1>
			<el-form-item label="">
				<el-input type="text" placeholder="用户账号" v-model="loginform.username" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="">
				<el-input type="text" placeholder="用户密码" v-model="loginform.password" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item >
				<el-radio-group v-model="loginform.resource">
					<el-radio label="管理员"></el-radio>
					<el-radio label="普通用户"></el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item>
				<template slot-scope="scope">
					<el-button type="primary" @click="dologin()" style="width: 100%;">用户登录</el-button>
					<!-- <el-button style="width: 48%;" @click="gotoregister" >用户注册</el-button> -->
				</template>
			</el-form-item>
			<!-- <el-row style="text-align: center;">

                <el-link @click="gotoregister()">用户注册</el-link>
                <el-link>忘记密码</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 == "管理员") {
						const {
							data: res
						} = await this.axios.post("http://localhost:8088/loginadmin", this.loginform)

						if (res) {
							this.$message.success("管理员登录成功")
							sessionstorage.setitem("personid","ljhjiayou")
						
							this.$router.push({
								path: "/dong"
							});
						} else {
							this.$message.error("账号或密码错误")
						}
						//普通用户登录
					}else{
						
						const {
							data: res
						} = await this.axios.post("http://localhost:8088/loginuser", this.loginform)
						
						if (res) {
							console.log(res)
							this.$message.success("普通用户登录成功")
							sessionstorage.setitem("personid",res)
							this.$router.push({
								path: "/person"
							});
						} else {
							this.$message.error("账号或密码错误")
						}
					}

				})
			}
		}
	}
</script>
//scoped="scoped" 表示样式仅仅规范当前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+ciagicagicagicagicagica8zybpzd0ir3jvdxatmtgiig9wywnpdhk9ijauocigdhjhbnnmb3jtpsj0cmfuc2xhdguonzquotaxnde2lca1njkunjk5mtu4ksbyb3rhdguoltcumdawmdawksb0cmfuc2xhdguoltc0ljkwmtqxniwgltu2os42otkxntgpihryyw5zbgf0zsg0ljkwmtqxniwgnti1lje5ote1ockipgogicagicagicagicagicagicagidxlbgxpchnliglkpsjpdmfsltexiibmawxspsijq0zequu2iibvcgfjaxr5psiwlji1iibjed0injmuntc0odc5miigy3k9ijmyljq2odm2nyigcng9ijixljc4mza0nzkiihj5psiyms43njywmdgipjwvzwxsaxbzzt4kicagicagicagicagicagicagica8zwxsaxbzzsbpzd0it3zhbc0ziibmawxspsijq0zequu2iibvcgfjaxr5psiwlju5otk5otk2ncigy3g9ijuuotg3ndy0nzkiign5psixmy44njy4njaxiibyed0ins4ymtczoteziibyet0ins4ymtmzmdk5nyi+pc9lbgxpchnlpgogicagicagicagicagicagicagidxwyxroigq9ik0zoc4xmzu0nte0ldg4ljm1mjaymtugqzqzljg5odqymjcsodgumzuymdixnsa0oc41nzaymzqsodmunjgzody0nya0oc41nzaymzqsnzcuoti1ndaxnsbdndguntcwmjm0ldcylje2njkzodmgndmuodk4ndiynyw2ny40otg3ode2idm4ljezntq1mtqsnjcundk4nzgxnibdmziumzcyndgwmsw2ny40otg3ode2idi3ljcwmdy2odgsnziumty2otm4myayny43mda2njg4ldc3ljkyntqwmtugqzi3ljcwmdy2odgsodmunjgzody0nyazmi4znzi0odaxldg4ljm1mjaymtugmzgumtm1nduxncw4oc4zntiwmje1ifoiiglkpsjpdmfsltmtq29wesigzmlsbd0ii0ngreffniigb3bhy2l0et0imc40nsi+pc9wyxropgogicagicagicagicagicagicagidxwyxroigq9ik02nc4ynzc1ntgyldmzlje3mdq5njmgtdexos4xodu4mzysmtyunty1ndkxnsigawq9ilbhdggtmtiiihn0cm9rzt0ii0ngreffniigc3ryb2tllxdpzhropsixljczotezmdqziibzdhjva2utbgluzwnhcd0icm91bmqiihn0cm9rzs1saw5lam9pbj0icm91bmqipjwvcgf0ad4kicagicagicagicagicagicagica8cgf0acbkpsjnndiumtqzmtcwocwyni41mdaynjgxiew3ljcxmtkwmtyylde0lju2nda3mdiiiglkpsjqyxrolte2iibzdhjva2u9iinfmei0qjciihn0cm9rzs13awr0ad0imc43mdi2nzg5njqiig9wywnpdhk9ijaunyigc3ryb2tllwxpbmvjyxa9injvdw5kiibzdhjva2utbgluzwpvaw49injvdw5kiibzdhjva2utzgfzagfycmf5psixljqwntm1nzg5otg3mze1mywyljewodaznjk1mzq2otk4msi+pc9wyxropgogicagicagicagicagicagicagidxwyxroigq9ik02my45mjyymtg3ldmzljuymtu2msbmndmunjcymtmyniw2os4zmjuwotuxiibpzd0iugf0ac0xnsigc3ryb2tlpsijqkfdquq5iibzdhjva2utd2lkdgg9ijaunzaynjc4oty0iibzdhjva2utbgluzwnhcd0icm91bmqiihn0cm9rzs1saw5lam9pbj0icm91bmqiihn0cm9rzs1kyxnoyxjyyxk9ijeunda1mzu3odk5odczmtuzldiumta4mdm2otuzndy5otgxij48l3bhdgg+ciagicagicagicagicagicagicagpgcgawq9ikdyb3vwlte3iib0cmfuc2zvcm09inryyw5zbgf0zsgxmjyuoduwotiylcaxmy41ndm2ntqpihjvdgf0zsgzmc4wmdawmdapihryyw5zbgf0zsgtmti2ljg1mdkymiwgltezlju0mzy1nckgdhjhbnnsyxrlkdexny4yodu3mdusidqumzgxodg5ksigzmlsbd0ii0ngreffnii+ciagicagicagicagicagicagicagicagidxlbgxpchnliglkpsjpdmfsltqiig9wywnpdhk9ijaunduiign4psi5ljezndgynjuziibjet0ios4xmjc2oda3niigcng9ijkumtm0odi2ntmiihj5psi5ljeynzy4mdc2ij48l2vsbglwc2u+ciagicagicagicagicagicagicagicagidxwyxroigq9ik0xoc4ynjk2ntmxlde4lji1ntm2mtugqze4lji2oty1mzesmtmumje0mjgyniaxnc4xnzk4nte5ldkumti3njgwnzygos4xmzq4mjy1myw5ljeynzy4mdc2iem0lja4otgwmte0ldkumti3njgwnzygmcwxmy4ymtqyodi2idasmtgumju1mzyxnsbmmtgumjy5njuzmswxoc4yntuznje1ifoiiglkpsjpdmfsltqiihryyw5zzm9ybt0idhjhbnnsyxrlkdkumtm0odi3lcaxmy42ote1mjepihnjywxlkc0xlcatmskgdhjhbnnsyxrlkc05ljezndgynywgltezljy5mtuymskgij48l3bhdgg+ciagicagicagicagicagicagicagpc9npgogicagicagicagicagicagpc9npgogicagicagicagicagicagpgcgawq9ikdyb3vwlte0iib0cmfuc2zvcm09inryyw5zbgf0zsgymtyumjk0nzawlcaxmjmunzi1njawksbyb3rhdguoltuumdawmdawksb0cmfuc2xhdguoltixni4yotq3mdasic0xmjmunzi1njawksb0cmfuc2xhdguomta2lji5ndcwmcwgmzuumji1njawksi+ciagicagicagicagicagicagicagpgvsbglwc2ugawq9ik92ywwtmiigzmlsbd0ii0ngreffniigb3bhy2l0et0imc4ynsigy3g9iji5ljexnzy0nzeiign5psiyos4xndayndm5iibyed0imjkumte3njq3msigcnk9iji5lje0mdi0mzkipjwvzwxsaxbzzt4kicagicagicagicagicagicagica8zwxsaxbzzsbpzd0it3zhbc0yiibmawxspsijq0zequu2iibvcgfjaxr5psiwljmiign4psiyos4xmtc2ndcxiibjet0imjkumtqwmjqzosigcng9ijixlju2odyynzuiihj5psiyms41oduznju5ij48l2vsbglwc2u+ciagicagicagicagicagicagicagpgvsbglwc2ugawq9ik92ywwtmi1db3b5iibzdhjva2u9iindrkrbrtyiig9wywnpdhk9ijauncigy3g9ije3os4wmtk2mdgiign5psixmzgumtq2mzqxiibyed0imjmunzi1ndkwmiigcnk9ijizljc0mzkwmjqipjwvzwxsaxbzzt4kicagicagicagicagicagicagica8zwxsaxbzzsbpzd0it3zhbc0yiibmawxspsijqkfdquq5iibvcgfjaxr5psiwljuiign4psiyos4xmtc2ndcxiibjet0imjkumtqwmjqzosigcng9ijewljc4ndmxmzciihj5psixmc43oti2odi5ij48l2vsbglwc2u+ciagicagicagicagicagicagicagphbhdgggzd0itti5ljexnzy0nzesmzkuotmyoti2ocbmmjkumte3njq3mswxoc4zndc1njegqzizlje2mtyzntesmtgumzq3ntyxide4ljmzmzmzmzmsmjmumtc5nja5nyaxoc4zmzmzmzmzldi5lje0mdi0mzkgqze4ljmzmzmzmzmsmzuumtawodc4msaymy4xnje2mzuxldm5ljkzmjkynjggmjkumte3njq3mswzos45mzi5mjy4ifoiiglkpsjpdmfsltiiigzpbgw9iincqunbrdkipjwvcgf0ad4kicagicagicagicagicagicagica8zybpzd0ir3jvdxatosigb3bhy2l0et0imc40nsigdhjhbnnmb3jtpsj0cmfuc2xhdguomtcyljawmdawmcwgmtmxljawmdawmckiigzpbgw9iinfnkexqtyipgogicagicagicagicagicagicagicagica8zwxsaxbzzsbpzd0it3zhbc0ylunvchktmiigy3g9ijcumde5nja3odqiign5psi3lje0njm0mtq2iibyed0ini40nza1odgyncigcnk9ijyundc1nja5nzyipjwvzwxsaxbzzt4kicagicagicagicagicagicagicagicagphbhdgggzd0ittauntq5mde5nja4ldezljyymtk1mtigqzqumtiynji2odesmtmunjixotuxmia3ljaxotywnzg0ldewljcymjcymia3ljaxotywnzg0ldcumtq2mzqxndygqzcumde5nja3odqsmy41njk5nja5nsa0ljeymjyynjgxldaunjcwnzmxnza3idauntq5mde5nja4ldaunjcwnzmxnza3iewwlju0otaxotywocwxmy42mje5nteyifoiiglkpsjpdmfsltitq29wes0yiib0cmfuc2zvcm09inryyw5zbgf0zsgzljc4ndmxncwgny4xndyzndepihnjywxlkc0xlcaxksb0cmfuc2xhdguoltmunzg0mze0lcatny4xndyzndepici+pc9wyxropgogicagicagicagicagicagicagidwvzz4kicagicagicagicagicagicagica8zwxsaxbzzsbpzd0it3zhbc0xmcigzmlsbd0ii0ngreffniigy3g9ijixoc4zodizntmiign5psixmzgunjg1otc2iibyed0ims42mtc2ndcwniigcnk9ijeunje4otayndqipjwvzwxsaxbzzt4kicagicagicagicagicagicagica8zwxsaxbzzsbpzd0it3zhbc0xmc1db3b5ltiiigzpbgw9iinfmei0qjciig9wywnpdhk9ijaumzuiign4psixnzkuntu4odi0iibjet0imtc1ljm4mta5ocigcng9ijeunje3njq3mdyiihj5psixljyxodkwmjq0ij48l2vsbglwc2u+ciagicagicagicagicagicagicagpgvsbglwc2ugawq9ik92ywwtmtatq29wesigzmlsbd0ii0uwqjrcnyigb3bhy2l0et0imc4znsigy3g9ije4mc4wotgwmzkiign5psixmdiuntmwndg4iibyed0imi4xnty4nji3nsigcnk9ijiumtu4ntm2ntkipjwvzwxsaxbzzt4kicagicagicagicagicagicagica8cgf0acbkpsjnmjguotk4ntm4mswyos45njcxntk4iewxnzeumtuxmde4ldezmi44nzywmjqiiglkpsjqyxroltexiibzdhjva2u9iindrkrbrtyiig9wywnpdhk9ijauoci+pc9wyxropgogicagicagicagicagicagpc9npgogicagicagicagicagicagpgcgawq9ikdyb3vwltewiibvcgfjaxr5psiwljc5otk5otk1miigdhjhbnnmb3jtpsj0cmfuc2xhdguomta1nc4xmda2mzusidm2ljy1otmxnykgcm90yxrlkc0xms4wmdawmdapihryyw5zbgf0zsgtmta1nc4xmda2mzusic0zni42ntkzmtcpihryyw5zbgf0zsgxmdi2ljywmdyznswgnc42ntkzmtcpij4kicagicagicagicagicagicagica8zwxsaxbzzsbpzd0it3zhbc03iibzdhjva2u9iindrkrbrtyiihn0cm9rzs13awr0ad0imc45ndexnzy0nzeiign4psi0my44mtm1ntkziibjet0imziiihj4psixms4xody0nda3iibyet0imteumjk0mte3nii+pc9lbgxpchnlpgogicagicagicagicagicagicagidxniglkpsjhcm91cc0xmiigdhjhbnnmb3jtpsj0cmfuc2xhdguomzquntk2nzc0lcaymy4xmtexmtepiibmawxspsijqkfdquq5ij4kicagicagicagicagicagicagicagicagpgvsbglwc2ugawq9ik92ywwtnyigb3bhy2l0et0imc40nsigy3g9ijkumtg1mzq3mtgiign5psi4ljg4odg4odg5iibyed0ioc40nzq1nzyynyigcnk9ijguntu2mtq5nzmipjwvzwxsaxbzzt4kicagicagicagicagicagicagicagicagphbhdgggzd0ittkumtg1mzq3mtgsmtcundq1mdm4nibdmtmuody1nzi2ncwxny40nduwmzg2ide3ljy1otkymzusmtmunje0mze5osaxny42ntk5mjm1ldguodg4odg4odkgqze3ljy1otkymzusnc4xnjm0ntc4nyaxmy44nju3mjy0ldaumzmynzm5mtu2idkumtg1mzq3mtgsmc4zmzi3mzkxntygtdkumtg1mzq3mtgsmtcundq1mdm4nibaiibpzd0it3zhbc03ij48l3bhdgg+ciagicagicagicagicagicagicagpc9npgogicagicagicagicagicagicagidxwyxroigq9ik0znc42ntk3mzg1ldi0ljgwoty5ncbmns43mty2nja4ncw0ljc2odc4otq1iibpzd0iugf0ac0yiibzdhjva2u9iindrkrbrtyiihn0cm9rzs13awr0ad0imc45ndexnzy0nzeipjwvcgf0ad4kicagicagicagicagicagicagica8zwxsaxbzzsbpzd0it3zhbcigc3ryb2tlpsijq0zequu2iibzdhjva2utd2lkdgg9ijauotqxmtc2ndcxiibjed0imy4ynji3mte4niigy3k9ijmumjk0mte3njuiihj4psizlji2mjcxmtg2iibyet0imy4yotqxmtc2nsi+pc9lbgxpchnlpgogicagicagicagicagicagicagidxlbgxpchnliglkpsjpdmfslunvchkiigzpbgw9iingn0uxquqiign4psiyljc5njyxmde3iibjet0injeumtc2ndcwniigcng9ijiunzk2njewmtciihj5psiyljgymzuyotqxij48l2vsbglwc2u+ciagicagicagicagicagicagicagphbhdgggzd0ittm0ljyzmti0ndmsmzkumjkymjcxmibmns4wnjm2njy2myw1os43oduwodiiiglkpsjqyxroltewiibzdhjva2u9iindrkrbrtyiihn0cm9rzs13awr0ad0imc45ndexnzy0nzeipjwvcgf0ad4kicagicagicagicagicagidwvzz4kicagicagicagicagicagidxniglkpsjhcm91cc0xosigb3bhy2l0et0imc4zmyigdhjhbnnmb3jtpsj0cmfuc2xhdguomti4mi41mzcymtksidq0ni41mdi4njcpihjvdgf0zsgtmtaumdawmdawksb0cmfuc2xhdguolteyodiuntm3mje5lcatndq2ljuwmjg2nykgdhjhbnnsyxrlkdexndiuntm3mje5lcazmjcuntayody3ksi+ciagicagicagicagicagicagicagpgcgawq9ikdyb3vwlte3iib0cmfuc2zvcm09inryyw5zbgf0zsgxndeumzmzntm5lcaxmdquntaynzqyksbyb3rhdguomjc1ljawmdawmckgdhjhbnnsyxrlkc0xndeumzmzntm5lcatmta0ljuwmjc0mikgdhjhbnnsyxrlkdeyos4zmzm1mzksidkyljuwmjc0mikiigzpbgw9iincqunbrdkipgogicagicagicagicagicagicagicagica8y2lyy2xliglkpsjpdmfsltqiig9wywnpdhk9ijaunduiign4psixms42njy2njy3iibjet0imteunjy2njy2nyigcj0imteunjy2njy2nyi+pc9jaxjjbgu+ciagicagicagicagicagicagicagicagidxwyxroigq9ik0ymy4zmzmzmzmzldizljmzmzmzmzmgqzizljmzmzmzmzmsmtyuodkwmdexmyaxoc4xmdk5odg3ldexljy2njy2njcgmteunjy2njy2nywxms42njy2njy3iem1ljiymzm0ndu5ldexljy2njy2njcgmcwxni44otawmtezidasmjmumzmzmzmzmybmmjmumzmzmzmzmywymy4zmzmzmzmzifoiiglkpsjpdmfsltqiihryyw5zzm9ybt0idhjhbnnsyxrlkdexljy2njy2nywgmtcuntawmdawksbzy2fszsgtmswgltepihryyw5zbgf0zsgtmteunjy2njy3lcatmtcuntawmdawksaipjwvcgf0ad4kicagicagicagicagicagicagica8l2c+ciagicagicagicagicagicagicagpgnpcmnszsbpzd0it3zhbc01lunvchktniigzmlsbd0ii0ngreffniigy3g9ijiwms44mzmzmzmiign5psi4ny41iibypsi1ljgzmzmzmzmzij48l2npcmnszt4kicagicagicagicagicagicagica8cgf0acbkpsjnmtqzljusodguodeynjy4nsbmmtu1lja3mduwmswxny42mdm4ntq0iibpzd0iugf0ac0xnyigc3ryb2tlpsijqkfdquq5iibzdhjva2utd2lkdgg9ijeumty2njy2njcipjwvcgf0ad4kicagicagicagicagicagicagica8cgf0acbkpsjnmtcunswzny4zmzmzmzmziewxmjcundy2mjuyldk3ljy0ndk3mzuiiglkpsjqyxrolte4iibzdhjva2u9iincqunbrdkiihn0cm9rzs13awr0ad0ims4xnjy2njy2nyi+pc9wyxropgogicagicagicagicagicagicagidxwb2x5bgluzsbpzd0iugf0ac0xosigc3ryb2tlpsijq0zequu2iibzdhjva2utd2lkdgg9ijeumty2njy2njciihbvaw50cz0imtqzljkwmju5nyaxmjaumzaymjgxide3nc45mzu0ntugmjmxlju3mtm0miazoc41ide0ny41mta4ndcgmti2ljm2njk0msaxmtauodmzmzmzij48l3bvbhlsaw5lpgogicagicagicagicagicagicagidxwyxroigq9ik0xntkuodmzmzmzldk5ljc0ntm4ndigtde5ns40mty2njcsodkumjuiiglkpsjqyxroltiwiibzdhjva2u9iinfmei0qjciihn0cm9rzs13awr0ad0ims4xnjy2njy2nyigb3bhy2l0et0imc42ij48l3bhdgg+ciagicagicagicagicagicagicagphbhdgggzd0ittiwns4zmzmzmzmsodiumtm3mjewnsbmmjm4ljcxotqwniwzni4xnjy2njy3iibpzd0iugf0ac0yncigc3ryb2tlpsijqkfdquq5iibzdhjva2utd2lkdgg9ijeumty2njy2njcipjwvcgf0ad4kicagicagicagicagicagicagica8cgf0acbkpsjnmjy2ljcymzqyncwxmziumjmxotg4iewymdcumdgzmzmzldkwljqxnjy2njciiglkpsjqyxrolti1iibzdhjva2u9iindrkrbrtyiihn0cm9rzs13awr0ad0ims4xnjy2njy2nyi+pc9wyxropgogicagicagicagicagicagicagidxjaxjjbgugawq9ik92ywwtnsigzmlsbd0ii0mxrdffmcigy3g9ije1ni45mty2njciign5psi4ljc1iibypsi4ljc1ij48l2npcmnszt4kicagicagicagicagicagicagica8y2lyy2xliglkpsjpdmfsltutq29wes0ziibmawxspsijqzfemuuwiibjed0imzkumdgzmzmzmyigy3k9ije0oc43nsigcj0ins4ynsi+pc9jaxjjbgu+ciagicagicagicagicagicagicagpgnpcmnszsbpzd0it3zhbc01lunvchktmiigzmlsbc1vcgfjaxr5psiwljyiigzpbgw9iinemurfruqiign4psi4ljc1iibjet0imzmumjuiihi9ijgunzuipjwvy2lyy2xlpgogicagicagicagicagicagicagidxjaxjjbgugawq9ik92ywwtns1db3b5ltqiigzpbgwtb3bhy2l0et0imc42iibmawxspsijrdferuveiibjed0imjqzljgzmzmzmyigy3k9ijmwljmzmzmzmzmiihi9ijuuodmzmzmzmzmipjwvy2lyy2xlpgogicagicagicagicagicagicagidxjaxjjbgugawq9ik92ywwtns1db3b5ltuiigzpbgw9iinfmei0qjciign4psixnzuuntgzmzmziibjet0imjmyljc1iibypsi1lji1ij48l2npcmnszt4kicagicagicagicagicagidwvzz4kicagicagicagicagpc9npgogicagicagidwvzz4kicagidwvzz4kpc9zdmc+);
		/* 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>

分页表格

效果展示

vue中的ElementUI的使用详解

分页这一块是难点也是重点!!!
handlesizechange方法选择分页大小
handlecurrentchange方法选择第几页
loaddata调用后端api接口获取分页的数据

<template>
	<div>
		<el-table :data="tabledata" border style="width: 100%">
			<el-table-column fixed prop="id" label="新闻id" width="150">
			</el-table-column>
			<el-table-column prop="typeid" label="新闻标题" width="200">
			</el-table-column>
			<el-table-column prop="otherid" label="新闻摘要" width="200"> </el-table-column>
			<el-table-column prop="money" label="新闻内容" width="200">
			</el-table-column>
			<el-table-column prop="datetime" label="新闻发布时间" width="150"> </el-table-column>
			<el-table-column fixed="right" label="操作" width="200">
				<template slot-scope="scope">
					<el-button @click="updateexercise(scope.row)" size="mesdium" type="primary">修改</el-button>
					<el-button @click="deleteexercise(scope.row)" type="warning" size="medium">删除</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);
			},
			//从服务器读取数据
			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>

后端

@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;
    }

开关+标签页

效果展示

vue中的ElementUI的使用详解

开关的主要方法 switchchange
标签页不难,如果看不懂下面代码,可以参考官方文档

前端开关主要代码

 <el-table-column prop="name" label="是否冻结" 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>

完整代码

<template>
  <el-tabs v-model="activename" @tab-click="handleclick">
    <el-tab-pane label="所有账户" name="first">
		<el-table :data="tabledata" border style="width: 100%">
		  <el-table-column fixed prop="accoundid" label="账户id" width="150">
		  </el-table-column>
		  <el-table-column prop="password" label="密码" width="200">
		  </el-table-column>
		  <el-table-column prop="balance" label="余额" width="200"> </el-table-column>
		  <el-table-column prop="name" label="是否冻结" 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="操作" width="200">
		    <template slot-scope="scope">
		      <el-button @click="deleteexercise(scope.row)" type="warning" size="medium"
		        >删除</el-button
		      >
		    </template>
		  </el-table-column>
		</el-table>
	</el-tab-pane>
    <el-tab-pane label="被冻结的账户" name="second">
		<el-table :data="tabledatab" border style="width: 100%">
		  <el-table-column fixed prop="accoundid" label="账户id" width="150">
		  </el-table-column>
		  <el-table-column prop="personinfo.realname" label="名字" width="200">
		  </el-table-column>
		  <el-table-column prop="password" label="密码" width="200">
		  </el-table-column>
		  <el-table-column prop="balance" label="余额" width="200"> </el-table-column>
		  
		  <el-table-column fixed="right" label="操作" width="200">
		    <template slot-scope="scope">
				<el-button @click="qiyong(scope.row)" type="warning" size="medium"
				  >启用</el-button
				>
		    </template>
		  </el-table-column>
		</el-table>
	</el-tab-pane>
    <el-tab-pane label="已启用的账户" name="third">
		<el-table :data="tabledatabc" border style="width: 100%">
		  <el-table-column fixed prop="accoundid" label="账户id" width="150">
		  </el-table-column>
		  <el-table-column prop="personinfo.realname" label="名字" width="200">
		  </el-table-column>
		  <el-table-column prop="password" label="密码" width="200">
		  </el-table-column>
		  <el-table-column prop="balance" label="余额" width="200"> </el-table-column>
		  
		  <el-table-column fixed="right" label="操作" width="200">
		    <template slot-scope="scope">
		      <el-button @click="dongjie(scope.row)" type="warning" size="medium"
		        >冻结</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: "开启成功",
	  				type: "success"
	  			});
	  			// location.reload()
	  		});
	  	} else if (e == 2) {
	  		axios.get('http://localhost:8088/accounts/dongjie/' + data.accoundid).then((res) => {
	  			this.$message({
	  				message: "冻结成功",
	  				type: "success"
	  			});
	  			// location.reload()
	  		});
	  	}
	  
	  
	  },
	  dongjie(row) {
	    let _this=this
	    this.$confirm('是否确定冻结'+row.personinfo.realname+'的账户?','冻结账户',{
	    	confirmbuttontext: '确定',
	    	cancelbuttontext: '取消',
	    	type: 'warning'
	    }).then(()=>{
	    	axios.get('http://localhost:8088/accounts/dongjie/'+row.accoundid).then(function (response){
	    		if(response.data){
	    			_this.$alert(row.personinfo.realname+'的账户冻结成功!', '冻结账户',{
	    				confirmbuttontext: '确定',
	    				callback: action =>{
	    					location.reload()
	    				}
	    			});
	    		}
	    	})
	    }).catch(()=>{
	    	
	    });
	  },
	  qiyong(row) {
	    let _this=this
	    this.$confirm('是否确定启用'+row.personinfo.realname+'的账户?','启用账户',{
	    	confirmbuttontext: '确定',
	    	cancelbuttontext: '取消',
	    	type: 'warning'
	    }).then(()=>{
	    	axios.get('http://localhost:8088/accounts/kaiqi/'+row.accoundid).then(function (response){
	    		if(response.data){
	    			_this.$alert(row.personinfo.realname+'的账户启用成功!', '启用账户',{
	    				confirmbuttontext: '确定',
	    				callback: action =>{
	    					location.reload()
	    				}
	    			});
	    		}
	    	})
	    }).catch(()=>{
	    	
	    });
	  },
	  deleteexercise(row) {
	    let _this=this
	    this.$confirm('是否确定删除账户'+row.accoundid+'?','删除账户',{
	    	confirmbuttontext: '确定',
	    	cancelbuttontext: '取消',
	    	type: 'warning'
	    }).then(()=>{
	    	axios.delete('http://localhost:8088/accounts/'+row.accoundid).then(function (response){
	    		if(response.data){
	    			_this.$alert(row.accoundid+'账户删除成功!', '删除账户',{
	    				confirmbuttontext: '确定',
	    				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>

前端拦截器

判断路由是否需要登录权限

main.js

router.beforeeach((to, from, next) => {
	// next()
	if (to.meta.requireauth) { // 判断该路由是否需要登录权限
		if (sessionstorage.getitem("personid")) {
			next()
		} else {
			// 未登录,跳转到登录页面
			next('/')
		}
	} else {
		next()
	}
})

route.js

在路由中添加 meta: requireauth:true
表示是否需要登录才能访问

{
		path: '/listxw',
		name: '新闻管理',
		component: index,
		show: true,
		meta: {
			requireauth: true
		},

		redirect: "/listxw",
		children: [{
				path: "/addxw",
				name: "添加新闻",
				component: addxw,
				meta: {
					requireauth: true
				},

			},
			{
				path: "/updatexw",
				name: "修改新闻",
				component: updatexw,
				meta: {
					requireauth: true
				},

			},
			{
				path: '/listxw',
				name: '新闻列表',
				component: listxw,
				meta: {
					requireauth: true
				},

			},
			{
				path: '/person',
				name: '个人信息',
				component: person,
				meta: {
					requireauth: true
				},

			},
			{
				path: '/record',
				name: '交易记录',
				component: record,
				meta: {
					requireauth: true
				},
			
			}
		],
	},

富文本编辑器

效果展示
下面几个名字是使用了富文本编辑器的回显

vue中的ElementUI的使用详解

首先需要安装vue-quill-editor
命令:npm install vue-quill-editor --save
下载quill(vue-quill-editor需要依赖)
npm install quill --save

完整代码

<template>
	<div>
		<el-form ref="loginformref" label-width="100px" style="width: 60%" :model="loginform">
			<el-form-item label="新闻标题">
				<el-input v-model="loginform.title"></el-input>
			</el-form-item>
			<el-form-item label="新闻摘要">
				<el-input v-model="loginform.newsabstract"></el-input>
			</el-form-item>
			<el-form-item label="新闻内容">
				<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()">添加新闻</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"; //调用编辑器
	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("添加新闻成功")
						this.$router.push({
							path: "/listxw"
						});
					} else {
						this.$message.error("添加新闻失败")
					}
				})
			},
			oneditorready(editor) { // 准备编辑器

			},
			oneditorblur() {}, // 失去焦点事件
			oneditorfocus() {}, // 获得焦点事件
			oneditorchange() {}, // 内容改变事件
			// 转码
			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>'; // 请求后台返回的内容字符串
			this.str = this.escapestringhtml(content);
		}



	};
</script>

<style>
</style>

本地源代码
前端e:\vnc\project\capital_vue
后端e:\vnc\project\capital

到此这篇关于vue中的elementui的使用详解的文章就介绍到这了,更多相关vue elementui 使用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

相关标签: vue ElementUI