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

NodeJS服务器 + Vue3框架全栈开发 后端项目初始化项目安装express创建服务器server.js启动服务验证服务是否启动成功 前端项目新建vue3项目安装axios启动前端项目启动时报错问题解决 vue页面使用axios调用node接口完整代码页面效果图跨域问题解决

本篇文章主要介绍使用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 前缀 }, }, }

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

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