（17）登录页开发——① 登录页面布局 | React.js 项目实战：PC 端“简书”开发

复制代码

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥"前端一万小时"两大明星专栏------"从零基础到轻松就业"、"前端面试刷题"，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

1 "路由"跳转

就"登录页"的布局而言，我也不会倾注太多精力，大伙儿可以根据自己的需求，在本篇和"前置知识"的基础上进行拓展。

❗️我们的重点在------拿到一个新组件，我们该如何一步步思考，以及后边的整个"逻辑"该怎么编码。

🔗前置知识：《原生 JS 实战：小 DEMO 系列------模态框》

1️⃣打开 src 目录下的 pages 文件夹，在其中新增一个 login 文件夹。用于表示可跳转的 login 页面： 🔗前置知识：《首页开发------① 如何在 React 中使用"路由"》

2️⃣在 login 文件夹下，新增一个 index.js 文件，并写入以下代码：

jsx 复制代码

import React, {Component} from "react";

class Login extends Component {
  render() {
  	return(
      <div>login 页面~</div>
    )
  }
}

export default Login;

3️⃣打开 src 目录下的 App.js 文件：

jsx 复制代码

import React, { Component } from "react";

import {GlobalStyle} from "./style";

import {GlobalIconStyle} from "./statics/iconfont/iconfont";

import {BrowserRouter, Route} from "react-router-dom";

import Header from "./common/header";

import Home from "./pages/home";
import Detail from "./pages/detail";

// 3️⃣-①：引入 Login 组件；
import Login from "./pages/login";


import { Provider } from "react-redux";

import store from "./store";

class App extends Component  {  
  render() {  
    return (
      <div>
        <GlobalStyle />
        <GlobalIconStyle />
 
        <Provider store={store}>             
          <BrowserRouter>
            <div>
              <Header />
      
              <Route path="/" exact component={Home}></Route>

              <Route path="/detail/:id" exact component={Detail}></Route>

							{/*
               3️⃣-②：继续用 Route 包裹可以跳转的 login 页面；
               ❗️Route 表示"一条条的路由规则"！
                */}
							<Route path="/login" exact component={Login}></Route>

							{/*
               ❗️❗️❗️3️⃣-③：其中，path 指页面要跳转的"路径"；
               									exact 指"路径"必须"精确"地匹配才"跳转"；
                                component 指将"渲染"的内容替换为"组件"。
                */}
            </div>
          </BrowserRouter>
        </Provider>

      </div>
    );
  }
}

export default App;

返回页面查看（可以正常进入 login 页面）：

2 "登录页"布局

1️⃣打开 pages 目录下 login 文件夹中的 index.js 文件： 🔗前置知识：《HTML------③ HTML 表单详解》

jsx 复制代码

import React, {Component} from "react";

// ❗️从当前目录下的 style.js 中，引入"样式组件"；
import {
  LoginWrapper,
  LoginBox,
  Input,
  Button
} from "./style"


class Login extends Component {
  render() {
    return(
      <LoginWrapper>
      	<LoginBox>
      		<Input type="text" placeholder="账号" />
					<Input type="password" placeholder="密码"  />
					<Button type="submit">登陆</Button>
				</LoginBox>
			</LoginWrapper>
    )
  }
}

export default Login;

2️⃣在 pages 目录下的 login 文件夹中新建一个 style.js 文件，用于放置"登录页"的样式：

javascript 复制代码

import styled from "styled-components";

export const LoginWrapper = styled.div`
  position: absolute;
  top: 56px;
  right: 0;
  bottom: 0;
  left: 0;
  background: #eee;
`;

export const LoginBox = styled.div`
  width: 400px;
  height: 180px;
  margin: 100px auto;
  padding-top: 20px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,.1);
`;

export const Input = styled.input`
  display: block;
  width: 200px;
  height: 30px;
  padding: 0 10px;
  margin: 10px auto;

  line-height: 30px;
  color: #777;
`;

export const Button = styled.div`
  width: 220px;
  height: 30px;
  margin: 10px auto;  

  line-height: 30px;
  color: #fff;
  background: #3194d0;
  border-radius: 15px;
  text-align: center;

  cursor: pointer;
`;

返回页面查看（"登录页"正常显示）：

下一篇，我们专门来实现"登录"、"退出"相关的逻辑编码，会有些绕，但知识点都学过，不难。

祝好，qdywxs ♥ you！