vue 获取后端数据

1、vue-resource从后端请求我们需要的数据

下载安装npm install vue-resource

装完之后重新启动项目

模拟后端数据，启动测试服务器

注意哦：最新的（我用的3.6）webpack 的build目录下删除了dev-server.js ,

在webpack.dev.conf.js这个文件中编辑。

圈1//webpack.dev.conf.js

//第一种模拟服务器json-server

//json-server 模拟后端数据，启动测试服务器只能get 获取数据

//安装npm install json-server

const jsonServer = require(\'json-server\')
const apiServer = jsonServer.create()
const apiRouter = jsonServer.router(\'db.json\')
const middlewares = jsonServer.defaults()

apiServer.use(middlewares)
apiServer.use(\'/api\',apiRouter)
apiServer.listen(8001, () => {
console.log(\'JSON Server is running\')
})
//end json-server

//第二种模拟服务器不需要安装，get post 都支持 (推荐)

var express = require(\'express\')

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\') //node自带的fs
apiRouter.route(\'/:apiName\') //指的是/api 下一级的路由路径名字
.all(function (req, res) { //all只得是get post都支持
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(8001, function (err) {
if (err) {
console.log(err)
return
}
console.log(\'Listening at http://localhost:\' + 8001 + \'\n\')
})

//end测试服务器

圈2//在config 文件夹下的index.js 里面找到dev

//添加代理服务器

proxyTable: { // 服务器端代理
\'/api/\':\'http://localhost:8001/\' //就是访问8000端口下的/api路由的时候，其实是访问的代理端口8001
}

同时build > webpack.dev.conf.js >由 apiServer.use(apiRouter) > 改为 apiServer.use(\'/api\',apiRouter)

快看！！接收到了请求代理服务器的数据哈哈哈好开心

可以把后台模拟数据写在devServer中

圈3//在webpack.dev.conf.js找到devServer

before(app) {

  app.get(\'/api/someApi\', (req, res) => {
    res.json({
      // 这里是你的json内容
    })
  })
}

圈4 箭头函数里面的this 是代码环境下的 this 而不是执行环境下的 this