Nuxt+Express后端api接口配置与实现方式

栏目: IT技术 · 发布时间: 3天前

来源: wanshi.netlify.app

内容简介:在项目根目录中新建 server 文件夹并在该文件夹下创建一个 index.js 文件。然后,在 server/index.js 中使用 Express 创建服务器路由中间件,以下创建一个返回字符串 ‘Hello World!’ 的简单接口示例。

本文转载自:https://wanshi.netlify.app/2020/06/29/2020-06-30-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 的介绍。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

关注码农网公众号

关注我们,获取更多IT资讯^_^


为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C语言接口与实现

C语言接口与实现

David R. Hanson / 郭旭 / 人民邮电出版社 / 2011-9 / 75.00元

《C语言接口与实现:创建可重用软件的技术》概念清晰、实例详尽,是一本有关设计、实现和有效使用C语言库函数,掌握创建可重用C语言软件模块技术的参考指南。书中提供了大量实例,重在阐述如何用一种与语言无关的方法将接口设计实现独立出来,从而用一种基于接口的设计途径创建可重用的API。 《C语言接口与实现:创建可重用软件的技术》是所有C语言程序员不可多得的好书,也是所有希望掌握可重用软件模块技术的人员......一起来看看 《C语言接口与实现》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具