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

本文涉及的产品
云数据库 MongoDB,通用型 2核4GB
简介:

项目初衷

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

技术栈

前端

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

成功界面

作者:zhongjiaming
链接:https://juejin.im/post/5b3055ca6fb9a00e2d47ff9a
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关实践学习
MongoDB数据库入门
MongoDB数据库入门实验。
快速掌握 MongoDB 数据库
本课程主要讲解MongoDB数据库的基本知识,包括MongoDB数据库的安装、配置、服务的启动、数据的CRUD操作函数使用、MongoDB索引的使用(唯一索引、地理索引、过期索引、全文索引等)、MapReduce操作实现、用户管理、Java对MongoDB的操作支持(基于2.x驱动与3.x驱动的完全讲解)。 通过学习此课程,读者将具备MongoDB数据库的开发能力,并且能够使用MongoDB进行项目开发。   相关的阿里云产品:云数据库 MongoDB版 云数据库MongoDB版支持ReplicaSet和Sharding两种部署架构,具备安全审计,时间点备份等多项企业能力。在互联网、物联网、游戏、金融等领域被广泛采用。 云数据库MongoDB版(ApsaraDB for MongoDB)完全兼容MongoDB协议,基于飞天分布式系统和高可靠存储引擎,提供多节点高可用架构、弹性扩容、容灾、备份回滚、性能优化等解决方案。 产品详情: https://www.aliyun.com/product/mongodb
相关文章
|
1月前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
45 0
|
3月前
|
前端开发 API 数据安全/隐私保护
【第45期】一文解决React项目的权限管理
【第45期】一文解决React项目的权限管理
98 0
|
3月前
|
存储 前端开发 JavaScript
【第39期】一文认识React的状态管理库
【第39期】一文认识React的状态管理库
61 0
|
3月前
|
前端开发 安全 Swift
【教程】React Native 应用中的代码混淆与安全性管理
【教程】React Native 应用中的代码混淆与安全性管理
44 0
|
14天前
|
前端开发 数据处理 开发者
React的useState:开启组件状态管理的新篇章
React的useState:开启组件状态管理的新篇章
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
存储 JSON 前端开发
react保姆级搭建新项目
此文主要以ts+vite+router6+antd 快速搭建一个react项目,适用于初学者,用于学习交流
|
1月前
|
前端开发
利用React Hooks优化前端状态管理
本文将深入介绍如何利用React Hooks优化前端状态管理,包括Hooks的概念、使用方法以及与传统状态管理方式的对比分析,帮助前端开发人员更好地理解和应用这一现代化的状态管理方案。
|
1月前
|
移动开发 JavaScript 前端开发
vue/react项目刷新页面出现404的原因以及解决办法
vue/react项目刷新页面出现404的原因以及解决办法
155 0
|
3月前
|
存储 前端开发 测试技术
useReducer 的奇妙世界:探索 React 状态管理的新境界(下)
useReducer 的奇妙世界:探索 React 状态管理的新境界(下)