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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
Sep 28 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
用JS实现选项卡
Mar 23 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
967 个函式
2006/10/09 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
javascript数组去重小结
2016/03/07 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
python的Template使用指南
2014/09/11 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python随机函数random()使用方法小结
2018/04/29 Python
python如何求100以内的素数
2020/05/27 Python
python实现最短路径的实例方法
2020/07/19 Python
python 生成器需注意的小问题
2020/09/29 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
给物业的表扬信
2014/01/21 职场文书
决心书范文
2014/03/11 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
承诺书格式
2014/06/03 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
Python代码风格与编程习惯重要吗?
2021/06/03 Python