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. 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& ...

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

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

  7. Yii2 基于RESTful架构的 advanced版API接口开发 配置、实现、测试 (转)

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

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

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

  9. API接口开发 配置、实现、测试

    Yii2 基于RESTful架构的 advanced版API接口开发 配置.实现.测试 环境配置: 开启服务器伪静态 本处以apache为例,查看apache的conf目录下httpd.conf,找到 ...

  10. Yii2 基于RESTful架构的 advanced版API接口开发 配置、实现、测试【转】

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

随机推荐

  1. hdu 3068 最长回文子串 TLE

    后缀数组+RMQ是O(nlogn)的,会TLE..... 标准解法好像是马拉车,O(n).... #include "algorithm" #include "cstdi ...

  2. HTML----锚点

    练习做一个邮箱的注册页面 1.12行2列的表格 2.表格里面嵌入表单 3.最后建一个锚点 4.写具体内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  3. Windows Server

    1. Windows Server 在试用license过期后会出现2小时一次的关机.如果暂时无法注册或者激活,下面的方法可以试试 taskkill /f /im wlms.exe ping -n 1 ...

  4. Redis 和 Memcached 的区别

    来源:标点符 链接:http://www.biaodianfu.com/redis-vs-memcached.html Redis 的作者 Salvatore Sanfilippo 曾经对这两种基于内 ...

  5. 解决libc.so.6: version `GLIBC_2.14&#39; not found问题, 升级glibc,glibc-2.15

    0.以下在系统CentOS 6.3 x86_64上操作 1.试图运行程序,提示"libc.so.6: version `GLIBC_2.14' not found",原因是系统的g ...

  6. python selenium自动化之-环境搭建

    安装python和pip上述文章有介绍,在这里不在赘述.直接安装seleinum pip3 install selenium 安装完成以后, pip3 show selenium 显示 Name: s ...

  7. Log4Net .NET log处理

    1.NuGet 安装Log4Net. 2.新建一个Common的project,并且添加一个LogWriter的类: public class LogWriter { //Error log publ ...

  8. DML数据操作语言之查询(二)

    当我们查询出了N条记录之后 ,我们知道一共是几条记录,或者这些记录某一字段(列值)的最大值,最小值,平均值等,就可以使用聚合函数. 1.聚合函数 聚合函数会将null 排除在外.但是count(*)例 ...

  9. 这可能是最为详细的Docker入门吐血总结

    这可能是最为详细的Docker入门吐血总结  https://www.cnblogs.com/ECJTUACM-873284962/p/9789130.html Docker是什么? 在计算机技术日新 ...

  10. vue知识总结

    vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...