Vue2.5通过json文件读取数据的方法

1.准备工作

1.1 webpack.dev.conf.js

在 const portfinder = require(‘portfinder') 的下面加上以下代码

const express = require('express')
const app = express()
var appData = require('../data.json')//加载本地数据文件的路径
var leftMenu = appData.leftMenu //获取对应的本地数据
var 数据名称 = appData.选择项
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

找到devServer，在里面加入一下代码

before(app) {
 app.get('/api/leftmenu', (req, res) => {
  res.json({
   errno: 0,
   data: leftMenu
  })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
 }),
 app.get('/api/数据', (req, res) => {
  res.json({
   errno: 0,
   data: 数据（与上面数据名称对应）
  })
 })
}

2.在使用的组件里

created(){
  this.$http.get('api/leftmenu').then((response) => {
   console.log(response)
   this.leftMenu = response.body.data  //数据位置
  })
}
data(){
  return{
    leftMenu:[];
  }
}

总结

以上所述是小编给大家介绍的Vue2.5通过json文件读取数据的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）
  • 详解vue渲染从后台获取的json数据
  • 详解vue-cli 脚手架项目-package.json
  • 详解通过JSON数据使用VUE.JS
  • vue-resourse将json数据输出实例
  • 简单的vue-resourse获取json并应用到模板示例
  • vue.js学习笔记:如何加载本地json文件
赞 (0)

相关推荐

  • vue-resourse将json数据输出实例

    vue-resourse将json数据输出实例

    本文主要讲v-resourse 获取json数据并传递到DOM中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.demo目录,不要管index.html和index.js 2.html页面 vue-resourse-josn1.1.html展示json中的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

  • 详解vue-cli 脚手架项目-package.json

    使用vue-cli脚手架新建的项目中,含有package.json. package.json是npm的配置文件,里面设定了脚本以及项目依赖的库. npm run dev 这样的命令就写在package.json里. { "name": "vue-manage", // 项目名称 "version": "1.0.0", // 版本 "description": "Reimbursement Man

  • 详解vue渲染从后台获取的json数据

    公司项目原来用的框架扩展性太差,准备更新前台页面然后用vue渲染dom 然后我写了一个demo $(document).ready(function(){ $.ajax({ type:"post", url:"", async:true, data:{ }, dataType:"json", success:function(data){ var a=new Vue({ el:"#detail-info-id", data:

  • vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）

    最近使用vue-cli做了一个小小的项目,在项目中需要使用vue-resource来与后台进行数据交互,所以我使用了本地json数据来模仿后台获取数据的流程. 至于vue-resource的安装和json的准备我就不赘述了... 下面是操作方法: 1.首先介绍一下项目的结构:将本地的json文件放在最外层和index.html在一起,姑且叫做data.json. 我的json数据文件大概如此: { "seller": { "name": "粥品香坊(回龙观

  • vue.js学习笔记:如何加载本地json文件

    vue.js学习笔记:如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来.(此时项目是由webpack打包而成). 整个项目是由webpack打包而成.具体项目结构如下: 1:打包好的文件在此,http://pan.baidu.com/s/1dFCAzux 2:我们找到bulid>dev-server.js,然后打开 3:在里面加入这

  • 详解通过JSON数据使用VUE.JS

    最近接到一个比较简单的项目,不准备使用数据库,打算用JSON数据就可以了.结合当前火热的VUE.JS进行数据渲染. 尽管不打算使用数据库,可是一般的操作增删查改依旧是少不了的.如果使用到数据库的话,不妨做一个API出来,那么网站.APP等都可以依照这个进行操作.在这篇文章里面,我们只是打算简单的引用而已. 下面先来看看我的JSON文件,这里是一个类别文档Category.json: { "msg": "ok", "data":[ { "

  • 简单的vue-resourse获取json并应用到模板示例

    不说废话上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue js</title> <style> .completed { text-decoration: line-through; } .something { color: red; } </style> <

  • Vue2.5通过json文件读取数据的方法

    1.准备工作 1.1 webpack.dev.conf.js 在 const portfinder = require('portfinder') 的下面加上以下代码 const express = require('express') const app = express() var appData = require('../data.json')//加载本地数据文件的路径 var leftMenu = appData.leftMenu //获取对应的本地数据 var 数据名称 = app

  • springboot openfeign从JSON文件读取数据问题

    对openfeign不清楚的同学可以参考下我的这篇文章:springboot~openfeign从此和httpClient说再见 对于openfeign来说,帮助我们解决了服务端调用服务端的问题,你不需要关心服务端的URI,只需要知道它在eureka里的服务名称即可,同时你与服务端确定了服务方法的参数和返回值之后,我们可以在单元测试时mock这些服务端方法即可,真正做到了单元测试,而不需要与外界资源进行交互. 今天主要说一下在openfeign里读取JSON文件的问题,我们将测试所需要的数据存储

  • jQuery访问json文件中数据的方法示例

    本文实例讲述了jQuery访问json文件中数据的方法.分享给大家供大家参考,具体如下: 有时候我们可能需要用到json文件存储数据,然后通过前台语言直接进行访问. 首先是json文件: { "管道": [ { "ElementId": "标识号", "GISID": "GISID", "Label": "编号", "StartNodeID":&q

  • ionic3+Angular4实现接口请求及本地json文件读取示例

    ionic3+Angular4实现接口请求及本地json文件读取示例

    一 准备工作 首先,ionic3+Angular4的开发环境你得有,这里就不赘述.环境准备好,创建一个空白项目,模板自选. 二 实现过程 1 新建json文件和service service记得在app.module.ts中引用 json和service 2 json文件格式 格式类似这样,根据实际需求决定. [ { "id":"1", "name":"xiehan", "age":"24&quo

  • 利用jquery如何从json中读取数据追加到html中

    JSON 格式 json 是 Ajax 中使用频率最高的数据格式,在浏览器和服务器中之间的通讯可离不开它. JSON 格式说明 需要特别注意的是,在 JSON 中的属性名是需要使用引号引起来的. 1.下载安装jquery 可通过下面的方法引入在线版本的js: <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 参考安装文档://www.jb51.net/zt

  • Java读取本地json文件及相应处理方法

    如下所示: //读取json文件地址 /* String path = getClass().getClassLoader().getResource("menu.json").toString(); path = path.replace("\\", "/"); if (path.contains(":")) { path = path.replace("file:/", ""); }

  • Python3实现将文件归档到zip文件及从zip文件中读取数据的方法

    本文实例讲述了Python3实现将文件归档到zip文件及从zip文件中读取数据的方法.分享给大家供大家参考.具体实现方法如下: ''''' Created on Dec 24, 2012 将文件归档到zip文件,并从zip文件中读取数据 @author: liury_lab ''' # 压缩成zip文件 from zipfile import * #@UnusedWildImport import os my_dir = 'd:/中华十大名帖/' myzip = ZipFile('d:/中华十大

  • php从csv文件读取数据并输出到网页的方法

    本文实例讲述了php从csv文件读取数据并输出到网页的方法.分享给大家供大家参考.具体实现方法如下: <?php $fp = fopen('sample.csv','r') or die("can't open file"); print "<table>\n"; while($csv_line = fgetcsv($fp)) { print '<tr>'; for ($i = 0, $j = count($csv_line); $i

  • 从Java的jar文件中读取数据的方法

    本文实例讲述了从Java的jar文件中读取数据的方法.分享给大家供大家参考.具体如下: Java 档案 (Java Archive, JAR) 文件是基于 Java 技术的打包方案.它们允许开发人员把所有相关的内容 (.class.图片.声音和支持文件等) 打包到一个单一的文件中.JAR 文件格式支持压缩.身份验证和版本,以及许多其它特性. 从 JAR 文件中得到它所包含的文件内容是件棘手的事情,但也不是不可以做到.这篇技巧就将告诉你如何从 JAR 文件中取得一个文件.我们会先取得这个 JAR

  • asp.net实现从Txt文件读取数据到数据视图的方法

    本文实例讲述了asp.net实现从Txt文件读取数据到数据视图的方法.分享给大家供大家参考,具体如下: #region 从Txt文件读取数据到数据视图 /// 从Txt文件读取数据到数据视图 /// </summary> /// <param name="strExcelPath">文件路径</param> /// <returns>返回一个数据视图</returns> public static DataView GetDa

随机推荐