• HM后台(二)


    一,home组件,侧边栏静态页面搭建,

    1.1。去element-ui找组件

    按需引入element组件

    import Vue from 'vue'
    import {
      Button,
      Form,
      FormItem,
      Input,
      Message,
      Container,
      Header,
      Aside,
      Main,
      Menu,
      Submenu,
      MenuItemGroup,
      MenuItem
    } from 'element-ui'
    
    Vue.prototype.$message = Message
    Vue.use(Button)
    Vue.use(Form)
    <template>
      <el-container>
        <!-- 头部 -->
        <el-header>
          <div>
            <img src="../assets/heima.png" alt="" />
            <span>电商管理后台</span>
          </div>
          <el-button type="primary" size="default" @click="logout">退出</el-button>
        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
          <!-- 侧边栏 -->
          <el-aside width="200px">
            <!-- 侧边栏菜单区域 -->
            <el-menu
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <!-- 一级菜单 -->
              <el-submenu index="1">
                <!-- 一级菜单模板 -->
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>导航一</span>
                </template>
    
                <!-- 二级菜单 -->
                <el-menu-item index="1-4-1">
                  <!-- 二级菜单模板 -->
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>导航二</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-aside>
          <!-- 右侧主体区域 -->
          <el-main>Main</el-main>
        </el-container>
      </el-container>
    </template>

    样式

    在element-ui中,组件名称就是类名,比如 .el-button

    <style lang="less" scoped>
    .el-container {
      height: 100%;
    }
    
    .el-header {
      background-color: #373d41;
      // 开始弹性盒子
      display: flex;
      // 主轴对齐
      justify-content: space-between;
      // 副轴对齐方式
      align-items: center;
      color: #fff;
      font-size: 20px;
      // 左边padding为0
      padding-left: 0;
      & div {
        display: flex;
        align-items: center;
        span {
          margin-left: 20px;
        }
      }
    }
    
    .el-aside {
      background-color: #333744;
    }
    
    .el-main {
      background-color: #eaedf1;
    }
    </style>

    二,配置请求拦截器,添加token

    在main.js中配置

    import axios from 'axios'
    // 配置请求的跟路径
    axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
    Vue.prototype.$http = axios
    // 配置请求拦截器,添加token
    axios.interceptors.request.use(config => {
      // console.log(config)
      config.headers.Authorization = window.sessionStorage.getItem('token')
      return config
    })

    三,发送请求,获取左菜单栏的数据

     // 获取侧边栏菜单的数据
        async getMenuList() {
          const { data: res } = await this.$http.get('menus')
          console.log(res)
          if (res.meta.status === 200) {
            this.$message.success(res.meta.msg)
            this.menuList = res.data
          } else {
            this.$message.error('获取数据失败')
          }
        }
    四,数据填充模板
    4.1,注,index,是字符窜

       <!-- 侧边栏菜单区域 -->
            <el-menu
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <!-- 一级菜单 -->
              <el-submenu :index="item.id+''"  v-for="(item, index) in menuList" :key="item.id">
                <!-- 一级菜单模板 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-location"></i>
                  <!-- 文本 -->
                  <span>{{item.authName}}</span>
                </template>
    
                <!-- 二级菜单 -->
                <el-menu-item :index="`${subitem.id}`" v-for="(subitem, index) in item.children" :key="subitem.id">
                  <!-- 二级菜单模板 -->
                  <template slot="title">
                    <!-- 图标 -->
                    <i class="el-icon-location"></i>
                    <!-- 文本 -->
                    <span>{{subitem.authName}}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </el-menu>

    五,菜单栏的图标设置,以及颜色设置

    5.1,点击菜单栏时,颜色变化

     <!-- 侧边栏菜单区域 -->
            <el-menu
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#409EFF"
            >

    5.2,二级菜单栏的图标设置,用element-ui的图标组件

    <!-- 二级菜单 -->
                <el-menu-item :index="`${subitem.id}`" v-for="(subitem, index) in item.children" :key="subitem.id">
                  <!-- 二级菜单模板 -->
                  <template slot="title">
                    <!-- 图标 -->
                    <i class="el-icon-menu"></i>

    5.3,一级菜单图标设置,需要设置成不同的图标,一级菜单的类名是写死了,如何变活呢

    方法;一级菜单已经v-for循环了,但是他们有唯一的id值,我们可以利用id和图标类名组成键值对,组成一个对象,就可动态显示图标类名了。用阿里巴巴图标

     data() {
        return {
          menuList: [],
          iconsObj: {
            '125': 'iconfont icon-user',
            '103': 'iconfont icon-tijikongjian',
            '101': 'iconfont icon-shangpin',
            '102': 'iconfont icon-danju',
            '145': 'iconfont icon-baobiao'
          }
      <!-- 一级菜单 -->
              <el-submenu
                :index="item.id + ''"
                v-for="(item, index) in menuList"
                :key="item.id"
              >
                <!-- 一级菜单模板 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i :class="iconsObj[item.id]"></i>

    图标设置padding距离

    .iconfont{
      padding-right: 10px;
    }

    六,点击一个一级菜单,上一个展开的一级菜单自动关闭

    在el-menu添加一个属性,只写属性,默认是true

      <!-- 侧边栏菜单区域 -->
            <el-menu
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#409EFF"
              unique-opened
            >

    6.1,点击二级菜单,右边有一些边框突出,需要在el-menu设置边框为0

     

    .el-aside {
      background-color: #333744;
      .el-menu{
        border-right: 0;
      }
    }

    七,左侧菜单的折叠与展开功能

       

    7.1,我们先在el-menu添加一个div结构,用于点击时,左侧菜单栏的折叠与展开,el-menu组件中有两个属性,我们默认设置不折叠,点击新增的div结构时,collapse取反,取消动画,

    而且el-aside的宽度也要动态设置

     

     <el-aside :width="isCollapse ? '64px': '200px'">
            <div class="toggle-button" @click="toggleCollapse">|||</div>
            <!-- 侧边栏菜单区域 -->
            <el-menu
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#409EFF"
              unique-opened
              :collapse="isCollapse"
              :collapse-transition="false"
            >
    data() {
        return {
          isCollapse: false,
    .el-aside {
      background-color: #333744;
      .toggle-button {
        background-color: #4a5064;
        font-size: 10px;
        height: 24px;
        line-height: 24px;
        color: #fff;
        // 文本水平居中
        text-align: center;
        // 字间距
        letter-spacing: 0.2em;
        // 小手状态
        cursor: pointer;
      }
    // 点击左侧菜单栏的折叠与展开
        toggleCollapse() {
          this.isCollapse = !this.isCollapse
        }

    八,实现home组件路由重定向

    8.1,在view中新增welcome子路由组件,在路由文件中配置

     {
        path: '/home',
        component: Home,
        // 重定向
        redirect: '/welcome',
        children: [{ path: '/welcome', component: Welcome }]
      }
      <!-- 右侧主体区域 -->
          <el-main>
            <!-- 路由占位符 -->
            <router-view></router-view>
            </el-main>

    九,左侧二级菜单改成路由连接,el-menu开启路由模式,点击后会跳转

     请求回来的菜单栏数据中,有个path属性,我们将二级菜单的index的属性值设置为它,前边加个‘/’,此时就是路由的路径

    c

      <!-- 侧边栏菜单区域 -->
            <el-menu
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#409EFF"
              unique-opened
              :collapse="isCollapse"
              :collapse-transition="false"
              router
            >
     <!-- 二级菜单 -->
                <el-menu-item
                  :index="'/' + subitem.path"
                  v-for="(subitem, index) in item.children"
                  :key="subitem.id"
                >

    十,用户列表开发

    10.1,点击二级菜单的用户列表,跳转到user组件,在views新增user组件,是home的子路由,在路由文件中配置路由对象

    import User from '@/views/User'
    {
        path: '/home',
        component: Home,
        // 重定向
        redirect: '/welcome',
        children: [
          { path: '/welcome', component: Welcome },
          { path: '/users', component: User }
        ]
      }

    此时有个小bug,点击二级菜单,文本没有高亮

     

     我们需要激活它,每次点击二级菜单的路由连接时,我们需要将他的路劲赋值给这个属性。

    home组件创建时,需要激活,点击二级菜单也要激活

       <!-- 二级菜单 -->
                <el-menu-item
                  :index="'/' + subitem.path"
                  v-for="(subitem, index) in item.children"
                  :key="subitem.id"
                  @click="saveNavState('/' + subitem.path)"
                >
     saveNavState(activePath) {
          window.sessionStorage.setItem('activePath', activePath)
          this.activePath = activePath
        }
     mounted() {
        this.getMenuList()
        this.activePath = window.sessionStorage.getItem('activePath')
      },
    data() {
        return {
          isCollapse: false,
          menuList: [],
          // 被激活的链接地址
          activePath: '',
        <!-- 侧边栏菜单区域 -->
            <el-menu
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#409EFF"
              unique-opened
              :collapse="isCollapse"
              :collapse-transition="false"
              router
              :default-active="activePath"
            >

    10.2,user路由组件,面包屑搭建

     <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

    样式

    .el-breadcrumb {
      margin-bottom: 20px;
      margin-bottom: 15px;
      font-size: 12px;
    }
    
    .el-card {
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
    }

    10.3,卡片视图搭建

    input框和button按钮的宽度比例,使用栅格layout,:span为每列的宽度, :gutter为列与列的距离

       <!-- 卡片视图 -->
        <el-card>
          <!-- 栅格 -->
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input placeholder="请输入内容">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-col>
    
            <el-col :span="4">
              <el-button type="primary" size="default">添加</el-button>
            </el-col>
          </el-row>
        </el-card>

    10.4,发送请求,获取用户数据

    data() {
        return {
          // 获取用户列表的参数对象
          queryInfo: {
            query: '',
            // 当前的页数
            pagenum: 1,
            // 当前每页显示多少条数据
            pagesize: 2
          },
          userlist: [],
          total: 0
        }

    get请求,

     axios.get(url, {配置})  // {params: {id: 1}}, 是问号的参数,相当于query参数
    axios({
          url: '路径', // 这个路径中可以包含params或query参数
          method: 'get/post/put/delete',
          params: {}, // 包含query参数的对象,问号后面的参数
          data: {}, // 包含请求体参数的对象
        })
     
     mounted() {
        this.getUserList()
      },
    
      methods: {
        // 发送请求,获取用户列表数据
        async getUserList() {
          const { data: res } = await this.$http.get('users', {
            params: this.queryInfo
          })
          console.log(res)
          if (res.meta.status === 200) {
            this.userlist = res.data.users
            this.total = res.data.total
          } else {
            this.$message.error('获取用户数据失败')
          }
        }
      }

    返回的数据

    10.5,用户列表静态页面搭建

    el-switch选择开关组件v-modle收集的是布尔值,决定开或者闭合

    <!-- 用户列表区域 -->
          <el-table :data="userlist" border stripe style="margin:20px 0">
            <el-table-column type="index"></el-table-column>
            <el-table-column label="姓名" prop="username"></el-table-column>
            <el-table-column label="邮箱" prop="email"></el-table-column>
            <el-table-column label="电话" prop="mobile"></el-table-column>
            <el-table-column label="角色" prop="role_name"></el-table-column>
            <el-table-column label="状态">
              <template slot-scope="{ row, $index }">
                <el-switch
                  v-model="row.mg_state"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180px"> </el-table-column>
          </el-table>

    10.6,操作栏静态页面搭建

    注;tooltip文字提示组件,

      <el-table-column label="操作" width="180px">
              <template slot-scope="{row , $index}">
                <!-- 修改按钮 -->
                <el-button type="primary" icon="el-icon-edit" size="mini" title="编辑"></el-button>
                <!-- 删除按钮 -->
                <el-button type="danger" icon="el-icon-delete" size="mini" title="删除"></el-button>
                <!-- 分配角色按钮 -->
                <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
                  <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>

    10.7,分页组件搭建

       <!-- 分页区域 -->
          <el-pagination @size-change="handleSizeChange" @current-change="getUserList" 
            :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" 
            :page-size="queryInfo.pagesize" layout=" prev, pager, next, jumper,->,->, sizes,total" :total="total">
          </el-pagination>
     // 每页多少条数据
        handleSizeChange(size) {
          this.queryInfo.pagesize = size
          // 重新发送请求,获取最新数据
          this.getUserList()
        }
    // 发送请求,获取用户列表数据
        async getUserList(page = 1) {
          this.queryInfo.pagenum = page
          const { data: res } = await this.$http.get('users', {
            params: this.queryInfo
          })
          console.log(res)
          if (res.meta.status === 200) {
            this.userlist = res.data.users
            this.total = res.data.total
          } else {
            this.$message.error('获取用户数据失败')
          }
        },

     10.8,实现用户状态修改功能

     更改的状态,需要重新发送请求,同步到数据库中

      <el-table-column label="状态">
              <template slot-scope="{ row, $index }">
                <el-switch
                  v-model="row.mg_state"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="userStateChanged(row)"
                >
                </el-switch>
              </template>
            </el-table-column>
       // 监听 switch 开关状态的改变
        async userStateChanged(userinfo) {
          //点击状态开关, 此时mg_state属性已经修改了,需要发送请求,同步更改到数据库
          console.log(userinfo)
          const { data: res } = await this.$http.put(
            `users/${userinfo.id}/state/${userinfo.mg_state}`
          )
          if (res.meta.status !== 200) {
            userinfo.mg_state = !userinfo.mg_state
            return this.$message.error('更新用户状态失败!')
          }
          this.$message.success('更新用户状态成功!')
        }
     
  • 相关阅读:
    ubuntu下配置django+apache+mysql+mod_python+Python
    Makefile 学习
    一个查重算法的多种实现思路
    MongoDB基础
    基于ASP.NET MVC 3的企业应用项目总结
    CruiseControl.Net持续集成平台搭建总结
    Cnblogs Start
    JavaScript中的this
    Entity Framework 4.0 的一个bug :DefaultValue问题
    .Net平台下的B/S开发框架
  • 原文地址:https://www.cnblogs.com/fsg6/p/14264912.html
Copyright © 2020-2023  润新知