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 相关文章推荐
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
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自动注册登录验证机制实现代码
2011/12/20 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
python Crypto模块的安装与使用方法
2017/12/21 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
深入了解Python 变量作用域
2020/07/24 Python
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
关于元旦的广播稿
2014/02/16 职场文书
检查接待方案
2014/02/27 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
工作会议通知
2015/04/15 职场文书
欢送会主持词
2015/07/01 职场文书
运动会广播稿200字
2015/08/19 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python