vue-cli中mock本地json数据踩雷：报错404 （GET http://localhost:8080/goods 404 (Not Found) ）

标题vue-cli中mock本地json数据踩雷：报错404

运用vue的脚手架进行了项目的搭建，想要通过json文件模拟后台传输数据，结果一直报错：404，经过不断的查找资料和调试终于找到问题的所在。

想通过本地的json文件进行数据的请求，首先要建立一个goods.json的文件，进行数据储存。

{"status":"0","msg":"","result":[{"productId":"10001","productName":"小米6","prodcutPrice":"2499","prodcutImg":"mi6.jpg"}]
}

新版本的vue项目中已经将dev-server，dev-client和webpack-dev-conf合并在一起了。
所以我们要在webpac-dev-conf进行配置
配置代码如下：

const express = require('express')
const app = express()
var goodsData = require('../mock/goods.json')//请求数据的位置
var router = express.Router()
before(app) {router.get("/goods", function (req,res) {res.json(goodsData)})app.use(router)},

注意：before中的代码要写在devServer中

具体位置如图所示：

vue页面中进行请求的代码如下所示：

data(){return {goodsList:[],},mounted:function(){this.getGoodsList();},methods:{getGoodsList(){axios.get('/goods').then((result)=>{var res=result.data;this.goodsList=res.result;});}}}

以上就成功的通过本地json文件完成了数据请求。

vue-cli中mock本地json数据踩雷：报错404 （GET http://localhost:8080/goods 404 (Not Found) ）相关推荐

vue.js中mock本地json数据
vue.js中mock本地json数据新版本的vue项目中已经将dev-server.js,dev-client.js两个js文件合并到了webpack.dev.conf.js文件中,以下分别是新旧 ...
python处理json数据乱码报错_python操作mysql中文显示乱码的解决方法
本文实例展示了一个脚本python用来转化表配置数据xml并生成相应的解析代码. 但是在中文编码上出现了乱码,现将解决方法分享出来供大家参考. 具体方法如下: 1. Python文件设置编码 utf- ...
python处理json数据乱码报错_python json.loads json.dumps(ensure_ascii = False) 汉字乱码问题解决...
有这样一个需求: 需要一个json 文件数据从数据库里查询出来 1. 设置文件头 # -*- coding:utf-8 -*- 2. 连接数据库将数据库连接数据库的编码设置为utf8 db = M ...
video.js在vue项目中设置中文语言包，报错videojs is not defined 解决办法
在vue项目中使用video.js时要求中文化,但是网上的解决办法不太好找,特此记录一下. 错误步骤: 根据网上的教程,找到中文包在node_modules/video.js/dist/lang/zh ...
解决vue项目中重复点击导航路由报错
vue版本 "vue": "^2.6.11", 主要代码 //重复点击导航路由报错 const originalPush = VueRouter.prototy ...
解决Vue中Object.assign清空数据的报错
想清空Vue中的data数据报错也许是没有改变this指向的原因可以试着用call等方便改变this指向例如 Object.assign(this.$data, this.$options.data. ...
vue项目中出现重复点击路由报错
故心故心故心故心小故冲啊文章目录解决方法: 解决方法: 方法1:在项目目录下运行 npm i vue-router@3.0 -S 重新下载未出错版本即可: 方法2:不想更换 vue-router ...
vue项目中解决路由重复点击报错问题
router.js中写入 import导入代码下面加入const prototypePush = VueRouter.prototype.pushVueRouter.prototype.push = ...
微信小程序——本地json数据在小程序中的展示
1.新建一个data文件夹(最好是公共文件), 并在该文件夹内新建了json.js文件,用于存放json数据. 写一个JSON的数组用于存放你的数据定义一个数据出口(json数据后面定义即可) 2. ...

vue-cli中mock本地json数据踩雷：报错404 （GET http://localhost:8080/goods 404 (Not Found) ）

标题vue-cli中mock本地json数据踩雷：报错404

vue-cli中mock本地json数据踩雷：报错404 （GET http://localhost:8080/goods 404 (Not Found) ）相关推荐

最新文章

热门文章