vue项目如何引入json数据
更新时间：2022年10月19日 08:58:08 作者：followly
这篇文章主要介绍了vue项目如何引入json数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue项目引入json数据
在项目中我们在引入自己写的json数据，可以通过json-server方法将json文件转化为一个端口号引入！但是使用该方法前需要导入node的一个模块！
json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。
然后在json文件目录下，运行 json-server --watch --port 3001 data.json指令
通过启动json-server服务并侦听data.json，就可以将data.json文件托管成一个 web 服务，此时data.json就充当了数据库服务器的作用
然后在组件中就可以直接使用这个端口啦！
vue引入json数据,无请求,直接引入的那种
vue项目经常会造一些假数据,一般我都是直接在.vue页面里直接写,今天来看一下外部引入json数据吧
购物车页面(cart.vue)的假数据我放在了cartGoods.js里面
cartGoods.js代码如下：
const goodsJson = [
{"id":1,"title":"苹果","price":2.2},
{"id":2,"title":"香蕉","price":3.2},
{"id":3,"title":"橘子","price":1.4},
{"id":4,"title":"芒果","price":5.6},
{"id":5,"title":"梨子","price":3.3},
{"id":6,"title":"葡萄","price":3.6}
]
const addrList = [
{
id:1,
addr:"上海市浦东新区鹏飞路5103弄7号1102"
},
{
id:2,
addr:"上海市浦东新区高青路2345弄20号101"
}
]
export default {
goodsJson,
addrList
}
引入方式没啥差别
// 引入
import goodsData from '../../static/mockJson/cartGoods';
// 应用
created(){
console.log(goodsData) //打印出全部
this.goodsList = goodsData.goodsJson // 一个js里可以声明多组数据,该用谁取谁就好
},
渲染出来页面效果如下:
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Ant Design的Table组件去除“取消排序”选项操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要为大家详细介绍了vue实现鼠标滑动展示tab栏切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
国密即国家密码局认定的国产密码算法,主要有SM1,SM2,SM3,SM4,下面这篇文章主要给大家介绍了关于前端vue+element使用SM4国密加密解密的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了jquery和vue对比，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue-router的两种模式的区别，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要为大家详细介绍了使用Vue实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了vue中radio根据动态值绑定checked无效的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了如何用vue设计一个日历表，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要为大家详细介绍了vue实现放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了前端渐进式框架VUE的相关资料，文中讲解的非常细致，帮助大家开始学习VUE，感兴趣的朋友可以了解下2020-07-07
最新评论