Vue.js实现本地json文件动态加载并遍历展示

需积分: 46 14 下载量 167 浏览量 更新于2023-05-25 收藏 249KB DOCX 举报
在本篇文档中,作者探讨了如何将本地JSON文件加载到Vue页面中,以展示其数据。主要涉及以下步骤和技术: 1. **Vue.js基础设置**: - 使用Vue CLI(Vue脚手架)初始化一个新的项目,通过`vue init webpack`命令选择适合的模板并安装依赖。 - 安装`express`模块,用于创建一个API服务器,以便从后端提供JSON数据。 2. **本地JSON文件管理**: - 创建一个名为`data.json`的JSON文件,存储预定义的数据集。这可以是任何结构化的数据,如数组或对象,用来演示数据遍历。 3. **Webpack配置**: - 在`webpack.dev.conf.js`文件中,添加Express路由,使API服务器监听特定端口(如8080),并在请求`/api/data`时返回`appData`中的内容。 - 通过`app.get()`方法,设置服务器在接收到GET请求时返回JSON数据。 4. **Vue组件修改**: - 在`src/component/HelloWorld.vue`中,移除不必要的链接,并添加一个指向`http://localhost:8080/api/data`的链接,目标属性设为 `_blank`,实现点击后新窗口打开并显示JSON数据。 5. **测试与验证**: - 运行项目,通过访问链接`http://localhost:8080/api/data`,Vue应用会自动从API获取JSON数据并遍历显示,验证数据是否正确加载。 总结来说,本文介绍了在Vue.js环境中,通过构建一个简单的API服务器并与Vue页面交互,实现本地JSON文件数据的动态加载和展示。这是一个基础的前后端分离示例,展示了Vue如何利用网络请求获取数据,并在模板中渲染数据给用户。理解并掌握这种数据传递方式对于处理更复杂的前端开发非常有帮助。
2020-04-16 上传