用react全家桶+antDesign写了一个习惯管理项目

本项目为一款基于React和Express的习惯养成应用,用户可通过每日签到及分享心得来培养良好习惯。系统采用React-Redux和Redux-Saga进行状态管理,前端使用Ant Design Mobile组件库,并通过Webpack构建。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目github地址

项目初衷

该项目从创建自己第一个习惯开始,每天一签到,签到后可以发表这一天的心得体会, 这些心得体会会公布在社区,其他用户可以对某一条心得体会进行收藏和评论;旨在通过每天的记录和不断的正向反馈,慢慢培养起跟随自己一生的好习惯;

技术栈

前端

后端

  • express
  • mongodb

快速开始

假设大家已经安装好node环境

运行步骤:

一、 download项目到本地;
二、 分别在habit-app-master/serverhabit-app-master/fontEnd输入命令npm install
三、 在habit-app-master/server目录下创建如下文件夹或文件static/uploaddata/log/mongodb.logdata/db
四、 本项目用的是mongodb数据库,因此需要安装MongoDB,由于本地是window,因此选择了window平台的版本;
  1. 下载并安装MongoDB后进入bin目录,创建文件mongodb-habit.conf,输入以下配置
    dbpath = 本地绝对路径\habit-app-master\server\data\db
    logpath = 本地绝对路径\habit-app-master\server\data\log\mongodb.log
    port=27017
复制代码
  1. 在命令行进入bin目录,输入mongod -config ./mongodb-habit.conf 回车即开启数据库
五、打包前端项目
  1. 进入项目的fontEnd目录,输入命令npm run build,稍等片刻打包后的文件将输出到habit-app-master/fontEnd/build;
  2. 把打包出来的staticapp.js搬到habit-app-master/server/static;
六、 开启服务器
  1. 进入项目的server目录,输入命令supervisor ./bin/www即开启成功;

最后,在浏览器打开http://localhost:3008,如果见到下图即可

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值