react登录页面_用 React 做一个人脸识别网站 - 前端篇

引言React 可以说是近些年最热门的前端框架啦，并且非常非常的好用 ~很多的国外公司比如 Netflix、Feedly、Airbnb 都是用它来实现的网站主页。那么 React 到底是个什么呢？它其实是一个为数据提供渲染为HTML视图的开源JavaScript 库。传说最早起源于Facebook 的内部项目，由于太好用了，就开源给大家使用了。现在国内的很多公司都在招聘会 React 的前端工程

weixin_39974932

750人浏览 · 2020-12-19 16:18:18

weixin_39974932 · 2020-12-19 16:18:18 发布

引言

React 可以说是近些年最热门的前端框架啦，并且非常非常的好用 ~

很多的国外公司比如 Netflix、Feedly、Airbnb 都是用它来实现的网站主页。

那么 React 到底是个什么呢？它其实是一个为数据提供渲染为HTML视图的开源JavaScript 库。传说最早起源于Facebook 的内部项目，由于太好用了，就开源给大家使用了。

现在国内的很多公司都在招聘会 React 的前端工程师。说明如果会这项技术还是会很吃香哒。

那么我们应该怎么学习它呢？

它的官方文档当然是一个选择～

里面有官方人员给出的最严谨的定义和最全的方法解释，一步一步跟着学的话应该也能学会。

不过，稍显有那么点点枯燥啦。

想要更好玩的学习方法，不妨找个小项目来上手吧。

因为根据认知心理学的理论，学习的最好方法之一就是应用～

在“做中学” 会比单纯的 “看概念” 更记忆深刻哦～

我之前在初步学习 react 的时候，有小试牛刀，

做了一个机器人 ️网站，网址在这里：https://rocky-hamlet-79784.herokuapp.com/ 。

教程在此：https://zhuanlan.zhihu.com/p/296727460

今天想教大家一个升级版！！！一个可以有用户的人脸识别网站～

效果展示

https://wenjia-smartbrain.herokuapp.com/ （后端部分还没完全搭建好）

由于教程篇幅过长，将会分成四个部分：前端篇、后端篇、数据库篇和部署篇。

跟着我一起动手，不仅能掌握 react 框架的基本使用，还能拥有一个可以被访问的网站哦～～

前端篇

思路梳理

前端的页面想设计成这样：

首页可以拆分成3个元素，分别是登录、注册、导航栏。

那就每个元素为一个组件。

登录后的页面：

可以拆分成5 个组件。除去导航栏，还有logo、搜索框、排名区、面部识别功能区。

每个组块存储在一个文件夹内，而所有的模块都放在模块文件夹下，像这样：

创造好的 component，可以在app.js中以以下的形式被引用。

Tips：app.js中的多个 components 要放在 <div></div> 里面哦。


function App() {
  return (
    <div>
       <Navigation />
       <Logo /> 
        <ImageLinkForm/>
        <FaceRecognition />
        ... 省略了其他组件们...

    </div>

  );
}

功能实现

讲完了思路，那我们就来动手写吧～

注册, 登录功能

css

因为要花好多时间调试好看的样式，而样式会根据项目的不同而进行很大的调整。

所以这里具体样式就直接给大家了，就不用花太多时间纠结样式了。

感兴趣的可以去找我的源码康康。

目前只要安装一个好用的插件 tachyons 就可咯。

npm install tachyons
npm tachyons

Index.js 导入

import "tachyons";

页面

App.js

功能：没登入之前是注册页面，登录之后是搜索图片页面。

实现： constructor()

Tips: jsx语法： html 里加了{ } 就可以写 js 了。

constructor(){
    super()
    this.state = {
      input: "",
      route: "signin"
    }
  }


render() {
    return (
      <div className="App">
         <Navigation />
         { this.state.route === "signin"
          ?  <div>< Signin /></div>
          :  <div> 
            <Logo /> 
            <Rank />
            <ImageLinkForm onInputChange={this.onInputChange} onButtonSubmit={this.onButtonSubmit}/>
            <FaceRecognition />
            <Particles className="particles"
                  params={particleOptions}
                /></div>
         }   
      </div>
  
    );
    }
  }

同理，新建 register 页面。

// 新增代码
 <div className="mt3">
                <label className="db fw6 lh-copy f6" htmlFor="name">Name</label>
                <input
                  className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
                  type="text"
                  name="name"
                  id="name"
                  onChange={this.onNameChange}
                />
              </div>

页面跳转

设置

constructor(){
    super()
    this.state = {
      input: "",
      route: route
      // route: "signin"
    }
  }
  
  
  onRouteChange = (route) => {
    this.setState({route: route});
  }

render() {
    return (
      <div className="App">
         <Navigation onRouteChange = {this.onRouteChange}/>
         { this.state.route === "signin"
          ?  <div>
              <Signin />
              <Particles className="particles"
                    params={particleOptions} />
              </div>
          :  <div> 
              <Logo /> 
              <Rank />
              <ImageLinkForm onInputChange={this.onInputChange} onButtonSubmit={this.onButtonSubmit}/>
              <FaceRecognition />
              <Particles className="particles"
                    params={particleOptions}
                /></div>
         }   
      </div>
  
    );
    }

添加思路: 需要跳转到什么页面， onRouteChange(param)}， param就写什么参数。

Tips：千万别忘了在函数头传参 {onRouteChange} ！！！！！

Navigation.js (signout button)

onClick={({onRouteChange}) => onRouteChange("signin")}

Signin.js

// 千万别忘了传参 {onRouteChange} ！！！！！
// 箭头函数：render的时候不调用这个函数，只有当onClick的时候才调用
//            onClick = {() => onRouteChange("rankpage")}
            
     <div class="">
            <input 
            // 箭头函数：render的时候不调用这个函数，只有当onClick的时候才调用
            onClick = {() => onRouteChange("rankpage")}
            className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib" 
            type="submit" 
            value="Sign in" />
            </div>
            <div class="lh-copy mt3">
            <a onClick = {() => onRouteChange("register")} href="#0" className="f6 link dim black db">Register</a>
                        </div>

<input 
  // 箭头函数：render的时候不调用这个函数，只有当onClick的时候才调用
  onClick = {() => onRouteChange("signin")}
  className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib" 
  type="submit" 
  value="Register" />
  </div>

上传照片并识别

Step 1. 输入框，按钮框对于输入的识别

App.js 设置 state,并渲染

constructor(){
    super()
    this.state = {
      input: ""
    }
  }

  onInputChange = (event) => {
    console.log(event.target.value);
  }

  onButtonSubmit = () => {
    console.log("click");
  }
  
render() {
    return (
      <div className="App">
  
          <ImageLinkForm onInputChange={this.onInputChange} onButtonSubmit={this.onButtonSubmit}/>
         
      </div>
  
    );
    }

ImageLinkForm.js

传参，用参

 <input className="f4 pa2 w-70 center" type="text" onChange={onInputChange}/>
  <button className="w-30 grow f4 link ph3 pv2 dib white bg-light-purple" 
                    onClick = {onButtonSubmit}>Detect</button>

step 2. 能上传图片

调用人家已经做好的api

clarifai （https://www.clarifai.com/）

注册一个账户就能免费用了

(未完待续...)

DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

2026年必装的10款Claude插件：让你的AI从聊天机器人进化为全能智能体

DAMO开发者矩阵

边缘智能新引擎：高性能AI工控机赋能大模型与机器人落地

DAMO开发者矩阵

华为eNSP模拟器综合实验之- WLAN瘦AP配置实战案例详解

本文详细介绍了华为eNSP环境中WLAN瘦AP的配置过程。实验拓扑包含路由器、三层交换机、AC控制器和二层交换机，通过VLAN划分实现两个无线业务：内部办公用户（VLAN101隧道转发）和外来访客用户（VLAN102直接转发）。配置步骤涵盖路由器静态路由、交换机VLAN划分、AC控制器CAPWAP隧道建立、DHCP服务配置以及两种转发模式的对比分析。重点说明了AP上线机制、Option43配置、安