Node.js简介及vue项目与Node.js通信方法

目录

  • [一. 基础介绍](#一. 基础介绍)
  • [二. 应用场景](#二. 应用场景)
  • [三. Vue 与 Node.js 的通信方法](#三. Vue 与 Node.js 的通信方法)
    • [1. 通过 HTTP 请求通信(主流)](#1. 通过 HTTP 请求通信(主流))
    • [2. 通过 WebSocket 实现实时通信](#2. 通过 WebSocket 实现实时通信)
    • [3. 通过 GraphQL 进行通信](#3. 通过 GraphQL 进行通信)

一. 基础介绍

定义:

  • Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时,用于构建高性能、可扩展的网络应用程序。

特点:

  • 非阻塞 I/O 模型:Node.js 的事件循环机制使其能够高效地处理大量并发连接,适合开发高并发的网络应用程序。
  • 异步编程:Node.js 基于事件驱动和非阻塞 I/O 的异步编程模型,能够高效地处理 I/O 密集型任务,如文件操作、网络请求等。
  • 丰富的生态系统:拥有庞大的 npm(Node Package Manager)生态系统,提供了众多的第三方模块,方便开发者快速构建各种功能的应用程序。

二. 应用场景

  • Web 后端开发:Node.js 可以用来构建 Web 服务器,处理 HTTP 请求和响应,与前端框架(如 Vue)配合,实现前端和后端的分离开发。
  • 实时应用:利用 WebSocket 和 Socket.io 等模块,Node.js 能够快速开发实时通信应用,如在线聊天、实时协作编辑、实时通知等。
  • 爬虫应用:Node.js 提供了丰富的 HTTP 请求库(如 axios、request 等),可以轻松实现网络爬虫,抓取网页数据。
  • 脚本任务:可以编写各种脚本任务,如自动化构建脚本、自动化测试脚本等,提高开发效率。
  • 物联网:Node.js 的实时性和并发处理能力使其在物联网领域也有广泛应用,可以用来处理大量设备的连接和数据传输。

三. Vue 与 Node.js 的通信方法

1. 通过 HTTP 请求通信(主流)

基本原理 :Vue 前端通过 HTTP 请求(如 GET、POST、PUT、DELETE 等)与 Node.js 后端进行数据交互。
常用库:

Axios:Vue 常用的 HTTP 请求库,支持浏览器和 Node.js 环境,提供链式调用和 Promise 支持,方便处理异步请求。
实现步骤:

在 Vue 前端组件中,使用 Axios 发送 HTTP 请求:

javascript 复制代码
// Vue 组件
async function fetchData() {
  try {
    const response = await axios.get('http://localhost:3000/api/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

在 Node.js 后端使用 Express.js 创建 API:

javascript 复制代码
// Node.js 后端
const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from Node.js!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

2. 通过 WebSocket 实现实时通信

基本原理 :WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,Vue 前端和 Node.js 后端可以通过 WebSocket 实现实时双向通信。
常用库

socket.io:提供了一个简单易用的 WebSocket 实现,支持自动重连、断线重传等功能。
实现步骤

在 Vue 前端引入 socket.io-client:

javascript 复制代码
// Vue 组件
import io from 'socket.io-client';

const socket = io('http://localhost:3000');

socket.on('connect', () => {
  console.log('Connected to server');
});

socket.on('message', (data) => {
  console.log('Received message:', data);
});

socket.emit('message', 'Hello from client');

在 Node.js 后端使用 socket.io

javascript 复制代码
// Node.js 后端
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require('socket.io');
const io = new Server(server);

io.on('connect', (socket) => {
  console.log('Client connected');

  socket.on('message', (data) => {
    console.log('Received message:', data);
    io.emit('message', 'Hello from server');
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

3. 通过 GraphQL 进行通信

基本原理 :GraphQL 是一种用于 API 的查询语言,允许客户端精确地请求所需的数据,减少数据传输的冗余。
常用库

apollo-client 和 apollo-server:分别用于 Vue 前端和 Node.js 后端实现 GraphQL 的客户端和服务端。
实现步骤

在 Vue 前端使用 apollo-client:

javascript 复制代码
// Vue 组件
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});

client.query({
  query: gql`
    query GetBooks {
      books {
        id
        title
        author
      }
    }
  `
}).then((response) => {
  console.log(response.data);
});

在 Node.js 后端使用 apollo-server 和 express:

javascript 复制代码
// Node.js 后端
const { ApolloServer, gql } = require('apollo-server-express');
const express = require('express');

const typeDefs = gql`
  type Book {
    id: ID!
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }
`;

const resolvers = {
  Query: {
    books: () => [
      { id: '1', title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
      { id: '2', title: 'To Kill a Mockingbird', author: 'Harper Lee' }
    ]
  }
};

const server = new ApolloServer({ typeDefs, resolvers });

const app = express();
server.applyMiddleware({ app, path: '/graphql' });

app.listen(4000, () => {
  console.log('Server is running on port 4000');
});
相关推荐
大猩猩X9 分钟前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
蓝天白云下遛狗23 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景3 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js