P10:Vue3中模块化深入-实现随机出现美女服务员
这时候“北海九号”餐厅的老板有了新的项目,要求来的顾客可以随机选择一位美女服务员,增加刺激性,我们的任务也是作一个随机选择的菜单,每次刷新都会随机出现小红、小李或者是小张。趁这个机会,我们正好也练习一下Vue3.x中的模块化。
编写远程调用API组件
这里我们使用axios来进行远程随机获得图片,但是我们这里作的不是远程随机获得图片,而是模块化一个通用的远程调用API的组件,这个组件可以远程请求一个指定的URL,并且返回所得到的值。 先用npm
的方式安装axios
。
npm install axios --save
在P09节我们在src下新建了一个hooks文件夹,在里面我们新建一个文件,叫做useURLAxios.ts
,然后先引入ref
和axios
.在文件里写一个useUrlAxios
方法,在方法里声明四个响应式变量result
、loading
、loaded
和error
。声明好后,使用axios
进行访问远程链接。最后记得要进行return
和export default
。
import { ref } from 'vue' import axios from 'axios' function useUrlAxios(url: string) { const result = ref(null) const loading = ref(true) const loaded = ref(false) const error = ref(null) axios.get(url).then((res) => { loading.value = false loaded.value = true result.value = res.data }).catch(e => { error.value = e loading.value = false }) return { result, loading, loaded, error } } export default useUrlAxios
随机美女API介绍
这个随机美女的API,下去大家在mock模拟数据平台做过一个就可以,不用传任何参数,只要进行get请求就可以得到随机出现小红、小李和小张的图片的地址即可。
App.vue的实现
我们先来实现进入页面随机显示一个美女图片,然后刷新会出现不同的美女。
<template> <div> <h2>欢迎光北海九号主题餐厅</h2> <div>随机选择一位美女服务员</div> <div v-if="loading">Loading.....</div> <img v-if="loaded" :src="result.imgUrl" /> <div></div> </div> </template> <script lang="ts"> import { ref } from "vue"; import useUrlAxios from "../src/hooks/useUrlAxios"; const app = { name: "App", setup() { const { result, loading, loaded } = useUrlAxios( "https://dog.ceo/api/breeds/image/random" ); return { result, loading, loaded }; }, }; export default app; </script>
好了,我们只要刷新,都可以随机显示一张美女服务员的照片。但这不是重点,重点是我们要学会这种独立模块化的方式,让我们的代码可以复用。建议这个代码要多写两边,养成这种模块化的思维方式。
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P10:Vue3中模块化深入-实现随机出现美女服务员
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P10:Vue3中模块化深入-实现随机出现美女服务员