vue-resource + json-server模拟数据 vue-cli配置

最新推荐文章于 2021-03-24 12:15:01 发布

原创最新推荐文章于 2021-03-24 12:15:01 发布 · 510 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-cli #json-server

vue.js 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍如何在项目中安装并使用Vue-resource进行HTTP请求，同时通过json-server模拟API服务，实现前后端联调。文章提供了从安装到配置使用的完整步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装

npm install vue-resource --save
npm install json-server --save

二、配置与使用vue-resource

// main.js
import VueResource from 'vue-resource'
Vue.use(VueResource)

      this.$http.get('api/getNewsList')
        .then(function (data) {
          console.log(data)
        },function (err) { console.log(err)})

三、配置 json-server

// dev-server.js
var jsonServer = require('json-server')
var apiServer = jsonServer.create()
var apiRouter = jsonServer.router('db.json')
var middlewares = jsonServer.defaults()

apiServer.use(middlewares)
apiServer.use('/api', apiRouter)
apiServer.listen(port + 1, function () {
console.log('JSON Server is running')
})

// config/index.js
dev:{
...
proxyTable: {
'/api/': 'http://localhost:8081/'
},
...
}

若你的项目只使用get请求，则可以使用以上方法，若需要使用其他请求，可使用下面介绍的一种通用的方法。

var apiServer = express()
var bodyParser = require('body-parser')
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require('fs')
apiRouter.route('/:apiName')
  .all(function (req, res) {
    fs.readFile('./db.json', 'utf8', 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('no such api name')
      }

    })
  })

apiServer.use('/api', apiRouter);
apiServer.listen(port + 1, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + (port + 1) + '\n')
})