前端入门 | Vue 展现请求结果与增加效果
上一篇文章，我们使用了 axios 库实现了数据的请求，只不过是在控制台输出。这一篇文章我们将要实现的如下
-
能够将请求的结果展示出来(包括图片和 text) -
在请求结果还没有拿到的时候实现等待的效果，且在第一个图标没有结果的时候，第二个和第三个图标灰色且不可点击
呈现返回结果
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
>
至于自己的服务器提供的图片结果，只需要将 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 个人列表，以及提供词云图的下载链接！