手把手教你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的方式 ...
随机推荐
- @vue/cli 3.x 版本配置productionGzip提高性能
第一步:安装插件 npm i -D compression-webpack-plugin 第二步:引入.在文件vue.config.js里导入compression-webpack-plugin,并添 ...
- centos6.9 samba配置
https://blog.csdn.net/qq_33468857/article/details/75431813 1 使用用户名密码访问 [global] security = user [hom ...
- 2018-2019-2 网络对抗技术 20165232 Exp7 网络欺诈防范
2018-2019-2 网络对抗技术 20165232 Exp7 网络欺诈防范 原理与实践说明 1.实践目标 理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 2.实践内容概述 简单应 ...
- LeetCode 93. 复原IP地址(Restore IP Addresses)
题目描述 给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 示例: 输入: "25525511135" 输出: ["255.255.11.135&qu ...
- Scala学习(四)——模式匹配与函数组合
函数组合 让我们创建两个函数: def f(s: String) = "f(" + s + ")" def g(s: String) = "g(&qu ...
- 设置Apache监听多个端口
1.在配置文件httpd.conf中Listen多个端口 Listen localhost:8033 Listen localhost:8083 ....... 2.在配置文件夹下的extra文 ...
- Linux高级调试与优化——进程管理和调度
进程管理 进程和文件是Linux操作系统的两个最基本的抽象. 进程是处于执行期的程序,进程不仅仅局限于一段可执行程序代码,通常还包含其他资源,如打开的文件.挂起的信号.内核内部数据.处理器状态.进程地 ...
- pytest_1安装和启动
一.安装和启动 1.1 安装pytest 1. 键入Ctrl+R,打开cmd,输入命令至python环境下(本机:D:\Python27>) 2. 在python环境下运行下面的命令即可安装py ...
- node.js入门经典 初读笔记
2.1 npm是什么 npm(Node Package Manager)是Node.js的包管理器.它允许开发人员在Node.js应用程序中创建.共享并重用模块. 2.3 安装模块 npm insta ...
- 锋利的jQuery(第二版) 初读笔记
window.onload(): 必须等待网页中所有的内容加载完毕后(包括图片)才能执行. $(document).ready(): 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没 ...