当前位置：
  1. 首页
  2. 市民
  3. 正文

登录+sessionstorage

效果展示

登录成功后会把用户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>

分页表格

效果展示

分页这一块是难点也是重点！！！
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;
}

开关+标签页

效果展示

开关的主要方法 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-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 使用内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！

上一篇 Vue2.0+ElementUI+PageHelper实现的表格分页功能
下一篇 vue使用拖拽方式创建结构树

相关文章