vlambda博客
学习文章列表

前端入门 | Vue 展现请求结果与增加效果

上一篇文章,我们使用了 axios 库实现了数据的请求,只不过是在控制台输出。这一篇文章我们将要实现的如下

  1. 能够将请求的结果展示出来(包括图片和 text)
  2. 在请求结果还没有拿到的时候实现等待的效果,且在第一个图标没有结果的时候,第二个和第三个图标灰色且不可点击

呈现返回结果

Vue 的最大特点就是绑定和自动渲染,我们要时刻记得:我们只负责传递到数据本身,所有的引用会自动修改值

所以只要将绑定到 DOM 节点的 this.message 赋值 response.data 即可

<p
class="text item"
>

{{ message }}
</p>
axios.get('/get')
    .then((res) => {
    this.message = res.data;
})
    .catch((error) => {
    console.error(error);
});

实现结果如下

成功展现返回结果

请求图片的原理也是一样的,只不过是 <img> 标签的 src 特性,这里有个坑就是很多网站会添加防盗链机制 (会返回 403 状态码,是厂商用于自己的服务器不被刷流量产生的,自己的 API 就没事),这里有一个网站 https://images.weserv.nl/,它的简介如下

「An image cache & resize service. Manipulate images on-the-fly with a worldwide cache.」

对于一般的网站,加上前缀 //images.weserv.nl/?url=,添加结果和效果如下

<img 
     src="//images.weserv.nl/?url=https://img-pre.ivsky.com/img/tupian/pre/202004/18/hongchanhua-001.jpg"
     width=200px
>


对 API 请求图片并展现

至于自己的服务器提供的图片结果,只需要将 content-type 参数改为 image/jpeg 这类图片的类型即可

特别提醒一下,<input> 等标签的绑定是通过 v-model 实现的,如果我们想基于输入框内的结果构造请求,可以参照如下代码方式

<el-input 
   v-model="input" 
   placeholder="Please Enter Your Member-ID"
>
</el-input>

<p
   >
Your Zhihu member-id-hash is:  {{ input }}
</p>

实现元素禁用和等待

由于爬取是同步的,API 的请求出去之后,第二层关系链的爬取需要第一次的结果,因此第一次爬取成功返回结果渲染 DOM 之前,后面的两个按钮应该被设置为不能操作。

有时 API 生成结果比较慢。比如这个毕业设计中,我向自己写的 API 发送请求,需要等待机子的初始化,网络接口的 hook,爬取以及词云图和关系链图的生成,整个过程可能需要 1min 才能生成结果,等待时间页面没有提示,会让人觉得网络崩了。

首先是禁用操作,我们只需要将 Element 框架节点的属性 disabled 绑定到一个变量即可 :disabled="is_disabled",然后在不同的阶段对这个变量进行赋值即可 —— Vue 的绑定真的太好用

效果如图,实现了点击之后,不可操作:

设置按钮为不可操作


接着是等待,只要绑定 v-loading 属性到自定义变量上即可,和上面逻辑一致,后面用到了再说,不再记录。

总结

Vue 中,我们一定要记得一点 —— 我们只负责修改数据,其他已经由 Vue 框架全都绑定好了

其中文本通过 {{}} 来绑定,属性通过 v-bind: 缩写来绑定,事件通过 v-on@ 缩写来绑定

下一篇咱先部署一下 「FastAPI」,完了请求部署的接口,呈现最近最关注的 10 个人列表,以及提供词云图的下载链接!