济南微信网站,做玩网站怎么上传图片,珲春建设局网站,枸橼酸西地那非片多长时间见效前言
本文为博主的vue实战小项目系列中的第三篇#xff0c;很适合后端或者才入门的小伙伴看#xff0c;一个前端项目从0到1的保姆级教学。前面的内容#xff1a;
【vue实战项目】通用管理系统#xff1a;登录页-CSDN博客
【vue实战项目】通用管理系统#xff1a;封装to…前言
本文为博主的vue实战小项目系列中的第三篇很适合后端或者才入门的小伙伴看一个前端项目从0到1的保姆级教学。前面的内容
【vue实战项目】通用管理系统登录页-CSDN博客
【vue实战项目】通用管理系统封装token操作和网络请求-CSDN博客
目录
1.api封装
2.404页面
3.探讨 1.api封装
由于一个项目里api是很多的随处都在调如果按照之前的写法在每个组件中去调api一旦api有改动遍地都要去改所以api应该也要封装一下将api的调用封装在函数中将函数集中在一起便于管理。
在src下面建一个api目录用来放api在api目录里建一个api.js在其中封装各个api 由于项目到这一步为止只用到了一个后端的api即login所以此处api.js内容如下
import service from ../utils/serviceexport 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.status200){// 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.status200){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页面的组件 组件代码
templatediv classbackground-container!-- Your page content goes here --div classcontentdiv页面不见了/divdiv首页瞧瞧点击router-link to/这里/router-link进入首页./div/div/div
/templatescript
export default {name: YourComponent,
};
/scriptstyle langless
/* Scoped styles for the component */.background-container {/* Adjust the path to your actual image file */background-image: url(../assets/404.jpg);background-size: cover;background-position: center;background-repeat: no-repeat;margin: 0;padding: 0;height: 100vh; /* Set the height to 100% of the viewport height */display: flex;justify-content: center;align-items: center;.content {text-align: center;
}
}
/style
接下来是所有非法请求都能转跳404页面的关键步骤——配置路由
请求进来会先去试图精准匹配路由如果匹配不上就会交给通配符来处理所以404页面的path用通配符即可实现访问方法页面转跳到404页面的效果。 路由配置
import Vue from vue
import Router from vue-routerVue.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
})
最后看看效果
访问一个不存在的路径转跳到404上。 3.探讨
这里探讨一下疯转api.js的价值可以直接跳过
在现代前端开发中封装一个独立的 api.js 文件通常是为了更好地组织和管理前端与后端之间的数据交互以及统一管理 API 请求。
以下是一些常见的原因 代码组织和可维护性 将所有与后端通信的 API 请求集中到一个文件中可以更轻松地组织和维护代码。这使得团队能够更容易地找到和修改与 API 相关的代码。 统一管理 API 地址 在 api.js 中集中管理所有的 API 地址可以使团队更容易地管理和更新这些地址而不必在整个应用中进行广泛的查找和替换。 封装请求逻辑 在 api.js 中可以封装一些通用的请求逻辑例如处理请求和响应的拦截器、认证信息的注入等。这有助于减少重复代码提高代码的复用性。 易于测试 将 API 请求逻辑封装到一个文件中有助于更容易地进行单元测试。你可以专注于测试 api.js 文件确保它正确处理各种请求和响应情况。 适应不同环境 在 api.js 中可以设置不同环境下的 API 地址例如开发环境、测试环境和生产环境。这使得在切换环境时更加方便而无需手动更改多个文件。 团队协作 将 API 请求抽象到一个文件中可以使团队更容易协作。开发人员可以专注于实现页面和组件而不必深入关注底层的 API 请求细节。 更好的错误处理 在 api.js 中可以集中处理错误例如统一处理错误状态码、添加通用的错误提示等从而提供更好的用户体验。
总的来说封装一个独立的 api.js 文件有助于提高代码的可维护性、可测试性和团队协作效率同时为应对各种场景提供了更好的灵活性。
