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
<script src="//cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>
// 引入 vue-resource <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function () {
new Vue({
el: '#demo',
data:{
aboutData:[] //建一个空数组,用来保存调用接口获取的数据
},
created: function () {
this.getRoute()
},
methods: {
getRoute: function () {
var that = this;
that.$http({
method: 'GET',
url: '/resume' //这里填写刚刚后台设置的接口
}).then(function(response){
this.aboutData = response.data; // promise的then成功之后,将response返回的数据data,保存到aboutData数组里
},function (error) {
console.log(error);
})
}
} })
}
</script> ===》 html
<div id="demo">
<div class="item" v-for="value in aboutData"> // v-for 遍历数组后,即可将数据以{{value.xxx}}的方式渲染出来
<h2>{{value.title}} <span>{{value.name}}</span></h2>
<p>{{value.content}}</p>
</div>
</div>
vue 配合vue-resource调用接口,获取数据的更多相关文章
- java接口对接——别人调用我们接口获取数据
java接口对接——别人调用我们接口获取数据,我们需要在我们系统中开发几个接口,给对方接口规范文档,包括访问我们的接口地址,以及入参名称和格式,还有我们的返回的状态的情况, 接口代码: package ...
- 从api接口获取数据-okhttp
首先先介绍下api接口: API:应用程序接口(API:Application Program Interface) 通常用于数据连接,调用函数提供功能等等... 从api接口获取数据有四种方式:Ht ...
- Java之通过接口获取数据并用JDBC存储到数据库中
最近做数据同步功能,从接口获取数据然后存到数据库中以便后续对数据进行相关操作,下面就贴一下相关代码. import com.alibaba.fastjson.JSON; import com.alib ...
- 豆瓣爬虫——通过json接口获取数据
最近在复习resqusts 爬虫模块,就重新写了一个豆瓣爬虫,这个网页从HTML 源码上来看是没有任何我想要的信息的,如下图所示: 这是网页视图,我在源码中查找影片信息,没有任何信息,如图: 由此我判 ...
- 例子:Vue 配合 vue-resource 从接口获取数据
vue-resource 是 vue 的一个与服务器端通信的 HTTP 插件,用来从服务器端请求数据. 结合例子——图片列表来写一下 Vue获取接口数据. html : <div id=&quo ...
- 调用REST接口获取数据
/// <summary> /// 根据机构代码本机构下报警用户列表: /// </summary> /// <param name="org_code&quo ...
- Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象
<template> <div id="app"> <!-- <img v-bind:src='url' /> <img :src= ...
- 使用httpClient调用接口获取响应数据
转自:https://blog.csdn.net/shuaishuaidewo/article/details/81136088 import lombok.extern.slf4j.Slf4j; i ...
- vue.js--基础事件定义,获取数据,执行方法传值
<template> <div id="app"> <h1>{{ msg }}</h1> <br> <button ...
- vue 2.0+ 怎么写本地接口获取数据
在vue-cli脚手架项目中,找到build ---- webpack.dev.conf.js 文件,具体位置如下图: 找到文件后添加下面的内容,写在头部: //这是 webpack.dev.conf ...
随机推荐
- I2C 上拉电阻选择计算公式
I2C接口上拉电阻的选择 - I2C接口上拉电阻的选择 1.I2C接口的输出端是漏极开路或集电极开路,所以必须在接口外接上拉. 2.上拉电阻的范围很宽,但也需要跟据功耗.信号上升时间等具体确定. 和速 ...
- 用工具metaseeker写简单爬虫(1)
1.下载metaseeker(一款比较实用的网站数据采集程序) 2.将所要爬取的网页复制到网址里,按回车.我选择的是当当网新书排行榜页面,标2的地方表示已经导入到软件里了. 3.命名主题,查重,查看是 ...
- bzoj2369
题解: 显然把每一个环求出来 然后做一个lcm即可 代码: #include<cstdio> using namespace std; ],f[],n; int gcd(int x,int ...
- canvas背景动画
偶然反驳可看到博客背景的炫酷效果 觉得很新奇就去查看了一下源码 结果在git上找到了 记录一下 https://github.com/hustcc/canvas-nest.js/
- 一个简单的Quartz定时任务
package com.shuadan.quartz; import org.springframework.scheduling.annotation.Scheduled; import org.s ...
- 分页 工具类 前后台代码 Java JavaScript (ajax) 实现 讲解
[博客园cnblogs笔者m-yb原创, 转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708]http ...
- python中下划线的特殊用法
python下划线用法总结: ① _XXX 不能用于“ from model import * ”的导入: ②__XXX__ 系统定义名字: ③__XXX 类中的私有变量名. 总结:避免随意用下划线 ...
- SQL中的with check option(转)
student表: 95001 李勇 男 20 CS 95002 刘晨 女 21 IS 95003 王敏 女 18 MA 95004 张力 男 19 IS 建立视图IS_STUDENT显示“IS”系所 ...
- MongoDB基本命令总结
其实一直想整理下我常使用的MongoDB数据库的一些操作命令,终于有时间了~ MongoDB是一种开源的,免费的非关系型数据库(NoSql),不存在表.记录等概念,与通常的关系型数据库有些差异: Mo ...
- cafee编译错误几个总结
1.CXX/LD -o .build_release/examples/siamese/convert_mnist_siamese_data.bin .build_release/lib/libcaf ...