内容简介：在项目根目录中新建 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 的介绍。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
疯狂又脆弱 坚定又柔软
朱墨 / 湖南文艺出版社 / 2018-3 / 39.80元
《疯狂又脆弱 坚定又柔软》是朱墨的一部作品集，介绍了作者考研到北京，工作在华谊，以及留学去英国的经历，在这短短几年中她一路升职加薪，25岁升任华谊宣传总监，27岁赚到人生的第一笔100万，30岁却毅然离职去英国留学，在表面的光鲜亮丽之下，她也曾付出过外人所不知道的心血和努力。她的人生告诉我们，每一个身居高位或者肆意潇洒的人，都曾为梦想疯狂地倾尽全力，而那些心怀梦想的人也总是怀揣一颗坚定又柔软的内心......一起来看看 《疯狂又脆弱 坚定又柔软》 这本书的介绍吧!
