今天是做这个课程设计的第一天，然后想了想还是开始写个博客吧，坚持长期主义。
前期准备
规范一下吧，毕竟这算自己正式认真写的第一个博客和项目，有点菜哈
1.需求分析
下面是GPT给我列的清单，我能力有限能实现多少就多少，可能这个项目会长期做下去，甚至到以后的工作面试都会引用这个，前期可能会比较的拉胯，但是不要急，以后也可能加一些功能
当然，以下是一个包含在线购票系统需求分析的表格：
| 类别 | 需求 | 描述 |
|---|---|---|
| 功能需求 | 用户注册和登录 | 用户可以注册新账户、登录和注销；支持密码重置功能。 |
| 事件和票务信息 | 列出所有可用事件，提供详细信息，支持按类别、日期、地点等过滤和搜索。 | |
| 座位选择 | 显示座位图，用户可以选择特定座位，支持多种座位类型的选择和价格显示。 | |
| 购物车 | 用户可以将票添加到购物车，显示总价，支持删除或修改票的数量和类型。 | |
| 票务支付 | 支持多种支付方式，支付前的订单确认页面，支付成功后生成电子票据并发送邮件。 | |
| 订单管理 | 用户可以查看历史订单，取消或修改未支付订单，提供电子票的查看和下载功能。 | |
| 通知和提醒 | 事件开始前的提醒通知，订单确认和支付成功后的通知。 | |
| 客户支持 | 常见问题解答页面，在线客服和支持请求功能。 | |
| 非功能需求 | 安全性 | 用户数据和支付信息的加密保护，预防SQL注入和XSS攻击等安全威胁。 |
| 可用性 | 系统高可用性和稳定性，确保在高峰期正常运行，友好的界面设计和良好的用户体验。 | |
| 性能 | 快速响应时间，特别是在座位选择和支付过程中，支持高并发用户访问和交易处理。 | |
| 可扩展性 | 系统架构支持未来功能扩展和集成，支持增加更多事件类型和支付方式。 | |
| 数据备份和恢复 | 定期数据备份，提供数据恢复机制，确保系统在故障时可以快速恢复。 | |
| 高级功能（可选） | 推荐系统 | 基于用户历史购买记录和浏览行为推荐相关事件。 |
| 移动应用 | 提供iOS和Android平台的移动应用，实现无缝购票体验。 | |
| 社交分享 | 用户可以分享他们购买的票和即将参加的事件到社交媒体平台。 | |
| 折扣和优惠 | 提供促销活动和优惠券功能，吸引更多用户。 | |
| 数据分析 | 对用户行为和销售数据进行分析，为市场决策提供支持。 |
我们现在来挑选一下我们开始能做的东西
1.登入和注册
具体的我想实现什么内容呢，一好看的UI界面，符合在线购票系统，那我们要弄个什么购票系统呢，其实之前一直想着的是12306的铁路购票系统，但是这个项目真的很难，我想等后面有时间去看看类似的项目之后看看能不能实现，这个购票系统我也想结合一点实际，想想看吧，现在人群比较大的场合基本都具有购票系统了，人流小的反而又没有什么必要显得臃肿。在此之上似乎没有什么比较好的改动，我觉得可能能改动的地方就是加大商户的权限吧，对象服务化，暂且不定主题，就是购票系统，啥都能买好吧
那么前端的页面设置
index.html
暂时用这个
那接下来开始实现
2.采用的技术选型
1.暂时用IDEA+Maven
我暂时了解的不够透继续
将html放在IDEA里面连接前后端
这里前端的基本的大概登入框和注册交给GPT
正式开始
前端代码第一次：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线购票系统</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="form-container">
<h2>登录</h2>
<form id="loginForm">
<div class="form-group">
<label for="loginEmail">电子邮件：</label>
<input type="email" id="loginEmail" name="loginEmail" required>
</div>
<div class="form-group">
<label for="loginPassword">密码：</label>
<input type="password" id="loginPassword" name="loginPassword" required>
</div>
<button type="submit">登录</button>
</form>
</div>
<div class="form-container">
<h2>注册</h2>
<form id="registerForm">
<div class="form-group">
<label for="registerUsername">用户名：</label>
<input type="text" id="registerUsername" name="registerUsername" required>
</div>
<div class="form-group">
<label for="registerEmail">电子邮件：</label>
<input type="email" id="registerEmail" name="registerEmail" required>
</div>
<div class="form-group">
<label for="registerPassword">密码：</label>
<input type="password" id="registerPassword" name="registerPassword" required>
</div>
<button type="submit">注册</button>
</form>
</div>
</div>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
display: flex;
gap: 2rem;
background-color: #fff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-container {
width: 300px;
}
h2 {
margin-bottom: 1rem;
color: #333;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
color: #555;
}
input {
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 0.75rem;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #0056b3;
}
</style>
<script>
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
// 在这里添加登录逻辑
alert('登录表单提交');
});
document.getElementById('registerForm').addEventListener('submit', function(event) {
event.preventDefault();
// 在这里添加注册逻辑
alert('注册表单提交');
});
</script>
</body>
</html>
成这样了
修改！！
把注册变成超链接引入另一个界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线购票系统</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="form-container">
<h2>登录</h2>
<form id="loginForm">
<div class="form-group">
<label for="loginEmail">电子邮件：</label>
<input type="email" id="loginEmail" name="loginEmail" required>
</div>
<div class="form-group">
<label for="loginPassword">密码：</label>
<input type="password" id="loginPassword" name="loginPassword" required>
</div>
<button type="submit">登录</button>
</form>
<p>还没有账户？<a href="register.html">注册</a></p>
</div>
</div>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-container {
width: 300px;
}
h2 {
margin-bottom: 1rem;
color: #333;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
color: #555;
}
input {
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 0.75rem;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #0056b3;
}
p {
margin-top: 1rem;
color: #555;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
<script>
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
// 在这里添加登录逻辑
alert('登录表单提交');
});
</script>
</body>
</html>
顺眼了，待会加个背景就行了。
regester.html背景还比较巴适
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册 - 在线购票系统</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="form-container">
<h2>注册</h2>
<form id="registerForm">
<div class="form-group">
<label for="registerUsername">用户名：</label>
<input type="text" id="registerUsername" name="registerUsername" required>
</div>
<div class="form-group">
<label for="registerEmail">电子邮件：</label>
<input type="email" id="registerEmail" name="registerEmail" required>
</div>
<div class="form-group">
<label for="registerPassword">密码：</label>
<input type="password" id="registerPassword" name="registerPassword" required>
</div>
<button type="submit">注册</button>
</form>
<p>已有账户？<a href="index.html">登录</a></p>
</div>
</div>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-container {
width: 300px;
}
h2 {
margin-bottom: 1rem;
color: #333;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
color: #555;
}
input {
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 0.75rem;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #0056b3;
}
p {
margin-top: 1rem;
color: #555;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
<script>
document.getElementById('registerForm').addEventListener('submit', function(event) {
event.preventDefault();
// 在这里添加注册逻辑
alert('注册表单提交');
});
</script>
</body>
</html>
好了都已经引入上去了，styles也都可以引用了总的来说GPT的效率还是非常高的
接下来干的
几个事情的话一个是实现登入和注册的后端，但是其实这个时候我还想加入生成验证码，所以后端还需要专门留一点空白，其次是美化页面
但是其实缺点也很明显，就是出了问题自己不能够快速解决
期间因为文件名没对，没引入背景折腾了我挺久
也查看了发起了请求
但是等到点开看发现无法打开
无论是换个目录，还是转webp到jpg都没有用
暂时不引入，我后续再看看
那么我们接下来急速实现登入的逻辑和接口
很奇怪呀这里，不知道怎么回事，在浏览器的请求的路径变了，导致styles.css里面无法引入路径
这里的路径现在看似正确，但是这是因为我背后的代码
这里编译器爆红，但是实则是正确的，难道这就是所谓的代码还能跑起来就是胜利吗？
奇怪哦
诶等等，这个ticket代表的是我的项目
前端还需要实现判断是否为空，如果为空就提示，alert
但是好像其实前端不需要这个逻辑设置了，表单的自己的属性就具有判断的样式
那其实多个项目也能同时挂载？
也许是这样的改天试试
还有IDEA好像自动绑定的是63342端口，这个端口有啥用？
两天看下来都是这同一个端口，值得思考一二
那其实多个项目也能同时挂载？
也许是这样的改天试试
还有IDEA好像自动绑定的是63342端口，这个端口有啥用？
两天看下来都是这同一个端口，值得思考一二
如此了然了
接下来进行下一步
暂时好像前端页面已经弄的差不多了，至于之后的异步ajax,后边再说，现在来实现个登入的后端逻辑代码
后端逻辑代码
/index.html
Java登录的逻辑一般包括以下几步：
-
用户在登录界面输入用户名和密码，并点击登录按钮。
-
系统验证用户输入的用户名和密码是否合法。这一步可能会包括以下内容：
- 检查用户名和密码是否为空；
- 检查用户名和密码的格式是否正确；
- 检查用户是否已被禁用。
-
如果用户输入的用户名和密码不合法，则系统向用户显示错误信息，并让用户重新输入。
-
如果用户输入的用户名和密码合法，则系统验证用户名和密码是否正确。这一步可能会包括以下内容：
- 从数据库中查询用户名和密码；
- 检查用户名和密码是否匹配。
-
如果用户名和密码正确，则系统登录成功，并跳转到指定页面。
-
如果用户名和密码不正确，则系统向用户显示错误信息，并让用户重新输入。
如此了然了
接下来进行下一步
暂时好像前端页面已经弄的差不多了，至于之后的异步ajax,后边再说，现在来实现个登入的后端逻辑代码
后端逻辑代码
/index.html
Java登录的逻辑一般包括以下几步：
-
用户在登录界面输入用户名和密码，并点击登录按钮。
-
系统验证用户输入的用户名和密码是否合法。这一步可能会包括以下内容：
- 检查用户名和密码是否为空；
- 检查用户名和密码的格式是否正确；
- 检查用户是否已被禁用。
-
如果用户输入的用户名和密码不合法，则系统向用户显示错误信息，并让用户重新输入。
-
如果用户输入的用户名和密码合法，则系统验证用户名和密码是否正确。这一步可能会包括以下内容：
- 从数据库中查询用户名和密码；
- 检查用户名和密码是否匹配。
-
如果用户名和密码正确，则系统登录成功，并跳转到指定页面。
-
如果用户名和密码不正确，则系统向用户显示错误信息，并让用户重新输入。
一、现在需要了解后端代码的模版
我参考的是这个
https://www.w3cschool.cn/article/1225126.html
先对druid.properties配置文件：
直接配置好放入那个resource下即可，我这个毕竟是maven项目不用配
所以现在接下来就是把配置文件改成自己的东西，做一下注解，外加上把前端的再看看
这里有个小知识点，java的jar包其实用处就是去导入依赖环境等等，但是maven的话不用，能自己配
刚刚解决了一个问题我因为w3这个暂时好像配不太好，然后我转头问了问gpt去进行实现，然后遇见了经常出现的一个问题就是pom.xml总是爆红显示版本不对，但是GPT那边明显是能用的，所以查了一下，原来是mvn clean install这一条命令去安装环境进行配置
mvn install 命令用于构建项目并将构建结果安装到本地 Maven 仓库
在这过程中顺便把mvn环境给安好了
今天后面进行的时候又遇到了一些问题主要感觉还是对这个步骤不清晰，tomcat到底什么时候配置，我有点懵
导致配置好后，index.html不在8080端口下放在，在自动生成的一个静态页面端口
然后导致前端和后端压根就关联不上，我还得去深造一下
package com.xiaomo;
import org.apache.catalina.LifecycleException;
import org.apache.catalina.startup.Tomcat;
import java.io.File;
public class Main {
public static void main(String[] args) throws LifecycleException {
String webappDirLocation = "src/main/webapp/";
Tomcat tomcat = new Tomcat();
// 设置端口
tomcat.setPort(8080);
// 添加 Web 应用
tomcat.addWebapp("/", new File(webappDirLocation).getAbsolutePath());
// 启动嵌入式 Tomcat 服务器
tomcat.start();
tomcat.getServer().await();
}
}
Main()
package com.xiaomo;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
try (Connection conn = JDBCUtils.getConnection()) {
String sql = "SELECT * FROM users WHERE qqemail = ? AND password = ?";
try (PreparedStatement ps = conn.prepareStatement(sql)) {
ps.setString(1, username);
ps.setString(2, password);
try (ResultSet rs = ps.executeQuery()) {
if (rs.next()) {
response.getWriter().println("Login successful!");
response.sendRedirect("successful.html");
} else {
response.getWriter().println("Invalid username or password.");
}
}
}
} catch (SQLException e) {
e.printStackTrace();
response.getWriter().println("An error occurred while processing your request.");
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.sendRedirect("index.html");
}
}
loginservelet
package com.xiaomo;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
public class JDBCUtils {
private static DataSource ds;
static {
try (InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties")) {
// 加载配置文件
Properties pro = new Properties();
if (is == null) {
throw new IOException("druid.properties file not found in classpath");
}
pro.load(is);
// 初始化连接池对象
ds = DruidDataSourceFactory.createDataSource(pro);
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
// 获取连接池对象
public static DataSource getDataSource() {
return ds;
}
// 获取连接connection对象
public static Connection getConnection() throws SQLException {
return ds.getConnection();
}
}
扫一扫
2202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
