Vue+express+mysql（1）Vue项目构建

1.利用vue-cli脚手架创建一个vue项目
a.全局安装Vue
npm install @vue/cli -g
b.创建Vue项目
vue create project-front

header.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
}
}

request.js
axios请求封装

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

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
    })
}