Vue加载json文件的方法简单示例

本文实例讲述了Vue加载json文件的方法。分享给大家供大家参考，具体如下：

一、在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版)：

var appData = require('../address.json'); // 引入address.json文件
var apiRoutes = express.Router();
apiRoutes.get('/address',function (req,res) {
 res.json({
  errno:0,
  data:appData
 });
});
app.use('/api',apiRoutes);  // 访问地址为： /api/address

新版代码如下：

在build/webpack.dev.conf.js文件里添加如下代码：

const express = require('express')
const app = express()
var appData = require('../address.json')
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

// 在devServer对象里添加如下代码：
before(app) {
   app.get('/api/address', (req, res) => {
    res.json({
     errno: 0,
     data: appData
    })
   })
}

二、然后重新 npm run dev 一下

三、这时候在浏览器输入 http://localhost:8080/api/address 便可看到json文件的数据了。

在组件里可以用axios或者其它方式请求获取数据，请求URL为：'/api/address'，例如用axios的话：

（1）、下载axios，如果没有的话

npm install --save axios vue-axios

（2）、在main.js里引入

import axios from 'axios'
Vue.prototype.$http = axios

（3）、开始请求

this.$http.get('/api/address').then(response => {
   console.log(response)
}, response => {
   console.log('数据加载失败')
})

PS：这里再为大家推荐几款相关的json在线工具供大家参考：

在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在线格式化工具：
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具：
http://tools.jb51.net/code/json_yasuo_trans

希望本文所述对大家vue.js程序设计有所帮助。

赞 (0)

相关推荐

  • 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

  • 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 模拟后台数据（加载本地json文件）调试

    本文介绍了vue 模拟后台数据(加载本地json文件)调试,分享给大家,也给自己留个笔记 首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages": 0, "TotalItems": 0, "ItemsPerPage": 100, "Items":[ {"DEVICEID":&quo

  • 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:在里面加入这

  • 详解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中使用express+fetch获取本地json文件

    详解vue中使用express+fetch获取本地json文件

    自己在做个vue小demo的时候,想模拟从服务器获取json数据的过程,一开始的想法是使用fetch直接获取本地的json文件,无论是install了json-loader还是把json文件放在index.html的目录下或webpck.config.js里output的目录下,但是fetch一直报找不到文件.然后决定用fetch向express服务器发送请求,由服务器返回json数据. express服务器 先写一个简单的express服务器,只有一个接口,起到示例作用就行了.back.js如

  • 简单的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.0中Jsonp的使用方法

    VUE2.0中Jsonp的使用方法

    本文主要介绍的是在VUE2.0Jsonp的使用方法,通过github引入jsonp和promise封装,实现跨域获取数据. 1.JSONP的用途和原理 使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域.确切地说,AJAX请求由于同源影响,是不允许进行跨域请求的,而Script标签src属性中的链接却可以访问跨域的js脚本,利用这一特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的JS代码,在src属性中进行调用,实现跨域. 2.JSONP的

  • 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加载json文件的方法简单示例

    Vue加载json文件的方法简单示例

    本文实例讲述了Vue加载json文件的方法.分享给大家供大家参考,具体如下: 一.在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版): var appData = require('../address.json'); // 引入address.json文件 var apiRoutes = express.Router(); apiRoutes.get('/address',function (req,res) { res.jso

  • javascript实现加载xml文件的方法

    本文实例讲述了javascript加载xml文件的方法.分享给大家供大家参考,具体如下: //需要读取的xml文件 var uRl = "jsReadXml.xml"; var xmlDoc; //初始化,给上述定义变量赋值 // function showcurcity(){ if(window.ActiveXObject) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="fal

  • jquery及js实现动态加载js文件的方法

    本文实例讲述了jquery及js实现动态加载js文件的方法.分享给大家供大家参考,具体如下: 问题: 如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 解决方法: 1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function(){ //加载test.js,成功后,并执

  • 异步安全加载javascript文件的方法

    本文实例讲述了异步安全加载javascript文件的方法.分享给大家供大家参考.具体如下: 使用方法: (function() { __safeLoadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", function() { alert(jQuery); }); })(); JavaScript实现代码: window.__safeLoadScript = function(src, c

  • jQuery实现动态加载(按需加载)javascript文件的方法分析

    本文实例讲述了jQuery实现动态加载(按需加载)javascript文件的方法.分享给大家供大家参考,具体如下: 为了提高网页程序的性能,在很多情况下javascript 是按需加载,而不是全部写在 <head>里面.利用jQuery可以很方便的实现按需加载js. $("#load").click(function(){ $.getScript('helloworld.js', function() { $("#content").html('js 加

  • 详解Django模版中加载静态文件配置方法

    1.settings.INSTALLED_APPS下添加:django.contrib.staticfiles 2.settings.py下添加:STATIC_URL = '/static/' 3. (1)在APP下新建文件夹static,然后在这个static文件夹下创建一个当前APP的名字的文件夹,再把静态文件放到这个文件夹下:(类似于Templates配置) 在模板中这样调用: {% load static %} <img src="{% static 'front/logo.jpg

  • Python中使用json.load()和json.loads()加载json数据的方法实例

    目录 前言 预备知识: 使用方法 总结 前言 最近在python里面用json读取json文件,可是老是不成功,特此记录一下. 预备知识: def load(fp, cls=None, object_hook=None, parse_float=None, parse_int=None, parse_constant=None, object_pairs_hook=None, **kw): """Deserialize ``fp`` (a ``.read()``-suppor

  • Spring加载properties文件的方法

    Spring加载properties文件的方法

    在项目中如果有些参数经常需要修改,或者后期可能需要修改,那我们最好把这些参数放到properties文件中,源代码中读取properties里面的配置,这样后期只需要改动properties文件即可,不需要修改源代码,这样更加方便.在Spring中也可以这么做,而且Spring有两种加载properties文件的方式:基于xml方式和基于注解方式. 下面分别讨论下这两种方式. 1. 通过xml方式加载properties文件         我们以Spring实例化dataSource为例,我们

  • vue加载天气组件使用方法详解

    vue加载天气组件使用方法详解

    本文实例为大家分享了vue加载天气组件的使用方法,供大家参考,具体内容如下 首先我们进入中国天气网生成一段代码 根据需要设置天气样式 复制并修改生成的这段代码到vue中 将script引入 修改为vue的动态引入方法 <template> <div id="weater"> <div id="weather-view-he" ref="weather"></div> <remote-scrip

  • django模板加载静态文件的方法步骤

    加载静态文件 在一个网页中,不仅仅只有一个 html 骨架,还需要 css 样式文件, js 执行文件以及一些图片等.因此在 DTL 中加载静态文件是一个必须要解决的问题.在 DTL 中,使用 static 标签来加载静态文件.要使用 static 标签,首先需要 {% load static %} .加载静态文件的步骤如下: 首先确保 django.contrib.staticfiles 已经添加到 settings.INSTALLED_APPS 中. 确保在 settings.py 中设置了

随机推荐