文章目录
- Home组件
- 表格
- 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>
表格
在个人信息的卡片下面增加一个卡片，增加表格，我们可以直接把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>
目前样式如下：
我们可以再进行优化，使用 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 的样式
Axios封装
Axios中文网
首先使用npm install axios进行安装
安装好后在 package.json 中 dependencies 中会增加相应的依赖
然后我们在 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
<script>
import {getData} from "@/api";
export default {
name: "Home",
data() {
......
},
mounted() {
getData().then((data)=>{
console.log(data)
})
}
}
</script>
