vue加载服务器json文件,Vue加载json文件的方法简单示例

本文实例讲述了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

})

}

二、然后重新 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('数据加载失败')

})

PS：这里再为大家推荐几款相关的json在线工具供大家参考：

希望本文所述对大家vue.js程序设计有所帮助。

vue加载服务器json文件,Vue加载json文件的方法简单示例相关推荐

vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
html引入本地css样式无效,vue在index.html里面引入css文件样式加载失败
问题描述我在vue的index.html里面引入本地的第三方CSS文件,浏览器会出现一个提示,同时样式也没有生效问题出现的环境背景及自己尝试过哪些方法网上搜索了一下说是什么拦截器的问题,但没有找 ...
vue 判断页面加载完成_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
vue导入静态js_如何在vue js中加载静态图像
我有一个组件,它接受一个prop字符串,即一个url.它可以是远程图片,也可以是资产文件夹中的本地静态资产. 目录结构: -assets/ - logo.png -app.vue -component ...
vue 加载太慢_Vue首页加载过慢解决方案
一.什么导致了首页初步加载过慢:app.js文件体积过大二.解决方法: 1.Vue-router懒加载 vue-router懒加载可以解决首次加载资源过多导致的速度缓慢问题:vue-router支持 ...
vue中写svg组件svg图片加载不出来
vue中写svg组件svg图片加载不出来结构首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader npm install svg-sprite-loader - ...
vue进阶测试——生命周期和异步加载的微妙关系
本文继续探索vue中的坑,关于vue的生命周期和异步加载相关处理的文章还比较少,可能是自己没有用谷歌而用百度的缘故吧.关于异步操作和生命周期,会牵扯到浏览器的单线程处理机制,以及ES中的promise ...
Vue项目嵌入天地图专题一：加载天地图
公司近期的项目有用到天地图,之前接触过百度地图没有接触过天地图.所以根据项目的要求写一个专题来记录下 1.我们用的是南京天地图,首先是引入天地图所需的各种文件,因为我们的项目是vue的项目所以,引入的 ...
解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题
解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题参考文章: (1)解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题 (2)https://www.cnblogs.com/jiah ...

vue加载服务器json文件,Vue加载json文件的方法简单示例

vue加载服务器json文件,Vue加载json文件的方法简单示例相关推荐

最新文章

热门文章