毕业设计-中医特色社区护理系统_若依hamburger组件-优快云博客

本文链接：https://blog.youkuaiyun.com/Faker_whoop/article/details/123886664

本文档展示了使用Vue.js结合Element-UI框架设计后台管理界面的过程，包括左侧菜单栏、顶部导航和主要内容区域的布局。菜单栏采用Element-UI的el-menu组件，实现了用户管理、申请管理、文章管理等模块。同时，详细介绍了header组件中的汉堡菜单实现，以及内容区和侧边栏组件的编写。此外，还提到了分页组件的使用和数据获取。整个项目借鉴了若依开源代码，并通过Vuex进行状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天正式开始码代码
采用的是element ui框架和vue.js写的总体框架
后端准备采用Mybatis。
今天设计的总体界面是借鉴若依开源代码进行书写，在这里插入图片描述
总体界面如上
总体分成了左头右三个部分，然后在已经创建好的vue项目里面layout建立一个components文件夹，里面分别装 aside content header 还有自身的index.vue
代码如下：index.vue

<template>
  <div id="wrapper">
    <aside id="aside">
      <layout-aside></layout-aside>
    </aside>
    <section id="left">
      <layout-header></layout-header>
      <layout-content></layout-content>
    </section>
  </div>
</template>

<script>
import LayoutAside from './components/aside'
import LayoutContent from './components/content'
import LayoutHeader from './components/header'

export default {
  name: 'Layout',
  components: { LayoutAside, LayoutContent, LayoutHeader }
}
</script>

<style lang="less" scoped>
#wrapper {
  display: flex;
  #left {
    flex: 1;
  }
}
</style>

aside.vue

<template>
    <div>

    <el-menu router 
      :collapse="isCollapse"
      background-color="#545c64"
      text-color="#ffff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i><span>用户管理</span>
        </template>
        <el-menu-item index="/user/userDoctor">中医生管理</el-menu-item>
        <el-menu-item index="/user/userCommunity">社区人员管理</el-menu-item>
      </el-submenu>
      <el-menu-item index="/applyFor">
          <i class="el-icon-menu"></i> <span slot="title">申请管理</span>
      </el-menu-item>
      <el-menu-item index="/article" >
        <i class="el-icon-menu"></i> <span slot="title">文章管理</span>
      </el-menu-item>
      <el-menu-item index="/service">
        <i class="el-icon-menu"></i>  <span slot="title">服务管理</span>
      </el-menu-item>
            <el-menu-item index="/role">
        <i class="el-icon-menu"></i>  <span slot="title">角色管理</span>
      </el-menu-item>
    </el-menu>

    </div>
</template>

<script>
import  { mapState } from  'vuex'
export default {
  name :'Aside',
  computed: {
    ...mapState({
      siderbar: state => state.app.sidebar
    }),
    isCollapse(){
      return !this.siderbar.opened
    }
  }
}
</script>

<style lang="less" scoped>
.el-menu:not(.el-menu--collapse){
    width: 200px;
}
.el-menu{
    min-height: 100vh;
}
</style>

content

<template>
    <div id = "layout-content">
        <router-view></router-view>

    </div>
</template>

<script>
    export default {
        name :'Content'
    }
</script>

<style lang="less" scoped>
#layout-content{
    padding: 10px;//左右各5px
}
</style>

header

<template>
  <div id="layout-header">
    <hamburger id="hamburger" :is-active='sidebar.opened' @toggleClick='toggleClick'/>
  </div>
</template>

<script>
import Hamburger from './Hamburger'
import { mapState } from 'vuex'
export default {
  name: 'Header',
  components: { Hamburger },
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar
    })
  },
  methods: {
    toggleClick: function () {
       
      this.$store.dispatch('app/toggleSideBar')
    }
  }
}
</script>

<style lang="less" scoped>
#layout-header {
  height: 50px; display: flex; align-items: center;
  box-shadow: 2px 0 5px 0 #efefef;
  padding: 0 15px;
}
</style>

在header里面建一个Hamburger 收缩样式
仿照的是若依里面的收缩按钮

<template>
  <!-- toggle：切换  -->
  <div class="hamburger-container" @click="toggleClick">
    <svg
      :class="{'is-active':isActive}"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64">
      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleClick () {
      this.$emit('toggleClick')
    }
  }
}
</script>

<style lang='less' scoped>
.hamburger {
  display: inline-block;
  width: 20px; height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>

布局聊完了接着就是视图了今天仅仅给几个视图进行补充其他视图为汉子代替这里只贴写的用户管理在这里插入图片描述视图界面写了

<template>
  <div>
    <el-table
      :data="doctorList"
      style="width: 100%">
      <el-table-column prop="user_id" label="编号" width="80"></el-table-column>
      <el-table-column label="头像" width="120">
        <template slot-scope="scope">
          <el-image class="avatar" :src="scope.row.avatar"  :preview-src-list="[scope.row.avatar]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="user_name" label="姓名" width="100"></el-table-column>
      <el-table-column prop="age" label="年龄" width="100"></el-table-column>
      <el-table-column prop="phonenumber" label="手机号码" width="120"></el-table-column>
      <el-table-column prop="password" label="密码" width="120"></el-table-column>
      <el-table-column label="头像" width="120">
        <template slot-scope="scope">
          <el-image class="prove" :src="scope.row.prove"  :preview-src-list="[scope.row.prove]"></el-image>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页：开始 -->
    <el-pagination small :page-sizes="[6, 12, 18]" :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="25"
      @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    <!-- 分页：结束 -->
  </div>
</template>
../../../api/user/doctor
<script>
import { getUserDoctorList } from '../../../api/user/doctor'
export default {
  name: 'UserDoctor',
  data () {
    return {
      doctorList: [],
      page: {
        pageNum: 1,
        pageSize: 6
      }
    }
  },
  created () {
    this.fetchUserDoctorList()
  },
  methods: {
    handleSizeChange (newPageSize) {
      this.page.pageSize = newPageSize
      this.fetchUserDoctorList()
    },
    handleCurrentChange (newPageNum) {
      this.page.pageNum = newPageNum
      this.fetchUserDoctorList()
    },
    fetchUserDoctorList () {
      getUserDoctorList(this.page).then(res => {
        this.doctorList = res.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>

这里的代码不能直接用涉及到后端的代码只是粘贴出来用到了element-ui里面的分页界面
在这里插入图片描述简单的界面就仅仅是汉字

在script里面export dafault给一个名字然后在router里面赋给其路由让他能够跳转过来

path:'user',
      name: 'User',
      component:() =>import('../views/user'),
      children:[
        {
          path:'userCommunity',
          name: 'UserCommunity',
          component:() =>import('../views/user/userCommunity')
        },
        {
          path:'userDoctor',
          name: 'UserDoctor',
          component:() =>import('../views/user/userDoctor')
        }
      ]