手把手教你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请求后调用
})//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
}//帮助突破技术瓶颈,提升思维能力
请求访问
<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);
}//欢迎加入前端全栈开发交流圈一起学习交流:864305860
})//面向1-3年前端人员
},//帮助突破技术瓶颈,提升思维能力
components: {
'v-header': header
}
}
</script>
最后重新启动项目即可访问npm run dev
结语
感谢您的观看,如有不足之处,欢迎批评指正。
原文地址:https://segmentfault.com/a/1190000017280223
手把手教你vue配置请求本地json数据的更多相关文章
- vue配置 请求本地json数据
第一步:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 //第一步const expres ...
- 【VueJS】VueJS开发请求本地json数据的配置
VueJS开发请求本地json数据的配置,旧版本是build/dev-server.js,新版本是build/webpack.dev.conf.js. VueJS开发请求本地json数据的配置,早期的 ...
- vue开发请求本地模拟数据的配置方法(转)
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- ajax和axios请求本地json数据对比
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...
- vue+axios访问本地json数据踩坑点
当我们想在vue项目中模拟后台接口访问json数据时,我们发现无论如何也访问不到本地的json数据. 注意:1.在vue-cli项目中,我们静态资源只能放在static文件夹中,axios使用get请 ...
- vue请求本地json数据
1.下载vue-resource插件 cnpm install vue-resource 1.2全局引入vue-resource: 在main.js import VueResource from ' ...
- 如何在vue中请求本地json文件
1..修改webpack.base.conf.js 文件中添加'/static': resolve('static'),如下所示,此时存放于static的json文件就可以通过/static/xxx. ...
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- vue中请求本地的json数据
为什么要请求本地的数据?模拟后台的请求数据,验证页面的逻辑是否存在问题,抛开后台提前开发等. 常用的说来有:jq的方式 约等于 axios的方式,vuex状态管理的方式 个人认为最好用的就是jq的方式 ...
随机推荐
- numpy中双冒号的作用
import numpy as np a = np.array([[1, 2, 3, 1, 3, 5], [4, 5, 6, 2, 4, 3]]) print('a') print(a) print( ...
- el-input和和filter结合实现实时搜索
<el-input placeholder="请选择日期" clearable prefix-icon="el-icon-search" v-model= ...
- Spring4 MVC json问题(406 Not Acceptable)
最近使用spring4.0的Mvc,json请求时,客户端报错,406 Not Acceptable 解决方法: 1.导入第三方的fastjson包,fastjson-1.1.34.jar 2.Spr ...
- linux iconv文件编码转换
linux系统里提供的文件转化编码的命令iconv,例如: iconv -t utf-8 -f gb2312 -c test.xml > text_UTF8.xml 1 -f 源编码-t 目标编 ...
- 函数-this
1.this. 解析器在调用函数的时候,每次都会向函数内部传递进一个隐含的参数(即this): this指向一个对象,这个对象称为函数执行的上下文对象.根据函数的调用方式的不同,this会指向不同的对 ...
- BytesWritable 长度问题(多出空格)
在使用 BytesWritable 进行小文件合并时,发现长度与原类容不一致,会多出一些空格 测试代码 @Test public void test() { String str = "aa ...
- 用layui的 form.on提交表单如何禁止刷新页面
答:只需要在 form.on里面的底部添加return false;即可 例如: form.on('submit(component-form-demo1)', function(data){ var ...
- 1.3 Junit4简介
1.Junit4框架 可用于单元测试,直接测试类中的方法 2.简单实用 a.导入Junit的jar包 b.熟悉Junit的执行顺序 c.写测试用例 d.利用断言,找bug 3.demo public ...
- CSS + ul li 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- c#协变 抗变
public class Fa : TranOut<Fa>, TranIn<Fa> { } public class son : Fa, TranOut<son>, ...