React全家桶项目

简介: 利用业余时间,做了个React项目,算是成品吧,比较简单,还有很多瑕疵。目录结构相当简单。没有数据库,你们运行不起来。想运行起来的话,把express调用数据库的部分全删掉,写死数据。

开篇

利用业余时间,做了个React项目,算是成品吧,比较简单,还有很多瑕疵。目录结构相当简单。没有数据库,你们运行不起来。想运行起来的话,把express调用数据库的部分全删掉,写死数据。

ak47

这个集成了React全家桶,可以直接运行,也可以直接在生产环境使用。 github.com/xuya227939/…

源码

github.com/bbww/sight.…

预览地址

最好用谷歌游览器进行体验,其他游览器没测。 downfuture.com

技术栈

react + redux + saga + router + es6 + node.js + webpack + mysql

功能

  • 简单的登录、注册、修改密码
  • 用户可以点赞和收藏
  • 个人中心可以上传头像和图片(图片最多上传三张),暂时未压缩。
  • 个人中心可以修改密码和登出

目录结构


6e678f66e99102a755d04006ec844ad48f7ca6a8

常用方法

fetch

封装了fetch请求,统一报错。


function request({ method, options, callback }) {
  options.mode = "cors";
  if(!options.sign) {
    options.headers = {
      'Content-Type': 'application/json'
    };
    if(!(options.method === 'GET' || options.method === 'DELETE')) {
      options.body = JSON.stringify(options.body);
    }
  }
  options.credentials = 'include';
  return fetch(getApi + method, options )
    .then(checkStatus)
    .then(parseJSON)
    .then((data) => {
      return data;
    }).catch((err) => {
      message.config({
        top: 24,
        duration: 1,
        maxCount: 3,
      });
      message.error('发送fetch失败' + JSON.stringify(err) + ',方法名:' + method);
    });

接口符合restFul设计

4194eab8f42fb48c9624f0df69446f38c4bfbaf8

util.js

工具类js

router.js

所有的路由配置都在这个js中

结语

建站步骤,在我的blog中分享出来了。欢迎一起讨论,只介绍实现,不阐述相关代码的含义。github.com/xuya227939/…



原文发布时间为:2018年06月23日
原文作者:xuya227939

本文来源: 掘金 如需转载请联系原作者

相关文章
|
7月前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
199 0
|
7月前
|
前端开发 API 数据安全/隐私保护
【第45期】一文解决React项目的权限管理
【第45期】一文解决React项目的权限管理
359 0
|
7月前
|
Web App开发 资源调度 JavaScript
竟然可以在一个项目中混用 Vue 和 React?
竟然可以在一个项目中混用 Vue 和 React?
738 0
|
7月前
|
前端开发 API
react如何进行项目配置代理
react如何进行项目配置代理
164 0
|
7月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
109 2
|
7月前
|
存储 JSON 前端开发
react保姆级搭建新项目
此文主要以ts+vite+router6+antd 快速搭建一个react项目,适用于初学者,用于学习交流
119 2
|
7月前
|
移动开发 JavaScript 前端开发
vue/react项目刷新页面出现404的原因以及解决办法
vue/react项目刷新页面出现404的原因以及解决办法
738 0
|
7月前
|
存储 资源调度 前端开发
【React | 完整项目创建流程】能看到这么详细的React配置流程,就偷着乐吧!
【React | 完整项目创建流程】能看到这么详细的React配置流程,就偷着乐吧!
221 1
|
7月前
|
前端开发
React项目首页中用canvas实现星空
React项目首页中用canvas实现星空
111 2
|
7月前
|
安全
自媒体营销软文灵感思路来源——万能公式:6P方法论
自媒体营销软文灵感思路来源——万能公式:6P方法论
自媒体营销软文灵感思路来源——万能公式:6P方法论