前后端的交互方式
一、前后端的实现方式
前后端交互可以通过以下几种方式实现：
RESTful API：使用HTTP协议进行通信，前端通过发送HTTP请求（GET、POST、PUT等）到后端API接口，后端返回相应的数据给前端。
WebSocket：WebSocket是一种在单个TCP连接上进行全双工通信的协议，前后端可以通过WebSocket建立持久连接，实现实时的双向通信。
GraphQL：GraphQL是一种查询语言和运行时系统，它可以让客户端精确地指定需要的数据，避免过度获取或未获取足够的数据。前端可以发送GraphQL请求到后端，后端返回符合请求的数据。
除了上述方式，还可以使用其他技术实现前后端交互，例如使用消息队列、RPC（Remote Procedure Call）等。具体选择哪种方式取决于项目需求和技术栈的选择。
二、设计一个登陆页面
登录页是用户进入系统的第一步，设计良好的登录页可以提供良好的用户体验并保障系统安全。以下是登录页设计的一般叙述：
1.页面元素：登录页通常包括输入框用于输入用户名和密码，以及登录按钮用于提交表单。有时还会包括“记住密码”、“忘记密码”等功能链接。
2.品牌标识：在页面的顶部通常会放置产品或者品牌的标识，例如logo等，以增加用户对产品的信任感。
3.响应式设计：确保登录页在不同设备上都能够正常显示，并且具备良好的响应式设计，比如在移动设备上也能方便地输入用户名和密码。
4.安全性考虑：在设计登录页时，需要考虑安全性，采取一些措施如防止暴力破解、防止跨站请求伪造（CSRF）等。
5.友好的错误提示：当用户输入错误的用户名或密码时，页面需要给出友好的错误提示，告知用户出现了什么问题并指导用户如何解决。
6.交互设计：考虑交互细节，比如在用户输入框获得焦点时提供清晰的视觉反馈，以及在用户成功登录后的页面跳转或提示。
7.背景图或颜色：适当的背景图片或颜色可以增加页面的吸引力，并传达产品的设计理念。
8.一致的设计风格：登录页的设计风格应与整个产品保持一致，统一的设计风格有助于提升用户的整体体验。
以上是登录页设计的一般叙述，实际设计时还需要根据具体产品的需求、目标用户群体和品牌特色来进行具体的设计。
三、程序流程图
四、登陆界面代码
登录页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>"计算器"登录页</title>
<link href="css/day01.css" rel="stylesheet"/>
</head>
<body id="body">
<form action="/login" method="post" class="login-form" novalidate>
<div id="main">
姓名：<input id="name" name="name" type="text" placeholder="请输入用户名"/>
<br />
密码：<input id="password" name="password" type="password" placeholder="请输入密码" />
<br />
验证码：<input id="captcha" name="captcha" type="text" />
<br />
<div id="BetweenButton" >
<input id="reset" type="reset" style="margin-left: 50px;" />
<input id="submit" type="submit" value="登录" />
</div>
</div>
</form>
<script>
var form = document.querySelector('.login-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
var name = document.getElementById('name').value;
var password = document.getElementById('password').value;
//发送异步请求进行认证
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: name,
password: password,
})
})
.then(function(response) {
if (response.ok) {
//认证成功，跳转到主页
window.location.href = '/home';
} else {
//认证失败，弹出提示信息
alert('登录成功');
document.getElementById('captcha').value = '';
document.querySelector('img').click();
}
})
.catch(function(error) {
console.error(error);
});
});
</script>
</body>
</html>
CSS代码
#name{
width: 30.625rem;
height: 1.875rem;
}
#password{
margin-top: 0.625rem;
width: 30.625rem;
height: 1.875rem;
}
#yanzhenma{
margin-top: 0.625rem;
width: 21.875rem;
height: 1.875rem;
}
#login{
margin-top: 0.625rem;
margin-left: 30px;
width: 60px;
height: 1.875rem;
}
#body{
/* background-color: rgba(33,77, 156, 34); */
background-image: url(../img/7e8c7432fa3f730be80cbd60190e243.jpg) ;
width: 100%;
height: 100%;
}
#main{
width: 31.25rem;
height: 10.625rem;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
实现方式如下
连接登陆页和数据库的步骤：
１．创建数据库表：在数据库中创建一个用于存储用户信息的表。表的结构可以包括字段如用户名、密码、用户ID等，具体字段根据需求而定。
２．后端处理逻辑：在后端服务器上编写处理登录请求的逻辑代码。当用户在登录页输入用户名和密码并点击登录按钮时，后端将接收到这些数据
３．验证用户信息：后端通过接收到的用户名和密码，查询数据库中的用户表，验证用户名和密码是否匹配。可以使用SQL语句执行查询操作，并对查询结果进行判断。
４．返回验证结果：根据验证结果，后端将向前端发送相应的响应。如果用户名和密码匹配成功，则返回登录成功的信息；如果匹配失败，则返回登录失败的信息。
５．前端页面跳转：在前端，根据后端返回的登录结果，进行相应的页面跳转。如果登录成功，用户可以进入系统的其他页面；如果登录失败，可以提示用户重新输入或提供其他解决方案。
在连接登录页和数据库时，需要注意以下几个方面：
数据库连接配置：需要在后端代码中配置数据库连接参数，包括数据库地址、用户名、密码等。
安全性考虑：为了保障用户信息的安全性，需要对密码进行加密存储，比如使用哈希算法对密码进行加密，并在验证时对比哈希值。
防止SQL注入：在处理用户输入的用户名和密码时，需要进行适当的防范措施，比如使用预编译语句或参数化查询，避免恶意用户利用输入进行SQL注入攻击。
以上是一种常见的连接登录页和数据库的方式，具体实现方法会根据使用的编程语言和框架而有所不同。
使用MySQL jdbc连接器mysql-connector-java.jar
package Main;
import java.sql.*;
public class JDBC {
public static void main(String[] args) throws SQLException, ClassNotFoundException {
// 1.加载驱动
Class.forName("com.mysql.cj.jdbc.Driver");
// 2.用户信息和url
String url = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8&useSSL=true";
String username="root";
String password="root";
// 3.连接成功，数据库对象 Connection
Connection connection = DriverManager.getConnection(url,username,password);
// 4.执行SQL对象Statement，执行SQL的对象
Statement statement = connection.createStatement();
// 5.执行SQL的对象去执行SQL，返回结果集
String sql = "SELECT *FROM studentinfo;";
ResultSet resultSet = statement.executeQuery(sql);
while(resultSet.next()){
System.out.println("SNo="+resultSet.getString("SNo"));
System.out.println("SName="+resultSet.getString("SName"));
System.out.println("Birth="+resultSet.getString("Birth"));
System.out.println("SPNo="+resultSet.getString("SPNo"));
System.out.println("Major="+resultSet.getString("Major"));
System.out.println("Grade="+resultSet.getString("Grade"));
System.out.println("SInstructor="+resultSet.getString("SInstructor"));
System.out.println("SPwd="+resultSet.getString("SPwd"));
}
// 6.释放连接
resultSet.close();
statement.close();
connection.close();
}
}
创建数据库
CREATE DATABASE userslogin
--drop DATABASE userslogin
CREATE TABLE users(
uid INT PRIMARY KEY,
uname VARCHAR(20) NOT NULL,
upass INT NOT NULL
)
--drop TABLE users
INSERT INTO users VALUES (1,'孙奇奇','６７５３５４')
INSERT INTO users VALUES (2,'南岳',３２４３５Ｔ)
INSERT INTO users VALUES (3,'刘琴',７８７４５３)
INSERT INTO users(uname,upass) VALUES('申吴娟',５４６６８５)
INSERT INTO users(uname,upass) VALUES('童家楠',５７５４３２)
INSERT INTO users(uname,upass) VALUES('尚景',２２３２３３)
SELECT * FROM users
登录页面的实现
public int checkLogin( String name,String pass){
int login=0;
try{
connectionMySql con=new connectionMySql();
con.openMysql();
String selectSql="SELECT upass FROM users WHERE uname=' "+ name +" ' ";
java.sql.ResultSet res= con.select(selectSql);
String userPass="";//
while(res.next()){//判断数据表有没有值，有true，false
userPass = res.getString("upass");
}
if(userPass.equals("") || userPass.equals(null)){//null用户不存在
login=1;
}else if(userPass.equals(pass)){
login=2;
} else{
login=3;
}
}catch(Exception e){
e.printStackTrace();
}
return login;
}
}