NodeJS服务器 + Vue3框架 从搭建服务器 定义接口 到请求数据页面展示

本篇文章主要介绍使用Node.js和Vue.js一起进行全栈开发，即使用Node.js作为后端服务器，Vue.js作为前端框架。Node.js可以处理服务器端的逻辑和数据存储，而Vue.js可以负责前端页面的展示和交互。这种全栈开发方式可以提高开发效率，并且可以实现前后端的快速协作。（nodejs和vue环境在这里就不多做介绍了）

后端项目

初始化项目

npm init

安装express

npm install express --save

创建服务器server.js

// 使用express搭建服务器
const express = require('express');  
const app = express();
 
// 定义get接口
app.get('/api/hello', (req, res) => {
  res.send('Hello, World!');
});
 
// 这里监听的端口要和服务器启动`端口一致`，否则访问服务会报ERR_CONNECTION_REFUSED
app.listen(3000, () => {
  console.log('Server is running on port 3000'); // 启动服务成功会打印输出
});

启动服务

node server.js

启动服务截图：

验证服务是否启动成功

在浏览器中输入服务器随便一个get方式的api看是否正常输出

前端项目

新建vue3项目

npm init vue@latest

安装axios

axios基于Promise的HTTP客户端，node和浏览器全支持。

npm install axios

启动前端项目

npm run dev

启动时报错问题解决

在启动项目时若遇到报错为error when starting dev server: TypeError:
crypto$2.getRandomValues is not a function

解决方案：将 node 升级为18 版本以上后再启动（我这里升级到了22.10.0了）

vue页面使用axios调用node接口

完整代码

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
const message = ref('')

const getchData = () => {
  axios
    .get('/api/api/hello')
    .then((res) => {
      console.log('返回数据', res)
      if (res.status == 200) {
        message.value = res.data
      }
    })
    .catch((err) => {
      {
        console.error('err：', err)
      }
    })
}
</script>

<template>
  <div class="greetings">
    <button @click="getchData">调用接口，获取数据</button>
    <span>{{ message }} </span>
  </div>
</template>

页面效果图

点击按钮，则会看到接口返回的数据。

跨域问题解决

前端在使用接口时若遇到跨域问题，则在vite.config.js文件中配置服务器代理。

// 配置完整代码
server: {
    // 服务器代理
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true, // 允许跨域
        rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径，去掉 /api 前缀
      },
    },
  }

到这里我们已经完成了从新建一个项目 到 搭建一个服务器 定义一个接口 向服务器请求数据 处理请求数据 显示到组件页面。

参考文章：https://blog.csdn.net/weixin_43483590/article/details/143864595