首页 > 其他分享 >Next.js 与 React 全栈开发:整合 TypeScript、Redux 和 Ant Design

Next.js 与 React 全栈开发:整合 TypeScript、Redux 和 Ant Design

时间:2024-10-17 16:32:29浏览次数:7  
标签:5432 容器 TypeScript POSTGRES 数据库 Ant Compose docker Redux

在上一集,我们编写完毕导航页面,并且非常的美观,但是我们发现编写网站是存静态的,在现代的网站当中一般都是动静结合,也就是说部分数据是从数据库读取的,部分静态数据是写在网页上面的,因此这章讲述如何搭建一个数据库。

搭建数据库(PostgreSQL)

在这里我们使用容器的方法进行数据库搭建,这样的好处在于我们能快速的完整搭建,而不需要了解搭建的细节。

先判断服务器是否安装docker 容器,如果没安装需要安装,使用命令docker ps 判断是否安装成功,如果成功则如下图所示。

如果未安装成功则使用命令 apt install docker.io 安装(Ubuntu服务器),其他服务器则使用其他命令,如 yum install docker.io

安装容器成功之后,我们要使用Docker Compose进行容器管理,在当前目录下创建一个文件夹PostgreSQL_Compose用于存储Compose 配置文件,然后创建一个docker-compose.yml配置文件,并编辑以下内容保存。

version: '3.8'
services:
  db:
    image: postgres:13
    container_name: nextjs_dbs
    restart: always
    environment:
      POSTGRES_DB: nextjsdbs
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: 12345678
    ports:
      - "5432:5432"
    volumes:
      - ./data:/var/lib/postgresql/data

Docker Compose 配置文件解析

这个 Docker Compose 配置文件设置了一个 PostgreSQL 数据库服务。以下是各部分的详细说明:

  • version: '3.8': 指定使用的 Docker Compose 文件格式版本。
  • services: 定义服务。
    • db: 服务名称。
      • image: postgres:13: 使用 PostgreSQL 13 版本的官方 Docker 镜像。

      • container_name: nextjs_dbs: 指定运行容器的名称为 nextjs_dbs

      • restart: always: 设置容器总是重启,确保服务持续运行。

      • environment: 设置环境变量。

        • POSTGRES_DB: nextjsdbs: 初始数据库名。
        • POSTGRES_USER: postgres: 数据库用户名。
        • POSTGRES_PASSWORD: 12345678: 数据库密码。
      • ports: 端口映射。

        • "5432:5432": 将容器内的 5432 端口映射到主机的 5432 端口。
      • volumes: 数据卷配置。

        • ./data:/var/lib/postgresql/data: 将主机上的 ./data 目录挂载到容器内的 PostgreSQL 数据目录,用于持久化存储数据。
          这个配置文件设置了一个基本的 PostgreSQL 数据库环境,适合用于开发和测试 Next.js 应用程序。

容器使用方法

使用docker-compose up -d 运行容器,如果没有命令则需要使用apt install docker-compose 进行安装,下图为正在加载容器。

使用 docker-compose logs -f 命令查看容器的日志信息

使用 docker ps 命令查看容器的运行状态

如果你想看更多内容或者能够看到技术更新的内容,请百度搜索:曲速引擎 warp drive csdn 在首页找到我的地址访问即可,一线更新内容将会在我的个人博客上面更新,谢谢大家。

更详细内容查看

独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号

标签:5432,容器,TypeScript,POSTGRES,数据库,Ant,Compose,docker,Redux
From: https://www.cnblogs.com/XiaoH160309/p/18472600

相关文章

  • AntDesign树形组件tree和输入input组件融合使用
    <a-tree :tree-data="selectItem.options.options" :replace-fields="{ children:'children', title:'label', code:'code' }" >......
  • 关于 Ant Design Vue框架中 <a-upload> beforeUpload 上传文件校验之后,返回false 还能上
    现在在(jinsai)外包的时候,使用的是jeecg-boot项目,后端上传使用的是自带的JImageUpload,里面上传是a-upload组件,就是AntDesignVue框架,说实话,挺难用的。在JImageUpload组件中:直接上代码:点击查看代码//上传前beforeUpload:function(file){this.uploadGo......
  • 深入理解Java并发读写锁—ReentrantReadWriteLock
    ReentrantReadWriteLock使用场景ReentrantReadWriteLock是Java的一种读写锁,它允许多个读线程同时访问,但只允许一个写线程访问(会阻塞所有的读写线程)。这种锁的设计可以提高性能,特别是在读操作的数量远远超过写操作的情况下。在并发场景中,为了解决线程安全问题,我们通常会......
  • TuxeraNTFS2023破解版软件dmg安装包(苹果系统读写win分区软件)
    ......
  • 大模型量化算法之Smoothquant
    SmoothQuant:AccurateandEfficientPost-TrainingQuantizationforLargeLanguageModels发表于ICML20238-bitweight,8-bitactivation(W8A8)训练后量化方法(PTQ)量化的部分是线性层以及矩阵乘法,LayerNorm以及Softmax还是以更高精度的半精度浮点数F......
  • TypeScript新手学习教程--接口
    TypeScript也支持接口,跟Java类似,这对于学习过java,c#,php语言的人更容易上手,虽然类似,但是也有不同,下面开始学习。1、 接口声明TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里,接口的作用就是为......
  • Jenkins+Ant+JaCoCo的代码覆盖率集成实践
    Jenkins+Ant+JaCoCo的代码覆盖率集成实践一、工具介绍Jenkins:Jenkins是一个开源的、基于Java开发的持续集成工具,它可以帮助开发人员自动化构建、测试和部署软件项目。Ant:ApacheAnt是一个基于Java的自动化构建工具,类似于Maven,但更为灵活,适用于各种复杂的构建任务。JaCoCo:J......
  • qt5报错无法枚举xxx字体:qt.qpa.fonts: Unable to enumerate family ' "WenYue XinQing
    问题描述:使用qt5时,出现错误提示:qt.qpa.fonts:Unabletoenumeratefamily'"WenYueXinQingNianTi(Non-CommercialUse)"'虽然不影响正常使用,但是还是希望解决。猜测:可能是qt5在自动枚举字体时,系统中安装的字体名称过长或其他参数不合规导致qt5无法枚举。如果此字体不是项......
  • 1.5K+ Star!assistant-ui:一套构建AI聊天界面的组件库
    assistant-ui简介assistant-ui[1]是一套用于构建AI聊天界面的React组件库。它集成了多种模型提供商,如OpenAI、Anthropic、AWS、Google等,并支持自定义API集成。它旨在简化AI聊天界面的开发过程,使开发者能够快速构建出功能丰富的聊天应用。项目特点主要特点模型提供商支......
  • 深入解析CSS中的!important规则
    深入解析CSS中的!important规则一、引言在CSS的世界里,样式的优先级通常由选择器的特异性、在样式表中的位置(后来的规则覆盖先前的规则)以及继承等因素决定。然而,!important规则就像一把双刃剑,它可以打破这些规则,赋予某些样式声明更高的优先级。本文将深入探讨!important的......