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的介绍。

随机推荐

  1. Javascript数组操作

    使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...

  2. win7的HOST文件夹具体位置

    win7的HOST文件位置为C:\WINDOWS\system32\drivers\etc\文件夹下,快捷查看方法如下: 1.按win+r,输入C:\WINDOWS\system32\drivers\ ...

  3. I/O requests taking longer than 15 seconds to complete on file I/O瓶颈问题

    I/O requests taking longer than 15 seconds to complete on file I/O瓶颈问题 http://mssqlwiki.com/2012/08/ ...

  4. js----全局变量和局部变量部分讲解

    以此文作为自己学习的一个总结. 关于全局变量和局部变量的一句简单的定义:在函数外声明的变量都为全局变量,在函数内声明的为局部变量. 一.局部变量和全局变量重名会覆盖全局变量 var a = 1; fu ...

  5. 关于css的优先级

    样式的优先级 外部样式 < 内部样式 < 内联样式 选择器的优先权 解释: 1.  内联样式表的权值最高 1000: 2.  ID 选择器的权值为 100; 3.  Class 类选择器的 ...

  6. 【从零开始,从内核驱动驱动到用户空间调用】编写第一个linux驱动,通过端口访问I/O寄存器。

    目的: 通过I/O端口方式访问RTC的秒寄存器: 由于本人从来没看过linux方面的书籍,也只是会在终端用些常用的命令而已,这次老大叫我学着通过I/O端口方式直接去读写寄存器.于是我在google中搜 ...

  7. Android数字签名解析(三)

    在刚才開始学习android数字签名的相关知识点的时候,被资料中出现的keystore.x509.密钥对.debug.keystore弄的晕头 转向.经过一段时间的了解,总算明确一些. 一.make_ ...

  8. VS2017下使用Git遇到的问题

    我在使用最新版的VS2017时,想获取服务器上最新代码,Fetch到了最新修改,但是在拉取代码的时候出现了问题 user@user-PC MINGW64 /d/demo/myrepos (dev-cs ...

  9. (转)浅谈MySql的存储引擎(表类型)

    原文:http://www.cnblogs.com/lina1006/archive/2011/04/29/2032894.html 什么是MySql数据库 通常意义上,数据库也就是数据的集合,具体到 ...

  10. Vue小案例(一)

    案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...