How to obtain static json data using http request in vue2.5.2-JS Tutorial-php.cn

How to obtain static json data using http request in vue2.5.2

亚连

Release： 2018-06-04 13:46:18

Original

2593 people have browsed it

This article mainly introduces the example code of vue2.5.2 using http request to obtain static json data. Friends who need it can refer to it

1. Configure build/webpack.dev.conf.js

// 获取静态json数据
const express = require(&#39;express&#39;)
const app = express()
const apiServer = express()
const bodyParser = require(&#39;body-parser&#39;)
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
const apiRouter = express.Router()
const fs = require(&#39;fs&#39;)
apiRouter.route(&#39;/:apiName&#39;)
 .all(function (req, res) {
  fs.readFile(&#39;./db.json&#39;, &#39;utf8&#39;, function (err, data) {
   if (err) throw err
   var data = JSON.parse(data)
   if (data[req.params.apiName]) {
    res.json(data[req.params.apiName])
   }
   else {
    res.send(&#39;no such api name&#39;)
   }
  })
 })
apiServer.use(&#39;/api&#39;, apiRouter);
apiServer.listen(8081, function (err) {
 if (err) {
  console.log(err)
  return
 }
 console.log(&#39;Listening at http://localhost:&#39; + (8081) + &#39;\n&#39;)
})

Copy after login

2. Create a new 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元"
   }
  ]
 }
}

Copy after login

3. Access through localhost:8081/api/getNewsList

4. How to get it on the page

export default {
  data() {
   newsList: []
  },
  created: function(){
   this.$http.get(&#39;api/getNewsList&#39;).then((res)=> {
    this.newsList = res.data
   },(err)=> {
    console.log(err);
   })
  }
 }

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Use the select drop-down box to implement binding and value methods in vue.js

In How to solve the problem of red and warning when using v-for in vue (detailed tutorial)

How to implement the search matching function in Vuejs (detailed tutorial)

The above is the detailed content of How to obtain static json data using http request in vue2.5.2. For more information, please follow other related articles on the PHP Chinese website!