vue和element-ui实例

最新推荐文章于 2023-04-14 14:03:07 发布
最新推荐文章于 2023-04-14 14:03:07 发布
阅读量262 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47150940/article/details/108326452
版权

登录界面

<template>
  <div class="login_contain fillcontain">
      <transition name="el-fade-in">
        <section class="form_contianer" v-show="showLogin">
            <div class="conctain">
            <p>后台管理系统</p>
            </div>
            <el-form ref="loginForm" :model="loginForm" :rules='rules'>
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type='password' v-model="loginForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="btn" @click='submitForm("loginForm")'>登录</el-button>
                </el-form-item>
            </el-form>
            <p class="tip">温馨提示:</p>
            <p class="tip">未登录过的用户,自动注册</p>
            <p class="tip">注册过的用户可以凭借账户密码登录</p>
        </section>
      </transition>
  </div>
</template>

<script>
import {mapActions,mapState} from 'vuex';
export default {
    //页面渲染完成
    mounted() {
    // 判断vuex中的adminInfo是否是当前用户id  如果不是  则存入vuex仓库
        if(!this.adminInfo.id){
            // 调用vuex中的方法 从在  vuex  的 store中
            this.getAdminData();
        }
    },
    data() {
        return {
            loginForm:{
                username:'',
                password:''
            },
        rules:{
            username:[{
                required:true,message:'请输入用户名',trigger:'blur'
            }],
            password:[{
                required:true,message:'请输入密码',trigger:'blur'
            }]
        },
        showLogin:true
        }
    },
    computed: {
        ...mapState(['adminInfo'])
    },
    methods: {
        ...mapActions['getAdmindata'],
        async submitForm(formName){
            this.$refs[formName].validate(async valid=>{
                if(valid){
                    this.$message({
                        type:'success',
                        message:'登陆成功'
                    })
                    // this.$router.push('manage')
                    this.$router.push("manage");
                }else{
                    this.$notify.error({
                        title:'错误',
                        message:'请输入正确的账号或密码',
                        offset:100
                    })
                    return false
                }
            })
            // this.showLogin=false
        }
    },
    watch: {
        adminInfo:function(newValue){
            if(newValue.id){
            console.log("===========+++++++++++++");
            this.$message({
                type:'success',
                message:'检测到您之前登陆过,将自动登录'
            })
            this.$router.push('manage');
            }
        }
    }
}
</script>

<style lang='less' scoped>
    @import '../css/mixin.less';
    .form_contianer{
        .ctp(320px,210px);
        .wh(320px,210px); 
        padding: 25px;
        border-radius: 5%;
        background-color: white;
        .btn{
            width: 100%;
            font-size: 16px;
        }
    }
    .login_contain{
        background-color: #324057;
    }
    .conctain{
        position: absolute;
        width: 100%;
        left: 0;
        top: -100px;
        p{
            font-size: 34px;
            text-align: center;
            color: white;
        }
    }
    .tip{
        color: red;
        font-size: 15px;
        text-align: center;
    }
    html,body{
    width: 100%;
    height: 100%;
    background-color: #34276e;
}
</style>

data有一个rules属性，可以给绑定的数据设置规则，required为true时，为必填，message为提示信息，trigger:'blur’则是在文本框失去焦点是进行判断，如果文本框内容为空，则提示message的信息
运行结果
在这里插入图片描述

主页面

<template>
  <div class="manage_page fillcontain">
    <el-row class="tac">
      <el-col :span="24" class="header">
        <el-col :span="5" class="logo" :class="'logo-width'">
            <a href="/" style="text-decoration:none;color:white;">
                后台管理系统
            </a>
        </el-col>
        <el-col :span="14" style="margin-top:-10px;margin-left:150px">
            <div class="tools" @click.prevent="collapse">
                <i class="fa fa-align-justify"></i>
                <el-input placeholder="请输入内容" v-model="input5" style="width:500px;margin-top:-100px">
                  <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="餐厅名" value="1"></el-option>
                    <el-option label="订单号" value="2"></el-option>
                    <el-option label="用户电话" value="3"></el-option>
                  </el-select>
                  <el-button slot="append" icon="search"></el-button>
              </el-input>
            </div>
        </el-col>
        <el-col :span="2" class="userinfo">
          <el-dropdown trigger="hover">
            <span class="el-dropdown-link userinfo-inner">
              <i class="el-icon-information"></i>
                个人中心
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <i class="el-icon-edit"></i>
                    <a>修改密码</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <i class="el-icon-circle-cross"></i>
                    注销登录
                </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-col>
      <el-col :span="4">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="white"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="1">
            <!-- <template slot="title"> -->
            <i class="el-icon-document"></i>
            <span @click="comName='dataStatistics'">首页</span>
            <!-- </template> -->
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>数据管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="userList" @click="comName='toUserList',flag=false">用户列表</el-menu-item>
              <el-menu-item index="shopList" @click="comName='toShopList',flag=false">商家列表</el-menu-item>
              <el-menu-item index="foodList" @click="comName='foodList',flag=false">食品列表</el-menu-item>
              <el-menu-item index="doneList" @click="comName='orderList',flag=false">订单列表</el-menu-item>
              <el-menu-item index="managerList" @click="comName='managerList',flag=false">管理员列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-plus"></i>
              <span>添加数据</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="addShop" @click="comName='addShop',flag=false">添加商家</el-menu-item>
              <el-menu-item index="addFood" @click="comName='addFood',flag=false">添加商品</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-picture"></i>
              <span>图表</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="visitor" @click="comName='userAnalysis',flag=false">用户分布</el-menu-item>
              <el-menu-item index="newMeber">用户数据</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-edit"></i>
              <span>编辑</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="sendPicture">上传图片</el-menu-item>
              <el-menu-item index="writeText">文本编辑</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>设置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="sendPictur">管理员设置</el-menu-item>
              <el-menu-item index="writeText">发送通知</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-warning"></i>
              <span>说明</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="explain">说明</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col span="20">
        <dataStatistics v-show="flag"></dataStatistics>
        <component :is="comName"></component>
      </el-col>
    </el-row>
  </div>
  
</template>

<script>
import dataStatistics from './dataStatistics'
import toUserList from './toUserList'
import toShopList from './shopList'
import foodList from './foodList'
import orderList from './orderList'
import managerList from './managerList'
import addShop from './addShop'
import addFood from './addFood'
import userAnalysis from './userAnalysis'
// import ue from './ue'
export default {
  data() {
    return {
      input5:'',
      select:'',
      flag:true,
      comName:''
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  components:{
    dataStatistics,
    toUserList,
    toShopList,
    foodList,
    orderList,
    managerList,
    addShop,
    addFood,
    userAnalysis,
  }
}
</script>

<style lang='less'>
.header {
  height: 40px;
  line-height: 40px;
  background: #0f2346;
  color: gray;
  .userinfo {
    text-align: right;
    padding-right: 35px;
    float: right;
    .userinfo-inner {
      cursor: pointer;
      color: white;
      img {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin: 10px 0 10px 10px;
        float: right;
      }
    }
  }
}
.logo {
  height: 60px;
  font-size: 22px;
  padding-left: 20px;
  padding-right: 20px;
  img {
    width: 40px;
    float: left;
    margin: 10px 10px 10px 18px;
  }
  .txt {
    color: white;
  }
}
.logo-width {
  width: 230px;
}
.logo-collapse-width {
  width: 60px;
}
.tools {
  padding: 0 23px;
  width: 14px;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
}
</style>

主页面运行结果
在这里插入图片描述

点击左侧导航栏内容改变右侧展示的内容

在点击左侧导航栏内容是，右侧会显示对应的内容，我们可以创建单独的组件，例如首页

<template>
  <div class="full">
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-breadcrumb separator="/" style="line-height:3;font-size:16px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            </el-breadcrumb>
        </el-menu>
        <div style="width:100%;height:100%;background-color:white">
            <div class="data_Statis">
                <h1>数据统计</h1>
            </div>
            <div class="data_table">
                <table class="tableData">
                    <tr>
                        <td><el-button type="warning">当日数据：</el-button></td>
                        <td><el-button type="primary" :disabled="true">45新增用户</el-button></td>
                        <td><el-button type="primary" :disabled="true">120新增订单</el-button></td>
                        <td><el-button type="primary" :disabled="true">100新增管理员</el-button></td>
                    </tr>
                    <tr>
                        <td><el-button type="info">总数据:</el-button></td>
                        <td><el-button type="primary" :disabled="true">68注册用户</el-button></td>
                        <td><el-button type="primary" :disabled="true">300订单</el-button></td>
                        <td><el-button type="primary" :disabled="true">20管理员</el-button></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="pic">
            <h1>走势图</h1>
        </div>
        <div id="myChart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
name: 'LineChart',
    data () {
        return {
            echartsOption: {	// echarts选项，所有绘图数据和样式都在这里设置
                legend: {	//图表上方的图例
                    data: ['新增用户', '新增订单', '新增管理员']
                },
                xAxis: {
                    type: 'category',
                    data: ['2019-11-29', '2019-11-30', '2019-12-01', '2019-12-02', '2019-12-03', '2019-12-04', '2019-12-05'],   // x轴数据
                    name: '日期',   // x轴名称
                    nameTextStyle: {	// x轴名称样式
                        fontWeight: 600,
                        fontSize: 18
                    }
                },
                yAxis: {
	                type: 'value',
	                name: '用户',   // y轴名称
	                nameTextStyle: {	// y轴名称样式
	                    fontWeight: 600,
	                    fontSize: 18
	                }
                },
                tooltip: {   //鼠标放到图上的数据展示样式
                    trigger: 'axis'
                },
                series: [	//每条折线的数据系列
                    {
                        name: '新增用户',
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                    },
                    {
                        name: '新增订单',
                        data: [620, 711, 823, 934, 1445, 1456, 1178],
                        type: 'line'
                    },
                    {
                        name: '新增管理员',
                        data: [612, 920, 1140, 1160, 1190, 1234, 1321],
                        type: 'line'
                    },
                ],
            }
        }
    },
    mounted () {
        let myChart = echarts.init(document.getElementById('myChart'), 'light')	// 初始化echarts, theme为light
        myChart.setOption(this.echartsOption)	// echarts设置选项
    }
}
</script>

<style lang='less'>
    .full{
        background-color: white;
    }
    .data_Statis{
        margin-top: 20px;
        // width: 100%;
        // font-size: 25px;
        text-align: center;
    }
    .data_table{
        width: 100%;
        height: 100%;
        // text-align: center;
    }
    .tableData{
        margin: 10px auto;
    }
    td{
        width: 150px;
        height: 50px;
    }
    button{
        width: 130px;
    }
    #myChart{
  width: 100%;
  height: 500px;
  margin: 0 auto;
  margin-top: 5%;
}
.pic{
    margin-top: 20px;
    text-align: center;
}
</style>

创建完子组件，将子组件引入父组件中

import dataStatistics from './dataStatistics'

挂载到组件中

components:{
    dataStatistics,
    }

使用<component :is="comName"></component>的方法切换右侧显示的文本内容，将comName写入data

data() {
    return {
      comName:''
    }
  },

我们只需要改变comName的值，就可以改变右侧显示内容，comName的值为引入的子组件，给左侧导航栏添加点击事件，当点击首页时，comName的内容为引入的子组件

<span @click="comName='dataStatistics'">首页</span>

这样就可以切换我们需要的内容了
运行结果
在这里插入图片描述

1270015249-jmy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue整合ElementUI，组件使用教程，适合新手
m0_63174618的博客
04-12 1274
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！ckList)自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。
Vuejs实例-02Vue.js项目集成ElementUI
weixin_30646315的博客
05-21 96
Vuejs实例-02Vue.js项目集成ElementUI 0：前言 vue.js的UI组件库，在git上有多个项目，我见的使用者比较多的是iView和Element.两个组件库，组件都很丰富。 官网的介绍 iView: 一套基于 Vue.js 的高质量 UI 组件库 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。 ...
vue+ElementUI首个实例
qq_43568790的博客
02-07 280
昨天弄了一下elementUI的实践，想想还是整理一下，省的到时候忘了 先看一下最终结果图。 首先从elementUI官网上找到了Container布局容器 将其粘贴到创建好的index.vue中，核心代码如下 <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu...
Vue-Elementui小案例
sjgllllll的博客
01-17 564
第一步创建一个项目 创建项目步骤：地址 第二步构建目录 第三步创建视图（Vue组件） Login.vue: <template> <div> <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"> <h3 class="login-title">欢迎登录</h3> <el-for
vue + elementUI 项目搭建Demo
12-05
使用vue-cli脚手架搭建vue + elementUI 小案例，功能代码不多，主要包括vue项目目录的创建、elementUI的引入、前端路由、i18n国际化语言、scss、引入iconfont
vue-element-admin 集成框架设置中文语言
最新发布
11-10
Vue-element-admin是基于Vue.js构建的一个后台管理界面框架，它结合了Element UI组件库，提供了丰富的UI组件和强大的功能，使得开发者能够快速搭建企业级的后台管理系统。 在"vue-element-admin 集成框架设置中文...
vue结合element-ui和quill富文本编辑器实现上传视频和封面
12-03
本篇文章将详细介绍如何在Vue项目中利用Element-UI和Quill来实现这个功能。 首先，我们需要在项目中安装必要的依赖。Vue-quill-editor是Vue.js的Quill组件封装，可以通过npm进行安装： ```bash npm install vue-...
VUE.js+element-ui实现JSON编辑器
02-17
Vue.js和Element-UI是现代前端开发中常用的两个框架，Vue.js作为一个轻量级的JavaScript框架，以其易学易用、高效和灵活的特点受到了广大开发者喜爱。而Element-UI则是一套基于Vue.js的组件库，提供了丰富的UI组件，...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
Vue+ElementUI项目搭建小案例（idea）
小匠的Blog
10-11 3656
npm命令解释： 1. 创建一个名为hello-vue的项目 2. 在项目目录下初始化项目 vue init webpack hello-vue 进入项目目录 cd hello-vue 先安装组件，在idea中会有语法提示 安装vue-router npm install vue router --save-dev 安装elementUI npm i element-ui -S 安装依赖 npm install ...
vue2.0结合Element-ui实战案例
10-17
主要介绍了vue2.0结合Element-ui实战案例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【狂神vue学习记录】vue+elementUI实战
08-16
vue+elementUI实战
基于vue2.0+element-ui的管理后台实例源码
09-05
基于vue2.0+element-ui的管理后台实例源码，包括路由管理，动态路由加载，全局导航守卫处理等功能，可以作为管理后台开发的非常好的参考
vue与element-ui的结合，脚手架第一步【vue日记】
枫林晚的博客
07-20 1141
一,关于初始化vue项目 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置，默认回车即可 This will install Vue 2.x version of the template. For Vue 1.x u
Vue+ElementUI 搭建后台管理系统（实战系列六）
祈澈菇凉
08-09 1096
前言 使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的教程，可以留着以后来看。 关于开发过程中，确实使用到很大一部分的文档，都说前端开发离不开文档，重要的话说三遍，一定要多看文档。 管理后台解决方案 vue-element-admin 是一个后台前端解决方案，它基于 vue 和 el...
vue和element-ui使用
likunpeng6656201的博客
08-22 508
上一篇已经创建好一个vue项目。https://mp.csdn.net/postedit/80926242 这一篇主要是创建一个vue项目并结合饿了么框架element-ui。 1.先创建vue项目，我准备把项目放在e盘下：E:\Work\RegisterProject； 命令行进入这个目录： 创建一个基于 webpack 模板的新项目 （1）vue init webpack register...
vue入门|ElementUI使用指南
热门推荐
a_Keri的博客
01-25 5万+
vue入门|ElementUI使用指南
Element-UI 和 VUE是什么？
weixin_69797860的博客
04-14 869
Element-UI 和 VUE是什么？
vue 引入element-ui
09-02
在src下的main.js文件中，你可以引入ElementUI组件，并在Vue实例中使用Vue.use(ElementUI)来全局注入Element-ui。还需要引入Element-ui的样式文件，可以使用import 'element-ui/lib/theme-chalk/index.css'.以下是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值