2019独角兽企业重金招聘Python工程师标准>>>
一登陆界面 view=>>>>>>>component
import React ,{Component} from 'react';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router-dom';
import {Navbar,Nav,NavItem ,NavDropdown ,MenuItem} from "react-bootstrap";
require(`./style.less`)
import { connect } from 'react-redux';
import * as loginvolidate from 'actions/loginvolidate';
@connect (
state => state,
dispatch => bindActionCreators(loginvolidate, dispatch)
)
class Header extends React.Component {
constructor(props) {
super(props);
//验证每次组件发生变化时都会验证
this.props.loginVolidate_success()
}
render() {
const {data} = this.props.loginvolidate;
console.log(data)
return (
<div>
//登陆用户名设置页面转换
{data==undefined?
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
狠林首页
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} ><Link to='login'>登陆</Link></NavItem>
<NavItem eventKey={2} ><Link to='register'>注册</Link></NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
:
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
狠林首页
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav bsStyle="pills" pullRight >
<NavDropdown eventKey="4" title={data} id="nav-dropdown">
<MenuItem eventKey="4.1">个人中心</MenuItem>
<MenuItem eventKey="4.2">会员</MenuItem>
<MenuItem eventKey="4.3">发帖管理</MenuItem>
</NavDropdown>
<NavItem eventKey="2" title="Item">消息</NavItem>
<NavItem eventKey="1" title="Item">注销</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
}
</div>
)
}
}
export default Header;
二 actions
import fetch from 'isomorphic-fetch';
import queryString from 'queryString'
export const success = (data) => ({
type: 'loginVolidate_success',
data:data.data
})
// 页面初次渲染时获取数据
export const loginVolidate_success = () => {
return dispatch => {
//这里需要在server.js中设置拦截 否则写全http:localhost:8080/dog/login/loginVolidate.do
fetch('/dog/login/loginVolidate.do', {
credentials: 'include', //必须加上用来与后台session进行交互,否则,会发现后台session为null
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
},
body: queryString.stringify()
})
.then((response) => {
if(response.ok){
return response.json();
}
})
.then(data=>{
dispatch(success(data))
})
.catch(()=>alert('用户名或密码错误'))
}
}
三redux
const initState = {
}
export const loginvolidate = (state = initState, action) => {
switch (action.type) {
case "loginVolidate_success":
return {
...state,
data: action.data
}
default:
return state
}
}
store与相关配置
后台:springmvc
package com.Tieba.controller;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.SessionAttributes;
import dog.User;
@Controller
@RequestMapping("/login")
public class loginController {
@RequestMapping(value="/loginUser", method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> loginUser(HttpServletRequest req,HttpServletResponse res,
HttpSession session){
System.out.println(req.getParameter("user"));
System.out.println(req.getParameter("psw"));
session.setAttribute("user", req.getParameter("user"));
Map<String,Object> map = new HashMap<String, Object>();
map.put("data", "success");
return map;
}
@RequestMapping(value="/loginVolidate", method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> loginVolidate(HttpServletRequest req,HttpSession session){
Map<String,Object> map = new HashMap<String, Object>();
map.put("data", session.getAttribute("user"));
System.out.println(session.getAttribute("user"));
return map;
}
}