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 相关文章推荐
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
原生JS实现相邻月份日历
Oct 13 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中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
python实现批量下载新浪博客的方法
2015/06/15 Python
Python数据类型学习笔记
2016/01/13 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python实现简单的语音识别系统
2017/12/13 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
python实现猜拳游戏
2020/03/04 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python