1.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)
}
})
}
}
改完之后可以运行项目试试，是正常可用的。
2.404页面
接下来我们开发一下404页面，404页面作为系统的一个通用页面，任何非法请求，全部都会跳转到404页面上。我们可以参考一下现在大多数系统中404页面的做法，一张简洁的图+跳转回首页的路由即可。
准备好404页面的背景图，新建好404页面的组件：
组件代码：
接下来是所有非法请求都能转跳404页面的关键步骤——配置路由：
请求进来会先去试图精准匹配路由，如果匹配不上就会交给通配符来处理，所以404页面的path用通配符即可实现访问方法页面转跳到404页面的效果。
路由配置：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes:[
{
path:'/',
redirect:'/login',
component: ()=>import('@/components/Login')
},
{
path:'/login',
name:'Login',
component: ()=>import('@/components/Login')
},
{
path:'/home',
component: ()=>import('@/components/HelloWorld')
},
{
path:'*',
name:'NotFound',
component:()=>import('@/components/NotFound')
}
],
mode:'history'
})
