手把手教你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的方式 ...
随机推荐
- 两种建立堆的方法HeapInsert & Heapify
参考 堆排序中两种建堆方法的比较 第一种方法HeapInsert 它可以假定我们事先不知道有多少个元素,通过不断往堆里面插入元素进行调整来构建堆. 它的大致步骤如下: 首先增加堆的长度,在最末尾的地方 ...
- ionic1使用imagepicker在安卓手机上闪退问题
在上一篇文章中,提到了如何在ionic1中使用imagepicker插件,并且实现该插件显示中文(汉化)问题有兴趣可以看看:ionic1使用ImagePicker插件并且显示中文(汉化) 1.这次要解 ...
- 快速排序和二分查找(Java)
import java.util.Arrays; public class Main { public static void main(String[] args) { int[] data = { ...
- C++入门经典-例3.20-使用continue跳出循环
1:continue不是立即跳出循环体,而是跳过本次循环结束前的语句,回到循环的条件测试部分.代码如下: // 3.20.cpp : 定义控制台应用程序的入口点. // #include " ...
- servlet3.0以后可以不用web.xml配置了
AbstractDispatcherServletInitializer 注意:删除了web.xml会报错,web.xml is missing and <failOnMissingWebXml ...
- Error:Connection activation failed: No suitable device found for this connection
原文链接: https://blog.csdn.net/baiboya/article/details/80452822 ens33这个网卡一直无法激活,在网上找了半天,找到这个博主的文章,才解决,虽 ...
- LeetCode 129. 求根到叶子节点数字之和(Sum Root to Leaf Numbers)
题目描述 给定一个二叉树,它的每个结点都存放一个 0-9 的数字,每条从根到叶子节点的路径都代表一个数字. 例如,从根到叶子节点路径 1->2->3 代表数字 123. 计算从根到叶子节点 ...
- [VBA]汇总多个工作簿的指定工作表到同一个工作簿的指定工作表中
sub 汇总多个工作簿() Application.ScreenUpdating = False Dim wb As Workbook, f As String, l As String, n As ...
- WPF prism 类、属性和方法的导入和导出
学习Prism一定要掌握依赖注入的应用,只有了解了Prism的依赖注入才能更好的使用Prism提升应用开发的架构. 首先说明Prism依赖注入有两种方式及MEF和Unity ,在Prism中是两个没有 ...
- 阶段3 2.Spring_03.Spring的 IOC 和 DI_5 BeanFactory和ApplicationContext的区别
核心容器的两个接口.ApplicationContext和BeanFactory 怎么知道对象被创建了呢 我们只需要在实现类里面构造函数内打印输出一段话 然后再这里加上一个断点 运行程序,光标停在这个 ...