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 ...
随机推荐
- mysql数据库的基本操作命令总结
本文章将讲述Mysql数据的的基本操作.前期的安装请自行百度 运行环境:linux Ubuntu 16.04 命令行连接 在工作中主要使用命令操作方式,要求熟练编写 打开终端,运行命令 mysql - ...
- ps切图
1.选择视图然后标尺 ctrl+R 拉辅助线,选择矩形选框工具,点击窗口,选择信息,在右上角点击面板选项,选择像素,获取宽高(width 横向为宽:height纵向为高) 2.视图:清楚参考线 Ctr ...
- 常用命令和sql
常用命令: mvn idea:idea //生成.ipr项目文件 mvn clean install -Dmaven.test.skip=true mvn install:install-file - ...
- Problem 1: Multiples of 3 and 5
小白一枚,python解法,共同学习,一起进步. Problem 1: Multiples of 3 and 5 If we list all the natural numbers below 10 ...
- json格式字符串用Uncaught SyntaxError: Unexpected token ' Uncaught SyntaxError: Unexpected number
Unexpected number(index)的错误用的json字符串如 var jsonStr = "{1:'北京note备注信息',2:'上海note备注信息',3:'广东note备注 ...
- browser_action' is only allowed for extensions but this is a legacy packaged app
manifest.json中不可包含调试代码: "app": { "launch": { "local_path": ...
- vue axios上传文件实例
<head> <title></title> <meta charset="UTF-8"> <meta name=" ...
- Shell 字符串处理
字符串处理方式 计算字符串长度 获取子串在字符串中的索引位置 计算子串长度 抽取(截取)字串 1.计算字符串长度,有两种方式 $ ${#string} $ expr length "$str ...
- 小试牛刀 WiFi 远控 + wendu
废话 少说 直接上代码 DH11三根线 信号线 接2 WiFi 模块 r-------t t--------r en&vcc------3.3v 剩下的 共地的啦 double Fahre ...
- 应届生第一次Java面试问题分享
1. Java四大域 ServletContext域(Application域): 整个WEB应用 HttpSession域(Session域):一次会话 ServletRequest域(Reque ...