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

next.js-学习3

news 来源：原创 2025/9/13 16:00:25

next.js-学习3

    • 6. 设置数据库
      • 1. 传代码到github https://github.com/
      • 2. github和Vercel链接，用Vercel预览和部署
      • 3. 创建数据库
      • 4. 初始化数据库
    • 7.读取数据
      • 1. 在/app/lib/data.ts中这两行是连接postgres的
      • 2. 在/app/dashboard/page.tsx中使用
      • 3.在/app/dashboard/page.tsx中使用
      • 4. /app/dashboard/page.tsx中使用
      • 5. card组件使用
    • 8.静态和动态渲染
    • 9.串流 解决加载缓慢导致白屏的问题
    • 10.部分预渲染 **Partial Prerendering (PPR)**

6. 设置数据库

1. 传代码到github https://github.com/

git init
git add README.md
git commit -m "first commit"
git branch -M main
//更改现有的远程仓库 URL，会让你输入密码
git remote set-url origin https://github.com/hexiaoming123/nextjs-dashboard.git
git push -u origin main

2. github和Vercel链接，用Vercel预览和部署

  1. https://vercel.com/signup
  2. 自己的推到next.js的项目，Settings->Project Settings->Framework Preset记得选Next.js,点击deploy部署
  3. 在这里插入图片描述

3. 创建数据库

  1. Storage中选postgres(好吧没了)请选https://vercel.com/marketplace/neon点击Install
  2. 在这里插入图片描述

4. 初始化数据库

  1. 点击Show secret 和 Copy Snippet

  2. 把生成的.env.local内容写到本地的.env中，在.gitignore添加忽略.env

  3. 在这里插入图片描述

  4. pnpm run dev运行项目后请求http://localhost:3000/seed，这里会执行placeholder-data.ts，页面返回Database seeded successfully表示成功，我是失败了，因为没这个模块，无法安装，替代方式：

  5. 安装bcryptjs

    pnpm add bcryptjs

  6. app/seed/route.ts下修改

    import bcrypt from 'bcryptjs';

    如果访问http://localhost:3000/seed成功了，就删除这个文件避免下次再初始化数据。

  7. 取消app/query/route.ts中注释，删除

      return Response.json({message:'Uncomment this file and remove this line. You can delete this file when you are finished.',});

    ，访问：http://localhost:3000/query这个验证是否能查询出数据

  8. 在这里插入图片描述

  9. 关联上项目,不然提交github代码后构建会失败在这里插入图片描述

7.读取数据

1. 在/app/lib/data.ts中这两行是连接postgres的

  1. import postgres from 'postgres';const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });// ...

2. 在/app/dashboard/page.tsx中使用

  1. import { Card } from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';export default async function Page() {return (<main><h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>Dashboard</h1><div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">{/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> */}{/* <Card title="Pending" value={totalPendingInvoices} type="pending" /> */}{/* <Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> */}{/* <Cardtitle="Total Customers"value={numberOfCustomers}type="customers"/> */}</div><div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">{/* <RevenueChart revenue={revenue}  /> */}{/* <LatestInvoices latestInvoices={latestInvoices} /> */}</div></main>);
}

3.在/app/dashboard/page.tsx中使用

import { fetchRevenue } from '@/app/lib/data';export default async function Page() {const revenue = await fetchRevenue();// ...
}

取消注释，取消/app/ui/dashboard/revenue-chart.tsx中注释，页面显示出了柱状图

4. /app/dashboard/page.tsx中使用

  1. import { fetchRevenue, fetchLatestInvoices } from '@/app/lib/data';const latestInvoices = await fetchLatestInvoices();//在revenue下边加上

  2. 取消注释，取消/app/ui/dashboard/latest-invoices注释，显示出了Latest Invoices最新的5条消息

5. card组件使用

  1. /app/dashboard/page.tsx中

    import {fetchRevenue,fetchLatestInvoices,fetchCardData,
} from '@/app/lib/data';//latestInvoices下边加上const {numberOfInvoices,numberOfCustomers,totalPaidInvoices,totalPendingInvoices,} = await fetchCardData();

    await Promise.all 可以同时加载多个接口

8.静态和动态渲染

​ 静态渲染是页面不会随数据改变而改变，动态渲染是随着数据改变而改变。

  1. 例如/app/lib/data.ts中打开fetchRevenue函数注释，模拟：一个接口加入个3s的耗时，另一个接口也跟着受了影响

    export async function fetchRevenue() {try {// We artificially delay a response for demo purposes.// Don't do this in production :)console.log('Fetching revenue data...');await new Promise((resolve) => setTimeout(resolve, 3000));const data = await sql<Revenue[]>`SELECT * FROM revenue`;console.log('Data fetch completed after 3 seconds.');return data;} catch (error) {console.error('Database Error:', error);throw new Error('Failed to fetch revenue data.');}
}

    点击home的时候页面会等3s的空白才能出来概览页

9.串流 解决加载缓慢导致白屏的问题

创建/app/dashboard/loading.tsx文件

export default function Loading() {return <div>Loading...</div>;
}

加载的时候右侧空白会变为Loading…，成功后右侧显示页面

在这里插入图片描述

/app/dashboard/loading.tsx加载骨架

import DashboardSkeleton from '@/app/ui/skeletons';export default function Loading() {return <DashboardSkeleton />;
}

在这里插入图片描述

在/app/dashboard下创建overview文件夹，移动/app/dashboard下的loading.tsx和page.tsx，这样以后访问概念就不会影响其他页面了，http://localhost:3000/dashboard/overview

开始优化加载页面，/dashboard/overview/page.tsx中，

import { fetchLatestInvoices, fetchCardData } from '@/app/lib/data'; // 删除 fetchRevenue
const revenue = await fetchRevenue() // 删除这行

使用Suspense 和RevenueChartSkeleton

import { Suspense } from 'react';
import { RevenueChartSkeleton } from '@/app/ui/skeletons';

包裹

<Suspense fallback={<RevenueChartSkeleton />}><RevenueChart /></Suspense>

修改/app/ui/dashboard/revenue-chart.tsx文件

import { fetchRevenue } from '@/app/lib/data';//添加
import { Revenue } from '@/app/lib/definitions'; //移除
export default async function RevenueChart() { // 组件异步，移除参数const revenue = await fetchRevenue(); // 在组件内部获取数据

这样再访问http://localhost:3000/dashboard/overview会很快加载出来

/dashboard/overview/page.tsx中，

import { fetchCardData } from '@/app/lib/data'; // 删除 fetchLatestInvoices

//更新
import {RevenueChartSkeleton,LatestInvoicesSkeleton,
} from '@/app/ui/skeletons';

// 删除 const latestInvoices = await fetchLatestInvoices()

//更新<LatestInvoices />不要怕报错，下个组件会删除参数就不报错了
<Suspense fallback={<RevenueChartSkeleton />}><RevenueChart /></Suspense><Suspense fallback={<LatestInvoicesSkeleton />}><LatestInvoices /></Suspense>

/app/ui/dashboard/latest-invoices.tsx中

import { LatestInvoice } from '@/app/lib/definitions';//删除
import { fetchLatestInvoices } from '@/app/lib/data';//添加

export default async function LatestInvoices() {//删除了参数const latestInvoices = await fetchLatestInvoices();//在组件中直接获取数据

/app/dashboard/overview/page.tsx中，避免表头的cards不一起刷新，提到一个公共组件

import CardWrapper from '@/app/ui/dashboard/cards';//导入组件
import { Card } from '@/app/ui/dashboard/cards';//删除组件

//导入 CardsSkeleton组件
import {RevenueChartSkeleton,LatestInvoicesSkeleton,CardsSkeleton,
} from '@/app/ui/skeletons';

//使用CardWrapper组件<Suspense fallback={<CardsSkeleton />}><CardWrapper /></Suspense>//删除<Card组件

/app/ui/dashboard/cards.tsx中

import { fetchCardData } from '@/app/lib/data';//导入fetchCardData

export default async function CardWrapper() {
//使用fetchCardData函数const {numberOfInvoices,numberOfCustomers,totalPaidInvoices,totalPendingInvoices,} = await fetchCardData();//打开注释封装cardreturn (<><Card title="Collected" value={totalPaidInvoices} type="collected" /><Card title="Pending" value={totalPendingInvoices} type="pending" /><Card title="Total Invoices" value={numberOfInvoices} type="invoices" /><Cardtitle="Total Customers"value={numberOfCustomers}type="customers"/></>);
}

10.部分预渲染 Partial Prerendering (PPR)

  1. PPR 只在 Next.js canary 可用 (next@canary),Next.js 14开始引入的这个特性

    pnpm install next@canary

  2. 对于今天构建的大多数web应用程序，你要么为整个应用程序选择静态和动态渲染，要么选择特定的路由。在Next.js中，如果你在路由中调用一个动态函数（比如查询数据库），整个路由就会变成动态的

  3. 然而，大多数路由并不是完全静态或动态的。例如，考虑一个电子商务网站。您可能希望静态地呈现大部分产品信息页面，但也可能希望动态地获取用户的购物车和推荐产品，这允许您向用户显示个性化的内容

  4. 组件不依赖于数据，也不是针对用户个性化的，所以它可以是静态的。

    中的组件依赖于经常更改的数据，并且将针对用户进行个性化处理，因此它们可以是动态的。

  5. 在这里插入图片描述

  6. js 14引入了部分预渲染的实验版本——一个新的渲染模型，它允许你在同一条路径上结合静态和动态渲染的优点。例如:在这里插入图片描述

  7. 当用户访问路由时：

    提供一个静态路由shell，其中包括导航栏和产品信息，确保快速初始加载。

    外壳留下了一些洞，其中动态内容（如购物车和推荐产品）将异步加载。

    异步孔是并行流，减少了页面的总体加载时间

  8. next.config.ts中加入PPR选项，为Next.js应用启用PPR

     /* config options here */experimental: {ppr: 'incremental',},

    /app/dashboard/layout.tsx中加入

    export const experimental_ppr = true;

    这样在加载的时候会自动去部分预渲染，以后在生产中可能会很受欢迎，目前先稳稳别在生产用。

    推送到github上去项目访问：https://nextjs-dashboard-git-main-hes-projects-5f35bd0a.vercel.app/dashboard/overview能正常返回数据就可以了。

在这里插入图片描述

相关文章：

next.js-学习3

next.js-学习3 6. 设置数据库1. 传代码到github https://github.com/2. github和Vercel链接&#xff0c;用Vercel预览和部署3. 创建数据库4. 初始化数据库 7.读取数据1. 在/app/lib/data.ts中这两行是连接postgres的2. 在/app/dashboard/page.tsx中使用3.在/app/dashboard/page…...

编程日记 2025/9/13 16:00:25

Hadoop第2课（伪分布式集群的搭建）

jdk和hadoop安装包&#xff1a; hadoop-2.9.2.t......等2个文件官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘 1、用XFTP发送hadoop安装包和jdk到/home/hadoop/目录下&#xff08;hadoop用户的主目录&#xff09; 2、解压jdk安装包到~目录 卸载jdk的命令&#xff1a;r…...

编程日记 2025/9/12 22:29:32

Linux——进程池

前言&#xff1a;大佬写博客给别人看&#xff0c;菜鸟写博客给自己看&#xff0c;我是菜鸟。 1.实现思路 思路&#xff1a;通过创建匿名管道&#xff0c;来实现父子进程之间的通信 注1&#xff1a;父写&#xff0c;子读 注2&#xff1a;匿名管道只能用来进行具有血管关系的进程…...

编程日记 2025/9/11 8:41:44

JavaScript 简单类型与复杂类型-简单类型的内存分配

深入理解JavaScript中的简单类型&#xff08;基本数据类型&#xff09;和复杂类型&#xff08;引用数据类型&#xff09;如何在内存中存储对于编写高效、无误的代码至关重要。本文将专注于探讨简单类型的内存分配机制&#xff0c;即栈&#xff08;Stack&#xff09;内存&#x…...

编程日记 2025/9/11 12:48:10

深度生成模型（一）——具身智能综述与算法分类简介

具身智能对于机器人的控制可以分为端到端模型和非端到端模型&#xff1a; 端到端模型&#xff1a;具身模型&#xff08;如 ACT 和 DP&#xff09;将视觉感知&#xff08;Vision&#xff09;与动作生成&#xff08;Action&#xff09;整合为单一神经网络&#xff0c;直接实现从…...

编程日记 2025/9/10 20:34:27

Vue 中，使用模板（Template） 和 Render 函数编写组件的区别

在 Vue 2 中&#xff0c;模板&#xff08;Template&#xff09; 和 Render 函数 是两种不同的组件编写方式&#xff0c;它们各有特点和适用场景。以下是它们的核心区别和实际应用场景分析&#xff1a; 1. 基本区别 特性模板&#xff08;Template&#xff09;Render 函数语法形…...

编程日记 2025/9/12 16:39:50

【笔记】论文阅读方法（AI大模型）

1 为什么读论文 构建知识体系&#xff1a;通过Related Works快速了解该方向研究现状&#xff0c;追踪经典论文 紧跟前沿技术&#xff1a;了解领域内新技术及效果&#xff0c;快速借鉴到自身项目 培养科研逻辑&#xff1a;熟悉论文体系&#xff0c;了解如何创造新事物&#x…...

编程日记 2025/9/8 7:49:13

JWT+redis实现令牌刷新优化方案

令牌刷新优化方案的详细实现步骤&#xff1a; 1. 令牌服务层改造 1.1 JWT工具类增强 // JwtUtils.java 新增方法 public class JwtUtils {// 生成带动态过期时间的令牌public static String createToken(String subject, String userId, String username, long expirationMi…...

编程日记 2025/9/9 19:03:25

安全面试5

文章目录 sql的二次注入在linux下&#xff0c;现在有一个拥有大量ip地址的txt文本文档&#xff0c;但是里面有很多重复的&#xff0c;如何快速去重&#xff1f;在内网渗透中&#xff0c;通过钓鱼邮件获取到主机权限&#xff0c;但是发现内网拦截了tcp的出网流量&#xff0c;聊一…...

编程日记 2025/9/9 1:49:36

vim临时文件泄露

##解题思路 感觉ctfshow的题目都挺有意思的&#xff0c;大家可以去做做 首先题目提示vim临时文件泄露&#xff0c;一般在vim编辑的时候&#xff0c;会有个swp的中间文件生成&#xff0c;根据这个特性&#xff0c;从而可以猜测&#xff0c;我们可以通过访问一个swp文件路径&am…...

编程日记 2025/8/28 0:10:06

使用Docker将ros1自定义消息通过rosjava_bootstrap生成jar包

文章目录 预准备环境rosjava_bootstrap坏消息好消息 环境安装docker安装rosjava_bootstrap仓库rosjava_center仓库修改rosjava_bootstrap代码拉取docker镜像放置自己的自定义消息 启动docker编译 预准备环境 rosjava_bootstrap rosjava_bootstrap是将自定义的ROS消息生成java…...

编程日记 2025/9/10 1:41:34

本地快速搭建一套AI人脸识别技术研究学习的实验环境

如果你想在本地搭建一套学习和研究AI人脸识别技术的框架&#xff0c;建议使用开源工具和框架进行实验&#xff0c;因为它们通常提供了较为丰富的文档和社区支持&#xff0c;能够帮助你深入理解人脸识别的核心原理。以下是一套可行性强且综合性的方案&#xff0c;涵盖了人脸检测…...

编程日记 2025/9/8 16:09:12

SpringBoot项目连接Oracle视图报错整理

在若依框架中增加连接Oracle视图报错 工具测试连接 通过使用plsql连接数据库测试&#xff0c;连接成功 1. 相关配置内容 连接配置 url: jdbc:oracle:thin:192.168.0.210:1521:HIS username: portal_his password: XXXXXX driver-class-name: oracle.jdbc.driver.OracleDr…...

编程日记 2025/9/13 0:14:13

【我的 PWN 学习手札】House of Husk

House of Husk House of Husk是利用格式化输出函数如printf、vprintf在打印输出时&#xff0c;会解析格式化字符如%x、%lld从而调用不同的格式化打印方法&#xff08;函数&#xff09;。同时C语言还提供了注册自定义格式化字符的方法。注册自定义格式化字符串输出方法&#xf…...

编程日记 2025/9/7 21:48:21

面试-JVM：JVM的组成及作用

JVM包含两个子系统和两个组件&#xff1a; 两个子系统&#xff1a; 类加载子系统&#xff08;ClassLoader Subsystem&#xff09; 作用&#xff1a;根据给定的全限定类名&#xff08;如&#xff1a;java.long.Object&#xff09;来装载class文件至运行时数据区的方法区。 核心…...

编程日记 2025/9/9 21:38:28

Node.js项目启动流程以及各个模块执行顺序详解

Node.js项目启动流程以及各个模块执行顺序的问题。首先&#xff0c;我需要仔细阅读并理解我搜索到的资料&#xff0c;从中提取关键信息&#xff0c;然后综合这些信息组织成一个结构化的回答。 首先&#xff0c;根据我搜索到的资料都详细描述了Node.js的启动流程&#xff0c;涉及…...

编程日记 2025/9/13 1:43:01

obj离线加载（vue+threejs）+apk方式浏览

demo需求&#xff1a;移动端&#xff0c;实现obj本地离线浏览 结合需求&#xff0c;利用&#xff08;vue2threejs173&#xff09;进行obj的加载&#xff0c;然后采用apk方式&#xff08;hbuilderX打包发布&#xff09;移动端浏览&#xff1b; https://github.com/bianbian886/…...

编程日记 2025/9/12 13:01:56

【Python 语法】Python 数据结构

线性结构&#xff08;Linear Structures&#xff09;1. 顺序存储列表&#xff08;List&#xff09;元组&#xff08;Tuple&#xff09;字符串&#xff08;String&#xff09; 2. 线性存储栈&#xff08;Stack&#xff09;队列&#xff08;Queue&#xff09;双端队列&#xff08…...

编程日记 2025/9/11 4:37:33

Flutter - 布局Widget

Flutter的布局主要分为 单子组件 和 多子组件 两大类&#xff1a; Container、Padding、Align这些属于单子组件&#xff0c;而Row、Column、ListView这些则是多子组件。 单子组件 Align组件 Align 是一个用于控制子组件位置的单子布局组件。它通过指定对齐方式&#xff08…...

编程日记 2025/9/11 12:17:41

AD从原理图到PCB超详细教程

AD超详细教程 前言一、建立一个工程模板二、原理图1.设计原理图。2.使用AD自带库和网上开源原理图库3.画原理图库4.编译原理图三、PCB1.确定元器件尺寸大小2.绘制PCB Library①使用元器件向导绘制元件库②原理图与PCB的映射3.绘制PCB①更新PCB②调整元件位置③布线④漏线检查⑤…...

编程日记 2025/9/7 15:54:22

视频级虚拟试衣技术在淘宝的产品化实践

作为一种新的商品表现形态&#xff0c;内容几乎存在于手淘用户动线全流程&#xff0c;例如信息流种草内容、搜索消费决策内容、详情页种草内容等。通过低成本、高时效的AIGC内容生成能力&#xff0c;能够从供给端缓解内容生产成本高的问题&#xff0c;通过源源不断的低成本供给…...

编程日记 2025/9/13 7:26:22

Redis安装及其AnotherRedisDesktopManagera安装使用

一、Redis安装 1. 下载Redis安装包 通过网盘分享的文件&#xff1a;Redis 链接: https://pan.baidu.com/s/1elAT8mk3EIoYQQ3WoVVoNg?pwd7yrz 提取码: 7yrz 2. 解压Redis安装包 下载完成后&#xff0c;将Redis安装包解压到一个指定的目录&#xff0c;例如&#xff1a;C:\Re…...

编程日记 2025/9/10 3:56:21

2025系统架构师（一考就过）：案例之四：架构复用、架构评估、特定架构（DSSA）、架构开发方法（ABSD）

二、软件架构复用 ◆软件产品线是指一组软件密集型系统&#xff0c;它们共享一个公共的、可管理的特性集&#xff0c;满足某个特定市场或任务的具体需要&#xff0c;是以规定的方式用公共的核心资产集成开发出来的。即围绕核心资产库进行管理复用、集成新的系统。 ◆软件架构…...

编程日记 2025/9/9 3:45:54

软件工程应试复习（考试折磨版）

针对学校软件工程考试&#xff0c;参考教材《软件工程导论&#xff08;第6版&#xff09;》1-8章 学习的艺术&#xff1a;不断地尝试&#xff0c;我一定会找到高效用的方法&#xff0c;让学习变成一门艺术&#xff0c;从应试备考中解救出我的时间同胞们。 好嘞&#xff01;既然…...

编程日记 2025/9/12 14:36:15

Kafka可视化工具EFAK(Kafka-eagle)安装部署

Kafka Eagle是什么&#xff1f; Kafka Eagle是一款用于监控和管理Apache Kafka的开源系统&#xff0c;它提供了完善的管理页面&#xff0c;例如Broker详情、性能指标趋势、Topic集合、消费者信息等。 源代码地址&#xff1a;https://github.com/smartloli/kafka-eagle 前置条件…...

编程日记 2025/9/12 23:06:02

本地部署SenseVoice（包括离线设备操作）

Anaconda3 Anaconda Installers and Packages SenseVoice 魔搭社区 FFmpeg FFmpeg 安装Anaconda3&#xff08;Windows&#xff09; 下载完成后&#xff0c;自定义路径后安装。在开始菜单中出现Anaconda Prompt说明安装成功。 安装Anaconda3&#xff08;Linux&#xff…...

编程日记 2025/9/13 3:24:26

sql server 复制从备份初始化数据

参考 &#xff1a; 从备份初始化订阅&#xff08;事务&#xff09; - SQL Server | Microsoft Learn sql server 复制默认是用快照初始化数据的&#xff0c;也支持从备份初始化数据&#xff0c;参考如上...

编程日记 2025/8/25 20:39:24

MySQL 复合索引

MySQL 复合索引详解 引言 在实际业务场景中&#xff0c;多条件组合查询是最常见的操作之一。例如&#xff0c;根据“用户ID 时间范围”查询订单&#xff0c;或根据“商品分类 价格区间”筛选商品。此时&#xff0c;单列索引可能无法满足性能需求&#xff0c;而**复合索引&am…...

编程日记 2025/9/12 11:16:07

蓝桥杯备赛（C/C++组）

README&#xff1a; 本笔记是自己的备考笔记&#xff0c;按照官网提纲进行复习&#xff01;适合有基础&#xff0c;复习用。 一、总考点 试题考查选手解决实际问题的能力&#xff0c;对于结果填空题&#xff0c;选手可以使用手算、软件、编程等方法解决&#xff0c;对于编程大…...

编程日记 2025/9/6 15:34:22

人类驾驶的人脑两种判断模式（反射和预判）--＞自动驾驶两种AI模式

一种模式是直觉模式&#xff0c;判断是基于条件反射&#xff0c;视觉感知 触发到 直接条件反射&#xff08;从经历中沉淀形成的神经信息闭环&#xff09;&#xff0c;类似现在自动驾驶技术的传统AI模式。 另一种模式是物理时空图式推理模式&#xff0c;判断是基于预判预测&…...

编程日记 2025/9/11 11:05:58

C语言机试编程题

编写版本&#xff1a;vc2022 1.求最大/小值 #include<stdio.h> int main(){int a[50],n;int max, min;printf("请输入您要输入几个数");scanf_s("%d", &n);printf("请输入您要比较的%d个数\n",n);for (int i 0; i<n; i) {scanf_…...

编程日记 2025/9/11 13:59:19

SmartMediakit之音视频直播技术的极致体验与广泛应用

引言 在数字化时代&#xff0c;音视频直播技术已经深入到各个行业和领域&#xff0c;成为信息传递和交流的重要手段。视沃科技自2015年成立以来&#xff0c;一直致力于为传统行业提供极致体验的音视频直播技术解决方案&#xff0c;其旗下的大牛直播SDK凭借强大的功能和卓越的性…...

编程日记 2025/9/8 21:36:22

NVIDIA GEFORCE GTX1050显卡如何搭建AI人脸识别技术环境

NVIDIA GEFORCE GTX1050显卡如何搭建AI人脸识别技术环境！实际上，这个显卡虽然是入门级的，但是依然可以满足你的入门学习要求。 你的显卡是 NVIDIA GTX 1050，显存为 2GB，虽然它的性能不如高端显卡（如RTX 3060、3090等），但对于学习和研究 人脸识别技术，尤其是进行基础的…...

编程日记 2025/9/11 21:48:31

华为数通Datacom认证体系详解：从HCIA到HCIE的进阶路径

华为数通Datacom&#xff08;Data Communication&#xff09;课程是华为认证体系中的核心方向之一&#xff0c;聚焦企业网络通信与数据通信技术&#xff0c;适合从事网络规划、部署和运维的人员。 一、数通Datacom课程体系 华为数通Datacom认证分为 三个级别&#xff0c;逐级递…...

编程日记 2025/9/13 4:32:05

【运维】内网服务器借助通过某台可上外网的服务器实现公网访问

背景&#xff1a; 内网服务器无法连接公网,但是办公电脑可以连接内网服务器又可以连接公网。 安装软件 1、frp 2、ccproxy 配置 1、内网服务器 # 内网服务器启动frp服务配置文件参考vi frps.ini# frps.ini [common] bind_port 7000# 备注: bind_port端口可以随意配置。配置完…...

编程日记 2025/9/10 18:46:45

Spring之Bean的生命周期过程中调用的方法

1。这个部分除了6,9都在这了 package com.example.springbootdemo3.lifebeean;import org.springframework.beans.BeansException; import org.springframework.beans.factory.*; import org.springframework.beans.factory.annotation.Value; import org.springframework.con…...

编程日记 2025/9/9 15:50:26

Vue 中动态实现进度条

在 Vue 中动态实现进度条&#xff0c;基本上有两种常见的方法&#xff1a;直接通过 Vue 数据绑定控制样式&#xff0c;或者利用外部库来实现更复杂的功能。我们会深入探讨这两种方式&#xff0c;并且详细说明每种方法的实现步骤、优缺点以及使用场景。 1. 使用 Vue 数据绑定来…...

编程日记 2025/9/8 21:12:44

Qt互斥锁(QMutex)的使用、QMutexLocker的使用

Qt互斥锁【QMutex】的使用、QMutexLocker的使用 Chapter1 Qt互斥锁(QMutex)的使用、QMutexLocker的使用一、QMutexLocker和QMutex实现示例图二、QMutex和QMutexLocker的关系&#xff08;个人理解&#xff09;三、QMutex使用和QMutexLocker使用1.QMutex的使用2.QMutexLocker的使…...

编程日记 2025/9/10 6:18:19

Python开发 Flask框架面试题及参考答案

目录 Flask 的核心设计理念是什么？与 Django 相比有哪些显著差异？ 解释 Flask 框架的核心理念及其作为 “微框架” 的优缺点 Flask 的依赖库有哪些？简述 Werkzeug 和 Jinja2 的作用 什么是 WSGI？Flask 如何基于 WSGI 实现服务端与应用的交互 解释 RESTful API 的设计原…...

编程日记 2025/9/11 3:23:50

DeepSeek模型昇腾部署优秀实践

2024年12月26日&#xff0c;DeepSeek-V3横空出世&#xff0c;以其卓越性能备受瞩目。该模型发布即支持昇腾&#xff0c;用户可在昇腾硬件和MindIE推理引擎上实现高效推理&#xff0c;但在实际操作中&#xff0c;部署流程与常见问题困扰着不少开发者。本文将为你详细阐述昇腾 De…...

编程日记 2025/9/10 23:56:25

【cv】vs2022配置opencv

release下配置包含目录和库目录 E:\sdk\sdk_cuda12.3\opencv490\include E:\sdk\sdk_cuda12.3\opencv490\include\opencv2 E:\sdk\sdk_cuda12.3\opencv490\lib release下配置包含链接器输入的依附依赖项 opencv_world490.lib release编译文件夹下需手动复制opencv_world49…...

编程日记 2025/9/13 0:48:04

RabbitMQ系列（五）基本概念之Queue

在 RabbitMQ 中&#xff0c;Queue&#xff08;队列&#xff09; 是存储消息的容器&#xff0c;也是消息传递的核心载体。以下是其核心特性与作用的全方位解析&#xff1a; 一、Queue 的定义与核心作用 消息存储容器 Queue 是 RabbitMQ 中实际存储消息的实体&#xff0c;生产者…...

编程日记 2025/9/13 5:02:16

从二维随机变量到多维随机变量

二维随机变量 设 X X X和 Y Y Y是定义在同一样本空间 Ω \varOmega Ω上的两个随机变量&#xff0c;称由它们组成的向量 ( X , Y ) (X, Y) (X,Y)为二维随机变量&#xff0c;亦称为二维随机向量&#xff0c;其中称 X X X和 Y Y Y是二维随机变量的分量。 采用多个随机变量去描述…...

编程日记 2025/9/10 3:40:49

IP-----动态路由OSPF

这只是IP的其中一块内容&#xff0c;IP还有更多内容可以查看IP专栏&#xff0c;前一章内容为GRE和MGRE &#xff0c;可通过以下路径查看IP-------GRE和MGRE-CSDN博客,欢迎指正 注意&#xff01;&#xff01;&#xff01;本部分内容较多所以分成了两部分在下一章 5.动态路由OS…...

编程日记 2025/9/12 0:18:02

RabbitMQ操作实战

1.RabbitMQ安装 RabbitMQ Windows 安装、配置、使用 - 小白教程-腾讯云开发者社区-腾讯云下载erlang&#xff1a;http://www.erlang.org/downloads/https://cloud.tencent.com/developer/article/2192340 Windows 10安装RabbitMQ及延时消息插件rabbitmq_delayed_message_exch…...

编程日记 2025/9/11 0:59:36

python-leetcode-不同路径

62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; class Solution:def uniquePaths(self, m: int, n: int) -> int:dp [1] * n # 仅保留一行for i in range(1, m):for j in range(1, n):dp[j] dp[j-1]return dp[-1]...

编程日记 2025/9/12 20:25:23

【react】快速上手基础教程

目录 一、React 简介 1.什么是 React 2.React 核心特性 二、环境搭建 1. 创建 React 项目 2.关键配置 三、核心概念 1. JSX 语法 表达式嵌入 样式处理 2. 组件 (Component) 3. 状态 (State) 与属性 (Props) 4. 事件处理 合成事件&#xff08;SyntheticEvent) 5. …...

编程日记 2025/9/12 3:45:59

【愚公系列】《Python网络爬虫从入门到精通》033-DataFrame的数据排序

标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度…...

编程日记 2025/9/12 5:04:54

一周一个Unity小游戏2D反弹球游戏 - 移动的弹板（触屏版）

前言 上文中实现了用鼠标移动控制弹板的移动&#xff0c;本文将实现手指触屏时弹板跟随手指移动的功能&#xff0c;并通过使用Unity自带的Device Simulator Devices Package来验证和模拟触屏设备的使用场景。 安装Device Simulator Devices Package 打开Unity Package Manager&…...

编程日记 2025/9/9 18:16:29

深度学习-11.用于自然语言处理的循环神经网络

Deep Learning - Lecture 11 Recurrent Networks for Natural Language Processing 介绍文本表示用数字表示单词词嵌入(word embedding) 机械翻译编码器 - 解码器循环模型&#xff08;Encoder-decoder recurrent models&#xff09;双向循环网络 注意力机制&#xff08;方法&am…...

编程日记 2025/9/12 7:25:31