vue中的ElementUI的使用详解
程序员文章站
2022-04-06 21:06:19
登录+sessionstorage效果展示登录成功后会把用户id存入前端的sessionstorage,拦截器会根据是否存在用户id来进行拦截也可以将用户权限存入sessionstorage,然后当访...
登录+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(/</g, '<'); str = str.replace(/>/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 使用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!