阿坝州网站建设公司

如何在vue中使用vue-resource调用接口获取数据-创新互联

这篇文章给大家介绍如何在vue中使用vue-resource调用接口获取数据，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联是一家专业提供元宝山企业网站建设,专注与成都网站制作、做网站、H5开发、小程序制作等业务。10年已为元宝山众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

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调用接口获取数据就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


本文标题：如何在vue中使用vue-resource调用接口获取数据-创新互联
网页URL：http://azwzsj.com/article/ccgijs.html

其他资讯