前端的注册、登录
测试模版(修改于2020-12-08)
import React, { useState } from 'react'
import './App.css'
import axios from 'axios'
import Swal from 'sweetalert2'
axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://localhost:8000/api/auth'
function App () {
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
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
推荐文章: