从零开始用react + tailwindcs + express + mongodb实现一个聊天程序(一)
项目包含5个模块
1.首页 (聊天主页)
2.注册
3.登录
4.个人资料
5.设置主题
一、配置开发环境 建立项目文件夹
mkdir chat-project
cd chat-project
mkdir server && mkdir webcd server npm init
cd web npm create vite@latest
创建前端项目时我们选择javascript (typescript不熟)
根据提示提示 enter 创建后端 前后端2个项目 把文件夹整理成如下所示

二、安装依赖
1.server端
npm i bcryptjs cloudinary cookie-parser cors dotenv express jsonwebtoken mongoose socket.ionpm i nodemon -D

2.web端
代码如下(示例):
npm i axios lucide-react react-hot-toast react-router-dom socket.io-client zustand
npm i tailwindcss@3.4.17 postcss autoprefixer daisyui -D
1.配置tailwindcss
在web 文件夹下执行 npx tailwindcss init
tailwind.config.js 内容如下
/** @type {import('tailwindcss').Config} */
import daisyui from "daisyui"
export default {content: ["./src/**/*.{html,js,jsx,ts,tsx}"],theme: {extend: {},},plugins: [daisyui],daisyui: {themes:["light","dark","cupcake","bumblebee","emerald","corporate","synthwave","retro","cyberpunk","valentine","halloween","garden","forest","aqua","lofi","pastel","fantasy","wireframe","black","luxury","dracula","cmyk","autumn","business","acid","lemonade","night","coffee","winter","dim","nord","sunset",]},
}
vite.config.js配置情况
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import tailwindcss from "tailwindcss"// https://vite.dev/config/
export default defineConfig({plugins: [react()],resolve: {alias: {'@': path.resolve(__dirname, './src')}},// 新增 css 配置css: {postcss: {plugins: [tailwindcss()],}}
})
新建index.css文件 并在main.jsx下引入 index.css内容
@tailwind base;
@tailwind components;
@tailwind utilities;
最终前端项目文件结构如下

3.测试依赖安装
把原有的App.jsx内容删除 替换为
import { useState } from 'react'
function App() {return (<><button className="btn">Button</button><button className="btn btn-neutral">Neutral</button><button className="btn btn-primary">Primary</button><button className="btn btn-secondary">Secondary</button><button className="btn btn-accent">Accent</button><button className="btn btn-ghost">Ghost</button><button className="btn btn-link">Link</button><h1 className='text-blue-500'>测试内容</h1></>)
}export default App
在web目录下执行 npm run dev 得到如下效果

以上就是今天要讲的内容,本文仅仅简单介绍了文件目录的创建 前后台依赖的安装。如有问题请留言。
相关文章:
从零开始用react + tailwindcs + express + mongodb实现一个聊天程序(一)
项目包含5个模块 1.首页 (聊天主页) 2.注册 3.登录 4.个人资料 5.设置主题 一、配置开发环境 建立项目文件夹 mkdir chat-project cd chat-project mkdir server && mkdir webcd server npm init cd web npm create vitelatest 创建前端项目时我们选择javascrip…...
wifi5和wifi6,WiFi 2.4G、5G,五类网线和六类网线,4G和5G的区别
wifi5和wifi6的区别 是Wi-Fi 5和Wi-Fi 6的选择与路由器密切相关。路由器是创建和管理无线网络的设备,它决定了网络的类型和性能。具体来说: 路由器的标准支持:路由器可以支持不同的Wi-Fi标准,如Wi-Fi 5(802.11ac)和Wi-Fi 6(802.11ax)。支持Wi-Fi 6的路由器能够提供更高…...
Docker基础-常见命令
docker images -查看所有的本地镜像。 docker pull -把远端镜像拉取到本地。 docker rmi -删除镜像。 docker push -推到镜像仓库。 docker run -创建并运行容器(自动化,如果发现镜像不存在会先去拉取, 拉取完了以后再去自动创建容器&am…...
从零开始用react + tailwindcs + express + mongodb实现一个聊天程序(三) 实现注册 登录接口
1.划分文件夹 在src目录下创建controllers middleware models routes controllers 放具体的方法 signup login middleware 里面是中间件 请求的验证 models 放对象实体 routes 处理访问路径像/signup /login 等等 2. 接口开发 系统的主要 有用户认证 和 消息 2种类型…...
Android NFC功能开发指南
在 Android 平台上开发 NFC(近场通信)功能,主要涉及以下几个步骤: 1. 权限声明 首先,在 AndroidManifest.xml 文件中声明 NFC 权限: <uses-permission android:name"android.permission.NFC&quo…...
基于Matlab实现汽车远近光灯识别的详细步骤及代码示例
以下是一个基于Matlab实现汽车远近光灯识别的详细步骤及代码示例,主要通过图像处理技术来区分远光灯和近光灯。 整体思路 图像预处理:包括读取图像、灰度化、去噪等操作,以提高后续处理的准确性。边缘检测:找出图像中的边缘信息…...
nginx反向代理以及负载均衡(常见案例)
一、nginx反向代理 1、什么是代理服务器? 代理服务器,客户机在发送请求时,不会直接发送给目的主机,而是先发送给代理服务器,代理服务接受客户机请求之后,再向主机发出,并接收目的主机返回的数据…...
Spring 三级缓存机制(解决循环依赖)
文章目录 🔄 现实生活类比:开餐厅的过程💡 结合到 Spring 三级缓存🛠️ Spring 解决循环依赖的步骤1️⃣ Spring 开始创建 A2️⃣ Spring 开始创建 B3️⃣ B 创建完成后,回过头来继续创建 A 📌 三级缓存的作…...
第4章 4.4 EF Core数据库迁移 Add-Migration UpDate-Database
4.4.1 数据库迁移原理 总结一下就是: 1. 数据库迁移命令的执行,其实就是生成在数据库执行的脚本代码(两个文件:数字_迁移名.cs 数字_迁移名.Designer.cs),用于对数据库进行定义和修饰。 2. 数据库迁移…...
web安全——web应用程序技术
文章目录 一、HTTP1.1 HTTP方法1.2 HTTP消息头1.3 cookie1.4 状态码 二、web功能2.1 服务器端功能2.2 客户端功能——同源策略 三、编码方案3.1 URL编码3.2 Unicode编码3.3 HTML编码3.4 Base64编码 一、HTTP HTTP(超文本传输协议)是web应用程序使用的通…...
low rank decomposition如何用于矩阵的分解
1. 什么是矩阵分解和低秩分解 矩阵分解是将一个矩阵表示为若干结构更简单或具有特定性质的矩阵的组合或乘积的过程。低秩分解(Low Rank Decomposition)是其中一种方法,旨在将原矩阵近似为两个或多个秩较低的矩阵的乘积,从而降低复…...
GO 进行编译时插桩,实现零码注入
Go 编译时插桩 Go 语言的编译时插桩是一种在编译阶段自动注入监控代码的技术,目的是在不修改业务代码的情况下,实现对应用程序的监控和追踪。 基本原理 Go 编译时插桩的核心思想是通过在编译过程中对源代码进行分析和修改,将监控代码注入到…...
编写一个程序,输入一个字符串并输出其长度(Java版)
编写一个程序,输入一个字符串并输出其长度 以下是Java实现代码: import java.util.Scanner;public class StringLengthCalculator {public static void main(String[] args) {Scanner scanner new Scanner(System.in);System.out.print("请输入一…...
C++ day4 练习
一、练习1 找到第一天mystring练习,实现以下功能: mystring str "hello"; mystring ptr "world"; str str ptr; str ptr; str[0] H; 【代码】: #include <iostream> #include <cstring> #include &l…...
深入理解指针2
深入理解指针2 数组名的理解 数组名就是首元素的地址 int arr[]{1,3,2}; printf("%p\n",arr); printf("%p\n",&arr[0]);但是有两种情况除外, 1.sizeof(数组名),sizeof操作符统计的是整个数组的大小,并不是第一个元素…...
【STL专题】优先级队列priority_queue的使用和模拟实现,巧妙利用仿函数解决优先级
欢迎来到 CILMY23的博客 🏆本篇主题为:优先级队列priority_queue的使用和模拟实现,巧妙利用仿函数解决优先级 🏆个人主页:CILMY23-CSDN博客 🏆系列专栏: C | C语言 | 数据结构与算法 | Linux…...
CPU、SOC、MPU、MCU--详细分析四者的区别
一、CPU 与SOC的区别 1.CPU 对于电脑,我们经常提到,处理器,内存,显卡,硬盘四大部分可以组成一个基本的电脑。其中的处理器——Central Processing Unit(中央处理器)。CPU是一台计算机的运算核…...
Node.js 内置模块简介(带示例)
目录 1. fs(文件系统)模块 2. http 模块 3. path 模块 4. os 模块 5. events 模块 6. crypto 模块 1. fs(文件系统)模块 fs 模块提供了与文件系统进行交互的功能,包括文件的读写、删除、重命名等操作。它有同步…...
常见的“锁”有哪些?
悲观锁 悲观锁认为在并发环境中,数据随时可能被其他线程修改,因此在访问数据之前会先加锁,以防止其他线程对数据进行修改。常见的悲观锁实现有: 1.互斥锁 原理:互斥锁是一种最基本的锁类型,同一时间只允…...
二级公共基础之数据库设计基础(一) 数据库系统的基本概念
目录 前言 一、数据库、数据管理系统和数据库系统 1.数据 2.数据库 3.数据库管理系统 1.数据库管理系统的定义 2.数据库管理系统的功能 1.数据定义功能 2.数据操作功能 3.数据存取控制 4.数据完整性管理 5.数据备份和恢复 6.并发控制 4.数…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架,专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用,其中包含三个使用通用基本模板的页面。在此…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能,我们需要对它的功能特点进行分析: 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具: mysql:关系型数据库&am…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
宇树科技,改名了!
提到国内具身智能和机器人领域的代表企业,那宇树科技(Unitree)必须名列其榜。 最近,宇树科技的一项新变动消息在业界引发了不少关注和讨论,即: 宇树向其合作伙伴发布了一封公司名称变更函称,因…...
