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. 使用egg.js开发后端API接口系统

    什么是Egg.js Egg.js 为企业级框架和应用而生,我们希望由 Egg.js 孕育出更多上层框架,帮助开发团队和开发人员降低开发和维护成本.详细的了解可以参考Egg.js的官网:https:// ...

  2. 后端API接口的错误信息返回规范

    前言 最近我司要制定开发规范.在讨论接口返回的时候,后端的同事询问我们前端,错误信息的返回,前端有什么意见? 所以做了一些调研给到后端的同事做参考. 错误信息返回 在使用API时无可避免地会因为各种情 ...

  3. 如何使用 Python 编写后端 API 接口

    如何使用 Python 编写后端 API 接口 get API Python3 # coding:utf-8 import json # ModuleNotFoundError: No module ...

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

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

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

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

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

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

  7. 如何在Uniapp中访问CabloyJS后端API管理系统

    介绍 CabloyJS是一款免费开源的NodeJS全栈开发框架,采用前后端分离设计,具备开箱即用的后台管理系统 Cabloy-SDK是专门为Uniapp应用量身定制的前端SDK,用于便捷的访问Cabl ...

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

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

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

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

随机推荐

  1. Java实现 LeetCode 61 旋转链表

    61. 旋转链表 给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1->2->3->4->5->NULL, k = ...

  2. java实现输入信用卡号码

    /* 当你输入信用卡号码的时候,有没有担心输错了而造成损失呢?其实可以不必这么担心, 因为并不是一个随便的信用卡号码都是合法的,它必须通过 Luhn 算法来验证通过. 该校验的过程: 1.从卡号最后一 ...

  3. java实现圆周率与级数

    ** 圆周率与级数** 圆周率 我国古代数学家对圆周率方面的研究工作,成绩是突出的.三国时期的刘徽.南北朝时期的祖冲之都在这个领域取得过辉煌战绩. 有了计算机,圆周率的计算变得十分容易了.如今,人们创 ...

  4. Java实现 蓝桥杯 历届试题 剪格子

    问题描述 如下图所示,3 x 3 的格子中填写了一些整数. +--*--+--+ |10* 1|52| +--****--+ |20|30* 1| *******--+ | 1| 2| 3| +--+ ...

  5. Java实现第九届蓝桥杯等腰三角形

    等腰三角形 题目描述 本题目要求你在控制台输出一个由数字组成的等腰三角形. 具体的步骤是: 1. 先用1,2,3,...的自然数拼一个足够长的串 2. 用这个串填充三角形的三条边.从上方顶点开始,逆时 ...

  6. PAT 统计同成绩学生

    本题要求读入 N 名学生的成绩,将获得某一给定分数的学生人数输出. 输入格式: 输入在第 1 行给出不超过 105 的正整数 N,即学生总人数.随后一行给出 N 名学生的百分制整数成绩,中间以空格分隔 ...

  7. class 类前向声明

    /*   使用前向引用声明虽然可以解决一些问题,但它并不是万能的.需要注意的是,   尽管使用了前向引用声明,但是在提供一个完整的类声明之前,不能声明该类的对象,   也不能在内联成员函数中使用该类的 ...

  8. python3 主机实时监控系统

    主机实时监控系统(可在局域网访问) 一.思路: 前端: 1.管理员登录(编写一个管理员登录界面) 技术:html+css 2.资源数据显示(用于显示主机资源数据情况) 插件:echarts+jquer ...

  9. ElasticSearch系列之(一):介绍、安装(Docker、Windows、Linux)

    1.介绍 Elasticsearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java语言开发的,并 ...

  10. Flink 如何分流数据

    场景 分流方式 如何分流 使用Filter分流 使用Split分流 使用Side Output分流 场景 获取流数据的时候,通常需要根据所需把流拆分出其他多个流,根据不同的流再去作相应的处理. 举个例 ...