vue+饿了么 后台管理 布局

最新推荐文章于 2024-04-29 04:45:22 发布
最新推荐文章于 2024-04-29 04:45:22 发布
阅读量4.4k 收藏 18
点赞数
分类专栏： Vue 案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38404899/article/details/100299445
版权

项目用的vue-cli2 +element UI搭建

目前 布局的 目录

src：
  assets  //放置一些静态资源
  components：
    home   //布局
    login  //登录
    view   //组件页面
    router //路由配置

目前效果：

router.js文件

import Vue from 'vue'
import Router from 'vue-router'
import demo from '@/components/view/demo'  //单独的导航页面 不能用懒加载引入

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: ()=> import('../components/login/login.vue'),
      hidden: true  //在导航栏不显示  作为参数传过去控制
    },
    {
      path: '/demo',
      name: '单独点击',
      leaf: true,   //只有一个节点 点击即跳转
      component: ()=> import('../components/home/home.vue'),
      iconCls: 'el-icon-s-home',
      children: [
        { path: '/demo2', component: demo, name: '单独的' },
      ]
    },
    {
      path: '/account',    
      name: '账号管理',
      component: ()=> import('../components/home/home.vue'), //布局页面
      children: [    //其他导航只跳转children
        {
          path: '/staff',
          name: '员工管理',  //通过name值传递渲染侧边导航和面包屑
          iconCls: 'el-icon-s-grid menumedia',  //icon图标
          component: ()=> import('../components/view/account/staff.vue'),
        },
        {
          path: '/user',
          name: '用户管理',
          iconCls: 'el-icon-s-grid menumedia',
          component: ()=> import('../components/view/account/user.vue'),
        },
      ]
    }, 
    {
      path: '/operation',
      name: '运营管理',
      component: ()=> import('../components/home/home.vue'), //布局页面
      children: [
        {
          path: '/subsidy',
          name: '政策补贴',
          iconCls: 'el-icon-s-grid menumedia',
          component: ()=> import('../components/view/operation/operation.vue'),
        },
      ]
    }, 
  ]
})

login.vue登录页面

<template>
<!-- 一个提交按钮对应一个el-form    model表单数据对象  rules表单验证规则 -->
    <div class="login-container">
        <el-form 
        :model="ruleForm2" :rules="rules2"
         status-icon
         ref="ruleForm2" 
         label-position="left" 
         label-width="0px" 
         class="demo-ruleForm login-page">
            <h3 class="title">系统登录</h3>
            <el-form-item prop="username">
                <el-input type="text" 
                    v-model="ruleForm2.username" 
                    auto-complete="off" 
                    placeholder="用户名"
                ></el-input>
            </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" 
                        v-model="ruleForm2.password" 
                        auto-complete="off" 
                        placeholder="密码"
                    ></el-input>
                </el-form-item>
            <el-checkbox 
                v-model="checked"
                class="rememberme"
            >记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name:"login",
    data(){
        return {
            logining: false,
            ruleForm2: {
                username: 'admin',
                password: '123456',
            },
            rules2: {
                username: [{required: true, message: '请您输入用户名', trigger: 'blur'}],
                password: [{required: true, message: '请您输入密码', trigger: 'blur'}]
            },
            checked: true
        }
    },
    methods: {
        handleSubmit(event){
                    localStorage.setItem('user', this.ruleForm2.username);  //保存登录名
                    this.$router.push({path: '/account'});  //跳到账号管理
                }
        }
    };
</script>

<style scoped>
.login-container {
    width: 100%;
    height: 100%;
}
.login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
}
</style>

home.vue布局页面

<template>
  <div id="home">
    <el-container class="menu">
      <!-- header -->
      <el-header class="header">
        <h4 class="header-tit">我来照顾运营管理平台</h4>
        <!-- header右边部分 -->
        <rightmenu class="rightmenu"></rightmenu>
      </el-header>
      <el-container>
        <!-- 侧边导航 -->
        <el-aside>
          <el-row class="tac">
            <!--强行加入动画过度隐藏效果-->
            <!-- default-active：当前激活菜单的 index  collapse：是否水平折叠收起菜单 -->
             <transition name="el-fade-in">
            <el-menu :default-active="$route.path" 
            class="el-menu-vertical-demo" 
            unique-opened router 
            @open="handleOpen"
            v-if="!isCollapse"
            :collapse="isCollapse"  
            :class="{'isCollapseFalseStyle':isCollapse!=true}">
              <!--将路由赋给视图 循环 没有hidden属性的展示-->
              <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
                <el-submenu :index="index+''" v-if="!item.leaf">
                  <template slot="title">
                    <i :class="item.iconCls"></i>
                    <span slot="title" :class="{'navName': isActive == item.path}" @click="clickname(item.path)">{{item.name}}</span>
                  </template>
                  <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path"
                    v-if="!child.hidden">{{child.name}}
                    </el-menu-item>
                </el-submenu>
                <!-- 没有children的leaf属性 点击直接跳转 -->
                <el-menu-item v-if="item.leaf" :index="item.children[0].path">
                  <i :class="item.iconCls"></i>
                  <span slot="title"> {{item.children[0].name}}</span>
                </el-menu-item>
              </template>
            </el-menu>
             </transition>
          </el-row>
        </el-aside>

        <!-- 右侧布局显示区域 -->
        <el-main>
          <!-- 面包屑 -->
          <div class="breadcrumb">
              <!-- 点击图标 左侧导航出现和隐藏切换 -->
            <i  :class="[isCollapse==false?'el-icon-s-fold':'el-icon-s-unfold']" @click="changeMenu"></i>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item v-for="item in levelList" :key="item.path" :to="{ path: item.path }">
              {{item.name}}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!-- 跳转展示的区域 -->
          <router-view></router-view>
        </el-main>      
      </el-container>
    </el-container>
  </div>
</template>

<script>
import rightmenu from './rightmenu'
  export default {
    components:{
      rightmenu
    },
    name: "home",
    data() {
      return {
        isCollapse: false,   //false为出现 true为隐藏
        levelList:null,
        isActive: 0
      }
    },
    methods: {
      //渲染面包屑 获取router的name元素
      getBreadcrumb() {
      //$route.matched一个数组 包含当前路由的所有嵌套路径片段的路由记录
      let matched = this.$route.matched.filter(item => item.name)
      this.levelList = matched
      },

      handleOpen(key, keyPath) {
        //console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      //点击图标切换隐藏侧边栏
      changeMenu() {
        if (this.isCollapse) {
          this.isCollapse = false
        } else {
          this.isCollapse = true
        }
      },
      //点击根据路径判断  导航变色
       clickname: function(path) {
          this.isActive = path;
          console.log(path)
        }
    },
    watch:{
      //监听路由变化，自动缩减左边菜单栏目  渲染面包屑
    $route(){
        let width=document.body.clientWidth;
        if(width>=700){
          this.isCollapse = false;     
        }else{
          this.isCollapse = true;     
        }
        //面包屑监听路由变化
        this.getBreadcrumb()
      },
    },
    //页面初始获取路由信息渲染给面包屑
     created() {
      this.getBreadcrumb()
    },
    mounted(){
     //console.log(this.$router.options.routes)
    }
  };
</script>

<style scoped>
    #home{
    background: #f2f2f2;
    width: 100%;
    height: 100%;
    }
  .menu {
    width: 100%;
    height: 100%;
  }
  .div-logo {
    width: 100%;
    height: 135px;
  }
  img {
      width: 45%;
    }
  .header {
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header-tit{
    margin-left: 20px;
    color: #fff;
  }
  .breadcrumb{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .breadcrumb i{
    font-size: 25px;
    margin-right: 20px;
  }
  .el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
  }
  .el-breadcrumb-item{
    font-size:16px;
  }
  .el-aside {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  body>.el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-submenu {
    text-align: center;
  }
  .el-menu-item {
    text-align: center;
    padding: 0 !important;
  }
  .el-submenu .navName{
    width: 100%;
    display: inline-block;
    background: #409EFF;
    color: #fff;
  }
  .el-submenu i{
    display: none !important;
  }
  .el-aside {
    width: auto !important;
  }
  .isCollapseFalseStyle{
     width: 200px !important;
  }
  @media screen and (min-width: 700px) {
    .header {
      background: #409EFF;
      
    };
  }
  @media screen and (max-width: 700px) {
    .header {
      background: #409EFF;
    };
  }
</style>

 rightmenu.vue 布局页面header的子组件

<template>
  <div class="rightmenu">
    <div class="right-menu">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
        <!-- 用户名 -->
        <p style="line-height:60px;font-weight:650;font-style:normal;color:#FFFFFF;margin-right:18px;">{{ fullName }}</p>
        <!-- 图片 -->
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562068714079&di=a1260d80c5ee35880c3e7cbf0a27461c&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F655ba5b31bc6243428a306b10a7f895b36d3d3d35a1e-5phgk4_fw658" 
          style="width:40px;height:40px;border-radius:20px;cursor:pointer;">
        </div>
        <!-- 点击弹出部分 -->
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <el-dropdown-item>
            <span style="display:block;" @click="userInfo">账号信息</span>
          </el-dropdown-item>
          <el-dropdown-item divided>
            <span style="display:block;" @click="update">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item divided>
            <span style="display:block;" @click="logout">退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleForm2"
        :model="ruleForm2"
        status-icon
        :rules="rules2"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="旧密码"
          prop="oldPwd"
        >
          <el-input
            v-model="ruleForm2.oldPwd"
          />
        </el-form-item>
        <el-form-item
          label="新密码"
          prop="pass"
        >
          <el-input
            v-model="ruleForm2.pass"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="确认密码"
          prop="checkPass"
        >
          <el-input
            v-model="ruleForm2.checkPass"
            autocomplete="off"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm2')"
          >提交</el-button>
          <!-- <el-button @click="resetForm('ruleForm2')">重置</el-button> -->
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
        hidden
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rightmenu',
 data() {
    var checkOldPwd = (rule, value, callback) => {}
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm2.checkPass !== '') {
          this.$refs.ruleForm2.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      loginName: '超级管理员',
      fullName: '超级管理员',
      dialogVisible: false,
      userName: '超级管理员',
      ruleForm2: {
        oldPwd: '',
        pass: '',
        checkPass: ''
      },
      rules2: {
        oldPwd: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
        pass: [{ required: true, validator: validatePass, trigger: 'blur' }],
        checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
        // oldPwd: [
        //   { validator: checkOldPwd, trigger: 'blur' }
        // ]
      }
    }
  },
  mounted() {
    this.fullName = window.localStorage.getItem('user')
  },
  methods: {
    //异步函数 不阻塞后面执行
    async logout() {
      window.localStorage.removeItem('user')
      this.$router.push("/")
    },
    userInfo() {
      // this.$router.push(`/user/user_info`)
    },
    //修改密码 弹出框
    update() {
      // this.$router.push(`/user/update`)
      this.dialogVisible = true
    },
    // 修改弹出框相关
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    submitForm(formName) {
        
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>


<style scoped>
.top {
    background: #409eff;
    margin-bottom: 20px;
    padding: 0 60px;
}
.el-dropdown-menu {
  position: absolute;
  top: 43px!important;
  padding: 3px;
  text-align: center;
  width: 130px;
  overflow:visible;
}
.el-dropdown-menu__item {
  line-height: 30px!important;
}
.avatar-wrapper{
    display: flex;
    align-items: center;
    margin-right: 30px;
}
</style>

其他组件 写在view文件里即可  在路由里面配好

WinterWang0207
关注
  • 0
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
饿了么后台管理系统
09-04
用jsp实现饿了么后台，包含，商家，用户，送餐员，菜单，菜品，以及评论的增删改查，以及评论功能，内含后台界面
基于vueelemenntui构建开发的饿了么后台管理系统
08-12
基于vue elemennt-ui构建开发的 饿了么后台管理系统
vue+饿了么 后台管理 布局
最新发布
2401_84438067的博客
04-29 659
hidden: true //在导航栏不显示 作为参数传过去控制},name: ‘单独点击’,leaf: true, //只有一个节点 点击即跳转{ path: ‘/demo2’, component: demo, name: ‘单独的’ },},name: ‘账号管理’,component: ()=> import(‘…/components/home/home.vue’), //布局页面children: [ //其他导航只跳转children。
基于饿了么的vue后台管理系统模板
08-12
基于饿了么的vue后台管理系统模板
【Vue.js】利用组件实现后台管理布局
qq_37086980的博客
01-21 287
【Vue.js】实现后台管理布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue组件实现后台布局</title> <script src="ht
【饿了么后台管理系统】.zip
08-03
【饿了么后台管理系统】.zip
基于vue + element UI 的后台管理系统模板
09-12
在本项目"基于vue + element UI 的后台管理系统模板"中，开发者可以利用这些组件和功能，快速搭建起一个具备基本管理功能的后台系统。通过动态路由的实现，系统可以根据用户权限动态加载相应的组件和页面，提高用户...
vue+element后台管理
08-26
2. **Element UI**: Element UI是由饿了么团队开发的一套基于Vue.js的UI组件库，提供了丰富的表单组件、布局工具和各种常用的操作提示组件，如按钮、表格、弹窗、通知等。Element UI的设计风格简洁、直观，有助于...
Vue+ElementUI的后台管理系统框架
12-14
4. **搭建布局**：使用Element UI的Layout组件构建基本的后台布局，如头部、侧边栏、内容区等。 5. **实现登录注册**：创建登录和注册页面，集成Element UI的表单组件。 6. **构建功能模块**：根据业务需求，利用...
Vue+ElementUI的后台管理系统框架.rar
09-29
在这个"Vue+ElementUI的后台管理系统框架"中，开发者可能已经整合了Vue.js的基本架构，并利用Element UI搭建了常见的后台管理功能，如登录注册、权限管理、数据展示、表单处理、页面布局等。通过解压文件并查看源码...
一款开箱即用的 Vue 中后台管理系统框架，兼容PC、移动端
05-20
Vue-element-admin是Vue.js与Element UI结合的一个典型例子，它为开发者提供了一套完整的后台管理系统模板，包括登录/注销、权限控制、页面布局、表单、表格、图表等常见功能模块。 Vue-admin框架通常包含以下关键...
饿了么后台管理系统Java控制台.zip
06-24
饿了么后台管理系统Java控制台.zip
饿了么后台管理系统的设计.zip
08-20
本系统基于对饿了么后台管理的应用，并设名为“饿了么后台管理系统的设计”，本后台管理系统综合运用了Java技术、MySQL数据库以及JDBC技术进行整体编程，基本完成了对饿了么后台管理系统功能的实现，实现了对管理员的登录注册、菜品管理、和用户管理的功能
饿了么餐饮管理系统
07-11
饿了么餐饮管理系统
饿了么外卖管理系统.zip
07-20
饿了么外卖系统，c++语言编写，包含界面，分为用户端和商户端，支持注册登录可以实现菜单的增加删除，相关功能如下： 1）客户注册：客户通过添加必要的信息到数据库来完成注册。 ​ 2）客户信息修改：客户根据自己的编号来修改除编号外的其他信息。 ​ 3）商家注册：商家通过添加必要的信息到数据库来完成注册。 ​ 4）商家信息修改：商家根据自己的编号来修改除编号外的其他信息。 ​ 5）商品录入：商家通过添加商品必要的信息到数据库来完成商品录入。 ​ 6）商品信息修改：商家根据商品编号来修改商品除编号外的其他信息。 ​ 7）客户下单：客户通过添加订单信息到数据库来提交订单。 ​ 8）商家接单：商家通过修改订单状态来接受订单。 ​ 9）客户确认收货：客户通过修改订单状态来确认收货。 ​ 10）取消订单：客户通过修改订单状态来退款，但必须在商家接单之前退款。 ​ 11）订单状态：“0”表示已支付，“1”表示已接单，“2”表示已送达，“3”表示已退款。
vue-element-admin:饿了么后台管理系统vue
03-11
vue-element-admin 神奇的Vue管理员。 本项目的定位是后台集成方案，不适合当基础模板来开发。 模板建议使用： 桌面端： 注意：该项目目前使用element-ui@2.0.5版本，所以最低兼容Vue 2.5.0 楼主这里有一份调查有空请填写一下，以表对本项目的支持〜ps：不是给这个调查问卷网站做广告，所以填完问卷不用点上面抽奖有的没的那些东西 前序准备 您的本地环境需要安装和 。我们的技术栈基于 ， ， ， 和 ，可以提前了解和学习这些知识使用本项目有很大的帮助。 同时配套一个系列的教程文章，如何从零整合后一个完整的后台项目，建议大家先看完这些文章再来实践本项目 相应需求，开了一个qq群591724180方便大家交流 或者可以加入该讨论问题 如有问题请先看上述使用文档和文章，若不能满足，欢迎问题和pr 本项目并非一个脚手架，更忽略是一个集成解决方案 该项目不支持低版
饿了么简单版管理后台系统-eladmin-web
前端视听
08-16 3007
在开发vue项目的时候，用到的最多的就是vue-element-admin管理后台的模板了，但是有的时候，会发现一个问题，就是这个框架包含的是在是太多了，在开发一个轻便简单的后台管理系统的时候，就会显得很笨重了。 前端模板 初始模板基于： https://github.com/PanJiaChen/vue-element-admin 模板文档： https://panjiachen.github.io/vue-element-admin-site/zh/guide/ 需要对这个系统进行一些组件的删除，修改
vue 饿了么组件 后台管理系统思路 小笔记
qq_52726295的博客
08-24 551
用到的是https://panjiachen.github.io/vue-element-admin-site/zh/ i18n 1.搜索方法： html： <el-button class="sc" type="primary" size="mini" @click="searchBegin()" >搜 索</el-button> <el-button c...
vue+饿了么 后台管理 布局(1)，经典好文
m0_60452070的博客
03-18 510
name: ‘运营管理’,component: ()=> import(‘…/components/home/home.vue’), //布局页面name: ‘政策补贴’,},},})
Vue2.0高仿饿了么学习指南：异步数据处理与访问IP优化
本篇文档是一份关于使用Vue 2.0技术进行高仿饿了么项目的详细学习笔记。作者在学习过程中，针对基于Vue 1.0的视频教程所遇到的问题进行了整理，特别关注了在Vue 2.0环境下组件间的通信、props数据传递、v-for指令的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值