(四)vue中动态获取数据

最新推荐文章于 2023-03-28 14:40:09 发布

原创最新推荐文章于 2023-03-28 14:40:09 发布 · 7.8k 阅读

2 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在Vue项目中如何使用vue-resource进行GET和POST请求，以及结合json-server搭建模拟API服务器。详细步骤包括安装vue-resource，创建HTTP请求，安装并配置json-server，编写db.json数据文件，设置npm脚本运行模拟服务器，以及在Vue项目的config/index.js中添加代理端口。

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

1.安装vue-resource

get请求：created: function() {
this.$http.get('api/getNewsList')
.then((data) => {
console.log(data)
}, (err) => {
console.log(err)
})
}

post请求： created: function() {
this.$http.post('getList', {
userid: '123'
})
.then((data) => {
console.log(data)
}, (err) => {
console.log(err)
})
},

2.安装json-server cnpm install json-server --save

在build/db-server文件中加入脚本

var jsonServer = require('json-server')

//jsonServer
var jsonServer = new jsonServer()
var apiServer = jsonServer.create()
var apiRouter = jsonServer.router('db.json')
var apiMiddlewares = jsonServer.defaults()

apiServer.use(apiMiddlewares)
apiServer.use(apiRouter)
apiServer.listen(port 1 + , () => { //其中port+1表示端口号
console.log('JSON Server is running')
})

在根目录下编写db.json

{
"news": [
{
"id": 1,
"title": "曹县宣布昨日晚间登日成功",
"date": "2016-08-12",
"likes": 55,
"views": 100086
},
{
"id": 2,
"title": "长江流域首次发现海豚",
"date": "2016-08-12",
"likes": 505,
"views": 9800
}
],
"comments": [
{
"id": 1,
"news_id": 1,
"data": [
{
"id": 1,
"content": "支持党中央决定"
},
{
"id": 2,
"content": "抄写党章势在必行！"
}
]
}
]
}
若想执行脚本则在package.json加入脚本