天津网站建设外贸嘉兴互联网公司

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