简单的 页面效果图：
要求可以 上传以及可以 下载excel 图表（本文章为思路）
目录
1.在 components 下创建文件夹并创建文件home.vue;
2.在 views 下创建文件 download-excel.vue下载文件 和 upload-excel.vue 上传文件，在路由文件里配置路由,使用懒加载进行引入即可！！
3.在首页里，给一个父级div,单个子集div,分别class 命名： 父级 “container”,子集依次是"c_header","c_left","c_right";
6.在layout 文件夹下创建Menuleft.vue 文件；
7.在src 里创建until 文件夹， 且在里边创建request.vue (进行axios)
8.在src 里创建api 文件夹， 且在里边创建excel.js 在其里边引入request.vue 文件
9.在导出文件 download-excel.vue 文件里
10. 在src 里 创建文件夹 mock 且 创建index.js
12. 在 mock里的index.js 里 <1 引入 excel
<1 在download-excel.vue 文件里的方法；
<2在download-excel.vue 里 引入vendor
导入导出思路：
1.在 components 下创建文件夹并创建文件home.vue;
在路由文件里配置文件,且将此页面作为重定向即可！！
2.在 views 下创建文件 download-excel.vue下载文件 和 upload-excel.vue 上传文件，在路由文件里配置路由,使用懒加载进行引入即可！！
3.在首页里，给一个父级div,单个子集div,分别class 命名： 父级 “container”,子集依次是"c_header","c_left","c_right";
4给页面布局：
.container{
c_header{
width:100%;
height:60px;
position:absolute;
left:0;
top:0
background:#f00; //红色，方便前期观看，后期还需注掉
z-index：999
}
c_left{
width:200px;
position:absolue;
left:0;
top:0;
bottom:0;
margin-top:60px;
background:#f90;//橘黄色
}
c_right{
position:absolute;
top:0;
right:0;
left:200px;
bottom:0;
background:#0f9;//绿色
}
}
5.给头部div 输入文字 智能物流管理系统
并且给头部添加样式让其居中：
text-align:center; line-height:60px; font-size:22px6.在layout 文件夹下创建Menuleft.vue 文件；
在home 页面引入Menuleft.vue文件，且注册Menuleft 在home.vue 页面 第三个子集div class命名为 c_right的里边，给一个出口 <router-view></router-view> 即可！！！
7.在src 里创建until 文件夹， 且在里边创建request.vue (进行axios)
<1 引入axios
<2 创建实例
let service =axios.create({
baseURL:"http://localhost:8081",
timeout:5000
})
service.interceptors.request.use(config=>{
return config
}),error=>Promise.reject(error)
service.interceports.response.use(response=>{
let res=response.data;
return res
}, error=>reject(error))
导出
export default service;
8.在src 里创建api 文件夹， 且在里边创建excel.js 在其里边引入request.vue 文件
export function getDataList(){
return request({
url:'excel/get'
method:"get"
})
}
9.在导出文件 download-excel.vue 文件里
<1 引入api文件下的excel.js import { getDataList} from './../api/excel'
<2 在data 里 放入一个空的数组，并且命名为 tableData
<3 在created 里边 this.getData()
<4 在methods 的方法里,进行获取数据，
getData(){ getDataList().then(res=>{ console.log("res"，res); }) }10. 在src 里 创建文件夹 mock 且 创建index.js
<1 引入mock import mock from 'mockjs'
<2
mock.setup({ timeout:'300-600' })
Mock.mock(/\/excel\/get/,'get')11. 在mock 文件里 创建 excel.js 文件
//模拟接口返回的数据 import Mock from 'mockjs'
//模拟资金管理后台数据
import Mock from 'mockjs' // 导入mockjs 模块
let List = []// 定义我们需要的数据
const count = 10
for (let i = 0; i < count; i++) {
List.push(Mock.mock({// 根据数据模板生成模拟数据
id: Mock.Random.guid(),// 随机生成一个id
username: Mock.Random.cname(),// 随机生成一个常见的中文姓名。
address: Mock.mock('@county(true)'),// @county(true)为数据模板
createTime: Mock.Random.datetime(),//生成时间
income: Mock.Random.integer(0, 9999),//生成随机数
pay: Mock.Random.integer(0, 9999), //生成随机数
accoutCash: Mock.Random.integer(0, 9999),//生成随机数
checked:false//标识当前数据状态
}))
}
export default{
getMoneyList:config =>{
return{
code:200,
data:{
list:List,
}
}
}
}12. 在 mock里的index.js 里 <1 引入 excel
在main.js 里 引入mock 里的index
13导出功能
<1 在download-excel.vue 文件里的方法；
methods: {
getDateFn() {
getDateList().then((res) => {
this.tableData = res.data.list;
});
},
handleDownload() {
this.downloadLoading = true;
//自定义的头部
const tHeader = ["姓名", "籍贯", "投资时间", "收入", "支出", "账户现金"];
//自定义的字段
const filterVal = [
"username",
"address",
"createTime",
"income",
"pay",
"accoutCash",
];
getDateList().then((res) => {
if (res.code == 200) {
const data = this.formatJson(filterVal, res.data.list);
export_json_to_excel({
header: tHeader, //excel头部列表
data, //数据
filename: "2109_测试文件", //文件名称
autoWidth: true, //自适应宽
bookType: "xlsx", //文件类型
});
this.downloadLoading = false;
}
});
},
formatJson(filterVal, jsonData) {
return jsonData.map((v) =>
filterVal.map((j) => {
return v[j];
})
);
},
},
};<2在download-excel.vue 里 引入vendor
声明：
此处有一部分省略： 大致步骤；