Vue写项目后台03

继上次完成登录之后
继续完成后台的页面

首先登录之后跳装路由，在router.index.js中注册路由

用一个Home.vue作为路由后台路由界面
TheAside.vue作为后台左侧菜单路由界面
TheHeader.vue作为后台头部界面

菜单路由界面用到了element-ui
element-ui中的menu组件

element-ui使用可参见官网，和layui差不多

components.Home.vue

<template>
  <div>
    <!-- TheHeader页面 vue大小写可用中杠-，也可不用，类似驼峰命名法，在mysql数据库中t_admin在java的实体类会被映射成TAdmin -->
    <the-header></the-header>
     <the-aside></the-aside>
     <router-view></router-view>
  </div>
</template>

<script>
  import TheAside from './TheAside'
  import TheHeader from './TheHeader'
  export default{
      components:{
        TheAside,
        TheHeader
      }
  }
</script>

<style>
</style>

components.TheAside.vue

<template>
  <div class="sidebar">


<!-- element-ui 菜单组件 具体使用用法请参考百度 element-ui官网使用或百度el-menu-->
   <el-menu
   class="sidebar-el-menu"
   :default-active="onRoutes"
   :collapse="collapse"
   background-color="#324157"
   text-color="#ffffff"
   active-text-color="#20a0ff"
   unique-opened
   router
   >
   <!--
    class="sidebar-el-menu"  class样式
    :default-active="onRoutes" 默认的点击时的样式
    :collapse="collapse"  确定是否收缩
    background-color="#324157" el-menu的背景颜色
    text-color="#ffffff"  字体颜色
    active-text-color="#20a0ff" 点击后的字体颜色
    router 具有路由作用

    -->
      <template v-for="item in items">
        <template>
          <!-- el-menu-item是一级菜单组件 -->
          <el-menu-item :index="item.index" :key="item.index">
        <i :class="item.icon"></i>
        <span>        {{item.title}}</span>
          </el-menu-item>
          <!-- 循环遍历items数组内容 -->
        </template>
      </template>
    </el-menu>


  </div>
</template>

<script>
  export default{
    data(){
   return{
     collapse:false,
     items:[
       {
         icon:'el-icon-document',
         index:'Info',
         title:'系统首页'
       },
       {
         icon:'el-icon-document',
         index:'Consumer',
         title:'用户管理'
       },
       {
         icon:'el-icon-document',
         index:'Singer',
         title:'歌手管理'
       },
       {
         icon:'el-icon-document',
         index:'SongList',
         title:'歌单管理'
       }
     ]
   }
    },
    computed:{
      onRoutes(){
        return this.$route.path.replace('/','');
      }
    }
  }
</script>

<style scoped>
 .sidebar {
   display: block;
   position: absolute;
   background-color: #334256;
   left: 0;
   top: 70px;
   bottom: 0;
   overflow-y: scroll;
 }
.sidebar::-webkit-scrollbar {
   width: 0;
 }
 .sidebar-el-menu:not(.el-menu--collapse) {
   width: 150px;
 }
.sidebar > ul {
height: 100%;
 }
</style>

components.TheHeader.vue

<template>
  <div>头部菜单</div>
</template>

<script>
</script>

<style>
</style>

pages.ConsumerPage.vue

<template>
  <div>用户管理</div>
</template>

<script>
</script>

<style>
</style>

pages.Info.vue

<template>


  <div>
    后台首页
  </div>


</template>

<script>
</script>

<style>
</style>

pages.Login.vue

<template>
  <div id="div01">
     <div id="login-title">欢迎访问音乐网站</div>
     <div id="login-wrap">
<!-- element-ui组件 -->

<!-- :model双向数据绑定，rules验空 -->
       <el-form
       :model="loginmodel"
       :rules="rules">
       <!-- 验空提示元素 -->
       <el-form-item prop="username">
         <!-- element-ui输入文本控件 -->
         <el-input placeholder="用户名" v-model="loginmodel.username"></el-input>
       </el-form-item>

       <!-- 验空提示元素 -->
       <el-form-item prop="password">
         <!-- element-ui输入文本控件（password） -->
         <el-input placeholder="密码" v-model="loginmodel.password" type="password"></el-input>
       </el-form-item>

<!-- element-ui提交按钮 -->
<div id="login-btn"> <el-button type="primary" @click="submitFrom">登录</el-button></div>
       </el-form>

     </div>
  </div>
</template>

<script>
  import {Login }from '../api/index' // 引入Login方法axios请求
  import {mixin} from '../mixins'    // 引入mixin提示信息
  export default{
  mixins:[mixin],// 函数内部导出提示信息
data:function(){   // 数据函数
return{
loginmodel:{   // 双向数据绑定
  username:'admin',
  password:'123'
},
rules:{    // 验证规则，验空
  username:[
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password:[
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
}
}
},
methods:{  // @click方法
  submitFrom(){
   let params=new URLSearchParams();
   params.append('username',this.loginmodel.username)
   params.append('password',this.loginmodel.password)
   console.log(this.loginmodel.username)
   Login(params)  // 将参数传入Login()方法
   .then(res=>{
     if(res.code===1){
       this.$router.push("/Info")  // 路由跳转
       this.notify('欢迎回来','success')
     }else{
       this.notify('登录失败','error')
     }
   })
   .catch(err=>{
       this.notify('服务器未连接','error')
     console.log(err)
   })
  }
}
  }
</script>

<style>
  /* css样式 */
#div01{
  position: relative;
  background: url(../assets/img/background.jpg);
  width: 100%;
  height: 100%;
  background-size: cover;
}
#login-title{
  position: absolute;
   color: #FFFFFF;
   position: absolute;
   font-size: 30px;
   margin-top: 100px;
   margin-left: 500px;
}
#login-wrap{
  position: absolute;
  background-color: #DDDDDD;
  width: 400px;
  height: 300px;
border-radius: 10px;
margin-left: 450px;
margin-top: 150px;
padding: 20px;
}
#login-btn{
 text-align: center;
}
#login-btn button{
  width: 100%;
  height: 36px;
}
</style>

pages.SingerPage.vue

<template>
  <div>歌手管理</div>
</template>

<script>
</script>

<style>
</style>

SongListPage.vue

<template>
  <div>歌单管理</div>
</template>

<script>
</script>

<style>
</style>

router.index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Login from '@/pages/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login // 引入上面引入的文件跳转方式
    },
    {
      path:'/Home',
      component:resolve => require(['../components/Home.vue'],resolve),
      children:[
        {
          path:'/Info',   // 页面切换路径
      component:resolve => require(['../pages/Info.vue'],resolve)  // 这种直接定义到页面的跳转方式
        },
        {
          path:'/Consumer',  // 用户管理
          component:resolve => require(['../pages/ConsumerPage.vue'],resolve),
          meta:{title:'Consumer'}
          },
          {
            path:'/Singer',  // 歌手管理
            component:resolve=>require(['../pages/SingerPage.vue'],resolve),
            meta:{title:'SingerPage'}
            },
            {
              path:'/SongList',     // 歌单管理
              component:resolve=>require(['../pages/SongListPage.vue'],resolve),
              meta:{title:'SongListPage'}
            }
              ]
    }

    ,


         ]
})