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示例收集
Nov 05 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 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
windows下安装php的memcache模块的方法
2015/04/07 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
php提高网站效率的技巧
2015/09/29 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
详解webpack2+React 实例demo
2017/09/11 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
python实现下载指定网址所有图片的方法
2015/08/08 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
Python如何实现爬取B站视频
2020/05/20 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
技校毕业生自荐信
2014/06/03 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
python tkinter模块的简单使用
2021/04/07 Python
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
python实现三次密码验证的示例
2021/04/29 Python
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技