网站推广排名平台,教人如何做吃的网站,备案网站内容说明,本地app开发公司电话Vue2项目练手——通用后台管理项目 首页组件布局个人信息展示使用的组件App.vueHome.vue 列表信息展示使用的组件Home.vue 订单统计Home.vue 数据的请求axios的基本使用二次封装文件目录src/api/index.jssrc/utils/request.jsHome.vue 首页组件布局
个人信息展示
使用的组件 … Vue2项目练手——通用后台管理项目 首页组件布局个人信息展示使用的组件App.vueHome.vue 列表信息展示使用的组件Home.vue 订单统计Home.vue 数据的请求axios的基本使用二次封装文件目录src/api/index.jssrc/utils/request.jsHome.vue 首页组件布局
个人信息展示
使用的组件
Layout布局 Card卡片
App.vue
templatediv idapprouter-view/router-view/div
/templatescriptexport default {name: App,
}
/scriptstyle langless
html,body,h3,p{padding: 0;margin: 0;
}
/style
Home.vue
templatedivel-rowel-col :span8el-card classbox-carddiv classuserimg src/assets/user.webp altdiv classuserinfop classnameAdmin/pp classaccess超级管理员/p/div/divdiv classlogin-infop上次登录的时间span2023-08-30/span/pp上次登录的地点span北京/span/p/div/el-card/el-colel-col :span16div classgrid-content bg-purple-light/div/el-col/el-row/div/templatescript
export default {name: Home,
}
/scriptstyle scoped langless
.user{display: flex;align-items: center;padding-bottom: 20px;margin-bottom: 20px;border-bottom: 1px solid #ccc;img{margin-right: 40px;width: 150px;height: 150px;border-radius: 50%;}.userinfo{.name{font-size: 32px;margin-bottom: 10px;}.access{color: #999;}}
}
.login-info{p{line-height: 28px;font-size: 14px;color: #999;span{color: #666;margin-left: 60px;}}
}
/style 列表信息展示
使用的组件 Home.vue
templatedivel-rowel-col :span8el-card classbox-carddiv classuserimg src/assets/user.webp altdiv classuserinfop classnameAdmin/pp classaccess超级管理员/p/div/divdiv classlogin-infop上次登录的时间span2023-08-30/span/pp上次登录的地点span北京/span/p/div/el-cardel-card stylemargin-top: 20px;height: 460px;el-table:datatableDatastylewidth: 100%;el-table-column v-for(val,key) in tableLabel :propkey :labelval //el-table/el-card/el-colel-col :span16div classgrid-content bg-purple-light/div/el-col/el-row/div/templatescript
export default {name: Home,data(){return{tableData:[{name: oppo,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: vivo,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: 苹果,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: 小米,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: 三星,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: 魅族,todayBuy: 100,monthBuy: 300,totalBuy: 800}],tableLabel:{name:课程,todayBuy:今日购买,monthBuy:本月购买,totalBuy:总共购买}}}
}
/scriptstyle scoped langless
.user{display: flex;align-items: center;padding-bottom: 20px;margin-bottom: 20px;border-bottom: 1px solid #ccc;img{margin-right: 40px;width: 150px;height: 150px;border-radius: 50%;}.userinfo{.name{font-size: 32px;margin-bottom: 10px;}.access{color: #999;}}
}
.login-info{p{line-height: 28px;font-size: 14px;color: #999;span{color: #666;margin-left: 60px;}}
}
/style 订单统计
Home.vue
el-col :span16div classnumel-card v-foritem in countData :keyitem.name :body-style{display:flex,padding:0}i classicon :classel-icon-${item.icon} :style{background:item.color}/idiv classdetailp classprice{{item.value}}/pp classdesc{{item.name}}/p/div/el-card/div/el-col.num{display: flex;flex-wrap: wrap;justify-content: space-between;.icon{width: 80px;height: 80px;color: #fff;line-height: 80px;text-align: center;font-size: 30px;}.detail{margin-left: 15px;display: flex;flex-direction: column;justify-content: center;.price{font-size: 30px;margin-bottom: 10px;line-height: 30px;}.desc{color: #999;font-size: 14px;text-align: center;}}.el-card{margin-bottom: 20px;width: 32%;}
}全部代码
templatedivel-rowel-col :span8el-card classbox-carddiv classuserimg src/assets/user.webp altdiv classuserinfop classnameAdmin/pp classaccess超级管理员/p/div/divdiv classlogin-infop上次登录的时间span2023-08-30/span/pp上次登录的地点span北京/span/p/div/el-cardel-card stylemargin-top: 20px;height: 460px;el-table:datatableDatastylewidth: 100%;el-table-column v-for(val,key) in tableLabel :propkey :labelval //el-table/el-card/el-colel-col :span16div classnumel-card v-foritem in countData :keyitem.name :body-style{display:flex,padding:0}i classicon :classel-icon-${item.icon} :style{background:item.color}/idiv classdetailp classprice{{item.value}}/pp classdesc{{item.name}}/p/div/el-card/div/el-col/el-row/div/templatescript
export default {name: Home,data(){return{tableData:[{name: oppo,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: vivo,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: 苹果,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: 小米,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: 三星,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: 魅族,todayBuy: 100,monthBuy: 300,totalBuy: 800}],tableLabel:{name:课程,todayBuy:今日购买,monthBuy:本月购买,totalBuy:总共购买},countData:[{name: 今日支付订单,value: 1234,icon: success,color: #2ec7c9,},{name: 今日收藏订单,value: 210,icon: star-on,color: #ffb980,},{name: 今日未支付订单,value: 1234,icon: s-goods,color: #5ab1ef,},{name: 本月支付订单,value: 1234,icon: success,color: #2ec7c9,},{name: 本月收藏订单,value: 210,icon: star-on,color: #ffb980,},{name: 本月未支付订单,value: 1234,icon: s-goods,color: #5ab1ef,},],}}
}
/scriptstyle scoped langless
.user{display: flex;align-items: center;padding-bottom: 20px;margin-bottom: 20px;border-bottom: 1px solid #ccc;img{margin-right: 40px;width: 150px;height: 150px;border-radius: 50%;}.userinfo{.name{font-size: 32px;margin-bottom: 10px;}.access{color: #999;}}
}
.login-info{p{line-height: 28px;font-size: 14px;color: #999;span{color: #666;margin-left: 60px;}}
}
.num{display: flex;flex-wrap: wrap;justify-content: space-between;.icon{width: 80px;height: 80px;color: #fff;line-height: 80px;text-align: center;font-size: 30px;}.detail{margin-left: 15px;display: flex;flex-direction: column;justify-content: center;.price{font-size: 30px;margin-bottom: 10px;line-height: 30px;}.desc{color: #999;font-size: 14px;text-align: center;}}.el-card{margin-bottom: 20px;width: 32%;}
}
/style 数据的请求
axios的基本使用
axios中文文档
二次封装
下载axios npm i axios 文件目录 src/api/index.js
import http from /utils/request;//请求首页数据
export const getData(){//返回一个promise对象return http.get(/home/getData)
}
src/utils/request.js
import axios from axios;const httpaxios.create({//通用请求的地址前缀baseURL:/api,timeout: 10000 //超时时间
})// 添加请求拦截器
http.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
http.interceptors.response.use(function (response) {// 对响应数据做点什么return response;
}, function (error) {// 对响应错误做点什么return Promise.reject(error);
});export default http
Home.vue
templatedivel-rowel-col :span8el-card classbox-carddiv classuserimg src/assets/user.webp altdiv classuserinfop classnameAdmin/pp classaccess超级管理员/p/div/divdiv classlogin-infop上次登录的时间span2023-08-30/span/pp上次登录的地点span北京/span/p/div/el-cardel-card stylemargin-top: 20px;height: 460px;el-table:datatableDatastylewidth: 100%;el-table-column v-for(val,key) in tableLabel :propkey :labelval //el-table/el-card/el-colel-col :span16div classnumel-card v-foritem in countData :keyitem.name :body-style{display:flex,padding:0}i classicon :classel-icon-${item.icon} :style{background:item.color}/idiv classdetailp classprice{{item.value}}/pp classdesc{{item.name}}/p/div/el-card/div/el-col/el-row/div/templatescript
import {getData} from /api;
export default {name: Home,data(){return{tableData:[{name: oppo,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: vivo,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: 苹果,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: 小米,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: 三星,todayBuy: 100,monthBuy: 300,totalBuy: 800},{name: 魅族,todayBuy: 100,monthBuy: 300,totalBuy: 800}],tableLabel:{name:课程,todayBuy:今日购买,monthBuy:本月购买,totalBuy:总共购买},countData:[{name: 今日支付订单,value: 1234,icon: success,color: #2ec7c9,},{name: 今日收藏订单,value: 210,icon: star-on,color: #ffb980,},{name: 今日未支付订单,value: 1234,icon: s-goods,color: #5ab1ef,},{name: 本月支付订单,value: 1234,icon: success,color: #2ec7c9,},{name: 本月收藏订单,value: 210,icon: star-on,color: #ffb980,},{name: 本月未支付订单,value: 1234,icon: s-goods,color: #5ab1ef,},],}},mounted(){getData().then((data){console.log(data)})}
}
/scriptstyle scoped langless
.user{display: flex;align-items: center;padding-bottom: 20px;margin-bottom: 20px;border-bottom: 1px solid #ccc;img{margin-right: 40px;width: 150px;height: 150px;border-radius: 50%;}.userinfo{.name{font-size: 32px;margin-bottom: 10px;}.access{color: #999;}}
}
.login-info{p{line-height: 28px;font-size: 14px;color: #999;span{color: #666;margin-left: 60px;}}
}
.num{display: flex;flex-wrap: wrap;justify-content: space-between;.icon{width: 80px;height: 80px;color: #fff;line-height: 80px;text-align: center;font-size: 30px;}.detail{margin-left: 15px;display: flex;flex-direction: column;justify-content: center;.price{font-size: 30px;margin-bottom: 10px;line-height: 30px;}.desc{color: #999;font-size: 14px;text-align: center;}}.el-card{margin-bottom: 20px;width: 32%;}
}
/style
