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接口配置与实现方式的更多相关文章

Python调用API接口的几种方式数据库脚本
Python调用API接口的几种方式 2018-01-08 gaoeb97nd... 转自 one_day_day... 修改微信分享: 相信做过自动化运维的同学都用过API接口来完成某些动作.AP ...
Python调用API接口的几种方式
Python调用API接口的几种方式相信做过自动化运维的同学都用过API接口来完成某些动作.API是一套成熟系统所必需的接口,可以被其他系统或脚本来调用,这也是自动化运维的必修课. 本文主要介绍py ...
Java 调用Restful API接口的几种方式--HTTPS
摘要:最近有一个需求,为客户提供一些Restful API 接口,QA使用postman进行测试,但是postman的测试接口与java调用的相似但并不相同,于是想自己写一个程序去测试Restful ...
abp 基于api接口的页面内容提交
项目中,后端api接口需要接收来自页面提交的数据.注意下拉控件对应值,应该按以下方式赋值 @Html.DropDownListFor(m => m.IsFolder, new List<S ...
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& ...
Tomcat 配置项目到tomcat目录外面和域名绑定访问(api接口、前端网站、后台管理网站)
先停止tomcat服务 1.进入apache-tomcat-7.0.68/conf/Catalina/localhost(如果之前还都没有启动过tomcat,是不会有此目录的,先启动一次再关闭,会自动 ...
Yii2 基于RESTful架构的 advanced版API接口开发配置、实现、测试（转）
环境配置: 开启服务器伪静态本处以apache为例,查看apache的conf目录下httpd.conf,找到下面的代码 LoadModule rewrite_module modules/mod_ ...
Yii2 基于RESTful架构的 advanced版API接口开发配置、实现、测试
环境配置: 开启服务器伪静态本处以apache为例,查看apache的conf目录下httpd.conf,找到下面的代码 LoadModule rewrite_module modules/mod_ ...
API接口开发配置、实现、测试
Yii2 基于RESTful架构的 advanced版API接口开发配置.实现.测试环境配置: 开启服务器伪静态本处以apache为例,查看apache的conf目录下httpd.conf,找到 ...
Yii2 基于RESTful架构的 advanced版API接口开发配置、实现、测试【转】
环境配置: 开启服务器伪静态本处以apache为例,查看apache的conf目录下httpd.conf,找到下面的代码 LoadModule rewrite_module modules/mod_ ...

随机推荐

hdu 3068 最长回文子串 TLE
后缀数组+RMQ是O(nlogn)的,会TLE..... 标准解法好像是马拉车,O(n).... #include "algorithm" #include "cstdi ...
HTML----锚点
练习做一个邮箱的注册页面 1.12行2列的表格 2.表格里面嵌入表单 3.最后建一个锚点 4.写具体内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
Windows Server
1. Windows Server 在试用license过期后会出现2小时一次的关机.如果暂时无法注册或者激活,下面的方法可以试试 taskkill /f /im wlms.exe ping -n 1 ...
Redis 和 Memcached 的区别
来源:标点符链接:http://www.biaodianfu.com/redis-vs-memcached.html Redis 的作者 Salvatore Sanfilippo 曾经对这两种基于内 ...
解决libc.so.6: version `GLIBC_2.14' not found问题, 升级glibc,glibc-2.15
0.以下在系统CentOS 6.3 x86_64上操作 1.试图运行程序,提示"libc.so.6: version `GLIBC_2.14' not found",原因是系统的g ...
python selenium自动化之-环境搭建
安装python和pip上述文章有介绍,在这里不在赘述.直接安装seleinum pip3 install selenium 安装完成以后, pip3 show selenium 显示 Name: s ...
Log4Net .NET log处理
1.NuGet 安装Log4Net. 2.新建一个Common的project,并且添加一个LogWriter的类: public class LogWriter { //Error log publ ...
DML数据操作语言之查询(二)
当我们查询出了N条记录之后 ,我们知道一共是几条记录,或者这些记录某一字段(列值)的最大值,最小值,平均值等,就可以使用聚合函数. 1.聚合函数聚合函数会将null 排除在外.但是count(*)例 ...
这可能是最为详细的Docker入门吐血总结
这可能是最为详细的Docker入门吐血总结 https://www.cnblogs.com/ECJTUACM-873284962/p/9789130.html Docker是什么? 在计算机技术日新 ...
vue知识总结
vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...