使用vue和element_ui搭建后端页面

已于 2024-05-21 21:50:41 修改
阅读量250 收藏
点赞数 3
文章标签： vue.js ui javascript
于 2024-05-16 21:45:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LOUISLIAOXH/article/details/138976152
版权

使用vue和element_ui搭建后台管理页面

  • 效果顶部和左侧内容固定，中间内容滚动
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="element_ui/index.css">
    <style>
      body {
        margin:0px;
      }
      .is-vertical {
        height: 100vh;
      }
      .top {
        height: calc(100vh - 80px) ;
      }
      .el-aside {
        
        background-color: yellow;
      }
      .log-header {
        
        display: flex;
        justify-content:flex-start;
        align-items: center;
        height: 64px;
        margin:0 20px;
        border-bottom: 1px solid red;
      }
      .el-scrollbar__wrap {
        margin-right: 0px !important;
        margin-bottom: 0px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
      }
      .el-header {
        background-color: red;
        position: fixed;
        left:220px;
        width: calc( 100vw - 220px );

      }
      .el-main {
        padding-top: 0px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
        width: calc( 100vw - 220px );
      }
      .el-header .row-bg {
        height: 100%;
      }
      .ab {
        flex:  0 0 auto;

      }
    </style>
</head>
<body>
    <div id="app">
      <el-container>
        <el-container direction="horizontal" class="top">
          <el-aside width="220px" style="position: fixed;">
            <div class="log-header">
              <div class="log" style="margin-right: 5px;">log</div>
              <div class="title">title</div>
            </div>
            <el-scrollbar style="height: calc(100vh - 115px );width:100%">
              <el-menu default-active="activeMenu" class="el-menu-vertical-demo" background-color="#ffffff" :collapse="isCollapse">
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span slot="title">导航一</span>
                  </template>
                  <el-menu-item-group>
                    <span slot="title">分组一</span>
                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-2">选项2</el-menu-item>
                  </el-menu-item-group>
                  <el-menu-item-group title="分组2">
                    <el-menu-item index="1-3">选项3</el-menu-item>
                  </el-menu-item-group>
                  <el-submenu index="1-4">
                    <span slot="title">选项4</span>
                    <el-menu-item index="activeMenu">选项1</el-menu-item>
                  </el-submenu>
                </el-submenu>
                <el-menu-item index="2">
                  <i class="el-icon-menu"></i>
                  <span slot="title">导航二</span>
                </el-menu-item>
                <el-menu-item index="3" disabled>
                  <i class="el-icon-document"></i>
                  <span slot="title">导航三</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <i class="el-icon-setting"></i>
                  <span slot="title">导航四</span>
                </el-menu-item>
                <el-menu-item index="5">
                  <i class="el-icon-setting"></i>
                  <span slot="title">导航5</span>
                </el-menu-item>
                <el-menu-item index="6">
                  <i class="el-icon-setting"></i>
                  <span slot="title">导航6</span>
                </el-menu-item>
                <el-menu-item index="7">
                  <i class="el-icon-setting"></i>
                  <span slot="title">7</span>
                </el-menu-item>
              </el-menu>
        </el-scrollbar>
          </el-aside>
          <el-main style="background-color: yellow;;overflow: hidden;height: 1600px;">
           <el-header height="65">
            <el-row type="flex" class="row-bg" align="middle">
              <el-col class="ab" :span="10"><el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
              </el-breadcrumb></el-col>
              <el-col :offset="6" :span="6"> <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                >
              </el-input></el-col>
              <el-col :span="2"><i class="el-icon-question"></i>帮助</el-col>
            </el-row>
          </el-header>
          <el-main style="margin-top: 65px !important;margin-left: 200px;padding-top:10px">
            dsfdsfsd
          </el-main>
          </el-main>
        </el-container>
        <el-footer height="50px">底部</el-footer>
      </el-container>
      </div>
     <!-- import Vue before Element -->
  <script src="js/vue.js"></script>
  <script src="js/vue-router.min.js"></script>
  <!-- import JavaScript -->
  <script src="element_ui/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

louisliao_1981
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+element-ui实现后台管理可伸缩导航栏布局
m0_58122175的博客
07-28 2750
vue+element-ui实现后台管理可伸缩导航栏布局
vuejs 和 element 搭建的一个后台管理界面
04-02
vuejs 和 element 搭建的一个后台管理界面vuejs 和 element 搭建的一个后台管理界面
基于elementui的单页面后台管理项目模版
08-12
基于 element-ui 的单页面后台管理项目模版
基于vueelementui的后台管理系统
08-12
本项是目基于vue element-ui 构建的后台管理系统， 具有真实的注册、登陆、管理数据、权限验证等功能。
vue+elementUi——实现后台管理系统的布局(sideBar+header+appMain)
yehaocheng520的博客
08-06 8396
在做后台管理系统时，最常见的系统布局就是：左右布局。左侧是菜单栏，右侧是内容区，内容区又分为头部和展示区。如下： 因此分析一下这个页面的结构： 1.html部分 <template> <div class="app-wrapper"> <div class="layout-aside" :class="{collapse:isCollapse}"> <div class="layout-logo"> <router-link to=
Vue + ElementUI 实现后台管理系统模板 -- 前端篇（三）：引入 element-ui 定义基本页面显示
2401_84140580的博客
04-18 1258
el-button type=“primary” class=“not-find-btn-gohome” @click=“$router.push({ name: ‘Home’ })”>进入首页。在 main.js 中引入（也可以自定义一个 js，然后在 main.js 中引入自定义的 js）。返回上一页。mvvm和mvc区别？描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？Vue 的 nextTick 的原理是什么？
vue+element_ui后台demo
08-26
标题"vue+element_ui后台demo"表明这是一个使用Vue.js和Element UI搭建的后台系统示例项目。这样的项目通常会包含登录、权限管理、表格、表单、通知、布局等多种功能模块，用于展示如何在实际开发中运用这两项技术。...
基于vue+element-UI搭建的学生课程信息管理系统源码+项目说明（配合面试题库中后端服务开发）.zip
02-27
基于vue+element-UI搭建的学生课程信息管理系统源码+项目说明（配合面试题库中后端服务开发，具有学生信息管理、课程信息管理、选课表管理、学生选课等多种功能）.zip 基于vue+element-UI搭建的学生课程信息管理系统...
毕业设计，艺术网站后台管理系统，使用vue和element-ui搭建.zip
12-31
Element-UI是针对Vue.js的一套开箱即用的组件库，提供了丰富的UI元素和交互设计，简化了前端页面的开发工作。 在这个项目中，开发者可能利用Vue.js的特性，如虚拟DOM、单向数据流和组件化，来提高代码的可维护性和...
基于Vue+Element-ui构成后端基于Django+DRF数据库使用Mysql实现仿小米商城源码.zip
最新发布
05-15
该源码项目是一个结合了前端和后端技术的电商网站实现，主要采用了Vue.js作为前端框架，Element-UI作为UI组件库，后端则利用Django框架和Django Rest Framework（DRF）进行API接口开发，数据库管理使用的是MySQL。...
vue+elementUI管理系统，页面源代码
11-10
vue2+elementUI后台管理系统，页面源代码，src和static目录
基于vue2.0+element-ui的管理后台实例源码
09-05
基于vue2.0+element-ui的管理后台实例源码，包括路由管理，动态路由加载，全局导航守卫处理等功能，可以作为管理后台开发的非常好的参考
vue+elementui 的管理后台源码稍微有些复杂
05-25
vue+elementui 的管理后台源码，稍微有些复杂，适合对vue有一定了解的同学
vue+element ui搭建后台业务系统
07-11
本教程将详细介绍如何使用Vue.js与Element UI搭建一个高效的后台业务系统。 1. **Vue.js入门**： Vue.js是一个渐进式的JavaScript框架，它允许开发者通过声明式的方式来处理数据绑定和事件处理。Vue的核心库专注于...
Vue2 + element-ui后台管理项目—主页布局
m0_53156934的博客
11-20 1665
Vue + element-ui后台管理项目—主页布局。
vue-elementUI后台管理系统
2201_76092588的博客
12-27 3408
首先，我们要了解Vue.js是什么？Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。简单小巧是指Vue体量轻，压缩后大小仅有33KB；
Vue2+element-ui后台管理系统（静态页面）
KKKKKOK的博客
02-04 3458
保姆级vue2+ElementUI搭建界面
使用ElementUI从零开始搭建后台管理系统教程
SongZhengxing_的博客
11-19 3264
vue + ElementUI 搭建后台管理系统记录 本文档记录了该系统从零配置的完整过程 项目源码请访问：https://gitee.com/szxio/vue2Admin，如果感觉对你有帮助，请点一个小星星，O(∩_∩)O 新建项目 vue create vueadmin 安装 less-loader 安装 这里是一个小坑，安装 less-loader 时推荐安装指定版本，如果安装默认高版本会导致项目出错 cnpm i less-loader@6.0.0 -D 使用 <style lang="
使用Vue和Element UI来搭建一个个人中心页面,根据用户登录的ID从后端查找他的个人信息并在前端页面中展示出来
07-11
要实现根据用户登录的ID从后端获取个人信息并展示在前端页面中，你需要进行以下步骤： 1. 在后端创建一个接口，用于根据用户ID查询个人信息。可以使用Vue的Axios库来发送HTTP请求，获取后端数据。确保你已经配置好后端接口。 2. 在Vue的"PersonalCenter"组件中，添加一个方法来获取个人信息。可以在组件的`created`钩子函数中调用这个方法，确保在页面加载时就获取到用户的个人信息。 3. 在组件的`data`属性中添加一个空对象，用于保存用户的个人信息。 4. 在获取个人信息的方法中，使用Axios发送HTTP请求到后端接口，并传递用户ID作为参数。在请求成功的回调函数中，将返回的个人信息保存到组件的`data`属性中。 5. 在组件的模板中，使用Element UI的组件来展示个人信息。根据返回的数据，显示用户的姓名、头像、联系方式等信息。 下面是一个简单的示例代码： ```vue <template> <div> <el-card> <!-- 显示用户的姓名 --> <h2>{{ userInfo.name }}</h2> <!-- 显示用户的头像 --> <img :src="userInfo.avatar" alt="Avatar" width="100"> <!-- 显示用户的联系方式 --> <p>{{ userInfo.contact }}</p> </el-card> </div> </template> <script> import axios from 'axios'; export default { data() { return { userInfo: {} // 保存用户个人信息的对象 }; }, created() { this.getPersonalInfo(); }, methods: { getPersonalInfo() { const userId = 'user_id'; // 假设这里是用户登录后获取的ID axios.get(`/api/user/${userId}`) .then(response => { this.userInfo = response.data; // 将返回的个人信息保存到userInfo }) .catch(error => { console.error(error); }); } } }; </script> ``` 注意：上述代码中的`/api/user/${userId}`是根据你实际后端接口的路径进行替换。确保后端接口能够根据用户ID返回正确的个人信息。另外，根据实际情况，你可能还需要添加一些错误处理和加载状态的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值