微客导航 » 文章资讯 » 详解vue 配合vue-resource调用接口获取数据

详解vue 配合vue-resource调用接口获取数据

2024-02-18 12:00:09 299

1.先用node+express+mysql简单配置一下后台

constexpress=require('express');
constmysql=require('mysql');
conststatic=require('express-static');

constdb=mysql.createPool({
host:'localhost',
user:'nodejs',
password:'nodejs',
database:'resume',
port:3306
});

varapp=express();
//====》设置了一个/resume的接口，并将从数据库获取的数据data，send到前台（接口名字随便取的）
app.use('/resume',(req,res)=>{
db.query(`SELECT*FROMabout_table`,(err,data)=>{
"usestrict";
if(err){
res.status(500).send('databaseserror').end();
}else{
res.send(data).end();
}
})

})

app.listen(8080);
app.use(static('./static/'));

2.前台请求接口，调用数据来渲染页面（vue+vue-resource）

===》js

 //引入vue

//引入vue-resource

===》html


//v-for遍历数组后，即可将数据以｛｛value.xxx｝｝的方式渲染出来
{{value.title}}{{value.name}}
{{value.content}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

详解vue 配合vue-resource调用接口获取数据

{{value.title}}{{value.name}}

热门推荐

随机推荐