持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

Express-学习之路 11，api接口 - 测试 Express 接口

引言

本系列会以我的一个理解，来介绍并开始学习 Express。

中间会插入自己所联系到的乱七八糟的 知识点。

介绍

在上一节中，我们成功地启动 Express，并且连接了 mysql 数据库。

并且通过访问 localhost:8089:/api/user 这个网址链接，即我们的接口地址，得到相关的用户数据。

当然这个 mysql 里面的数据使我们手动填充上去的。

测试接口

既然我们的这一个接口服务已经写好。我们需要用 postman 或者抓一个前端人员测一下（虽然本来就是前端人员😅）

由于用 postman ，对我们展示效果而言，不是那么亲切，而且后续还要实现一个项目。

我们这里快速的用 vite 创建一个 vue3 的一个项目

npm create vite@latest

因为我们需要在项目中进行骑牛，所以这里我们再安装一个请求包 axios

npm i axios

在 src/api/request.js 文件中，简单写一个 axios 逻辑

在 src/api/methods.js 文件中，封装get post 等请求

再创建一个 user.js 进行接口代码编写

import { GET } from '../methods'

const commonAPI = '/api'

const API = {
  user: '/user'
}

/**
 * 账号密码登录
 */
export const userInfo = (data) => GET(commonAPI + API.user, data)

我们在 App.vue 中进行引用

<script setup>
import { userInfo } from './api/user'

userInfo().then((res) => {
  console.log(res, 'res')
})
</script>

上面处理完毕后，我们启动 vue 项目，可以发现我们的端口号是 3000 。

然后我们的报错就来了

会很清楚的看到，我们在没有任何配置的情况下去访问的话，就是报错。

因为我们的 Express 提供的接口是 8089。

所以这里我们需要配置 vite.config.js，来解决跨域问题。

  server: {
    open: '/',
    proxy: {
      '/api': {
        target: 'http://localhost:8089',
        changeOrigin: true // 确定代理
      }
    }
  }

之后再次访问我们的项目，就可以看到接口来了。

总结

这次是我们前端通过配置，来解决跨域访问后端提供的接口，测试 Express 接口可以访问成功。