我们将使用React和Express创建一个登录系统。首先我们创建前端代码，然后创建一个后端应用，最后我们将这两个部分连接起来。
这个任务涉及到的代码相对较多，下面给出的代码仅供参考，你可能需要根据你的实际需求进行修改。
- 前端部分（React）
在src文件夹中，创建Login.js文件，代码如下：
// src/Login.js
import React, { useState } from 'react';
import axios from 'axios';
import { useHistory } from 'react-router-dom';
function Login() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const history = useHistory();
const handleLogin = async () => {
try {
// 这里的 URL 地址需要替换为你的服务器地址
const res = await axios.post('https://your-server.com/login', { username, password });
if (res.data.status === 'success') {
history.push('/welcome');
} else {
alert('登录失败，请重试');
}
} catch (error) {
console.error(error);
}
};
return (
<div>
<input
type="text"
placeholder="用户名"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<input
type="password"
placeholder="密码"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button onClick={handleLogin}>登录</button>
</div>
);
}
export default Login;
创建Welcome.js文件，代码如下：
// src/Welcome.js
import React from 'react';
function Welcome() {
return <div>Hello ~</div>;
}
export default Welcome;
修改App.js文件，加入路由信息：
// src/App.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Login from './Login';
import Welcome from './Welcome';
function App() {
return (
<Router>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/welcome">
<Welcome />
</Route>
</Switch>
</Router>
);
}
export default App;
- 后端部分（Express）
在你的后端项目中，首先创建app.js文件，用于启动服务器和处理请求：
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const loginHandler = require('./loginHandler');
const app = express();
app.use(bodyParser.json());
app.post('/login', loginHandler);
app.listen(3000, function () {
console.log('App is listening on port 3000');
});
然后创建loginHandler.js文件，用于处理登录请求：
// loginHandler.js
const { checkUserCredentials } = require('./db');
module.exports = async function (req, res) {
const { username, password } = req.body;
try {
const result = await checkUserCredentials(username, password);
if (result) {
res.json({ status: 'success' });
} else {
res.json({ status: 'fail' });
}
} catch (error) {
console.error
(error);
res.status(500).json({ status: 'error' });
}
};
最后，创建db.js文件，用于连接数据库和检查用户凭证：
// db.js
const mysql = require('mysql2/promise');
async function checkUserCredentials(username, password) {
const connection = await mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'your-password',
database: 'your-database'
});
const [rows] = await connection.execute('SELECT * FROM Users WHERE username = ? AND password = ?', [username, password]);
connection.close();
return rows.length > 0;
}
module.exports = {
checkUserCredentials
};
以上代码中涉及的数据库连接和SQL查询都需要根据你的实际情况进行修改。同时也需要注意安全性的问题，比如防止SQL注入和使用密码哈希等。
这样就完成了一个基本的登录系统的搭建，用户在前端页面输入用户名和密码，点击登录后，前端向后端发送请求，后端再与数据库进行交互，最后返回登录结果给前端。
网友评论