api封裝

由于一個項目里api是很多的，隨處都在調，如果按照之前的寫法，在每個組件中去調api，一旦api有改動，遍地都要去改，所以api應該也要封裝一下，將api的調用封裝在函數中，將函數集中在一起便于管理。在src下面建一個api目錄，用來放api，在api目錄里建一個api.js，在其中封裝各個api：

由于項目到這一步為止，只用到了一個后端的api，即login，所以此處api.js內容如下：

import service from '../utils/service'export function login(data){return service({method:'post',url:'/login',data})
}

?抽出api.js后以后的后端api調用就用api.js中提供的函數，這里先改一下Login頁面的api調用邏輯：

import {setToken} from '@/utils/setToken.js'
import {login} from '@/api/api.js'
methods:{login(form){this.$refs[form].validate((valid)=>{if(valid){console.log(this.form)// this.service.post('/login',this.form)// .then(res=>{//   console.log(res.status)//   if(res.status===200){//     setToken('username',res.data.username)//     setToken('token',res.data.token)//     this.$router.push('/home')//   }// })login(this.form).then(res=>{console.log(res.status)if(res.status===200){setToken('username',res.data.username)setToken('token',res.data.token)this.$router.push('/home')}})}else{console.error(this.form)}})}}