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

2,395 阅读1分钟

项目github地址

项目初衷

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

技术栈

前端

  • react
  • react-redux
  • redux-saga
  • react-router(v4);
  • Ant Design Mobile
  • webpack
  • babel
  • postCss

后端

  • 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,如果见到下图即可

成功界面