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调用接口,获取数据的更多相关文章

  1. java接口对接——别人调用我们接口获取数据

    java接口对接——别人调用我们接口获取数据,我们需要在我们系统中开发几个接口,给对方接口规范文档,包括访问我们的接口地址,以及入参名称和格式,还有我们的返回的状态的情况, 接口代码: package ...

  2. 从api接口获取数据-okhttp

    首先先介绍下api接口: API:应用程序接口(API:Application Program Interface) 通常用于数据连接,调用函数提供功能等等... 从api接口获取数据有四种方式:Ht ...

  3. Java之通过接口获取数据并用JDBC存储到数据库中

    最近做数据同步功能,从接口获取数据然后存到数据库中以便后续对数据进行相关操作,下面就贴一下相关代码. import com.alibaba.fastjson.JSON; import com.alib ...

  4. 豆瓣爬虫——通过json接口获取数据

    最近在复习resqusts 爬虫模块,就重新写了一个豆瓣爬虫,这个网页从HTML 源码上来看是没有任何我想要的信息的,如下图所示: 这是网页视图,我在源码中查找影片信息,没有任何信息,如图: 由此我判 ...

  5. 例子:Vue 配合 vue-resource 从接口获取数据

    vue-resource 是 vue 的一个与服务器端通信的 HTTP 插件,用来从服务器端请求数据. 结合例子——图片列表来写一下 Vue获取接口数据. html : <div id=&quo ...

  6. 调用REST接口获取数据

    /// <summary> /// 根据机构代码本机构下报警用户列表: /// </summary> /// <param name="org_code&quo ...

  7. Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象

    <template> <div id="app"> <!-- <img v-bind:src='url' /> <img :src= ...

  8. 使用httpClient调用接口获取响应数据

    转自:https://blog.csdn.net/shuaishuaidewo/article/details/81136088 import lombok.extern.slf4j.Slf4j; i ...

  9. vue.js--基础事件定义,获取数据,执行方法传值

    <template> <div id="app"> <h1>{{ msg }}</h1> <br> <button ...

  10. vue 2.0+ 怎么写本地接口获取数据

    在vue-cli脚手架项目中,找到build ---- webpack.dev.conf.js 文件,具体位置如下图: 找到文件后添加下面的内容,写在头部: //这是 webpack.dev.conf ...

随机推荐

  1. mysql数据库的基本操作命令总结

    本文章将讲述Mysql数据的的基本操作.前期的安装请自行百度 运行环境:linux Ubuntu 16.04 命令行连接 在工作中主要使用命令操作方式,要求熟练编写 打开终端,运行命令 mysql - ...

  2. ps切图

    1.选择视图然后标尺 ctrl+R 拉辅助线,选择矩形选框工具,点击窗口,选择信息,在右上角点击面板选项,选择像素,获取宽高(width 横向为宽:height纵向为高) 2.视图:清楚参考线 Ctr ...

  3. 常用命令和sql

    常用命令: mvn idea:idea //生成.ipr项目文件 mvn clean install -Dmaven.test.skip=true mvn install:install-file - ...

  4. Problem 1: Multiples of 3 and 5

    小白一枚,python解法,共同学习,一起进步. Problem 1: Multiples of 3 and 5 If we list all the natural numbers below 10 ...

  5. json格式字符串用Uncaught SyntaxError: Unexpected token ' Uncaught SyntaxError: Unexpected number

    Unexpected number(index)的错误用的json字符串如 var jsonStr = "{1:'北京note备注信息',2:'上海note备注信息',3:'广东note备注 ...

  6. browser_action' is only allowed for extensions but this is a legacy packaged app

    manifest.json中不可包含调试代码:    "app": {     "launch": {      "local_path": ...

  7. vue axios上传文件实例

    <head> <title></title> <meta charset="UTF-8"> <meta name=" ...

  8. Shell 字符串处理

    字符串处理方式 计算字符串长度 获取子串在字符串中的索引位置 计算子串长度 抽取(截取)字串 1.计算字符串长度,有两种方式 $ ${#string} $ expr length "$str ...

  9. 小试牛刀 WiFi 远控 + wendu

    废话 少说 直接上代码 DH11三根线  信号线 接2 WiFi 模块  r-------t t--------r en&vcc------3.3v 剩下的 共地的啦 double Fahre ...

  10. 应届生第一次Java面试问题分享

    1.  Java四大域 ServletContext域(Application域): 整个WEB应用 HttpSession域(Session域):一次会话 ServletRequest域(Reque ...