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


Posted in Javascript onJanuary 28, 2019

本文实例讲述了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
    })
   })
}

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

二、然后重新 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('数据加载失败')
})
Javascript 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
Vue项目安装插件并保存
Jan 28 #Javascript
vue 左滑删除功能的示例代码
Jan 28 #Javascript
详解Next.js页面渲染的优化方案
Jan 27 #Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 #Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 #jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 #jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 #jQuery
You might like
由php if 想到的些问题
2008/03/22 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
Python下载懒人图库JavaScript特效
2015/05/28 Python
Django中Forms的使用代码解析
2018/02/10 Python
python 编码规范整理
2018/05/05 Python
利用python循环创建多个文件的方法
2018/10/25 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
客户代表自我评价范例
2013/09/24 职场文书
班主任新年寄语
2014/04/04 职场文书
学校课外活动总结
2014/05/08 职场文书
环保标语大全
2014/06/12 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
单位综合评价意见
2015/06/05 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL