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文件
相关推荐
-
详解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-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> <
-
详解通过JSON数据使用VUE.JS
最近接到一个比较简单的项目,不准备使用数据库,打算用JSON数据就可以了.结合当前火热的VUE.JS进行数据渲染. 尽管不打算使用数据库,可是一般的操作增删查改依旧是少不了的.如果使用到数据库的话,不妨做一个API出来,那么网站.APP等都可以依照这个进行操作.在这篇文章里面,我们只是打算简单的引用而已. 下面先来看看我的JSON文件,这里是一个类别文档Category.json: { "msg": "ok", "data":[ { "
-
vue.js学习笔记:如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来.(此时项目是由webpack打包而成). 整个项目是由webpack打包而成.具体项目结构如下: 1:打包好的文件在此,http://pan.baidu.com/s/1dFCAzux 2:我们找到bulid>dev-server.js,然后打开 3:在里面加入这
-
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渲染从后台获取的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": "粥品香坊(回龙观
-
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的开发环境你得有,这里就不赘述.环境准备好,创建一个空白项目,模板自选. 二 实现过程 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
随机推荐
- 详解spring-boot actuator(监控)配置和使用
- oracle ora-00054:resource busy and acquire with nowait specified解决方法
- 基于javascript实现动态显示当前系统时间
- php 删除记录实现代码
- 正则表达式常用元字符整理小结
- DevExpress之TreeList用法实例总结
- Android笔记之:深入为从右向左语言定义复杂字串的详解
- C#实现将json转换为DataTable的方法
- powershell 将文本转换成表格的另一种可行方式
- WordPress JQuery处理沙发头像
- jquery超简单实现手风琴效果的方法
- javascript图片渐显效果代码
- js es6系列教程 - 基于new.target属性与es5改造es6的类语法
- 微信小程序 火车票查询实例讲解
- 浅析Android系统的架构以及程序项目的目录结构
- 如何利用网桥功能实现有线上网
- php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
- PHP写日志的实现方法
- Android的进度条控件描述
- 找到整型阵列中最大值和最小值的几种方法总结