当前位置: 首页 > news >正文

Next.js 入门学习

一、引言

在现代 Web 开发领域,Next.js 已成为构建高性能、可扩展且用户体验卓越的 React 应用程序的重要框架。它基于 React 并提供了一系列强大的特性和工具,能够帮助开发者更高效地构建服务器端渲染(SSR)、静态站点生成(SSG)以及客户端渲染(CSR)应用,无论是开发复杂的企业级应用还是简单的个人博客,Next.js 都展现出了其独特的优势。本文将带领读者从 Next.js 的基础知识开始,逐步深入到高级应用场景,全面掌握 Next.js 的开发技能。

二、Next.js 基础入门

(一)环境搭建

在开始使用 Next.js 之前,需要确保已经安装了 Node.js 和 npm(Node 包管理器)。创建一个新的 Next.js 项目可以使用 create-next-app 命令行工具,它会自动生成一个包含基本结构和配置的 Next.js 项目模板。例如:

npx create-next-app my-next-app
cd my-next-app

这将创建一个名为 my-next-app 的项目,并进入到该项目目录中。

(二)页面路由

Next.js 采用基于文件系统的路由机制。在项目的 pages 目录下创建的每个 .js.jsx.ts 或 .tsx 文件都对应一个路由。例如,创建一个 pages/about.js 文件,那么访问 /about 路径时就会渲染该页面组件。
动态路由也非常容易实现,通过在文件名中使用方括号来定义动态参数。例如,pages/post/[id].js 可以匹配 /post/1/post/2 等不同的动态路径,在组件内部可以通过 useRouter 钩子获取路由参数。

(三)页面组件

Next.js 的页面组件是普通的 React 组件,但具有一些特殊的生命周期方法和属性。例如,getServerSideProps 方法可以在服务器端获取数据并将其作为页面组件的 props 传递给客户端。以下是一个简单的示例:

import React from 'react';const HomePage = ({ data }) => {return (<div><h1>Home Page</h1><p>{data}</p></div>);
};export async function getServerSideProps() {const res = await fetch('https://api.example.com/data');const data = await res.json();return {props: {data}};
}export default HomePage;

在这个示例中,getServerSideProps 方法从一个 API 中获取数据,并将其传递给 HomePage 组件进行渲染。

三、Next.js 核心概念深入理解

(一)数据获取策略

  1. 服务器端渲染(SSR)
    • 如上述 getServerSideProps 示例,SSR 在每次页面请求时在服务器端执行数据获取操作,然后将渲染好的 HTML 页面发送给客户端。这对于需要实时数据且对 SEO 友好的应用非常重要,因为搜索引擎爬虫可以直接获取到完整的页面内容。
    • 优点:良好的 SEO 效果,初始页面加载速度快(包含数据),数据实时性强。
    • 缺点:服务器负载较高,因为每次请求都要进行数据获取和页面渲染操作。
  2. 静态站点生成(SSG)
    • 使用 getStaticProps 和 getStaticPaths 方法可以实现静态站点生成。getStaticProps 用于在构建时获取数据并生成静态 HTML 文件,getStaticPaths 则用于指定动态路由的参数列表,以便在构建时为每个可能的路径生成对应的页面。例如:
export async function getStaticProps() {const res = await fetch('https://api.example.com/data');const data = await res.json();return {props: {data},// 表示该页面在构建后不会过期,可长期缓存revalidate: 60 * 60 * 24 // 一天后重新验证数据是否需要更新};
}export async function getStaticPaths() {const res = await fetch('https://api.example.com/posts');const posts = await res.json();const paths = posts.map((post) => ({params: {id: post.id.toString()}}));return {paths,fallback: false // 如果路径不存在,返回 404 页面};
}
  • 优点:页面加载速度极快,因为是预先生成的静态文件,服务器负载低,适合内容相对固定或更新不频繁的网站。
  • 缺点:对于数据频繁更新的场景,可能需要手动触发重新构建或设置较短的重新验证时间,增加构建复杂性。
  1. 客户端渲染(CSR)
    • 如果页面不需要在初始加载时就展示数据或者数据获取操作相对简单且不影响 SEO,可以直接在组件的 useEffect 钩子中进行数据获取。例如:
import React, { useEffect, useState } from 'react';const AboutPage = () => {const [data, setData] = useState(null);useEffect(() => {const fetchData = async () => {const res = await fetch('https://api.example.com/about-data');const data = await res.json();setData(data);};fetchData();}, []);return (<div><h1>About Page</h1>{data && <p>{data}</p>}</div>);
};export default AboutPage;
  • 优点:减轻服务器压力,应用交互性好,适合数据更新频繁且对初始加载数据要求不高的应用。
  • 缺点:初始页面加载时可能出现空白或无数据状态,SEO 效果较差。

(二)样式处理

  1. CSS 模块
    • Next.js 支持 CSS 模块,通过将 CSS 文件命名为 .module.css,在组件中可以导入并使用其中的类名,类名会被自动转换为唯一的哈希值,避免全局样式冲突。例如:
/* styles.module.css */
.container {background-color: #f5f5f5;padding: 20px;
}
import React from 'react';
import styles from './styles.module.css';const MyComponent = () => {return (<div className={styles.container}><h1>My Component</h1></div>);
};export default MyComponent;
  1. CSS-in-JS 库
    • 也可以使用流行的 CSS-in-JS 库如 styled-components 或 emotion。以 styled-components 为例:
import React from 'react';
import styled from'styled-components';const StyledButton = styled.button`background-color: #007bff;color: white;padding: 10px 20px;border: none;border-radius: 5px;
`;const ButtonComponent = () => {return (<StyledButton>Click Me</StyledButton>);
};export default ButtonComponent;
  • 这些库允许在 JavaScript 中编写样式,提供了更灵活的动态样式生成能力和更好的组件隔离性。

(三)API 路由

Next.js 提供了方便的 API 路由功能。在项目的 pages/api 目录下创建的文件会被视为 API 端点。例如,创建一个 pages/api/hello.js 文件:

export default function handler(req, res) {res.status(200).json({ message: 'Hello, Next.js API!' });
}

这样就创建了一个简单的 API 路由,当访问 /api/hello 时会返回相应的 JSON 数据。可以在 API 路由中进行数据库操作、与其他服务集成等各种后端逻辑处理。

四、Next.js 高级应用与优化

(一)代码分割与动态导入

Next.js 自动进行代码分割,只加载当前页面所需的 JavaScript 代码,提高页面加载速度。同时,也可以使用动态导入语法来进一步优化代码加载。例如:

import dynamic from 'next/dynamic';const DynamicComponent = dynamic(() => import('./DynamicComponent'), {loading: () => <p>Loading...</p>
});const MyPage = () => {return (<div><h1>My Page</h1><DynamicComponent /></div>);
};export default MyPage;

在这个示例中,DynamicComponent 只有在需要时才会被加载,并且在加载过程中会显示一个加载提示。

(二)错误处理与页面回退

  1. 错误边界
    • 在 Next.js 中可以使用错误边界组件来捕获子组件中的错误,防止整个应用崩溃。例如:
import React, { Component } from 'react';class ErrorBoundary extends Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, errorInfo) {// 可以在这里记录错误信息,例如发送到日志服务console.log(error, errorInfo);}render() {if (this.state.hasError) {return <h1>Something went wrong.</h1>;}return this.props.children;}
}export default ErrorBoundary;

然后在页面组件中使用错误边界:

const MyPage = () => {return (<ErrorBoundary><SomeComponentThatMightError /></ErrorBoundary>);
};
  1. 自定义 404 页面和 500 页面
    • 在 pages 目录下创建 404.js 和 500.js 文件,分别用于处理 404 页面未找到错误和 500 内部服务器错误。例如:
// 404.js
import React from 'react';const NotFoundPage = () => {return (<div><h1>Page Not Found</h1><p>Sorry, the page you are looking for does not exist.</p></div>);
};export default NotFoundPage;
// 500.js
import React from 'react';const ErrorPage = () => {return (<div><h1>Internal Server Error</h1><p>An unexpected error has occurred. Please try again later.</p></div>);
};export default ErrorPage;

(三)性能优化

  1. 图像优化
    • Next.js 提供了内置的图像组件 <Image>,它可以自动优化图像,包括调整大小、格式转换等。例如:
import Image from 'next/image';const MyPage = () => {return (<div><Imagesrc="/my-image.jpg"alt="My Image"width={500}height={300}/></div>);
};
  • 这不仅可以提高图像加载速度,还可以节省带宽。
  1. 缓存策略
    • 对于服务器端渲染和静态站点生成的页面,可以设置合理的缓存策略。如在 getStaticProps 中的 revalidate 属性可以控制页面重新验证数据更新的时间间隔。对于 API 路由,也可以设置响应头中的缓存控制信息,例如:
export default function handler(req, res) {res.setHeader('Cache-Control', 'public, max-age=3600'); // 缓存 1 小时res.status(200).json({ message: 'Cached Data!' });
}

五、Next.js 与其他技术的集成

(一)与 Redux 集成

  1. 安装依赖
    • 首先安装 redux 和 next-redux-wrapper 库:
npm install redux next-redux-wrapper
  1. 创建 Redux 存储
    • 在项目中创建一个 store.js 文件:
import { createStore } from'redux';const initialState = {count: 0
};const reducer = (state = initialState, action) => {switch (action.type) {case 'INCREMENT':return {...state, count: state.count + 1 };default:return state;}
};const makeStore = () => createStore(reducer);export default makeStore;
  1. 在 Next.js 中使用 Redux
    • 在 pages/_app.js 文件中使用 next-redux-wrapper 进行集成:
import React from 'react';
import App, { Container } from 'next/app';
import { Provider } from'redux';
import withRedux from 'next-redux-wrapper';
import makeStore from '../store';class MyApp extends App {static async getInitialProps({ Component, ctx }) {const pageProps = Component.getInitialProps? await Component.getInitialProps(ctx) : {};return { pageProps };}render() {const { Component, pageProps, store } = this.props;return (<Container><Provider store={store}>{<Component {...pageProps} />}</Provider></Container>);}
}export default withRedux(makeStore)(MyApp);
  • 然后在页面组件中就可以使用 Redux 的 useSelector 和 useDispatch 钩子来访问和修改状态。

(二)与 GraphQL 集成

  1. 安装依赖
    • 安装 apollo-clientapollo-boostgraphql 和 next-with-apollo 等库:
npm install apollo-client apollo-boost graphql next-with-apollo
  1. 创建 Apollo 客户端
    • 在项目中创建一个 apolloClient.js 文件:
import { ApolloClient, InMemoryCache } from '@apollo/client';const client = new ApolloClient({uri: 'https://your-graphql-api-url',cache: new InMemoryCache()
});export default client;
  1. 在 Next.js 中使用 Apollo
    • 在 pages/_app.js 文件中集成:
import React from 'react';
import App, { Container } from 'next/app';
import withApollo from 'next-with-apollo';
import ApolloClient from '../apolloClient';class MyApp extends App {static async getInitialProps({ Component, ctx, apolloClient }) {let pageProps = {};if (Component.getInitialProps) {pageProps = await Component.getInitialProps(ctx);}return { pageProps };}render() {const { Component, pageProps, apolloClient } = this.props;return (<Container><ApolloProvider client={apolloClient}>{<Component {...pageProps} />}</ApolloProvider></Container>);}
}export default withApollo(ApolloClient)(MyApp);
  • 之后在页面组件中就可以使用 useQueryuseMutation 等 Apollo 钩子进行 GraphQL 查询和变更操作。

六、Next.js 项目部署与运维

(一)部署到 Vercel

  1. 创建 Vercel 账号并连接 GitHub 或其他代码托管平台
    • 登录 Vercel 官网(Vercel: Build and deploy the best web experiences with the Frontend Cloud),按照提示创建账号并连接到你的代码仓库。
  2. 配置项目
    • 在 Vercel 控制台中选择你的 Next.js 项目,根据项目的特点配置环境变量、构建命令等。对于 Next.js 项目,通常构建命令为 next build,启动命令为 next start
  3. 部署
    • 点击部署按钮,Vercel 会自动拉取代码,安装依赖,构建项目并将其部署到全球分布式的服务器上,提供高性能的访问服务。

(二)部署到其他云平台

  1. 准备服务器环境
    • 例如部署到 AWS EC2 实例,需要先创建一个 EC2 实例,选择合适的操作系统(如 Ubuntu),安装 Node.js、npm 等运行环境。
  2. 构建和上传项目
    • 在本地项目目录中运行 next build 构建项目,然后将生成的 .next 目录以及其他必要的文件(如 package.jsonpublic 目录等)上传到服务器。
  3. 启动项目
    • 在服务器上运行 next start 命令启动 Next.js 应用。可以使用进程管理工具如 pm2 来守护进程,确保应用在服务器重启等情况下能够自动重新启动。例如:
npm install -g pm2
pm2 start "next start" --name my-next-app

七、总结

Next.js 以其强大的功能和灵活的特性,为现代 Web 开发提供了全方位的解决方案。从基础的环境搭建与页面路由,到深入的数据获取策略、样式处理和 API 路由,再到高级的代码分割、错误处理、性能优化以及与其他技术的集成,最后到项目的部署与运维,每一个环节都紧密相连,共同构建起高效、稳定且用户体验良好的 Web 应用程序。

通过掌握 Next.js,开发者能够在不同的应用场景中做出合适的技术选型。无论是追求极致 SEO 效果和初始加载速度的内容型网站,还是注重交互性和数据实时更新的应用程序,Next.js 都能通过其服务器端渲染、静态站点生成和客户端渲染的灵活组合来满足需求。在样式处理方面,CSS 模块和 CSS-in-JS 库的支持给予了开发者丰富的选择,能够轻松实现组件化的样式管理,避免样式冲突,提高开发效率和代码可维护性。

总之,学习 Next.js 不仅仅是掌握一个框架,更是深入理解现代 Web 开发的最佳实践和技术趋势。随着 Web 技术的不断发展,Next.js 也在持续演进,不断推出新的特性和优化,为开发者提供更强大的工具和更广阔的创作空间。无论是初入 Web 开发领域的新手,还是经验丰富的资深开发者,深入学习和应用 Next.js 都将对提升自身技术水平和开发高质量的 Web 应用产生积极而深远的影响,助力在日益激烈的技术竞争中脱颖而出,创造出更具创新性和价值的 Web 项目。

相关文章:

Next.js 入门学习

一、引言 在现代 Web 开发领域&#xff0c;Next.js 已成为构建高性能、可扩展且用户体验卓越的 React 应用程序的重要框架。它基于 React 并提供了一系列强大的特性和工具&#xff0c;能够帮助开发者更高效地构建服务器端渲染&#xff08;SSR&#xff09;、静态站点生成&#…...

2024年认证杯SPSSPRO杯数学建模B题(第一阶段)神经外科手术的定位与导航解题全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 B题 神经外科手术的定位与导航 原题再现&#xff1a; 人的大脑结构非常复杂&#xff0c;内部交织密布着神经和血管&#xff0c;所以在大脑内做手术具有非常高的精细和复杂程度。例如神经外科的肿瘤切除手术或血肿清除手术&#xff0c;通常需要…...

安卓底层相机流的传输方式

这是安卓 相机流的定义 typedef enum {CAM_STREAMING_MODE_CONTINUOUS, /* continous streaming */CAM_STREAMING_MODE_BURST, /* burst streaming */CAM_STREAMING_MODE_BATCH, /* stream frames in batches */CAM_STREAMING_MODE_MAX} cam_streaming_mode_t; 在ca…...

【单链表】(更新中...)

一、 题单 206.反转链表203.移除链表元素 876.链表的中间结点BM8 链表中倒数最后k个结点21.合并两个有序链表 二、题目简介及思路 206.反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 思路简单&#xff0c;但是除了要两个指针进…...

开源堡垒机JumpServer配置教程:使用步骤与配置

开源堡垒机JumpServer配置教程&#xff1a;使用步骤与配置 上一篇文章星哥讲了如何安装JumpServer堡垒机&#xff0c;本篇文章来讲如何配置和使用JumpServer。 安装成功后&#xff0c;通过浏览器访问登录 JumpServer 地址: http://<JumpServer服务器IP地址>:<服务运…...

上门服务小程序开发,打造便捷生活新体验

随着互联网的快速发展&#xff0c;各种上门服务成为了市场的发展趋势&#xff0c;不管是各种外卖、家政、美甲、维修、按摩等等&#xff0c;都可以提供上门服务&#xff0c;人们足不出户就可以满足各种需求&#xff0c;商家也能够获得新的拓展业务渠道&#xff0c;提高整体收益…...

iOS中的类型推断及其在Swift编程语言中的作用和优势

iOS中的类型推断及其在Swift编程语言中的作用和优势 一、iOS中的类型推断 类型推断&#xff08;Type Inference&#xff09;是编程语言编译器或解释器自动推断变量或表达式的类型的能力。在支持类型推断的语言中&#xff0c;开发者在声明变量时无需显式指定其类型&#xff0c…...

工业检测基础-缺陷形态和相机光源选型

缺陷形态与相机选择依据 微小点状缺陷&#xff08;如微小气泡、杂质颗粒&#xff09; 相机选择依据&#xff1a; 分辨率&#xff1a;需要高分辨率相机&#xff0c;无论是面阵还是线阵相机&#xff0c;以确保能够清晰地分辨这些微小的点。对于面阵相机&#xff0c;像元尺寸要小&…...

Python100道练习题

Python100道练习题 BIlibili 1、两数之和 num1 20 num2 22result num1 num2print(result)2、一百以内的偶数 list1 []for i in range(1,100):if i % 2 0:list1.append(i) print(list1)3、一百以内的奇数 # 方法一 list1 [] for i in range(1,100):if i % 2 ! 0:lis…...

2024年华中杯数学建模A题太阳能路灯光伏板的朝向设计问题解题全过程文档及程序

2024年华中杯数学建模 A题 太阳能路灯光伏板的朝向设计问题 原题再现 太阳能路灯由太阳能电池板组件部分&#xff08;包括支架&#xff09;、LED灯头、控制箱&#xff08;包含控制器、蓄电池&#xff09;、市电辅助器和灯杆几部分构成。太阳能电池板通过支架固定在灯杆上端。…...

【JavaWeb后端学习笔记】Java上传文件到阿里云对象存储服务

阿里云对象存储 1、创建阿里云对象存储节点2、上传文件2.1 修改项目配置文件2.2 定义一个Properties类获取配置信息2.3 准备一个alioss工具类2.4 创建注册类&#xff0c;将AliOssUtil 注册成Bean2.5 使用AliOssUtil 工具类上传文件2.6 注意事项 使用阿里云对象存储服务分为以下…...

网盘管理系统

文末获取源码和万字论文&#xff0c;制作不易&#xff0c;感谢点赞支持。 设计题目&#xff1a;网盘管理系统的设计与实现 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软…...

learn-(Uni-app)跨平台应用的框架

使用 Vue.js 开发所有前端应用的框架&#xff0c;开发者编写一份代码&#xff0c;可发布到iOS、Android、Web&#xff08;包括微信小程序、百度小程序、支付宝小程序、字节跳动小程序、H5、App等&#xff09;等多个平台。 跨平台&#xff1a;Uni-app 支持编译到iOS、Android、W…...

趋同进化与趋异进化的区别及分析方法-随笔03

趋同进化与趋异进化的区别及分析方法 1. 引言 在生物学中&#xff0c;进化是指生物种群随着时间的推移&#xff0c;通过遗传变异、自然选择、基因漂变等机制的作用&#xff0c;逐渐改变其基因型和表型的过程。进化的方式有很多种&#xff0c;其中趋同进化&#xff08;Converg…...

2024年华中杯数学建模B题使用行车轨迹估计交通信号灯周期问题解题全过程文档及程序

2024年华中杯数学建模 B题 使用行车轨迹估计交通信号灯周期问题 原题再现 某电子地图服务商希望获取城市路网中所有交通信号灯的红绿周期&#xff0c;以便为司机提供更好的导航服务。由于许多信号灯未接入网络&#xff0c;无法直接从交通管理部门获取所有信号灯的数据&#x…...

高效查找秘密武器一:位图

有这样的一个问题&#xff1a; 给40亿个不重复的无符号整数&#xff0c;没排过序。给一个无符号整数&#xff0c;如何快速判断一个数是否在这40亿个数 中。 那么我们一般会想到这样做的 1.遍历&#xff0c;时间复杂度O(n) 2.排序&#xff08;N*logN&#xff09;&#xff0c…...

自回归模型(AR )

最近看到一些模型使用了自回归方法&#xff0c;这里就学习一下整理一下相关内容方便以后查阅。 自回归模型&#xff08;AR &#xff09; 自回归模型&#xff08;AR &#xff09;AR 模型的引入AR 模型的定义参数的估计方法模型阶数选择平稳性与因果性条件自相关与偏自相关函数优…...

Linux内核 -- Linux驱动从设备树dts文件中读取字符串信息的方法

从Linux设备树读取字符串信息 在Linux内核中&#xff0c;从设备树&#xff08;DTS&#xff09;中读取字符串信息&#xff0c;通常使用内核提供的设备树解析API。这些API主要位于<linux/of.h>头文件中。 常用函数解析 1. of_get_property 获取设备树中的属性。原型:con…...

图片懒加载+IntersectionObserver

通过IntersectionObserver实现图片懒加载 在JavaScript中&#xff0c;图片懒加载可以通过监听滚动事件和计算图片距离视口顶部的距离来实现 在HTML中&#xff0c;将src属性设置为一个透明的1x1像素图片作为占位符&#xff0c;并将实际的图片URL设置为data-src属性。 <img c…...

MySQL的获取、安装、配置及使用教程

一、获取MySQL 官网地址:https://www.mysql.com MySQL产品:企业版(Enterprise)和社区版(Community)社区版是通过GPL协议授权的开源软件&#xff0c;可以免费使用。企业版是需要收费的商业软件 MySQL版本历史:5.0、5.5、5.6、5.7和8.0(最新版本)两种打包版本:MSI(安装版)和ZI…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...