前端的注册、登录

测试模版(修改于2020-06-19)

import React, { useState, useEffect } from 'react'
import './App.css'
import axios from 'axios'
import Swal from 'sweetalert2'

axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://localhost:8000/api/'

function App () {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  useEffect(() => {
    axios.get('http://localhost:8000/sanctum/csrf-cookie')
  }, [])

  const handleRegister = e => {
    e.preventDefault()
    axios.post('register', {
      name: name, email: email, password: password,
    }).then(response => {
      Swal.fire('提示️', JSON.stringify(response.data), 'success')
    })
  }

  const handleLogin = e => {
    e.preventDefault()
    axios.post('login', {
      email: email, password: password,
    }).then(response => {
      if (response.status === 200) {
        Swal.fire('提示️', '登录成功', 'success')
      }
    })
  }

  const handleCredentialsTest = () => {
    setName('233')
    setEmail('233@233.com')
    setPassword('123456')
  }

  const handleUser = () => {
    axios.get('user').then(resp => {
      Swal.fire('提示️', JSON.stringify(resp.data), 'success')
    })
  }

  return (<>
    <div>
      <form onSubmit={e => handleRegister(e)}>
        <label>
          昵称:
          <input name="name" type="text" value={name} placeholder='请输入昵称'
                 onChange={e => setName(e.target.value)}/>
        </label>
        <label>
          邮箱:
          <input name="email" type="text" value={email} placeholder='请输入邮箱'
                 onChange={e => setEmail(e.target.value)}/>
        </label>
        <label>
          密码:
          <input name="password" type="password" value={password}
                 placeholder='请输入密码'
                 autoComplete='off'
                 onChange={e => setPassword(e.target.value)}/>
        </label>
        <input type="submit" value="注册"/>
      </form>
    </div>
    <div>
      <form onSubmit={e => handleLogin(e)}>
        <label>
          邮箱:
          <input name="email" type="text" value={email} placeholder='请输入邮箱'
                 onChange={e => setEmail(e.target.value)}/>
        </label>
        <label>
          密码:
          <input name="password" type="password" value={password}
                 placeholder='请输入密码'
                 autoComplete='off'
                 onChange={e => setPassword(e.target.value)}/>
        </label>
        <input type="submit" value="登录"/>
      </form>
    </div>
    <div>
      <button onClick={handleCredentialsTest}>一键填入测试数据</button>
      <button onClick={handleUser}>获取用户信息</button>
    </div>
  </>)
}

export default App

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
小李世界
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 0
发起讨论 只看当前版本


暂无话题~