vue项目如何引入json数据

目录
  • vue项目引入json数据
  • 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里可以声明多组数据,该用谁取谁就好
},

渲染出来页面效果如下:

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue如何加载本地json数据

    vue如何加载本地json数据

    目录 vue加载本地json数据 json数据存放在除static静态文件夹中 json数据存放在static静态文件夹中 读取本地json文件并分页显示 功能实现 student.json数据如下 h5代码如下 css样式 js代码 运行效果 vue加载本地json数据 json数据存放在除static静态文件夹中 这种方法暂时还没出来,若有大神知道,可否能指导一二 json数据存放在static静态文件夹中 1.编写好json 数据,按照这个格式编写json数据 2.安装axios 安装方法

  • vue引用json文件的方法小结

    vue引用json文件的方法小结

    相信大家都有被后端数据支配过 废话不多说 直接上代码 1.解决怎么从控制台把数据 移到json文件中 直接右击复制值 var getData = require("./taifeng.json"); // 直接引入json文件 console.log(getData); vue中引用Json文件 我们用import引用文件的时候,被引用的文件都会用export暴漏,比如js,而有一些文件不需要暴漏,如Json.img(图片).css; import 引用Json文件 import aa

  • vue实现引入本地json的方法分析

    本文实例讲述了vue实现引入本地json的方法.分享给大家供大家参考,具体如下: 当前需要使用的组件: import data from './test.json' export default{ data(){ return{ userinform: '' } }, mounted(){ this.userinform = data } } test.json就是普通json格式就可以了!然后完美解决! 后台服务器请求json方式: this.$http.get('url').then(res

  • vue使用json最简单的两种方式分享

    vue使用json最简单的两种方式分享

    目录 使用json最简单方式 第一种 第二种 vue使用json假数据 第一种json数据写在js文件中直接引入使用 第二种使用json-server ./xxx.json 使用 生成请求接口 使用json最简单方式 第一种 首先我项目是在 webpack 下搭建的vue项目 在public文件夹下创建jsonTest.json json 格式的数据如下: {     "innerList": [         {"attr1":"内部数据1"

  • vue项目如何引入json数据

    目录 vue项目引入json数据 vue引入json数据,无请求,直接引入的那种 vue项目引入json数据 在项目中我们在引入自己写的json数据,可以通过json-server方法将json文件转化为一个端口号引入!但是使用该方法前需要导入node的一个模块! json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域.jsonp.路由订制.数据快照保存等功能的 web 服务器. 然后在json文件目录下,运行 json-server --watc

  • 在Vue项目中引入腾讯验证码服务的教程

    什么是腾讯验证码?它长这个样子--:point_down: 最近公司项目要求引入腾讯云验证,要求是这样的: 为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码 ,刚开始的我听的一脸蒙蔽,网上搜索也没有多少相关的文章,然而现在我接通啦,发现是很简单点事(或许就是因为太简单了所以没有人写2333-) 不多BB,开始吧! 先看文档的接口调用流程: (文档地址: cloud.tencent.com/document/pr- ) 总共分成几

  • vue使用vue-json-viewer展示JSON数据的详细步骤

    目录 1.下载 2.引入并全局注册 3.组件内使用 4.一点使用技巧.心得 5.修改编辑的样式,使其符合项目需求 总结 1.下载 npm下载: // Vue2 npm install vue-json-viewer@2 --save // Vue3 npm install vue-json-viewer@3 --save yarn下载: // Vue2 yarn add vue-json-viewer@2 // Vue3 yarn add vue-json-viewer@3 2.引入并全局注册

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue配置请求本地json数据的方法

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下: 在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 const express = require('express') const app = express() const appData = require('../data.json') // 加载本地json文件 const seller = appDa

  • 在vue项目中引入vue-beauty操作方法

    vue-beauty有丰富的vue组件库,使用vue-beauty方便项目的开发,下面介绍在vue项目中引入vue-beauty. 1.vue项目初始化 npm install --global vue-cl:全局安装vue脚手架vue init webpack my-projec:初始化cd my-project:进入目录npm install:安装依赖 2.安装vue-beauty 3.查看配置文件package.json,是否有vue-beauty组件的版本号 4.在main.js中引入

  • Vue项目中引入 ECharts

    Vue项目中引入 ECharts

    目录 1.安装 2.引入 3.使用 4.按需引入 ECharts 图表和组件 1.安装 使用如下命令通过 npm 安装 ECharts npm install echarts --save 2.引入 安装完成以后,可以将echarts全部引入,这样一来,我们可以在该页面使用echarts所有组件:引入代码如下: import * as echarts from "echarts"; 3.使用 引入完毕之后,我们可通过echarts提供的接口画出对应的图表,使用方法如下: <tem

  • Vue项目中引入ESLint校验代码避免代码错误

    Vue项目中引入ESLint校验代码避免代码错误

    目录 1 ESLint 是什么 2 在 Vue 项目中引入 ESLint 2.1 引入 ESLint 2.2 ESLint 配置 2.3 执行 ESLint 代码检查 2.4 自动修复 ESLint 问题 3 配置 husky 和 PR 门禁 3.1 配置 husky 门禁 3.2 配置 PR 门禁 4 常见的 ESLint 问题及修复案例 4.1 案例1: 4.2 案例2: 4.3 案例3: 4.4 案例4: 5 感谢 1 ESLint 是什么 ESLint 是一个插件式的 JavaScrip

  • vue项目如何引入element ui、iview和echarts

    vue项目如何引入element ui、iview和echarts

    目录 vue引入element ui.iview和echarts 1.vue项目引入elementui 2.vue项目中引入iview 3.vue项目中引入echarts 4.main.js文件代码截图 5.echarts在引入后 6.引入之后就可以使用他们的组件了 iview与elementui对比 表格 风格 按需引入 表单验证 下拉选择器 vue引入element ui.iview和echarts 记性不好,每次引入都要重新搜一遍,今天把几个自己整理一下.全部引入,没搞按需引入. 1.vu

  • 详解从新建vue项目到引入组件Element的方法

    详解从新建vue项目到引入组件Element的方法

    本文介绍了从新建vue项目到引入组件Element以及Error when rendering component报错解决,分享给大家 一.新建项目 1.打开cmd,运行:vue init webpack Vue-Demo 2.运行:cd Vue-Demo进入这一级 3.运行:npm install 4.运行:npm run dev 如果浏览器打开之后,没有加载出页面,说明本地的8080 端口被占用,需要修改一下配置文件 config/index.js 解释:1.将 build 的路径前缀修改为

随机推荐