高校档案网站建设,齐齐哈尔网站建设公司,红色基调网站,网络宣传网站建设或许有些人会比较喜欢在mounted里去请求数据 但在Nuxt项目中是绝对不能这样操作的 因为 mounted的特性也说的比较明白了 当页面挂载完之后执行 但显然 seo只读你页面挂载的内容 如果你在这请求 那么对不起 你请求回来的数据渲染到界面上seo爬虫是看不到的
Nuxt项目请求数据 可…或许有些人会比较喜欢在mounted里去请求数据 但在Nuxt项目中是绝对不能这样操作的 因为 mounted的特性也说的比较明白了 当页面挂载完之后执行 但显然 seo只读你页面挂载的内容 如果你在这请求 那么对不起 你请求回来的数据渲染到界面上seo爬虫是看不到的
Nuxt项目请求数据 可以在组件的 asyncData 生命周期中执行 这里 我们先引入axios
如果你的项目直接选了要 axios 那么就不需要引入了 否则 就像我一样 在项目终端执行
npm i axios0.21.0这里一定要注意 axios版本不能太高 我这里 启动一下自己java的项目 如果小伙伴没有他接口条件 可以直接访问 https://api.erp.yitiaoma.com/api/admin/Auth/GetPassWordEncryptKey get请求 不需要参数
然后 我这里直接实验 访问自己的接口 可以看到 放回成功的
我们打开 pages 下的 index.vue 编写代码如下
templatedivulli年后/li/ul/div
/templatescript
import axios from axios;
export default {name: IndexPage,data() {return {datalist: []}},asyncData(){return axios({url:http://localhost:8080/pro-api/user/,headers:{}}).then(res{console.log(res.data);return {datalist: res.data}})}
}
/script运行项目 然后访问项目 我们请求的数据就被展示在这啦 但一定要注意是 res.data res这一层 还有其他东西 然后我们这里这个datalist的意思将他复制给 data中的 datalist对象 然后我们来循环遍历这些元素 index.vue 界面模板更改如下
templatedivulliv-for (itme,indx) in datalist.data:key indx{{ itme.name }}/li/ul/div
/template运行项目 这样 我们的数据就上去了 然后 我们右键查看源码 可以看到 我这些东西也是直接连载源码上了 爬虫也能爬到
