2021-7-07 SDU暑期项目实训日志报告04

学习目标：

这篇博客用于记录7-06和7-07两天的学习工作。
按照工期表的计划，这两天应进行实际的开发工作。我负责教室管理部分，这两天内我成功完成了界面的导航栏设计与开发。

---

学习内容：

（一）头部菜单栏组件
代码如下：

/**
* 头部菜单
*/ 
<template>
  <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    <el-button class="buttonimg">
      <img class="showimg" :src="collapsed?imgsq:imgshow" @click="toggle(collapsed)">
    </el-button>
    <el-submenu index="2" class="submenu">
      <!-- <template slot="title">{{user.userRealName}}</template> -->
      <template slot="title">超级管理员</template>
      <el-menu-item index="2-1">设置</el-menu-item>
      <el-menu-item @click="content()" index="2-2">个人中心</el-menu-item>
      <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
import { loginout } from '../api/userMG'
export default {
  name: 'navcon',
  data() {
    return {
      collapsed: true,
      imgshow: require('../assets/img/show.png'),
      imgsq: require('../assets/img/sq.png'),
      user: {}
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.user = JSON.parse(localStorage.getItem('userdata'))
  },
  methods: {
    // 退出登录
    exit() {
      this.$confirm('退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          setTimeout(() => {
            this.$store.commit('logout', 'false')
            this.$router.push({ path: '/login' })
            this.$message({
              type: 'success',
              message: '已退出登录!'
            })
          }, 1000)
          // loginout()
          //   .then(res => {
          //     if (res.success) {
          //       //如果请求成功就让他2秒跳转路由
          //       setTimeout(() => {
          //         this.$store.commit('logout', 'false')
          //         this.$router.push({ path: '/login' })
          //         this.$message({
          //           type: 'success',
          //           message: '已退出登录!'
          //         })
          //       }, 1000)
          //     } else {
          //       this.$message.error(res.msg)
          //       this.logining = false
          //       return false
          //     }
          //   })
          //   .catch(err => {
          //     // 获取图形验证码
          //     this.getcode()
          //     this.logining = false
          //     this.$message.error('退出失败，请稍后再试！')
          //   })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 切换显示
    toggle(showtype) {
      this.collapsed = !showtype
      this.$root.Bus.$emit('toggle', this.collapsed)
    }
  }
}
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}
.submenu {
  float: right;
}
.buttonimg {
  height: 60px;
  background-color: transparent;
  border: none;
}
.showimg {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 17px;
  left: 17px;
}
.showimg:active {
  border: none;
}
</style>

（二）左侧菜单栏组件
代码如下：

/**
* 左边菜单
*/ 
<template>
  <el-menu default-active="2" :collapse="collapsed" 
  collapse-transition router :default-active="$route.path" 
  :mode="horizontal"
  unique-opened class="el-menu-vertical-demo" 
  background-color="#334157" text-color="#fff" active-text-color="#ffd04b">
    <div class="logobox">
       选座管理
    </div> 
		 
	    <el-submenu v-for="menu in allmenu" :key="menu.menuid"
		 :index="menu.menuname">
	      <template slot="title">
	        <i class="iconfont" :class="menu.icon"></i>
	        <span>{{menu.menuname}}</span>
	      </template>
	      <el-menu-item-group>
	        <el-menu-item v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">
	          <i class="iconfont" :class="chmenu.icon"></i>
	          <span>{{chmenu.menuname}}</span>
	        </el-menu-item>
	      </el-menu-item-group>
	    </el-submenu>
  </el-menu>
</template>
<script>  
export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: []
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    // 获取图形验证码
    let res = {
      success: true,
      data: [
        {
          menuid: 1,
          icon: 'li-icon-xiangmuguanli',
          menuname: '教室管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 11,
              icon: 'icon-cat-skuQuery',
              menuname: '教室模板',
              hasThird: 'N',
              url: 'goods/Goods',
              menus: null
            }, {
              menuid: 12,
              icon: 'icon-cat-skuQuery',
              menuname: '教室列表',
              hasThird: 'N',
              url: 'pay/Order',
              menus: null
            }
          ]
        },
		{
		  menuid: 2,
		  icon: 'li-icon-xiangmuguanli',
		  menuname: '教学管理', 
		 url: null,
		  menus: null ,
          menus: [
            {
              menuid: 21,
              icon: 'icon-cat-skuQuery',
              menuname: '创建教学',
              hasThird: 'N',
              url: 'goods/Goods18',
              menus: null
            }, {
              menuid: 22,
              icon: 'icon-cat-skuQuery',
              menuname: '教学列表',
              hasThird: 'N',
              url: 'pay/Order',
              menus: null
            }
          ]
		},
		{
		  menuid: 3,
		  icon: 'li-icon-xiangmuguanli',
		  menuname: '黑名单管理',
		  hasThird: 'N',
		  url: 'goods/Goods',
		  menus: null 
		},
		{
		  menuid: 4,
		  icon: 'li-icon-xiangmuguanli',
		  menuname: '报修管理',
		  hasThird: 'N',
		  url: 'goods/Goods',
		  menus: null 
		},
		{
		  menuid: 5,
		  icon: 'li-icon-xiangmuguanli',
		  menuname: '申诉管理',
		  hasThird: 'N',
		  url: 'goods/Goods',
		  menus: null 
		},
		{
		  menuid: 6,
		  icon: 'li-icon-xiangmuguanli',
		  menuname: '用户管理',
		  hasThird: 'N',
		  url: 'goods/Goods',
		  menus: null 
		}
      ],
      msg: 'success'
    }
        this.allmenu = res.data 
		this.$root.Bus.$on('toggle', value => {
		  this.collapsed = !value
		})
  }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
.el-menu-item-group__title {
  padding: 0px;
}
.el-menu-bg {
  background-color: #1f2d3d !important;
}
.el-menu {
  border: none;
}
.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}
.logoimg {
  height: 40px;
}
</style>

（三）设计主界面
index.vue代码如下：

<template>
  <el-container class="index-con">
    <el-aside :class="showclass">
      <leftnav></leftnav>
    </el-aside>
    <el-container class="main-con">
      <el-header class="index-header">
        <navcon></navcon>
      </el-header>
      <el-main clss="index-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
// 导入组件
import navcon from '../components/navcon.vue'
import leftnav from '../components/leftnav.vue'
export default {
  name: 'index',
  data() {
    return {
      showclass: 'asideshow',
      showtype: false
    }
  },
  // 注册组件
  components: {
    navcon,
    leftnav
  },
  methods: {},
  created() {
    // 监听
    this.$root.Bus.$on('toggle', value => {
      if (value) {
        this.showclass = 'asideshow'
      } else {
        setTimeout(() => {
          this.showclass = 'aside'
        }, 300)
      }
    })
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {
    // 弹出登录成功
    this.$message({
      message: '登录成功',
      type: 'success'
    })
  }
}
</script>
<style >
.index-con {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.aside {
  width: 64px !important;
  height: 100%;
  background-color: #334157;
  margin: 0px;
}
.asideshow {
  width: 240px !important;
  height: 100%;
  background-color: #334157;
  margin: 0px;
}
.index-header,
.index-main {
  padding: 0px;
  border-left: 2px solid #333;
}
</style>

（四）成果展示
主界面展示截图如下：

---

学习总结：

在主界面的开发过程中，我感受到了前端开发的乐趣，看到自己写的代码跑出漂亮的界面来确实是件快乐的事，虽然前端的组件非常繁多，要学习的东西也很多，但一旦掌握了一种组件的使用，我发现其他类似组件的使用也便大概会了，前端开发是一个开头难后面则越来越爽的过程。
在这两天中，我没有实现需求规格说明书中任何一个功能点，只进行了主界面的开发。

---

学习计划：

接下来的几天将与后端同学磨合接口，并进行功能点的实现工作。