nuxt实现服务端渲染查看源代码显示动态接口数据
使用nuxt实现查看源代码显示动态数据:
/** 通过nuxt框架实现服务端渲染 **/
1>下载脚手架工具:
github地址: https://github.com/nuxt/create-nuxt-app
2>下载gitHub文件之后根据文档创建自己项目:
文档地址 https://zh.nuxtjs.org/guide/installation/
3>异步数据请求只能在 async asyncData方法中,才能在源代码中查看到源码:
案例
// async asyncData(context, callback) {
// var datas = {
// pageRequest: {
// limit: 10,
// page: 1
// }
// };
// axios.post(config.getalUrl, datas).then(res => {
// // console.log("callback", res.data.data.content);
// callback(null, { borderList1: res.data.data.content });
// });
// },
菜鸟老五: 你们真懒,接口api跟接入代码都发出来了太久的东西了,回头我找找弄个压缩包传一下
菜鸟老五: img结合background-image可以实现预加载,也可以用目前一些UI组件库的图片懒加载
菜鸟老五: 晚点我传上去
菜鸟老五: 给个进度条就好了,类似游戏进度
菜鸟老五: 也可以放在本地