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 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
在JavaScript中实现链式调用的实现
Dec 24 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
ThinkPHP模板中数组循环实例
2014/10/30 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Python如何实现强制数据类型转换
2019/11/22 Python
python中yield的用法详解
2021/01/13 Python
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
国际领先的学术出版商:Springer
2017/01/11 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
园长自我鉴定
2013/10/06 职场文书
护士自荐信
2013/10/25 职场文书
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
预备党员政审材料
2014/02/04 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
Python max函数中key的用法及原理解析
2021/06/26 Python