登录页面开发（1）

创建登录页面极其路由

1. src-pages下新建login文件夹：
   • 新建index.js文件：
2. 在App.js中增加Login的路由：

登录页面样式布局

1. src-pages-login下新建style.js文件：
2. src-pages-login-index.js中，引入并使用样式组件：
   • common-header-style.js中设置一下，避免搜索框位于login下面：

---

登陆功能实现

实现效果：

创建login的store

• login下新建store文件夹：
  • 新建actionCreators.js
  • 新建constants.js
  • 新建index.js:
  • 新建reducer.js:

---

合并到项目总store中

此时虽然创建好了login的store，但还无法获取其中的数据。我们需要将login的reducer合并到src-store-reducer.js中：

此时可以看到store中已经有数据了:

---

判断用户是否登录，显示 登录/退出

• 实现功能：我们要让 头部组件 根据 用户是否登录 显示不同的文字。
• header-index.js：
  1. 引入longin的store中保存的login数据来判断用户是否登录：
  2. 使用三目运算符来判断，如果login为true就显示“退出”，否则显示可跳转login页的“登录”：
  3. 效果：

---

登录按钮绑定事件，发送AJAX请求

• 实现功能：点击“登录”按钮后，用户的帐号、密码通过AJAX请求传递过去，查找是否存在。如果存在就登录成功，文字改为“退出”。
• 思路：
  1. 通过样式组件的ref属性的value值 获取到用户输入的帐号、密码。
  2. 给Button组件绑定onClick事件，事件函数中要发送AJAX请求，将帐号密码传递过去。AJAX请求要放到action中，而只有connect的参数2可以派发action，所以发送AJAX请求的函数要放在connect的参数2中
  3. 创建login.json模拟数据
  4. 在actionCreators.js中创建对应的action，通过AJAX请求获取“是否登录成功”，根据获取内容发送action意图去修改store中login值
  5. reducer接受到action，修改store中login值，从而让页面显示不同。

获取用户输入的帐号密码

通过样式组件的ref属性的value值 获取到用户输入的帐号、密码：

效果：

绑定点击事件，发送AJAX请求

给Button组件绑定onClick事件，事件函数中要发送AJAX请求，AJAX请求要放到action中，而只有connect的参数2可以派发action，所以发送AJAX请求的函数要放在connect的参数2中

login.json模拟数据

我们先给个模拟数据，假设无论如何都是登录成功：

创建action（AJAX请求）

在actionCreators.js中创建对应的action，通过AJAX请求将帐号、密码传递过去，获取“是否登录成功”，根据获取内容发送action意图去修改store中login值：

import axios from "axios";
import * as constants from "./constants";

const changeLogin = () => ({
  type: constants.CHANGE_LOGIN,
  value: true
})

export const login = (account, password) => {
  return (dispatch) => {
    axios.get("/api/login.json?account=" + account + "&password" + password).then((res) => {
      const result = res.data.data;
      if (result) {
        dispatch(changeLogin());

      } else {
        alert("登录失败");
      }
    })
  }
}

reducer处理数据

reducer接受到action，修改store中login值，从而让页面显示不同：

此时点击成功后显示“退出”：

“react-router-dom”的组件

• 导航组件包括：<Link>，<NavLink>和<Redirect>
• 使用<Link>类似<a>,需要点击才能跳转，
• 而使用 <Redirect>会直接导航到一个新的位置。新的位置将覆盖历史堆栈中的当前条目

登录成功跳转首页

login-index.js中获取到store中的login来做判断，假如已登录就使用”react-router-dom”中的组件将页面重定向到首页：

此时会报错，因为变量login和函数login重名了，将变量login重命名为loginStatus即可。

实现退出功能

• 思路：在header-index.js中，给“退出”按钮绑定点击事件，点击后将login的store中的login改为false。
• 注意： header中的actionCreators.js创建的是改变header的store中数据的action，我们要想改变login的store中的数据，action要到login下的actionCreators.js中去创建。

引入需要改变的login的actionCreators.js

common-header-index.js中引入login的actionCreators.js:

import { actionCreators as loginActionCreators } from "../../pages/login/store";

注意： header中的actionCreators.js创建的是改变header的store中数据的action，我们要想改变login的store中的数据，action要到login下的actionCreators.js中去创建。

“退出”按钮 绑定点击事件

给“退出”按钮绑定点击事件，点击后派发action去修改login值：

在mapDispatchProps中添加logout函数，用于派发修改login值的action：

logout() {
  dispatch(loginActionCreators.logout());
},

注意：这里是logout是方法，调用需要()

通过action传递需要改变的login

login-store-actionCreators.js创建action：

reducer处理，改变login值

login-store-reducer.js处理，改变login值：