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

本文涉及的产品
云数据库 MongoDB,独享型 2核8GB
推荐场景:
构建全方位客户视图
简介:

项目初衷

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

技术栈

前端

  • 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
相关文章
|
27天前
|
前端开发 C++
使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件
本文记录了如何使用Vite创建一个React+TypeScript+Service Workers(SW)项目,并整合AntDesign组件库和Scss等插件,包括项目的创建、配置问题解决、AntDesign和Scss的整合方法。
96 1
|
3月前
|
存储 前端开发 JavaScript
在React中有效地管理组件之间的通信和数据流
在React中有效地管理组件之间的通信和数据流
|
3月前
|
存储 前端开发 JavaScript
React中有效地使用props和state来管理组件的数据和行为
React中有效地使用props和state来管理组件的数据和行为
|
4月前
|
前端开发 JavaScript 开发者
在React中,如何利用生命周期方法管理组件的状态和行为?
【5月更文挑战第29天】在React中,如何利用生命周期方法管理组件的状态和行为?
40 3
|
4月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理按钮的点击行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理按钮的点击行为?
43 1
|
4月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
148 1
|
4月前
|
前端开发
探索React Hooks:一种全新的组件逻辑管理方式
React Hooks是React 16.8版本引入的一项新功能,它改变了我们编写React组件的方式。本文将从Hooks的起源讲起,逐步分析Hooks的优势,并通过具体示例展示Hooks在组件逻辑管理中的应用,旨在帮助读者更好地理解和运用React Hooks。
|
4月前
|
资源调度 前端开发 JavaScript
React Router:React应用的路由管理
【4月更文挑战第25天】React Router是React的官方路由库,用于管理SPA的路由。它基于组件,将URL映射到React组件,核心概念包括路由、链接和导航。设置路由时,在根组件中使用BrowserRouter或HashRouter,包裹Routes组件,定义Route规则。Link组件用于创建内部链接,实现导航。高级特性包括嵌套路由、参数化路由和编程式导航,如子路由、动态参数和JavaScript控制的导航。掌握React Router能帮助开发者更高效地构建复杂的React应用。
|
4月前
|
前端开发 JavaScript API
React的Context API:全局状态管理的利器
【4月更文挑战第25天】React的Context API解决了深层组件间状态共享的难题,提供全局状态管理方案。通过`Provider`和`Consumer`组件,或结合`useContext` Hook,实现状态在组件树中的传递。最佳实践包括避免过度使用,分离逻辑,以及在必要时与Redux或MobX结合。Context API简化了数据传递,但需谨慎使用以保持代码清晰。
|
4月前
|
前端开发 JavaScript
React中的状态管理:useState与useReducer的使用与探讨
【4月更文挑战第25天】本文探讨了React中构建动态界面的关键——状态管理,重点关注`useState`和`useReducer` Hook。`useState`适用于简单状态管理,例如计数器,而`useReducer`在处理复杂逻辑和多个状态更新时更具优势,提供更好的组织和可维护性。选择使用哪个取决于状态逻辑复杂度、可维护性和性能需求。合理运用这两个工具能实现高效、可维护的React应用。

热门文章

最新文章