内容简介：在项目根目录中新建 server 文件夹并在该文件夹下创建一个 index.js 文件。然后，在 server/index.js 中使用 Express 创建服务器路由中间件，以下创建一个返回字符串 ‘Hello World!’ 的简单接口示例。
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 的介绍。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 前后端分离ssm配置swagger接口文档
- 配置node服务器并且链接微信公众号接口配置（超详细）
- 如何架构一个中后台项目的前端部分（接口配置篇）
- 一段万能的Nginx接口实现反向代理配置值得收藏！
- xfire: 简单优雅、高度可配置的fetch接口批量生成工具
- gcs v0.1.1 加入接口缓存，Go 配置管理平台
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
The Nature of Code
Daniel Shiffman / The Nature of Code / 2012-12-13 / GBP 19.95
How can we capture the unpredictable evolutionary and emergent properties of nature in software? How can understanding the mathematical principles behind our physical world help us to create digital w......一起来看看 《The Nature of Code》 这本书的介绍吧!
