Nuxt+Express后端api接口配置与实现方式

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用。本文带你了解在 Nuxt.js 中使用 Express 如何编写实现后端的 api 接口。

创建接口文件

在项目根目录中新建 server 文件夹并在该文件夹下创建一个 index.js 文件。

server
└── index.js

然后，在 server/index.js 中使用 Express 创建服务器路由中间件，以下创建一个返回字符串 ‘Hello World!’ 的简单接口示例。

const app = require('express')();

app.get('/hello', (req, res) => {
  res.send('Hello World!')
})

module.exports = {
  path: 'api',
  handler: app
}

接下来，修改 nuxt.config.js 文件，在 serverMiddleware 配置项中添加 api 中间件。

module.exports = {
  serverMiddleware: [
    // API middleware
    '~/server/index.js'
  ],
}

现在，重启服务：

npm run dev

启动后，在浏览器地址栏中输入 http://localhost:3000/api/hello 查看是否成功返回 ‘Hello World!’。

对于如何注册第三方路由的详细用法请查看 nuxt.config.js 配置文档serverMiddleware属性的介绍。

在页面中请求 api 数据

Nuxt.js添加了一种 asyncData 方法，可让您在初始化组件之前处理异步操作。asyncData 每次在加载页面组件之前都会调用。此方法将上下文作为第一个参数，您可以使用它来获取一些数据，Nuxt.js 会将其与组件数据合并。

修改 api/hello 接口，使之返回 JSON 数据。

app.get('/hello', (req, res) => {
  res.json({
    title: 'Hello World!'
  })
})

在 pages/index.vue 中请求上面修改完成的 api/hello 接口。

export default {
  asyncData () {
    return fetch('http://localhost:3000/api/hello', { method: 'GET' })
      .then(res => res.json())
      .then(res => {
        // asyncData 方法获取的数据会与组件数据合并，所以这里返回对象
        return {
          title: res.title
        }
      })
  }
}

接下来只需在 template 中绑定 title 即可显示请求返回的数据。

<template>
  <h1>{{ title }}<h1>
</template>

关于异步获取数据请移步文档asyncData的介绍。

Nuxt+Express后端api接口配置与实现方式的更多相关文章

1. Python调用API接口的几种方式 数据库 脚本

   Python调用API接口的几种方式 2018-01-08 gaoeb97nd... 转自 one_day_day... 修改 微信分享: 相信做过自动化运维的同学都用过API接口来完成某些动作.AP ...

2. Python调用API接口的几种方式

   Python调用API接口的几种方式 相信做过自动化运维的同学都用过API接口来完成某些动作.API是一套成熟系统所必需的接口,可以被其他系统或脚本来调用,这也是自动化运维的必修课. 本文主要介绍py ...

3. Java 调用Restful API接口的几种方式--HTTPS

   摘要:最近有一个需求,为客户提供一些Restful API 接口,QA使用postman进行测试,但是postman的测试接口与java调用的相似但并不相同,于是想自己写一个程序去测试Restful ...

4. abp 基于api接口的页面内容提交

   项目中,后端api接口需要接收来自页面提交的数据.注意下拉控件对应值,应该按以下方式赋值 @Html.DropDownListFor(m => m.IsFolder, new List<S ...

5. 循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理

   在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...

6. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战：构建带有版本控制的 API 接口 ASP.NET Core 实战：使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

   List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

7. Tomcat 配置 项目 到tomcat目录外面 和 域名绑定访问(api接口、前端网站、后台管理网站)

   先停止tomcat服务 1.进入apache-tomcat-7.0.68/conf/Catalina/localhost(如果之前还都没有启动过tomcat,是不会有此目录的,先启动一次再关闭,会自动 ...

8. swagger -- 前后端分离的API接口

   文章目录 一.背景 二.swagger介绍 三.在maven+springboot项目中使用swagger 四.swagger在项目中的好处 五.美化界面 参考链接:5分钟学会swagger配置 参考 ...

9. Yii2 基于RESTful架构的 advanced版API接口开发 配置、实现、测试 （转）

   环境配置: 开启服务器伪静态 本处以apache为例,查看apache的conf目录下httpd.conf,找到下面的代码 LoadModule rewrite_module modules/mod_ ...

随机推荐

1. SVN部署和使用

   一.SVN介绍 svn(subversion)是近年来崛起的版本管理工具,是cvs的接班人.目前,绝大多数开源软件都使用svn作为代码版本管理软件. 二.服务器端和客户端 1.服务器端软件Subver ...

2. .NET平台开源项目速览(9)软件序列号生成组件SoftwareProtector介绍与使用

   在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,给大家初步介绍了一下Software Protector序列号生成组件.今天就通过一篇简单的文章来预览一下其强大的功 ...

3. URL后面带\斜杠对SEO的影响

   例如以下的两种URL书写方式: 1.www.baidu.com 2.www.baidu.com\ 这两种书写方式的区别到底在哪里呢?哪一个的速度更快呢?可能对于我们大多数人来说会觉得两个速度一样,因为 ...

4. Linux进程间通信——使用命名管道

   在前一篇文章——Linux进程间通信——使用匿名管道中,我们看到了如何使用匿名管道来在进程之间传递数据,同时也看到了这个方式的一个缺陷,就是这些进程都由一个共同的祖先进程启动,这给我们在不相关的的进程 ...

5. JavaScript进阶(三) 值传递和引用传递

   从C语言开始 有时候讲一些细节或是底层的东西,我喜欢用C语言来讲,因为用C更方便来描述内存里面的东西.先举一个例子,swap函数,相信有一些编程经验的人都见识过,声明如下,函数体我就不写了,各位脑补一 ...

6. .NET开发微信小程序-Template模块开发

   1.添加一个文件目录,里面放模板信息 例:我在根目录添加一个文件夹:template 然后在这个文件夹下面添加相应的页面.比如我添加一个promodel.wxml文件.主要是放商品相关的模块信息(注: ...

7. PAT-Top1001. Battle Over Cities - Hard Version (35)

   在敌人占领之前由城市和公路构成的图是连通图.在敌人占领某个城市之后所有通往这个城市的公路就会被破坏,接下来可能需要修复一些其他被毁坏的公路使得剩下的城市能够互通.修复的代价越大,意味着这个城市越重要. ...

8. .NET 同步与异步 之 Mutex （十二）

   本随笔续接:.NET 同步与异步 之 线程安全的集合 (十一) 本随笔 及 接下来的两篇随笔,将介绍 .NET 同步与异步系列 的最后一个大块知识点:WaitHandle家族. 抽象基类:WaitHa ...

9. 【spring-boot神器】第一篇:拦截器，过滤器，监听器，控制器，消息转换器，AOP执行顺序

   整理一下这几天学习的资料和代码 第一部分.上代码 1.spring各种器的实现,idea搭建spring-boot的教程在这里http://www.jianshu.com/p/9082a533fa3c ...

10. vue 定时器的问题

    在项目中,我们经常会使用到定时器setInterval(),可是很多时候我们会发现,即使我退出当前页面,定时器依然在工作,非常消耗内存,所以我们要进行手动清理: 将定时器保存在变量中,退出页面时清除变 ...