• SPA项目开发之首页导航+左侧菜单

    目录

    一、mockjs的使用

     二、总线

    三、退出账户

    一、mockjs的使用

    步骤：

    1.安装mockjs依赖 ；npm install mockjs -D（d:仅开发中使用）

    login.vue

    1. <template>
    2.   <div class="login-wrap">
    3.     <el-row>
    4.       <el-col :span="24">
    5.         <div style="text-align: center" class="grid-content bg-purple-dark"><h3>用户登录</h3>
    6.       </div></el-col>
    7.     </el-row>
    8.  
    9.     <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm login-container">
    10.       <el-form-item label="用户名" prop="uname">
    11.         <el-input type="text" v-model="ruleForm.uname" autocomplete="off"></el-input>
    12.       </el-form-item>
    13.       <el-form-item label="密码" prop="pwd">
    14.         <el-input type="password" v-model="ruleForm.pwd" autocomplete="off"></el-input>
    15.       </el-form-item>
    16.       <el-form-item>
    17.         <el-row>
    18.           <el-col :span="24">
    19.             <div style="text-align: center" class="grid-content bg-purple-dark">
    20.               <el-button style="width: 100%" type="primary" @click="submitForm">提交</el-button>
    21.             </div>
    22.           </el-col>
    23.         </el-row>
    24.       </el-form-item>
    25.       <el-form-item>
    26.         <el-row>
    27.           <el-col :span="12">
    28.             <div style="text-align: center" class="grid-content bg-purple-dark">
    29.               <el-link type="success"  @click="toReg">用户注册</el-link>
    30.             </div>
    31.           </el-col>
    32.           <el-col :span="12">
    33.           <div style="text-align: center" class="grid-content bg-purple-dark">
    34.             <el-link type="warning">忘记密码</el-link>
    35.           </div>
    36.           </el-col>
    37.         </el-row>
    38.       </el-form-item>
    39.  
    40.     </el-form>
    41.   </div>
    42. </template>
    43.  
    44. <script>
    45. import qs from 'qs'
    46. export default {
    47.   name: 'Login',
    48.   data () {
    49.     return {
    50.       ruleForm: {}
    51.     }
    52.   },
    53.   methods:{
    54.     submitForm(){
    55.       //this.axios找到的是 /api/http.js文件
    56.       //xios.urls——>this.axios/urls找到了 /api/action.js
    57.       //action.js是一个JSON对象，那么就可以取到请求的值
    58.        let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
    59.       // let url="http://localhost:8080/T216_SSH/vue/treeNodeAction.action";
    60.       // {uname:'zs',pwd:'123'}
    61.  
    62.       //this指的是vue实例
    63.       this.axios.post(url,this.ruleForm)
    64.         .then(resp => {//代表成功 箭头函数 jdk8的语法
    65.         console.log(resp);
    66.         if(resp.data.code == 1){
    67.           //this指的是http.js
    68.           this.$message({
    69.             message: resp.data.msg,
    70.             type: 'success'
    71.           });
    72.           this.$router.push({path:'/AppMain'});
    73.         }else if(resp.data.code == 0) {
    74.           //this指的是http.js
    75.           this.$message.error(resp.data.msg);
    76.         }
    77.       }).catch(function (){//代表失败
    78.  
    79.       });
    80.     },
    81.     resetForm(){
    82.  
    83.     },
    84.     toReg(){
    85.       this.$router.push({path:'/Reg'})
    86.     }
    87.   }
    88. }
    89. </script>
    90.  
    91. <style scoped>
    92. .login-wrap {
    93.   box-sizing: border-box;
    94.   width: 100%;
    95.   height: 100%;
    96.   padding-top: 10%;
    97.   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+);
    98.   /* background-color: #112346; */
    99.   background-repeat: no-repeat;
    100.   background-position: center right;
    101.   background-size: 100%;
    102. }
    103.  
    104. .login-container {
    105.   border-radius: 10px;
    106.   margin: 0px auto;
    107.   width: 350px;
    108.   padding: 30px 35px 15px 35px;
    109.   background: #fff;
    110.   border: 1px solid #eaeaea;
    111.   text-align: left;
    112.   box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
    113. }
    114.  
    115. .title {
    116.   margin: 0px auto 40px auto;
    117.   text-align: center;
    118.   color: #505458;
    119. }
    120. </style>

    2.配置开发环境及生产环境

    prod.env.js

    1. 'use strict'
    2. module.exports = {
    3.   NODE_ENV: '"production"',
    4.   MOCK:'false'
    5.  
    6. }

     dev.env.js

    1. 'use strict'
    2. const merge = require('webpack-merge')
    3. const prodEnv = require('./prod.env')
    4.  
    5. module.exports = merge(prodEnv, {
    6.   NODE_ENV: '"development"',
    7.    MOCK:'true'
    8. })

    3.导入公共模块及mockjs全局设置

    在src目录下创建mock目录，定义mock主文件index.js，并在该文件中定义拦截路由配置，

    界面效果图：

     二、总线

     vue Bus总线：将一个空的Vue实例放到根组件下，所有的子组件都能调用

     main.js
            new Vue({
        el: '#app',
        router,
        components: {
            App
        },
        template: '',
        data: {
            //自定义的事件总线对象，用于父子组件的通信
            Bus: new Vue()
        }
             })

    topNav.vue

    1. <template>
    2. 	<!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
    3. 	 text-color="#fff" active-text-color="#ffd04b">
    4. 		<el-menu-item index="1">处理中心</el-menu-item>
    5. 		<el-submenu index="2">
    6. 			<template slot="title">我的工作台</template>
    7. 			<el-menu-item index="2-1">选项1</el-menu-item>
    8. 			<el-menu-item index="2-2">选项2</el-menu-item>
    9. 			<el-menu-item index="2-3">选项3</el-menu-item>
    10. 			<el-submenu index="2-4">
    11. 				<template slot="title">选项4</template>
    12. 				<el-menu-item index="2-4-1">选项1</el-menu-item>
    13. 				<el-menu-item index="2-4-2">选项2</el-menu-item>
    14. 				<el-menu-item index="2-4-3">选项3</el-menu-item>
    15. 			</el-submenu>
    16. 		</el-submenu>
    17.  
    18. 		<el-menu-item index="3" disabled>消息中心</el-menu-item>
    19. 		<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    20. 	</el-menu> -->
    21. 	<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    22. 		<el-button class="buttonimg">
    23. 			<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
    24. 		</el-button>
    25. 		<el-submenu index="2" class="submenu">
    26. 			<template slot="title">超级管理员</template>
    27. 			<el-menu-item index="2-1">设置</el-menu-item>
    28. 			<el-menu-item index="2-2">个人中心</el-menu-item>
    29. 			<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    30. 		</el-submenu>
    31. 	</el-menu>
    32. </template>
    33.  
    34. <script>
    35. 	export default {
    36. 		data(){
    37. 		    return{
    38. 		    collapsed:false,
    39.         imgshow:require('@/assets/img/show.png'),
    40.         imgsq:require('@/assets/img/sq.png')
    41. 		    }
    42. 		},
    43.     methods:{
    44.      doToggle(){
    45.        this.collapsed=!this.collapsed;
    46.        this.$root.Bus.$emit("collapsed-aside", this.collapsed);
    47.      }
    48.     }
    49. 	}
    50. </script>
    51.  
    52. <style scoped>
    53. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    54. 		border: none;
    55. 	}
    56.  
    57. 	.submenu {
    58. 		float: right;
    59. 	}
    60.  
    61. 	.buttonimg {
    62. 		height: 60px;
    63. 		background-color: transparent;
    64. 		border: none;
    65. 	}
    66.  
    67. 	.showimg {
    68. 		width: 26px;
    69. 		height: 26px;
    70. 		position: absolute;
    71. 		top: 17px;
    72. 		left: 17px;
    73. 	}
    74.  
    75. 	.showimg:active {
    76. 		border: none;
    77. 	}
    78. </style>

    leftNAv.vue

    1. <template>
    2. 	<el-menu default-active="2" class="el-menu-vertical-demo"  background-color="#334157"
    3. 	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >
    4. 		<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
    5. 		<div class="logobox">
    6. 			<img class="logoimg" src="../assets/img/logo.png" alt="">
    7. 		</div>
    8. 		<el-submenu index="1">
    9. 			<template slot="title">
    10. 				<i class="el-icon-location"></i>
    11. 				<span>导航一</span>
    12. 			</template>
    13. 			<el-menu-item-group>
    14. 				<template slot="title">分组一</template>
    15. 				<el-menu-item index="1-1">选项1</el-menu-item>
    16. 				<el-menu-item index="1-2">选项2</el-menu-item>
    17. 			</el-menu-item-group>
    18. 			<el-menu-item-group title="分组2">
    19. 				<el-menu-item index="1-3">选项3</el-menu-item>
    20. 			</el-menu-item-group>
    21. 			<el-submenu index="1-4">
    22. 				<template slot="title">选项4</template>
    23. 				<el-menu-item index="1-4-1">选项1</el-menu-item>
    24. 			</el-submenu>
    25. 		</el-submenu>
    26. 		<el-menu-item index="2">
    27. 			<i class="el-icon-menu"></i>
    28. 			<span slot="title">导航二</span>
    29. 		</el-menu-item>
    30. 		<el-menu-item index="3" disabled>
    31. 			<i class="el-icon-document"></i>
    32. 			<span slot="title">导航三</span>
    33. 		</el-menu-item>
    34. 		<el-menu-item index="4">
    35. 			<i class="el-icon-setting"></i>
    36. 			<span slot="title">导航四</span>
    37. 		</el-menu-item>
    38. 	</el-menu>
    39. </template>
    40. <script>
    41. 	export default {
    42. 		data(){
    43. 		    return{
    44. 		    collapsed:false
    45. 		    }
    46. 		},
    47.     created() {
    48.       this.$root.Bus.$on("collapsed-aside", (v) =>{
    49.         this.collapsed=v;
    50.     });
    51.     }
    52. 	}
    53. </script>
    54. <style>
    55. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    56. 		width: 240px;
    57. 		min-height: 400px;
    58. 	}
    59.  
    60. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    61. 		border: none;
    62. 		text-align: left;
    63. 	}
    64.  
    65. 	.el-menu-item-group__title {
    66. 		padding: 0px;
    67. 	}
    68.  
    69. 	.el-menu-bg {
    70. 		background-color: #1f2d3d !important;
    71. 	}
    72.  
    73. 	.el-menu {
    74. 		border: none;
    75. 	}
    76.  
    77. 	.logobox {
    78. 		height: 40px;
    79. 		line-height: 40px;
    80. 		color: #9d9d9d;
    81. 		font-size: 20px;
    82. 		text-align: center;
    83. 		padding: 20px 0px;
    84. 	}
    85.  
    86. 	.logoimg {
    87. 		height: 40px;
    88. 	}
    89. </style>

     appNav.vue

    1. <template>
    2. 	<el-container class="main-container">
    3. 		<el-aside v-bind:class="asideClass">
    4. 			<LeftNav></LeftNav>
    5. 		</el-aside>
    6. 		<el-container>
    7. 			<el-header class="main-header">
    8. 				<TopNav></TopNav>
    9. 			</el-header>
    10. 			<el-main class="main-center">Main</el-main>
    11. 		</el-container>
    12. 	</el-container>
    13. </template>
    14.  
    15. <script>
    16. 	// 导入组件
    17. 	import TopNav from '@/components/TopNav.vue'
    18. 	import LeftNav from '@/components/LeftNav.vue'
    19.  
    20. 	// 导出模块
    21. 	export default {
    22. 		data(){
    23.         return{
    24.           asideClass:'main-aside'
    25.         }
    26.     },
    27.     components:{
    28.       TopNav,LeftNav //注册
    29.     },
    30.     created() {
    31.       this.$root.Bus.$on("collapsed-aside", (v) =>{
    32.         this.asideClass=v ?'main-aside-collapsed' :'main-aside' ;
    33.     });
    34.     }
    35. 	};
    36. </script>
    37. <style scoped>
    38. 	.main-container {
    39. 		height: 100%;
    40. 		width: 100%;
    41. 		box-sizing: border-box;
    42. 	}
    43.  
    44. 	.main-aside-collapsed {
    45. 		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    46. 		width: 64px !important;
    47. 		height: 100%;
    48. 		background-color: #334157;
    49. 		margin: 0px;
    50. 	}
    51.  
    52. 	.main-aside {
    53. 		width: 240px !important;
    54. 		height: 100%;
    55. 		background-color: #334157;
    56. 		margin: 0px;
    57. 	}
    58.  
    59. 	.main-header,
    60. 	.main-center {
    61. 		padding: 0px;
    62. 		border-left: 2px solid #333;
    63. 	}
    64. </style>

    设置路由index.js

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from "@/components/HelloWorld";
    4. import Login from "@/views/Login";
    5. import Reg from "@/views/Reg";
    6. import AppMain from '@/components/AppMain';
    7. import LeftNav from '@/components/LeftNav';
    8. import TopNav from '@/components/TopNav';
    9.  
    10. Vue.use(Router)
    11.  
    12. export default new Router({
    13.   routes: [
    14.     {
    15.       path: '/',
    16.       name: 'Login',
    17.       component: Login
    18.     },
    19.     {
    20.       path: '/Login',
    21.       name: 'Login',
    22.       component: Login
    23.     },
    24.     {
    25.       path: '/Reg',
    26.       name: 'Reg',
    27.       component: Reg
    28.     },
    29.     {
    30.       path: '/AppMain',
    31.       name: 'AppMain',
    32.       component: AppMain,
    33.       children:[
    34.         {
    35.           path: '/LeftNav',
    36.           name: 'LeftNav',
    37.           component: LeftNav
    38.         },
    39.         {
    40.           path: '/TopNav',
    41.           name: 'TopNav',
    42.           component: TopNav
    43.         }
    44.       ]
    45.     }
    46.   ]
    47. })

    main.js

    1. // The Vue build version to load with the `import` command
    2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    3. import Vue from 'vue'
    4. //引入mockjs,在开发环境下
    5. process.env.mock && require('@/mock')
    6. import ElementUI from 'element-ui' // 新添加 1
    7. import 'element-ui/lib/theme-chalk/index.css' // 新添加 2 ，避免后期打包样式不同，要放在import App from './App'; 之前
    8. import App from './App'
    9. import router from './router'
    10. import axios from '@/api/http'  //#vue项目对axios的全局配置
    11. // import axios from 'axios'
    12. import VueAxios from 'vue-axios'
    13.  
    14.  
    15. Vue.use(VueAxios,axios)
    16. Vue.use(ElementUI)   // 新添加 3
    17. Vue.config.productionTip = false
    18.  
    19. /* eslint-disable no-new */
    20. new Vue({
    21.  
    22.   el: '#app',
    23.   data(){
    24.     return {
    25.       Bus:new Vue({
    26.  
    27.       })
    28.     }
    29.   }
    30.   router,//挂载边界
    31.   components: { App },
    32.   template: ''
    33. })

    图标效果图：

     

    三、退出账户

     topNav.vue

    1. <script>
    2. 	export default {
    3. 		data(){
    4. 		    return{
    5. 		    collapsed:false,
    6.         imgshow:require('@/assets/img/show.png'),
    7.         imgsq:require('@/assets/img/sq.png')
    8. 		    }
    9. 		},
    10.     methods:{
    11.      doToggle(){
    12.        this.collapsed=!this.collapsed;
    13.        this.$root.Bus.$emit("collapsed-aside", this.collapsed);
    14.      },
    15.      exit(){
    16.        this.$router.push({path:'/Login'});//退出
    17.      }
    18.     }
    19. 	}
    20. script>

     退出效果图：

  • 相关阅读:
    PowerPC平台移植RTL8822BU
    5. 【线索二叉树】的由来、基本概念、结构体定义、三种遍历线索化、线索二叉树找前驱/后继
    如何利用 RPA 实现自动化获客?
    IOC容器bean管理---注解方式
    联邦学习--记录
    【PPT技巧】如何将多张幻灯片打印在一张纸上？
    【linux】[OOM]now anon-rss:0kB, file-rss:0kB, shmem-rss:280kB
    wpf的GridSplitter使用
    ERP系统选型需谨慎
    MATLAB从0开始搭建简单的GUI界面
  • 原文地址：https://blog.csdn.net/qq_66924116/article/details/126808133