vue配置请求本地json数据的方法

本篇文章主要介绍了vue配置请求本地json数据的方法，分享给大家，具体如下：

在build文件夹下找到webpack.dev.conf.js文件，在const portfinder = require('portfinder')后添加

const express = require('express')
const app = express()
const appData = require('../data.json') // 加载本地json文件
const seller = appData.seller // 获取对应本地数据
const goods = appData.goods
const ratings = appData.ratings
const apiRoutes = express.Router()
app.use('/api',apiRoutes)

然后找到devServer，插入以下代码：

 //然后找到devSeerver，在里面添加
  before (app) {
   app.get('/api/seller',(reg,res) => {
    res.json({
     errno: 0,
     data: seller
    }) // 接口返回json数据，上面配置的数据seller就复制给data请求后调用
   }),
   app.get('/api/goods',(reg,res) => {
    res.json({
     errno: 0,
     data: goods
    }) // 接口返回json数据，上面配置的数据goods就复制给data请求后调用
   }),
   app.get('/api/ratings',(reg,res) => {
    res.json({
     errno: 0,
     data: ratings
    }) // 接口返回json数据，上面配置的数据ratings就复制给data请求后调用
   })
  }

请求访问

<script>
import header from './components/header/header.vue'

const ERR_OK = 0

export default {
 data () {
  return {
   seller: {}
  }
 },
 created () {
  this.$http.get('/api/seller').then((response) => {
   response = response.body; // 获取到数据
   if (response.errno === ERR_OK) {
    this.seller = response.data;
    console.log(this.seller);
   }
  })
 },
 components: {
  'v-header': header
 }
}
</script>

最后重新启动项目即可访问npm run dev

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue2.5.2使用http请求获取静态json数据的实例代码
  • Vue-cli 使用json server在本地模拟请求数据的示例代码
赞 (0)

相关推荐

  • vue2.5.2使用http请求获取静态json数据的实例代码

    1.配置 build/webpack.dev.conf.js // 获取静态json数据 const express = require('express') const app = express() const apiServer = express() const bodyParser = require('body-parser') apiServer.use(bodyParser.urlencoded({ extended: true })) apiServer.use(bodyPar

  • Vue-cli 使用json server在本地模拟请求数据的示例代码

    Vue-cli 使用json server在本地模拟请求数据的示例代码

    写在前面: 开发的时候,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的.json server 作为模拟工具,因为设置简单,容易上手.本文是做一个简单的上手介绍,有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. json server 工具: 在后台还没给接口之前,使用JSON-Server搭建一台JSON服务器,将接口要返回的数据放在json文件里面.然后请求这些数据,这样我们可以先做

  • vue配置请求本地json数据的方法

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下: 在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 const express = require('express') const app = express() const appData = require('../data.json') // 加载本地json文件 const seller = appDa

  • Vue中请求本地JSON文件并返回数据的方法实例

    Vue中请求本地JSON文件并返回数据的方法实例

    目录 1.目录结构 2.检查一下自己是否安装了 json-server(以下截图代表安装了) 3.安装完成以后我们就可以运行自己的json文件了 4.看看浏览器里的数据呈现效果吧 5.为了保险起见,我还特地去 postman 上测试了一下(可以省略这步) 6.现在我们可以编写代码发送请求来获取数据啦 7.在控制台就可以看到我们数据请求回来了 总结 1.目录结构 直接在根目录下创建自己的JSON文件,在此我的JSON文件名为data.json 以下是我的JSON文件内容(此处是参照的黑马程序员的v

  • 在vue中读取本地Json文件的方法

    其实关于这个问题,网上已经可以找到些方法,不过基本上没有完整的,或者是其中有些坑,下面写一下自己的亲身实践. 使用vue读取本地json文件需要安装vue-resource插件,然后使用它的$http.get来读取json文件. json文件应该是必须放在static目录下 然后使用npm install 命令安装vue-resource,太慢的话就使用淘宝镜像安装,安装完成后先引用这个组件. 在main.js文件中添加: import VueResource from 'vue-resourc

  • vue:axios请求本地json路径错误问题及解决

    vue:axios请求本地json路径错误问题及解决

    目录 axios请求本地json路径错误 axios的基础路径如何设置 举个栗子吧↓ 步骤一:入口文件:main.js 步骤二:组件:newList.vue axios请求本地json路径错误 本例用的是vuecli4,json等静态资源存放在public文件夹中 返回404 this.axios.get('public/redeme.json').then((res) => { console.log(res.data) }) 其实vue从代码到界面展示还要经过编译,所以路径会有所改变 实际路

  • PostMan post请求发送Json数据的方法

    很多同学都习惯了使用发送get请求以及POST请求发送表单数据,但是如何使用postman post请求发送json数据呢. 第一步:在post请求的header里边设置发送数据的类型 设置发送数据类型为json 第二部:填写发送的json数据 选中raw,并粘贴要发送的json数据.send,就可以看到我们返回的数据了. 以上这篇PostMan post请求发送Json数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: postman

  • java 通过发送json,post请求,返回json数据的方法

    实例如下所示: import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.InputStream; import java.io.InputStreamReader; import java.io.OutputStream; import java.net.HttpURLConnection; import java.net.URL; import org.json.JSONArray; impo

  • vue如何加载本地json数据

    vue如何加载本地json数据

    目录 vue加载本地json数据 json数据存放在除static静态文件夹中 json数据存放在static静态文件夹中 读取本地json文件并分页显示 功能实现 student.json数据如下 h5代码如下 css样式 js代码 运行效果 vue加载本地json数据 json数据存放在除static静态文件夹中 这种方法暂时还没出来,若有大神知道,可否能指导一二 json数据存放在static静态文件夹中 1.编写好json 数据,按照这个格式编写json数据 2.安装axios 安装方法

  • 详解本地Vue项目请求本地Node.js服务器的配置方法

    详解本地Vue项目请求本地Node.js服务器的配置方法

    目录 1.使用vue-cli脚手架搭建vue项目 2.使用koa搭建node后端 3.Vue项目中添加后端请求 参考资料: 前言:本文只针对自己需要本地模拟接口于是搭建一个本地node服务器供自己测试使用,仅作自己从头到尾搭建项目的记录 1.使用vue-cli脚手架搭建vue项目 1.在桌面运行 cmd,使用命令vue create demo创建一个vue项目demo,插件依赖等使用默认配置2.项目创建成功之后,使用命令 cd demo,进入 demo 文件夹,然后使用命令 npm run se

  • 详解VUE调用本地json的使用方法

    详解VUE调用本地json的使用方法

    开始的时候我以为,用vue去调取json要多么的麻烦,完咯就先去的百度,找了几个,看上面又要配置这配置那的,看的我都头大,像一些思维逻辑清晰的肯定不会出现这种情况. 下面我说下我这的情况,大家依情况代入 当然vue你刚开始创建的话,你是要去配置下东西,下面我说的是你的项目能够跑起来的情况,完咯再去想办法去引用json,当然我这里用的也是axios的获取方法,如果不是这种方法的可以带过了 首先你要知道那你的json应该放在哪个文件夹下(普通引用)如果你想写的有自己的规范,可以按照你自己的方式来.在

  • vue实现引入本地json的方法分析

    本文实例讲述了vue实现引入本地json的方法.分享给大家供大家参考,具体如下: 当前需要使用的组件: import data from './test.json' export default{ data(){ return{ userinform: '' } }, mounted(){ this.userinform = data } } test.json就是普通json格式就可以了!然后完美解决! 后台服务器请求json方式: this.$http.get('url').then(res

随机推荐