从零开始用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.数…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马(服务器方面的)的原理,连接,以及各种木马及连接工具的分享 文件木马:https://w…...
