iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue项目如何引入json数据
  • 703
分享到

vue项目如何引入json数据

vue引入json数据vue引入jsonvue json数据 2022-11-13 18:11:31 703人浏览 独家记忆
摘要

目录Vue项目引入JSON数据vue引入json数据,无请求,直接引入的那种vue项目引入json数据 在项目中我们在引入自己写的json数据,可以通过json-server方法将j

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里可以声明多组数据,该用谁取谁就好 
},

渲染出来页面效果如下:

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue项目如何引入json数据

本文链接: https://www.lsjlt.com/news/169655.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue项目如何引入json数据
    目录vue项目引入json数据vue引入json数据,无请求,直接引入的那种vue项目引入json数据 在项目中我们在引入自己写的json数据,可以通过json-server方法将j...
    99+
    2022-11-13
    vue引入json数据 vue引入json vue json数据
  • vue项目中如何引入cesium
    目录vue项目中引入cesium安装步骤vue项目中CDN引用cesium总结vue项目中引入cesium 市面上的前端框架中,Vue+Cesium 可谓是最佳搭档,一般做 Cesi...
    99+
    2023-05-16
    vue项目引入cesium vue引入cesium vue cesium
  • 如何在Vue项目中引入Bootstrap
    这篇文章给大家分享的是有关如何在Vue项目中引入Bootstrap的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在Vue 项目中引入Bootstrap有时在vue项目中会根据需求...
    99+
    2024-04-02
  • Vue项目中引入ECharts
    目录1.安装2.引入3.使用4.按需引入 ECharts 图表和组件 1.安装 使用如下命令通过 npm 安装 ECharts npm install echarts --sav...
    99+
    2024-04-02
  • vue项目之index.html如何引入JS文件
    目录vue index.html引入JS文件注意路径的写法index.html引入js文件失效的解决解决办法总结vue index.html引入JS文件 注意路径的写法 <!D...
    99+
    2022-12-08
    vue index.html index.html引入JS文件 vue引入JS文件
  • vue项目如何引入element ui、iview和echarts
    目录vue引入element ui、iview和echarts1.vue项目引入elementui2.vue项目中引入iview3.vue项目中引入echarts4.main.js文...
    99+
    2024-04-02
  • laravel+vue组合项目中如何引入ueditor
    这篇文章主要介绍laravel+vue组合项目中如何引入ueditor,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、下载editor这个直接去ueditor的官网下载其PHP版本...
    99+
    2024-04-02
  • vue项目如何引入公共头部底部
    目录vue项目引入公共头部底部vue项目抽离头部导航栏以及底部总结vue项目引入公共头部底部 1.在components文件下创建头部(header.vue)和底部(footer.v...
    99+
    2023-01-13
    vue引入公共头部 vue引入公共底部 vue项目引入
  • Vue项目引入PWA的步骤
    目录1. 安装依赖2. 在vue.config.js文件中配置pwa:3. 手动添加manifest.json文件到项目的public目录下,manifest.json内容如下:4....
    99+
    2024-04-02
  • Vue项目中怎么引入ECharts
    本篇内容主要讲解“Vue项目中怎么引入ECharts”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue项目中怎么引入ECharts”吧!1.安装使用如下命令通过 npm 安装 EChartsn...
    99+
    2023-07-05
  • 如何在Android项目中解析 json数据
    今天就跟大家聊聊有关如何在Android项目中解析 json数据,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。 Android json数据解析详解移动开发经常要与服务器数...
    99+
    2023-05-31
    android json roi
  • vue如何引用json
    本篇内容介绍了“vue如何引用json”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!首先,要明确一点,JSON本身并不是一种数据格式,它是一...
    99+
    2023-07-06
  • vue项目中引入js-base64方式
    目录vue引入js-base641.安装md5依赖2.在需要使用md5的组件中使用直接使用md5使用Base64编码解码1.下载包2.在你需要解码(编码)的文件中引用3.使用方法vu...
    99+
    2024-04-02
  • vue项目如何引用组建库
    Vue是当今互联网开发中非常流行的一套前端框架,其组件化的开发方式能够有效地提高项目的可维护性和开发效率。在Vue项目开发中,我们经常会使用一些第三方的组件库来快速构建各种交互和页面元素。本文将介绍如何在Vue项目中引用组件库。一、常用的组...
    99+
    2023-05-20
  • vue项目中使用require.context引入组件
    目录背景require.context 是什么?require.context 的基本用法require.content 的应用场景背景 我们在vue项目中,我们可能或有很多的组件需...
    99+
    2022-11-13
    vue require.context引入 vue require.context
  • vue项目中如何实现element-ui组件按需引入
    目录element-ui组件按需引入按需引入完整引入vue项目搭建 + 引入element-ui初始化单页系统ElementUI整合项目element-ui组件按需引入 按需引入 1...
    99+
    2024-04-02
  • vue-cli如何快速构建项目以及引入bootstrap、jq
    这篇文章主要介绍vue-cli如何快速构建项目以及引入bootstrap、jq,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!vue-cli脚手架工具快速构建项目架构:。。首先默认了有...
    99+
    2024-04-02
  • vue项目中实现全局引入jquery
    目录vue项目全局引入jqueryvue引入jquery遇到的坑引入使用jquery遇到的坑解决办法vue项目全局引入jquery 说明:在index.html直接用<scri...
    99+
    2024-04-02
  • Android项目中如何导入数据库
    Android项目中如何导入数据库?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。方法如下我们都知道 Android的 数据库默认是放在data\data\pac...
    99+
    2023-05-31
    android roi 目中
  • java项目如何引入其他jar包
    目录步骤 1 lib目录步骤 2 修改编译脚本步骤 3 编译cstmgr项目步骤 4 新的运行方式步骤 5 不妨把编译和打包放一起步骤 6 总结tools.jar是刚打出来的工具包,...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作