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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
js获取域名的方法
Jan 27 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 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 的 __FILE__ 常量
2007/01/15 PHP
php 生成文字png图片的代码
2011/04/17 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php for 循环使用的简单实例
2016/06/02 PHP
实现PHP搜索加分页
2016/10/12 PHP
php中引用符号(&)的使用详细介绍
2016/12/06 PHP
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
django静态文件加载的方法
2018/05/20 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Python列表对象实现原理详解
2019/07/01 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python连接mongodb集群方法详解
2020/02/13 Python
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
JSF的标签库有哪些
2012/04/27 面试题
老干部工作先进事迹
2014/08/17 职场文书
社区护士演讲稿
2014/08/27 职场文书
2014年资料员工作总结
2014/11/18 职场文书
2014年底个人工作总结
2015/03/10 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers