大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章给大家介绍如何在vue中使用vue-resource调用接口获取数据,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
专注于为中小企业提供网站设计、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业扎赉诺尔免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
1.先用node+express+MySQL简单配置一下后台
const express = require('express'); const mysql = require('mysql'); const static = require('express-static'); const db = mysql.createPool({ host: 'localhost', user: 'nodejs', password: 'nodejs', database:'resume', port: 3306 }); var app = express(); // ====》设置了一个 /resume 的接口,并将从数据库获取的数据data,send到前台(接口名字随便取的) app.use('/resume', (req, res)=>{ db.query(`SELECT * FROM about_table`, (err, data)=>{ "use strict"; if(err){ res.status(500).send('databases error').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}}
关于如何在vue中使用vue-resource调用接口获取数据就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。