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类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
Node.js API详解之 os模块用法实例分析
May 06 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
JS实现百度搜索框
2021/02/25 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
Python time库基本使用方法分析
2019/12/13 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
毕业生自荐信
2013/12/14 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
保送生自荐信范文
2015/03/26 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby