文档章节

前端那些事之react篇实现登录(前后台分离)

上官清偌
 上官清偌
发布于 2017/05/04 18:34
字数 341
阅读 122
收藏 1
点赞 0
评论 0

1.下载脚手架

  • 安装顺序:npm install -g create-react-app
  • create-react-app my-app(可以在指定的目录下创建)
  • cd my-app/
  • npm start

2.下载路由

  • 指定版本:先安装 npm install --save react-router@3.0.0
  • 最新版本4.1.1跳转不过去

3.下载antd desin

  • npm install antd --save

4.react-redux

  • npm install --save react-redux
  • npm install --save redux

5. ajax请求用插件superagent来实现

简介:SuperAgent 是一个轻量的Ajax API,服务器端(Node.js)客户端(浏览器端)均可使用,SuperAgent具有学习曲线低、使用简单、可读性好的特点,可作为客户端请求代理模块使用,当你想处理get,post,put,delete,head请求时,可以考虑使用SuperAgent。

下载命令:npm install superagent --save

react 实现异步调用redux-thunk

import React from 'react';
import ReactDom from 'react-dom';
//导入路由组件
import Router from './rotuer/index';
import {createStore,combineReducers,applyMiddleware,compose} from 'redux';
import {Provider,connect} from 'react-redux';
import reducer from './reducer/index';
import thunk from 'redux-thunk'
//创建一个全局变量
const store =createStore(reducer,compose(
    //发送异步请求
    applyMiddleware(thunk),
    //可以使用redux在chorme浏览器中调试
    window.devToolsExtension()
))
const Logo=React.createClass({
    render(){
        return(
            <div>
                <Provider store={store}>
                   <Router/>
                </Provider>
            </div>
        )
    },
    //组件加载完成
    componentDidMount(){

    }
})
export default Logo;

© 著作权归作者所有

共有 人打赏支持
上官清偌
粉丝 11
博文 85
码字总数 118451
作品 0
浦东
程序员
openresty 前端开发序

还记得第一次尝试前后端分离的时候,是使用nginx + react 构建的spa应用,后端是java,主要处理业务逻辑逻辑部分,返回json数据,在nginx里面配置好html + js纯静态文件,再通过反向代理到j...

-外星人- ⋅ 2016/12/09 ⋅ 0

基于VUE自定义指令实现按钮级权限控制

前言:关于权限的那些事!!! 路由权限可参看这位大神写的,很全面==>手摸手,带你用vue撸后台 系列二(登录权限篇) 思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之...

lixinchao ⋅ 05/23 ⋅ 0

Spring Boot + Vue前后端分离开发实战

前后端分离是一种开发方式,已经变得越来越流行了,越来越多的企业都开始往这个方向靠拢。那么,为什么要选择前后端分离呢?前后端分离对实际开发有什么好处呢? 前后端分离可以让专人做专事,...

尹吉欢 ⋅ 06/10 ⋅ 0

基于koa+fis3+swig前后端isomorphic同构实现

  (认真把这篇文章看完,保证你会学到很多,如果没学到请联系作者或直接报警)   随着前端技术的不断变革,前端从后台吐页面 -> 前端MVC -> mvvm、react -> node直出 ->同构跨端的大致发...

ouven ⋅ 2016/04/21 ⋅ 0

Express + JWT用户认证最轻实践

最近给自己列了一个list,Ummm...列来列去大概是下面这个样子: React SSR服务端渲染 jwt用户认证 Vue全家桶 微信小程序开发 ... 等等 好吧,谁让自己菜呢,没什么好抱怨的,一个一个来吧。正...

luffyZhou ⋅ 05/28 ⋅ 0

【webpack】【Beatbox才艺】【自我提升】【iOS Patch】【Spring Boot】| Chat · 预告

1 利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载 作者简介: 爱死费崇政,以后端语言 Java 入行,曾在苏州智康担任 Java 中级研发工程师,后转向全栈研发工程师...

gitchat ⋅ 2017/11/29 ⋅ 0

前端每周清单第 32 期:React 开源协议更新、JS 完整编年史、Vue 组件通信

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊 ⋅ 2017/09/25 ⋅ 0

2016给自己一个目标

2016给自己一个目标 1.做一个互联网平台系统+ios app+后台运营系统 2.技术选型 2.1:类静态缓存数据,redis,事务处理,先update缓存,再异步修改mysql。 2.2:mongodb存储业务日志,操作日志...

指尖Coding ⋅ 2016/01/29 ⋅ 0

后台管理系统--Alpaca-spa-laravel

Alpaca-Spa-Laravel 是用 Alpaca-Spa + Laravel 前后端分离开发的一款后台管理系统的DEMO。 主要功能模块有登录、定时任务管理、用户管理、权限管理、个人信息管理等。 在实际开发中可以根据...

大弹簧 ⋅ 2017/07/07 ⋅ 0

【天赢金创】前后分离架构的探索之路

大约五年前,那时候我还是一个小小讲师(苹果 AATC 培训认证),完全不懂编程为何物的菜鸟,一个偶然的机会让我进入了公司的开发部门,任职什么呢?用户体验设计师,原因很操蛋——我以前干过...

第三方支付接口 ⋅ 2015/09/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【elasticsearch】 随笔 Date datatype

一。时间类型的本质 首先json是没有时间类型的,对于es来说,时间类型的标示可以是下面三种情况 1.一个时间格式的字符串,如:"2014-11-27T08:05:32Z","2015-01-01" or "2015/01/01 12:10:3...

xiaomin0322 ⋅ 29分钟前 ⋅ 0

阿里云资源编排ROS使用教程

阿里云资源编排ROS详细内容: 阿里云资源编排ROS使用教程 资源编排(Resource Orchestration)是一种简单易用的云计算资源管理和自动化运维服务。用户通过模板描述多个云计算资源的依赖关系、...

mcy0425 ⋅ 32分钟前 ⋅ 0

适配器设计模式

1、适配器模式 把一个类的接口变换成客户端所期待的另一种接口 使原本因接口不匹配而无法在一起工作的两个类能够在一起工作 分为类的适配器模式和对象的适配器模式 2、类适配器模式 类的适配...

职业搬砖20年 ⋅ 36分钟前 ⋅ 0

npm操作报错 _stream_writable.js:61

有一天 不知道什么原因(估计和node的版本有关),无论你做什么npm的操作 都会报错/usr/local/lib/node_modules/npm/node_modules/readable-stream/lib/_stream_writable.js:61 这时候只要执...

lilugirl ⋅ 39分钟前 ⋅ 0

Eclipse安装插件的几种方式

Eclipse魅力之一就是支持可扩展的插件,来丰富自身的功能,这种方式也是建立在开源思想之上的。具体使用什么方式去安装插件,要看我们拿到的是什么。 1. 拿到的是一串URL,如http://subclips...

GordonNemo ⋅ 42分钟前 ⋅ 0

div图片叠加

css实现代码如下: <div style="position: relative;"><!--这个层为外面的父层,需设置相对位置样式--> <div style="position: absolute;"><!--子层,需设置绝对位置样式--> <i......

niithub ⋅ 43分钟前 ⋅ 0

作用域slot

如果父组件需要使用子组件中的内容怎么办,比如父组件需要控制子组件的显示 <div id="root"><child><template slot-scope="props"><h1>{{props.item}} <div>编辑</div></h1><......

金于虎 ⋅ 46分钟前 ⋅ 1

HongHu commonservice-eureka 项目构建过程

上一篇我们回顾了关于 spring cloud eureka的相关基础知识,现在我们针对于HongHu cloud的eureka项目做以下构建,整个构建的过程很简单,我会将每一步都构建过程记录下来,希望可以帮助到大家...

明理萝 ⋅ 49分钟前 ⋅ 1

xml和对象的相互转化

@Data//setter和getter方法,toString和equals,hashcode方法@EqualsAndHashCode//代表重写equals和hashcode方法@XmlAccessorType(XmlAccessType.FIELD)public class Classroom {@X......

拐美人 ⋅ 49分钟前 ⋅ 0

tableView cell的高度 分组头部尾部的高度 自适应

@property (nonatomic) CGFloat rowHeight; // default is UITableViewAutomaticDimension@property (nonatomic) CGFloat sectionHeaderHeight; // default is UITableViewA......

娜一片蓝色星海 ⋅ 50分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部