【vue实战项目】通用管理系统:api封装、404页

简介: 【vue实战项目】通用管理系统:api封装、404页

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

相关文章
|
6天前
|
缓存 前端开发 API
API接口封装系列
API(Application Programming Interface)接口封装是将系统内部的功能封装成可复用的程序接口并向外部提供,以便其他系统调用和使用这些功能,通过这种方式实现系统之间的通信和协作。下面将介绍API接口封装的一些关键步骤和注意事项。
|
7天前
|
JavaScript 应用服务中间件 nginx
vue项目中页面遇到404报错
vue项目中页面遇到404报错
|
13天前
|
监控 前端开发 JavaScript
实战篇:商品API接口在跨平台销售中的有效运用与案例解析
随着电子商务的蓬勃发展,企业为了扩大市场覆盖面,经常需要在多个在线平台上展示和销售产品。然而,手工管理多个平台的库存、价格、商品描述等信息既耗时又容易出错。商品API接口在这一背景下显得尤为重要,它能够帮助企业在不同的销售平台之间实现商品信息的高效同步和管理。本文将通过具体的淘宝API接口使用案例,展示如何在跨平台销售中有效利用商品API接口,以及如何通过代码实现数据的统一管理。
|
25天前
|
数据采集 JSON API
如何实现高效率超简洁的实时数据采集?——Python实战电商数据采集API接口
你是否曾为获取重要数据而感到困扰?是否因为数据封锁而无法获取所需信息?是否因为数据格式混乱而头疼?现在,所有这些问题都可以迎刃而解。让我为大家介绍一款强大的数据采集API接口。
|
1月前
|
JavaScript
vue.js项目评估流程图特效
vue.js项目评估流程图特效
75 2
vue.js项目评估流程图特效
|
1月前
|
JavaScript 前端开发 测试技术
在Vue项目中,常见的错误类型有哪些?
在Vue项目中,常见的错误类型有哪些?
25 2
|
1月前
|
JavaScript 安全 中间件
在Vue项目中,什么情况下需要使用错误处理机制?
在Vue项目中,什么情况下需要使用错误处理机制?
18 2
|
1月前
|
运维 监控 JavaScript
分享一些 Vue 项目中的最佳实践和经验教训。
分享一些 Vue 项目中的最佳实践和经验教训。
19 2
|
7天前
|
JavaScript
Vue项目中强制刷新页面的方法
Vue项目中强制刷新页面的方法
11 0
|
26天前
|
JavaScript 前端开发 网络架构
Vue3项目中使用vue-router
Vue3项目中使用vue-router
40 0