vue开发请求本地JSON数据

TerryCai 发布于2019-08-26 18:27 / 539人阅读

摘要：开发请求本地数据的配置配置本地数据访问在之后加加载本地数据文件获取对应的本地数据找到在里面添加接口返回数据，上面配置的数据就赋值给请求后调用文件目录及内容新闻条目新闻条目新闻条目新闻条目新闻条目新闻条目新闻条目新闻条目新闻条新闻条新闻条新闻

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

})
}),

私有云超融合服务器 json数据请求网址 json数据请求地址 ajax请求json数据 js发送请求 json数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110242.html

WEBPACK+VUE2.0开发请求本地模拟数据的配置方法

摘要：在其的下面增加以下代码代码为在根目录下创建存放模拟的数据文件我命名为，名字可以根据自己口味定义，但是要跟第一步的配置依赖要一样。数据存放文件也需要更改为为请求的地址，为查询数据的入口请求请求欧了早期在vue构建工程文件在build里面有dev-server.js，但是后来构建去除了该文件集成到了webpack的webpack.dev.conf.js里面。在项目制作过程中，作为一个前...

galaxy_robot 2019-08-22 11:22 评论0 收藏0
VueCli3.0中集成MockApi

摘要：缺点需要增加本地的代码量，以及需要配置实现拦截优点数据通过会更丰富。缺点修改内容沟通成本高，跟后端扯皮利用去模拟优点可控内容以及实现动态。三本地周边知识本地的思想就是利用完成。注意接口的和自己的接口不要冲突。 VueCli3.0中集成MockApi 一：使用场景哎哟，好烦啊，这个需求还么结束就来下一个需求，程序员不要排期的吗？没办法啊，资本主义的XX嘴脸啊来吧，技术评审我俩把接口...

刘玉平 2019-08-26 13:59 评论0 收藏0
vue项目接入mock&& axios 通用配置

摘要：前言兵马未动粮草先行同理项目开发过程中经常会出现接口未出前端页面已搭建完毕的情况此时为了提高前端的开发效率解放生产力我们可以按照预定的接口文档做一些接口模拟的工作等等后端小伙伴开发完接口后我们只需要替换一个接口基地址即可初始准备这里已项目为前言兵马未动,粮草先行; 同理,项目开发过程中经常会出现接口未出, 前端页面已搭建完毕的情况;此时为了提高前端的开发效率,解放生产力,我们 FE...

Ilikewhite 2019-08-26 10:33 评论0 收藏0
Vue-项目从本地搭建到线上部署（wǒ shì biaō tí dǎng）

摘要：放置在目录下或通过绝对路径被引用。对于相关来说，我们推荐使用而不是直接链式指定。在不更改配置文件的情况下，前端页面迭代发布，不需要重启服务。作者：gauseen 0. 关于 Vuejs 简介：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，易用、灵活、高效。生态系统项目介绍 awesome-vue Vue.js 相关很棒的...

Arno 2019-08-26 13:49 评论0 收藏0
vue项目实战(第一回)

摘要：完整的项目地址系列文章一系列文章二前言此项目是我在学习框架和开发公司项目的时候把需要用的技术点常用的功能模块开发中遇到的坑全部集成或记录到这个小项目里，以便自己开发以后的项目中用到，同时分享出来供大家学习借鉴，也鞭策自己持续学习和更新，如果完整的项目地址https://github.com/darenone/v... 系列文章一https://github.com/darenon...

187J3X1 2019-08-05 12:41 评论0 收藏0