基于vue-cli及express模拟Ajax获取服务器数据

 var apiServer = express()
//名称apiServer根据项目自定义，避免冲突为原则
var bodyParser = require('body-parser')
//express必须要进行的配置
apiServer.use(bodyParser.urlencoded({ extended: true }))
//
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
//配置路由，名称同样可以自拟
var fs = require('fs')
apiRouter.route('/:apiName')
//apiName为接口名称
.all(function (req, res) {
// .all即支持包括getpost在内的所有xhr请求
fs.readFile('./db.json', 'utf8', function (err, data) {
//db.json 自己配置的模拟数据需要放置到
if (err) throw err
var data = JSON.parse(data)
//将从服务器端获取到的json对象转换为普通js对象
if (data[req.params.apiName]) {
res.json(data[req.params.apiName])
}
else {
res.send('no such api name')
}
})
})
apiServer.use('/api', apiRouter);
//
配置 '/api'是因为做了服务器代理，所有要指明代理地址
apiServer.listen(port + 1, function (err) {
//配置接口端口号，为了方便查看，一般取前端口号+1
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:' + (port + 1) + 'n')
})

 {


"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


  }
       }
     }

       

 proxyTable: {
'/api/':'http://localhost:8081'
//代理服务器访问地址
},

     

 this.$http.post('api/getNewsList') //之前已经配置了all请求，这里发送getpost请求都没有问题
.then((res)=>{
//成功的返回数据，因为内置数据处理会用到this所以此处使用es6的箭头函数，内置的this便指向vue对象，如果不想使用箭头函数，那么，就可以在函数体外对this进行一个代理，var me = this
this.newsList = res.data //数据体默认存在data中，第一次使用，可以先将查看一下res整个对象都包含哪些内容，方便以后使用
console.log(this.newsList)
},(err)=>{ //失败返回错误
console.log(err)
})

最后

以上就是疯狂火车为你收集整理的基于vue-cli及express模拟Ajax获取服务器数据的全部内容，希望文章能够帮你解决基于vue-cli及express模拟Ajax获取服务器数据所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。