【源码】基于React和Flask的个人技术网站

项目简介

本项目是基于React和Flask搭建的个人技术网站，集博客与网址导航功能于一体。具备Markdown编辑预览、代码语法高亮、多标签文章管理、用户登录评论互动、后台管理增删改查、自动获取链接logo和描述、Chrome书签批量导入导出、中英文切换以及暗黑模式切换等功能。前端采用React构建，后端使用Flask提供API支持，且支持通过Docker Compose进行本地开发。

项目的主要特性和功能

前端功能

• 基于React构建，实现Markdown编辑预览与代码语法高亮。
• 支持多标签文章管理，用户登录后可评论互动。
• 具备中英文切换与暗黑模式切换功能。
• 利用React Router管理前端页面路由，SWR进行数据获取缓存，React Hook Form进行数据校验。

后端功能

• 用Flask构建API，支持用户登录、评论互动、后台管理等功能。
• 借助SQLAlchemy和Flask - SQLAlchemy进行数据库ORM管理，Pydantic进行数据校验。
• 支持数据库迁移，方便数据库版本管理与更新。

开发与部署

• 支持通过Docker Compose进行本地开发，简化部署流程。
• 使用pytest进行单元测试，保障代码质量。

安装使用步骤

复制项目

sh

安装依赖

后端

进入flask-server目录，创建Python虚拟环境并安装依赖： sh cd flask-server python -m venv venv source venv/bin/activate pip install -r requirements.txt

前端

进入react-app目录，安装依赖： sh cd ../react-app npm install

运行Flask

创建数据库并运行Flask

sh flask db upgrade flask run

使用gunicorn运行Flask

sh gunicorn -b 127.0.0.1:5100 wispblog:app -D

运行React

启动React应用： sh npm run dev

使用Docker Compose

通过Docker Compose启动项目： sh docker-compose up -d

访问网站

在浏览器中访问 http://127.0.0.1:5000（Flask服务）和 http://127.0.0.1:3000（React应用）查看网站效果。

注意：在Windows系统中，若无法运行Flask服务，可尝试使用 flaskwsgi.py 脚本替代 flask run 命令，或检查Python和Flask的安装情况。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】