savedate插件（本地存储），v-for循环，vue跳转页面

1.首页接口

原来是刷新一下需要登陆一下，比较麻烦，首页接口所需要实现的是只登陆一次，如果有token刷新就不需要再次登陆，需要写一个if语句，并把获取的token值保存到本地存储。

2.savedata本地存储

1.下载savedata组件命令行:

npm insatall vue-savedata

2.引入组件

import savedata from 'vue-savedata'

在src>store>index中，

3.引完之后npm run dev运行

3.v-for的使用

遍历数组/对象/字符串

v-for="item in records" :key="records.index"，records是一个数组，数组中存的对象如图二中所示，数组中是一个对象，通过v-for循环把每一个对象传到item中，通过“.”来访问对象中的属性如：

item.id表示的是records中的id

4.前端拉去后端数据

要注意接口的请求方式，以及文件的引入，通过检查中的network查看请求状态，状态为200值可以通过控制台打印数据

network(网络)

console(控制台)

图一

图二

图三

控制台打印的结果

注意：查看控制台中打印的数据一定要注意层级关系，在图三中打印的值为response.data.data.records

很容易少写一个data,这样数据就会出不来

5.页面跳转

vant组件的网址：Vant - 轻量、可靠的移动端 Vue 组件库 (ucmed.cn)