文档章节

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

上官清偌
 上官清偌
发布于 2017/05/04 18:34
字数 341
阅读 149
收藏 1

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
博文 84
码字总数 118568
作品 0
浦东
程序员
前后端分离 | 关于登录状态那些事

背景 登录是一个网站最基础的功能。有人说它很简单,其实不然,登录逻辑很简单,但涉及知识点比较多,如: 密码加密、cookie、session、token、JWT等。 我们看一下传统的做法,前后端统一在一...

小忽悠
10/12
0
0
openresty 前端开发序

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

-外星人-
2016/12/09
830
0
基于VUE自定义指令实现按钮级权限控制

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

lixinchao
05/23
0
0
Spring Boot + Vue前后端分离开发实战

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

尹吉欢
06/10
0
0
基于koa+fis3+swig前后端isomorphic同构实现

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

ouven
2016/04/21
417
0

没有更多内容

加载失败,请刷新页面

加载更多

java序列化(四) - 实现Externalnalizable接口

实现Externalnalizable接口 实现Externalnalizable接口 package meng.springboot.demo.obj;import java.io.Externalizable;import java.io.IOException;import java.io.ObjectInput......

晨猫
12分钟前
0
0
php 日志库获取调用方的代码文件地址和代码行数

在使用其他语言的打印日志的时候,经常能看到打印日志时带上文件地址和代码行数,对于调试和查找问题非常方便,但是 php 日志库里则很少见到这个功能,但这个功能还是可以实现的。 关键点就是...

anoty
18分钟前
3
0
Android Studio如何批量导入全部包import

当需要导包时,Android Studio有单个导包快捷键 Alt+Enter 但是没有全部的包 但是可以在设置里设置Auto Import自动导入功能

lanyu96
20分钟前
0
0
六款优秀的 Linux 基准测试工具

基准测试是指运行计算机程序去评估硬件和软件性能的行为。硬件基本测试包括评估处理器,内存,显卡,硬盘,网络等不同组件的性能。基准测试有两类: 复合和应用。复合基准对一个硬件执行压力...

openthings
22分钟前
0
0
什么是阿里云容器服务?

关于阿里云容器服务的详细内容:阿里云容器服务使用教程 容器服务(Container Service)提供高性能可伸缩的容器应用管理服务,支持用 Docker 容器进行应用生命周期管理,提供多种应用发布方式...

mcy0425
23分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部