vue+express+mysql(3)增删改查，导入导出excel

一.Vue前端项目

1.vue.config.js配置代理跨域

module.exports={
   
    devServer: {
   
        proxy: {
   
          //配置跨域
          '/api': {
   
            target: 'http://127.0.0.1:3000/',
            ws: true,
            changOrigin: true,
            pathRewrite: {
   
              '^/api': 'api'
            },
            open: true /*启动项目自动打开浏览器（同时需在package.json中配置："scripts": {
    "dev": "vue-cli-service serve --open",}*/
          }
        }

    }
}

2.headers/headers.js

import $md5 from 'js-md5'

export function getHeader(url,code){
   
    //时间戳
    let timestamp=Date.now()
    let token=sessionStorage.getItem('user-token')===null?'':sessionStorage.getItem('user-token')
    let source='web'
    let sign=$md5(source+url+code+timestamp+token)
    
    return {
   'Content-type':'application/json;charset=UTF-8','token':token,
    'timestamp':timestamp,'code':code,'sign':sign,'source':source
}
}

3.axios/request.js

import axios from 'axios'
import {
   getHeader} from '@/headers/header'
import {
   Message,MessageBox} from 'element-ui'

let baseURL='/'
//创建axios实例

const service=axios.create({
   
    baseURL:baseURL,
    timeout:30000 //请求超时时间
})

//request拦截器
service.interceptors.request.use(
    config=>{
   
    let url=config.url.replace(config.baseURL,'')
    let code=config.code;
    config.headers=getHeader(url,code)//让每个请求携带自定义签名
    return config
},
 error=>{
   
     Promise.reject(error)
   
 }
)

//response拦截器

service.interceptors.response.use(
    response=>{
   
        
    if(response.config.responseType=='blob')  {
     
        if(response.status==200){
   
            return response
        }else {
   
            return Promise.reject('error')
        }
    }else{
   
      const res=response.data;
      if(res.code===200){
   
          return response.data
      }else if(res.code===407){
   
        //   console.log('token失效跳转登录页面')
        // sessionStorage.clear();
        // location.href=''
      }else{
   
          Message({
   
              message:res.message,
              type:'error',
              duration:5*1000
          })
          return Promise.reject('error')
      }
    }
   },
   error=>{
   
       Message({
   
           message:error.message,
           type:'error',
           duration:5*1000
       })
      
       return Promise.reject(error)
   }
)

export default service

4.axios/api.js

import request from './request'

export function getList(data){
   
    return request({
   
        url:'/api/index',
        method:'post',
        data,
        
    })
}

export function insertForm(data){
   
    return request({
   
        url:'/api/insert',
        method:'post',
        data,
    })
}
export function updateForm(params){
   
     return request({
   
         url:'/api/update',
         method:'get',
         params
     })
}
export function deletelist(data){
   
    return request({
   
        url:'/api/delete',
        method:'delete',
        data
    })
}

export function importFile(data){
   
   return request({
   
        url:'/api/import',
        method:'post',
        data
    })
}

export function exportFile(data){
   
    return request({
   
        url:'/api/export',
        method:'post',
        data,
        responseType:'blob'
    })
}
export function pageQuery(params){
   
    return request({
   
        url:'/api/pageQuery',
        method:'get',
        params
    })
}

3.views/about.vue

<template>
    <div>
<!-- Form -->

<el-button type='primary' @click="findList">查询</el-button>
<el-button type="primary" @click="dialogForm" >新增</el-button>
<el-button type="primary" @click="dialogUpdate">修改</el-button>
<el-button type="danger" @click="deletelist">删除</el-button>
<el-button type="primary" @click="importExcel">导入</el-button>
<el-button type="primary" @click="exportExcel">导出</el-button>
 <el-dialog :visible.sync='dialogImport'>
  <el-upload
  class="upload-demo"
  action=""
  :auto-upload='false'
  :http-request='uploadFile'
  :on-change="handleChange"
  ref='importInfo'
  :sho