网站建设资讯

NEWS

网站建设资讯

如何在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://cdweb.net/article/ccgijs.html

其他资讯