毕业设计-No description website or topics provided (4).zip

# justForYou ### 技术栈 : React + React-Router + Redux + webpack + babel + Node + express + mongodb 等 #### 分为两个版本：使用 redux 和 不使用redux [在线redux版本](http://demo.manster.me/justForYouRedux/build/#/?_k=iki4) [在线普通版本](http://demo.manster.me/justForYou/build/#/?_k=r6tst4) > **问题一 ：为何要写成两个版本？** > - 这个Demo完全不需要使用redux，因为数据流很简单，最开始一直是普通版本，运行很正常。 > > **问题二 ：为何要写成两个版本？？** > - 为了给新手展示最基本的redux怎么使用，**初学Redux**的朋友看文档理论感觉挺简单，一上手就感觉懵逼，这个两个Demo是为初学**React**和**Redux**的朋友们准备的。 #### 前端UI:sui-mobile #### 后端:Node+mongodb #### 交互: fetch+ajax #### 打包工具: webpack #### 转译工具: babel #### 数据流控制: redux ---------------------------------------------- ### 2017.8.8 更新 noRedux版本 根据React-router4 新特性做了代码切割按需加载， redux版本为 v2/v3 按需加载的实现。 [v4 按需加载Demo看这里](https://github.com/rongchanghai/react-router-demo) -------------------------------------------- ### 2017.8.4 更新 两个版本的react-router 由 2.+  升级 最新版本 4.1.2，具体文档在末尾更新 <img src="https://github.com/rongchanghai/justForYou/blob/master/screenshots/gif.gif" width="365" height="619"/> <img src="https://github.com/rongchanghai/justForYou/blob/master/screenshots/2.png" width="365" height="619"/> <img src="https://github.com/rongchanghai/justForYou/blob/master/screenshots/1.png" width="365" height="619"/> <img src="https://github.com/rongchanghai/justForYou/blob/master/screenshots/3.png" width="365" height="619"/> <img src="https://github.com/rongchanghai/justForYou/blob/master/screenshots/4.png" width="365" height="619"/> <img src="https://github.com/rongchanghai/justForYou/blob/master/screenshots/5.png" width="365" height="619"/> ## 下载 ``` git clone https://github.com/yumo-mt/justForYou.git cd justForYou npm install ``` ## 运行 ``` npm run dev (运行普通版本) npm run devRedux (运行Redux版本) ``` ## 项目目录 ``` |-- build // 打包文件 |-- justForYou //Node文件跟目录 | |--db //数据库配置 | |--index.js | |--routes //express路由 | |--article.js //管理文章的路由部分 | |--user.js //管理用户的路由部分 | |--upload //上传的头像 | |--utils //工具 | |--md5.js | |--server.js //node主文件 | |--settings.js // 连接数据库配置文件 |-- noReduxsrc //**没有使用redux的版本 | |--Component //组件目录 | |--articleDetail //文章详情 | |--Create //发表文章 | |--IndexList //文章列表 | |--Login //登录注册 | |--Me //个人页面 | |--dataModel.js //数据交互模型 | |--main.js //主文件 | |--Config //路由配置 | |--route-config.js //配置文件 两种（按需加载和非按需加载） | |--static //静态文件目录 | |--css //css文件 | |--style.css | |--img //默认头像 | |--default.png | |--Tools //时间转换工具 | |--index.js | |--app.js //react主文件 | |--index.html //html模板 |-- screenshots //截屏 |-- src //**redux版本 | |--Actions //action 目录 | |--index.js //actions 文件 | |--Component //容器组件 和上面相同 | |--articleDetail | |--Create | |--IndexList | |--Login | |--Me | |--main.js | |--Config //同上 | |--route-config.js | |--Containers //数据组件 | |--articleDetail.js //文章详情的数据组件 | |--indexList.js //主列表的数据组件 | |--Reducers //reducer目录 | |--index.js //reducer 文件 | |--static | |--store //store目录 | |--index.js //store整合文件 | |--Tools | |--app.js | |--index.html |-- utils //工具 | |--md5.js //md5 加密文件 |-- .babelrc // babel解析配置 |-- .gitignore //git上传忽视配置 |-- package.json |-- webpack.config.js //webpack 普通版本配置文件 |-- webpack.config.redux.js //webpack redux版本配置文件 |-- wepack-production.config.js //生产环境打包配置 ``` # 总结 ## React全家桶都有什么，为何使用？ 大体包括 **React**、**React-Router**、**Redux**、**ES6**、**WebPack**、**Babel**等…… >大多数人都认为**React**是一个类似于**Angular**的前端框架，但其实他们之间是不可比较的。Angular是一个完整的框架，而React只是一个View层。React和Vue是一个级别的，只能算作是一个UI框架。 因为**React**只是一个**view层**，只负责展示，所以其他的方面就需要其他工具的辅助。 路由跳转可以使用**React-Router**。 因为React已经全面拥抱**ES6**，所以我们在编码的时候使用**ES6**，会让我们的编码变得很顺畅。 但是大多数浏览器都**ES6**或者**ES7**不怎么友好，这个时候你需要**Babel**来为你转译为**ES5**。 因为**React的数据流是单向的**，只能自顶向下，同级别组件传递的时候只能通过共同的父组件交流，所以当你的数据流比较复杂的时候你就应该使用**Redux**来替你管理数据流了。 至于说**webpack**嘛，**前端工程化**哪里少的了打包工具啊！ ### 使用React的好处，何时需要使用React？ >2004年Gmail的推出，让大家发现，单页面应用的互动也可以如此流畅，2010年前端单页应用框架接踵而至，2013年React横空出世，独树一帜：单向绑定、声明式UI，大大简化了大型应用的构建。Facebook发布的技术产品总是包含伟大的思想，VirtualDOM、服务端渲染、power native apps，这些概念引发了新的思考，同时React和以往的MVC开发模式不同，它没有Controller，因为他不关心户交互怎么处理，数据变化谁来管理，它只负责UI渲染，是MVVM模式。 我们都知道在一系列行为中，操作DOM的代价是非常昂贵的，但是前后端分离之后，前后端交流依赖ajax和json，避免不了会插入或者删除DOM。频繁的操作DOM会造成页面卡顿，这是我们都不想看到的。React的virtualDOM（虚拟DOM）就可以很好的解决这个问题。 谈虚拟DOM之前我们先聊一下组件化 ### React组件化 React推崇使用组件化开发的方式来开发项目，允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件，React的组件元素被描述成纯粹的JSON对象，由三部分组成——属性(**props**)，状态(**state**)以及**生命周期方法**。 #### state： React 的组件使用 状态机 的概念来描述 组件本身的可变数据。要获取组件的状态都需要通过 this.state 来获取，在 constructor（构造函数）中，可以通过 this.state 来设置组件的初始状态。要改变状态就必须并且只能通过 **this.setState** 方法来改变，不能通过直接修改 this.state.xxx = "xxx" 来进行修改，因为 this.state 的值是 immutable（不可变） 的。可以认为 state 有自己的 setter 和 getter 方法，这样能更好的理解。 React 使用状态机来简化了繁琐的 DOM 操作，传统开发模式中繁琐的 DOM 操作都可以转变成状态的改变，底层的 DOM 操作由 React 来接管。如果你在使用 React 开发应用的时候想着应该怎么操作 DOM，这时候需要反思一下是不是使用 React 的方式有问题。 #### props： props是React中一个重要的概念，他是properties的缩写。props是React�