axios--基于vuejs的封装，实现nodejs服务器的前端请求响应

官网地址：https://www.axios-js.com/zh-cn/docs/vue-axios.html

基于ref的变量显示

打开下载好的vuehello2项目，打开main.js，添加：
import axios from 'axios'
import VueAxios from 'vue-axios'
下方添加：.use(VueAxios, axios)
注意安装：npm install axios vue-axios
找到SubHello1.vue，在最下面的下添加代码：

count1:{{count1}}

count2:{{count2}}

				  <div>
					  
				  </div>

在Script模块添加代码：
import {ref} from 'vue'
let count1 = 10;
let count2 = ref(10);
随后npm run serve，访问index.js中地址，左侧显示两个count：

然后再在Script模块下添加一个函数：
function add() {
count1 = count1+1;
count2.value = count2.value+1;
}
对于该函数，定义一个点击事件触发它。
在上面的count2定义下，加上一行代码：

<el-button type = "primary" @click="add">+1

该代码通过鼠标点击按钮来触发add函数+1的操作。保存。
随后点击页面中的+1按钮，发现计数+1：

基于reactive的变量显示

同样类似于上方的ref，在同等位置引入reactive。
定义user1：let user1 = reactive({count3:10})
add函数增加：user1.count3 = user1.count3+1;
在上面div添加user：

user1:{{user1.count3}}

，随后保存。
可以观察到user1也+1：

添加user2：let user2 = reactive({count4:10})
add函数添加：user2.count4 = user2.count4+1;
div添加：

user2:{{user2.count4}}

保存观察结果。

还要用一种方式toRefs
import该内容。
定义count4：let {count4} = toRefs(user2)
上方user2的div改为：

count4:{{count4}}

保存观察结果。

小结

上述内容展示了几种不同的变量定义方式。其中第一种不推荐，常用的是下面几种。

前端数据交给后端服务器响应

在Script下引入：import axios from 'axios'
定义一个变量：let result = ref(null)，相当于一个声明。
在上方重新写一个div标签，加入：

{result}

getPicsList

将getPicsList方法写在刚刚的add函数下： function getPicsList() { axios.get("/picserver/images").then((response) => { console.log(response.data) result.value = response.data }) } get中的路径我们需要定义一下，找到vue.config.js文件，在port下加入： proxy: { '/picserver':{ target:'http://localhost:3000', changeOrigin:true, pathRewrite:{ '^/picserver':'' } } } 保存重新启动，别忘了在这之前先启动picserver服务器： 

这样我们就完成了前端发送请求，后端给出结果，只不过我们的picserver是nodejs服务器，也可以搭建js服务器。