摘要：开发请求本地数据的配置配置本地数据访问在之后加加载本地数据文件获取对应的本地数据找到在里面添加接口返回数据，上面配置的数据就赋值给请求后调用文件目录及内容新闻条目新闻条目新闻条目新闻条目新闻条目新闻条目新闻条目新闻条目新闻条新闻条新闻条新闻
VUE开发请求本地数据的配置.webpack.dev.conf.js
1.webpack.dev.conf.js配置本地数据访问
a.在const portfinder = require("portfinder")之后加：
var appData = require("../db.json")//加载本地数据文件（db.json）
var getNewsList = appData.getNewsList//获取对应的本地数据
var login = appData.login
var getPrice = appData.getPrice
var createOrder = appData.createOrder
找到devServer{}在里面添加：
before (app) {
app.get("/api/getNewsList", (req, res) => {
res.json({
data: getNewsList
})//接口返回json数据，上面配置的数据getNewsList就赋值给data请求后调用
}),
app.get("/api/login", (req, res) => {
res.json({
data: login,
})
}),
app.get("/api/getPrice", (req, res) => {
res.json({
data: getPrice
})
}),
app.get("/api/createOrder", (req, res) => {
res.json({
data: createOrder
})
})
}
db.json文件目录及内容：
{
"getNewsList": [
{
"id": 1,
"title": "新闻条目1新闻条目1新闻条目1新闻条目1",
"url": "http://starcraft.com"
},
{
"id": 2,
"title": "新闻条目2新闻条目2新闻条目2新闻条目2",
"url": "http://warcraft.com"
},
{
"id": 3,
"title": "新闻条3新闻条3新闻条3",
"url": "http://overwatch.com"
},
{
"id": 4,
"title": "新闻条4广告发布",
"url": "http://hearstone.com"
}
],
"login": {
"username": "yudongdong", "userId": 123123
},
"getPrice": {
"amount": 678
},
"createOrder": {
"orderId": "6djk979"
},
"getOrderList": {
"list": [
{
"orderId": "ddj123",
"product": "数据统计",
"version": "高级版",
"period": "1年",
"buyNum": 2,
"date": "2016-10-10",
"amount": "500元"
},
{
"orderId": "yuj583",
"product": "流量分析",
"version": "户外版",
"period": "3个月",
"buyNum": 1,
"date": "2016-5-2",
"amount": "2200元"
},
{
"orderId": "pmd201",
"product": "广告发布",
"version": "商铺版",
"period": "3年",
"buyNum": 12,
"date": "2016-8-3",
"amount": "7890元"
}
]
}
}
2.组件里面：
created: function(){
this.$http.get("api/getNewsList")
.then((res) => {
this.newsList = res.data.data
console.log(res.data)
console.log(res.data.data)
console.log(this.newsList)
}, (err) => {
console.log(err)
})
}
重新启动：npm run dev
注意：
res.data 返回的是一个对象，res.data.data返回的是一个数组
（我当时这里在页面就是不出来数据，之后..........纠结了好久才知道要这样的）
post请求：
app.post("/api/getNewsList", (req, res) => {
res.json({
data: getNewsList
})
}),
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110242.html
摘要：在其的下面增加以下代码代码为在根目录下创建存放模拟的数据文件我命名为，名字可以根据自己口味定义，但是要跟第一步的配置依赖要一样。数据存放文件也需要更改为为请求的地址，为查询数据的入口请求请求欧了 早期在vue构建工程文件在build里面有dev-server.js，但是后来构建去除了该文件集成到了webpack的webpack.dev.conf.js里面。 在项目制作过程中，作为一个前...
摘要：缺点需要增加本地的代码量，以及需要配置实现拦截优点数据通过会更丰富。缺点修改内容沟通成本高，跟后端扯皮利用去模拟优点可控内容以及实现动态。三本地周边知识本地的思想就是利用完成。注意接口的和自己的接口不要冲突。 VueCli3.0中集成MockApi 一：使用场景 哎哟，好烦啊，这个需求还么结束就来下一个需求，程序员不要排期的吗？ 没办法啊，资本主义的XX嘴脸啊 来吧，技术评审我俩把接口...
摘要：前言兵马未动粮草先行同理项目开发过程中经常会出现接口未出前端页面已搭建完毕的情况此时为了提高前端的开发效率解放生产力我们可以按照预定的接口文档做一些接口模拟的工作等等后端小伙伴开发完接口后我们只需要替换一个接口基地址即可初始准备这里已项目为 前言 兵马未动,粮草先行; 同理,项目开发过程中经常会出现接口未出, 前端页面已搭建完毕的情况;此时为了提高前端的开发效率,解放生产力,我们 FE...
摘要：放置在目录下或通过绝对路径被引用。对于相关来说，我们推荐使用而不是直接链式指定。在不更改配置文件的情况下，前端页面迭代发布，不需要重启服务。 作者：gauseen 0. 关于 Vuejs 简介：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，易用、灵活、高效。 生态系统 项目 介绍 awesome-vue Vue.js 相关很棒的...
阅读 643·2023-04-25 15:49
阅读 3099·2021-09-22 15:13
阅读 1234·2021-09-07 10:13
阅读 3466·2019-08-29 18:34
阅读 2553·2019-08-29 15:22
阅读 498·2019-08-27 10:52
阅读 676·2019-08-26 18:27
阅读 3007·2019-08-26 13:44
