这篇文章主要是前端开发中常用的nodejs服务器来做全栈项目的, 如果你明白nodejs是怎么回事, vue也知道是怎么回事, 但就是不知道如何把他们联系起来, 看了这篇文章你就全明白了.
Node.js和Vue.js可以一起用于全栈开发，即使用Node.js作为后端服务器，Vue.js作为前端框架。Node.js可以处理服务器端的逻辑和数据存储，而Vue.js可以负责前端页面的展示和交互。这种全栈开发方式可以提高开发效率，并且可以实现前后端的快速协作.
如果有发现问题,请评论区留言指正,感谢阅读!!!
目录
一 环境
二 新建项目
三 搭建服务器
1. node环境安装
2. express创建web服务器
3 运行服务
四 客户端接收数据
4.1 安装axios
4.2 使用
4.3 组件处理返回数据
4.4 html部分
一 环境
博主用的电脑环境
- 系统: 是win10系统
- nodejs环境正常
- vue环境也正常的
二 新建项目
博主用的是之前的一个项目, 所以这里小伙伴也就是新建一个vue3 项目, 这个应该已经很熟悉了
//命令行工具运行 新建vue项目
npm init vue@latest三 搭建服务器
1. node环境安装
博主电脑已经有node运行环境了, 没有安装的可参考这个
2. express创建web服务器
这里为了方便, 我们使用express框架来安装服务器
2.1 项目初始化 找到项目根路径 输入指令 npm init
npm init2.2 安装依赖
npm install express --save2.3 创建一个服务器
创建服务器不难,只需要几行代码就搞定了
// 使用express搭建服务器
const express = require('express');
const app = express();app.get('/api/hello', (req, res) => {res.send('Hello, World!');
});app.listen(3000, () => {console.log('Server is running on port 3000');
});3 运行服务
找到创建服务器的文件下的路径 命令行 输入运行指令 启动服务
node server.js可以看到运行服务后 控制台打印出了 服务器已在3000端口运行, 我们通过get请求看到浏览器也出现了我们希望的 hello world.
四 客户端接收数据
现在我们已经成功定义了一个接口,并且经过测试, 可以正常拿到数据并显示的, 那么我们如何在vue中显示呢?
4.1 安装axios
axios是一个基于Promise的HTTP客户端，可以用于发送HTTP请求,支持node端和浏览器端 同样的API,node和浏览器全支持.
npm install axios4.2 使用
安装好之后就可以在vue组件中使用了, 首先引入axios 然后使用axios请求接口数据, 这里接口改成3001了注意下, 后面会说为什么改.
import axios from 'axios';import {ref } from 'vue';const message= ref('')const getchData =() => {axios.get('http://localhost:3001/api/hello').then(response => {// 处理接口返回的数据message.value = response.data }}).catch(error => {// 处理错误});}这里向服务器发送请求的时候, 可能会报错 需要注意一下, 这个错误是网络没有连接到服务器 ERR_CONNECTION_REFUSED,这个错误大多是服务接口看是否些错误 或者服务没有启动.
后来是服务器启动的页面被我关掉了.
还有一个错误是 No ‘Access-Control-Allow-Origin’ header is present on the requested resource
当浏览器尝试从不同于其源（域、协议或端口）的服务器加载资源时，会触发同源策略。然而，有时我们确实需要从不同的源加载资源，这时就需要使用跨源资源共享（CORS）机制。如果在请求跨域资源时，服务器没有返回Access-Control-Allow-Origin这个HTTP响应头，浏览器就会阻止这个请求，并抛出一个错误
这个错误解决办法就是 项目安装cors就可以了
npm install cors --save
服务器页面加入这两句代码
const cors = require('cors')
app.use(cors()); //使用cors中间件允许所有跨域请求如果不生效的话 项目重新执行下 npm install 重启服务就可以
4.3 组件处理返回数据
这里我们把返回的对象打印出来 可以看到数据 把data值赋值给message显示到页面上
import axios from 'axios';import {ref } from 'vue';const message= ref('')const error = ref('');const getchData =() => {axios.get('http://localhost:3001/api/hello').then(response => {// 处理接口返回的数据if(response.status == 200){message.value = response.dataconsole.log(response)}}).catch(error => {// 处理错误error.value = error.message;});}
4.4 html部分
<button @click="getchData">获取数据</button>
<span>{{message}} </span>到这里我们已经完成了从新建一个项目 到 搭建一个服务器 定义一个接口 向服务器请求数据 处理请求数据 显示到组件页面.
相关阅读
Express基于Node.js基础知识【2】全面总结 推荐-CSDN博客
MySQL 预处理、如何在 [Node.js] 中使用 MySQL？_node 使用mysql-CSDN博客
使用示例)
