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