【Vue2+Element ui通用后台】整体布局、数据展示、axios封装-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue2+Element ui通用后台】整体布局、数据展示、axios封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Home组件

我们新建 Home 组件来展示右侧的内容

整体布局我们使用layout布局，通过基础的 24 分栏，迅速简便地创建布局。由于左侧占比较小，我们分为 8 和 16 即可

然后每个卡片样式的部分，我们使用 Card 卡片

我们先增加一个个人信息的展示：

<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <div class="user">
            <img src="../assets/profile.jpg">
            <div class="userInfo">
              <p class="name">Admin</p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录的时间：<span>2022-11-11</span></p>
            <p>上次登录的地点：<span>深圳</span></p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style lang="less" scoped>
.user{
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  img{
    margin-right: 40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .userInfo{
    .name{
      font-size: 32px;
      margin-bottom: 10px;
    }
    .access{
      color: #999999;
    }
  }
}

.login-info{
  p{
    line-height: 28px;
    font-size: 14px;
    color: #999999;
    span{
      color: #666666;
      margin-left: 60px;
    }
  }
}
</style>

然后在App.vue 中给 p 标签去掉默认样式


<style lang="less">
html,body,h3,p{
  margin: 0;
  padding: 0;
}
</style>

element 后台,Vue学习笔记,vue,elementui

表格

在个人信息的卡片下面增加一个卡片，增加表格，我们可以直接把Table表格中的示例代码拿过来

		<el-card style="margin-top: 20px;height: 420px">
          <el-table
              :data="tableData"
              style="width: 100%">
            <el-table-column
                prop="date"
                label="日期">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名">
            </el-table-column>
            <el-table-column
                prop="address">
            </el-table-column>
          </el-table>
        </el-card>

<script>
export default {
  name: "Home",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>

目前样式如下：
element 后台,Vue学习笔记,vue,elementui
我们可以再进行优化，使用 v-for 循环展示表格内容：

<el-card style="margin-top: 20px;height: 420px">
          <el-table
              :data="tableData"
              style="width: 100%">
            <el-table-column v-for="(val,key) in tableLabel"
                :prop="key"
                :label="val">
            </el-table-column>
          </el-table>
        </el-card>

<script>
export default {
  name: "Home",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      tableLabel:{
        date:'日期',
        name:'姓名',
        address:'地址'
      }
    }
  }
}
</script>

接下来在右侧增加一个今日订单数据的展示：

<template>
  <div>
    <el-row>
      ......
      <el-col :span="16">
        <div class="num">
          <el-card v-for="item in countData" :key="item.name" :body-style="{display:'flex',padding:0}">
            <i class="icon" :class="`el-icon-${item.icon}`" :style="{background:item.color}"></i>
            <div class="detail">
              <p class="price">￥{{item.value}}</p>
              <p class="desc">{{item.name}}</p>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return { 
      ......
      countData:[
        {
          name:'今日支付订单',
          value:1234,
          icon:'success',
          color:'#2ec7c9'
        },{
          name:'今日收藏订单',
          value:210,
          icon:'star-on',
          color:'#ffb980'
        },
        {
          name:'今日支付订单',
          value:1234,
          icon:'success',
          color:'#2ec7c9'
        },{
          name:'今日收藏订单',
          value:210,
          icon:'star-on',
          color:'#ffb980'
        },
        {
          name:'今日支付订单',
          value:1234,
          icon:'success',
          color:'#2ec7c9'
        },{
          name:'今日收藏订单',
          value:210,
          icon:'star-on',
          color:'#ffb980'
        },
      ]
    }
  }
}
</script>

<style lang="less" scoped>
......

.num{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;// 贴边
  .icon{
    width: 80px;
    height: 80px;
    font-size: 30px;
    line-height: 80px;
    color:#ffffff;
    text-align: center;
  }
  .detail{
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .price{
      height: 30px;
      line-height: 30px;
      font-size: 30px;
      margin-bottom: 10px;
    }
    .desc{
      font-size: 14px;
      text-align: center;
      color:#999999;
    }
  }

  .el-card{
    width: 32%;
    margin-bottom: 20px;
  }
}
</style>

在icon中找到想要的 icon 图片

在card找到设置 card 卡片样式的方法，是增加 body-style 来设置 body 的样式

element 后台,Vue学习笔记,vue,elementui

Axios封装

Axios中文网

首先使用npm install axios进行安装
安装好后在 package.json 中 dependencies 中会增加相应的依赖
element 后台,Vue学习笔记,vue,elementui
然后我们在 src 下新建 utils/request.js ，然后我们在里边创建axios实例，
然后创建拦截器

import axios from "axios";

const http = axios.create({
    baseURL: '/api',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
});


// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default http

然后在 src 下新建 api/index.js，可以参考实例方法

import http from '../utils/request'

// 请求首页数据
export const getData = ()=>{
    // 返回一个promise对象
    return http.get('/home/getData')
}

然后我们在首页中使用，打开 Home.vue文章来源地址https://www.toymoban.com/news/detail-619437.html

<script>
import {getData} from "@/api";

export default {
  name: "Home",
  data() {
    ......
  },
  mounted() {
    getData().then((data)=>{
        console.log(data)
    })
  }
}
</script>