• Stars
    star
    1,020
  • Rank 45,113 (Top 0.9 %)
  • Language
    JavaScript
  • License
    GNU General Publi...
  • Created almost 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Client for beginners to learn, built with React / Redux / Node

利用 React / Node 实现的应用。项目不怎么复杂,但是五脏六腑俱全,适合新手学习。

English

博客总结

技术栈和主要框架

📦 React 全家桶:react + redux + react-router 4.0 + immutable.js
📌 ES6 + ES7
📡 网络请求:axios + socket.io 🎈 页面相应式框架:antd mobile
✏️ 后台:express + mongoDB

项目运行(nodejs 6.0+)

# 克隆到本地
git clone https://github.com/KieSun/Chat-Buy-React.git
cd chat-buy-react

# Mac 安装MongoDb (如果命令行因为网络问题安装不了,可以直接去 https://www.mongodb.com/download-center#community 下载
brew install mongodb

# 启动MongoDb(安装成功后命令行有提示)
mongod --config /usr/local/etc/mongod.conf

# 连接到mongo
mongo

# 安装依赖
npm install

# 全局安装 nodemon 
npm i nodemon -g

# 开启后端 (Mac)
npm run server

# 开启后端 (Windows)
npm run dev

# 开启本地服务器
npm start

# 发布环境
npm run build

项目截图

登录 商品购买 订单 聊天

文件结构

── server                         // 后端文件夹
│   ├── chat.js                   // 聊天接口
│   ├── foods.json                // 商品 json
│   ├── goods.js                  // 商品接口
│   ├── jwtMiddleware.js          // token 中间件
│   ├── key.js                    // 加密 token key
│   ├── model.js                  // 数据库结构
│   ├── order.js                  // 订单接口
│   ├── server.js                 // 后端 index
│   ├── socket.js                 // socket接口
│   └── user.js                   // 用户信息接口
├── src
│   ├── actions                   // Redux action
│   │   ├── chat.js
│   │   ├── goods.js
│   │   ├── order.js
│   │   ├── type.js
│   │   └── user.js
│   ├── asyncComponent.jsx        // 路由分割组件
│   ├── common
│   │   ├── axiosMiddleware.js    // axios 拦截器
│   │   ├── history.js            
│   │   └── unit.js               // 通用函数
│   ├── components
│   │   ├── allOrders             // 所有订单组件
│   │   │   └── list.jsx
│   │   ├── common
│   │   │   └── 404.jsx
│   │   ├── goods
│   │   │   ├── buy.jsx           // 购买组件
│   │   │   └── goodsList.jsx     // 商品列表组件
│   │   ├── login
│   │   │   └── loginForm.jsx     // 登录组件
│   │   ├── message
│   │   │   ├── chatList.jsx      // 聊天列表组件
│   │   │   ├── chatListItem.jsx  // 聊天列表 item 组件
│   │   │   └── messageList.jsx   // 所有消息组件
│   │   ├── myOrder
│   │   │   ├── myOrder.jsx       // 我的订单列表组件
│   │   │   └── myOrderItem.jsx   // 我的订单列表 item 组件
│   │   ├── navBar
│   │   │   └── backNavBar.jsx    // 导航栏组件
│   │   └── register
│   │       └── registerForm.jsx  // 注册组件
│   ├── container                 // 组件容器
│   │   ├── allOrders.jsx
│   │   ├── chat.jsx
│   │   ├── dashboard.jsx
│   │   ├── goods.jsx
│   │   ├── login.jsx
│   │   ├── message.jsx
│   │   ├── my.jsx
│   │   └── register.jsx
│   ├── images                    // 图片资源
│   │   ├── goods-sel.png
│   │   ├── goods.png
│   │   ├── message-sel.png
│   │   ├── message.png
│   │   ├── order-sel.png
│   │   ├── order.png
│   │   ├── user-sel.png
│   │   └── user.png
│   ├── index.js                  // 项目 index 文件
│   ├── reducers                  // Reducer
│   │   ├── chat.js
│   │   ├── goods.js
│   │   ├── index.js
│   │   ├── orders.js
│   │   └── user.js
│   ├── registerServiceWorker.js
│   ├── router                    // 路由
│   │   └── router.jsx
│   ├── store
│   │   └── configureStore.js
│   └── styles
│       └── index.scss

视频

课程大纲

从2018年1月开始,每周都会更新 2 小时左右的教学视频,视频会按照以上大纲教学,这个视频是完全免费的,保证更新完成。

视频会在该仓库和我的微信群中更新链接。

如果觉得我的项目和视频不错的话,可以请我喝瓶饮料。

课程地址,你可以直接关注我

群介绍

群内禁止发任何的广告,违者直接踢出。

本群交流内容不限于前端,对于后端和原生 APP 也可以交流。

群内我会每天发一篇前端的优秀文章,每周在双休日发一次总结。群内除了会更新该课程的内容以外,另有别的小教学视频赠送。目前想好的内容包括:前端必知的网络知识和如何写好一篇优秀的简历。

功能

  • [√] 项目按路由模块加载
  • [√] redux完整示范
  • [√] 后端接口
  • [√] 数据结构通过 immutable.js 实现
  • [√] 登录注册,以及登录权限控制
  • [√] 商品页面
  • [√] 所有订单页面
  • [√] 我的页面
  • [√] 聊天功能
  • [] TypeScript 替换 JS
  • [] 后端实现 GraphQL
  • [] 使用 RN 实现原生 APP

❗️ 勘误

如果在项目中发现了有什么不解或者发现了 bug,欢迎提交 PR 或者 issue,当然你也可以直接入群与我交流。

♥️ 感谢

如果喜欢这个项目,欢迎 Star!

🌏 LICENSE

基于 GPLv3 协议进行分发和使用,更多信息参见协议文件。

More Repositories

1

all-of-frontend

你想知道的前端内容都在这
JavaScript
5,256
star
2

Dream

我是 yck,✍️ 这里是写博客以及记录学习的地方
JavaScript
1,610
star
3

awesome-frontend-source-interpretation

从源码层面,剖析前端主流技术的底层实现原理。
JavaScript
1,286
star
4

Front-end-knowledge

前端知识集锦
822
star
5

awesome-fe-study-source

:octocat: 获取前端学习资料,随时充电。加入前端学习小组,尽在公众号「前端真好玩」!
520
star
6

today-i-learned

记录今天学了什么
509
star
7

FE-advance-road

进阶资深前端开发
Vue
467
star
8

webpack-demo

从入门到真实项目配置,每个 commit 基本都对应一小节
CSS
235
star
9

learn-react-essence

:octocat:React 原理
189
star
10

fullstack-project

免费真全栈教学项目,包含前端、后端、Web3 技术栈,全部用前沿技术栈开发。B 站直播 + 录播
TypeScript
132
star
11

web-infra

前端工程化系列
127
star
12

per-moniteur

一个方便获取各类性能指标及 Web Vitals 的库。
TypeScript
107
star
13

toy-micro

微前端轮子
JavaScript
85
star
14

My-wheels

Write wheels.
JavaScript
81
star
15

Vue-StudyMaps

使用 Vue.js 开发的聚合应用。通过爬虫抓取平时浏览的网站,省去逐个点开网页的时间。
JavaScript
74
star
16

wonder-editor

微信公众号编辑器
TypeScript
30
star
17

web3-study-resource

29
star
18

elephant-design

React H5 组件库
JavaScript
28
star
19

TitleNavBar

Objective-C
23
star
20

learning-english

23
star
21

wtf-ts-type

TS 国家体操队队员入选门槛要求
TypeScript
22
star
22

js-algorithms-routine

JS 刷算法套路
21
star
23

cli

吃透前端工程化:工程脚手架研发
20
star
24

web3-zero-to-master

TypeScript
17
star
25

chive-daily

韭菜日记了解下
15
star
26

fucking-frontend-client

fucking frontend 前端
TypeScript
14
star
27

react-useful-hooks

useful hooks for React
JavaScript
12
star
28

slide

个人外部分享 PPT 合集
11
star
29

easy-ui

使用 Vue 写的基础组件库
JavaScript
8
star
30

how-js-work

JavaScript
8
star
31

puzzle

TypeScript
7
star
32

LeetCode-JS

TypeScript
6
star
33

tgm

hooks 版 axios
6
star
34

my-data-analyze-road

我的数据分析学习之路
5
star
35

KieCycleScrollView

Swift 版图片轮播器
Swift
4
star
36

MVVMTest

MVVM的一次实践 Swift版
Swift
4
star
37

KieSun

3
star
38

ydoc

文档站点
TypeScript
3
star
39

wx-example

JavaScript
2
star
40

hooks

react custom hooks
JavaScript
2
star
41

fast-create

TypeScript
2
star
42

Rust-study

Rust
2
star
43

StudyCode

平时练习仓库
JavaScript
2
star
44

frontendKnowledges

JavaScript
2
star
45

Study-Go-together

2
star
46

fucking-sourcecode

1
star
47

types-install

JavaScript
1
star
48

learn-english-guide

1
star