vue 项目 上传以及下载excel 图表（内容）

 

目录

1.until文件夹里的request.js ， axios 响应拦截

2.api文件夹里的 excel.js

3.mock文件里的index.js 接口

4.mock文件里的excel.js 接口

5.components 文件下的layout  里的home 页面

6.components 文件下的layout  里的home 页面

7.components 文件下的layout  里的LeftMenu页面

8.views的文件里 创建的components 里的excel里的UploadExcelComponent.vue

9.views的文件里 的UploadExcelComponent.vue

10.views的文件里 的upload-excel.vue

 11.views的文件里 vendor的Export2Excel.js

 12.views的文件里 vendor的Export2Zip.js

13配置的路由

14.main.js 的配置

---

1.until文件夹里的request.js ， axios 响应拦截

// 封装axios
import axios from 'axios';

// 创建axios实例
let service = axios.create({
    baseURL: "http://localhost:8080",
    timeout: 5000   // 请求超时时长
})

// 请求拦截
service.interceptors.request.use( config => {
    // 查看是否有token
    // 从store中找  是否有token
    return config;
}, error => Promise.reject(error))

// 响应拦截
service.interceptors.response.use( response => {
    /* 
        根据不同响应 status code 进行 配置
        code
            200  // 接口正常
            5001  // 非法token
            5002  // 其他客户端登录
            5003  // token已过期
    */
    let res = response.data;
    if( res.code !== 200 ) {
        return Promise.reject('error');
    } else {
        return res;
    }
}, error => Promise.reject(error));

export default service;

2.api文件夹里的 excel.js

import request from './../utils/request';

export function getDateList () {
  return request({
    url: '/excel/get', 
    method: 'get',
    params: {}
  })
} 

3.mock文件里的index.js 接口

//接口文件
import Mock from 'mockjs'
import excel from './excel'
// 设置全局延时 没有延时的话有时候会检测不到数据变化
Mock.setup({
    timeout: '300-600'
})


Mock.mock(/\/excel\/get/, 'get', excel.getMoneyList)

export default Mock

4.mock文件里的excel.js 接口

//模拟资金管理后台数据
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,
			}
		}
	}
}

5.components 文件下的layout  里的home 页面

<template>
	<div class="container">
		<div class="c_header">
			<HeadNav></HeadNav>
		</div>
		<div class="c_left">
			<left-menu></left-menu>
		</div>
		<div class="c_right">
			<div class="main">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	import HeadNav from './HeadNav.vue'
	import LeftMenu from './LeftMenu'
	export default{
		data(){
			return{
				menuWidth:180
			}
		},
		components:{
			HeadNav,
			LeftMenu,
		},
	}
</script>

<style scoped lang="less">
	.container{
		.c_header{
			box-sizing: border-box;
			position: fixed;
			top:0;
			left:0;
			height: 56px;
			width:100%;
			font-size: 12px;
			text-align: center;
			background-color: #fff;
			z-index: 999;
		}
		.c_left{
			position: absolute;
			top:0;
			left:0;
			bottom: 0;
			width: 200px;
			margin-top:56px;
			background-color: #f90;
		}
		.c_right{
			box-sizing: border-box;
			overflow-y:auto;
			overflow-x:hidden;
			position: absolute;
			right:0px;
			top:56px;
			bottom: 0;
			left: 200px;
			background-color: #afb1b3;
			.main{
				box-sizing: border-box;
				width: 100%;
				padding: 20px;
			}
		}
	}
	
</style>

6.components 文件下的layout  里的home 页面

<template>
   <div class="container">
	 <div class="mylg">
		 <img class="logo"