注意注意注意！！！
WARNING WARNING WARNING
警告警告警告！！！
虽然借助AI的力量写的又快又好，但初学者不建议这么干哦。
在修仙世界有一种人，大家称之为【邪修】，通过邪恶的方式迅速获得强大的力量。
虽然借助AI的力量不是什么邪恶的方式，但是这种力量会导致根基不稳，等到达天花板境界的时候很难突破那层桎梏。
三思而后行啊！
管不了那么多了，剑走偏锋，项目做完了我干两把英雄联盟再说。
要求文档和前端代码以及项目全部代码已上传至百度网盘，通过网盘分享的文件：Java+js+html财务支付系统
链接: https://pan.baidu.com/s/1MfPWGdf_sQQsFOWmr53t2w?pwd=iz84 提取码: iz84
--来自百度网盘超级会员v4的分享
http:// https://pan.baidu.com/s/1MfPWGdf_sQQsFOWmr53t2w?pwd=iz84
下面是项目界面：
里面所有的按钮，所有的功能都实现了哦，那么接下来，我们就开始鞭策AI吧。
额……deepseek的深度思考很好用，但是最近总是服务器繁忙，所以我拿Kimi做的，豆书记就算了……
1、登录功能
我对Kimi说：
我希望用户输入账号和密码之后，前端收集form表单的账号和密码，发送Ajax异步请求到后端，在后端从数据库里按用户名和密码进行查找，找到则登录成功，未找到则失败。（附上html的form表单）：
<form id="form-login" class="am-form"> <fieldset> <div class="am-form-group"> <input type="text" class="" name="account" placeholder="请输入账号"> </div> <div class="am-form-group"> <input type="password" class="" name="password" placeholder="请输入密码"> </div> <a id="login-btn" class="loginBtn"> <div>登 录</div> </a> <a class="loginBtn" > <div>注册</div> </a> </fieldset> </form>
Kimi回答：
前端js大概是这样，具体您要跟您项目一致
<script type="text/javascript"> $(document).ready(function () { //单击a标签： $("a:first").click(function () { //发送异步请求： var account=$("[type=text]").val(); var password=$("[type=password]").val(); $.get("us/login","account="+account+"&password="+password,function (mes) { console.log(mes); if(mes==1){ // alert("登录成功"); location.href="open-list.html";//跳转open-list页面 }else{ alert("登录失败！"); } }); }) }); </script>
我这里只改了url，也就是"us/login"，我让它把数据发送到userServlet里的login方法里。ai不知道整个项目的全貌，肯定需要咱们略微修改一下。
userServlet里的login方法：
public void login(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { String account = request.getParameter("account"); String password = request.getParameter("password"); User user = userService.login(account, password); HttpSession session = request.getSession(); session.setAttribute("user",user); if(user==null){ response.getWriter().println("0"); }else{ response.getWriter().println("1"); } }
service层就一句话，调用dao层。
@Override public User login(String account, String password) { return userDao.SelectUserByinfo(account, password); }
dao层操作数据库：
@Override public User SelectUserByinfo(String account, String password) { String sql="select * from f_user where account=? and password=?"; ArrayList<User> list = db.query(sql, User.class, account, password); if(list.size()==1){ return list.get(0); }else{ return null; } }
2、点击去开单按钮，跳转开单页面
我对Kimi说：
Kimi回答：
以下是一个简单的 JavaScript 方法，用于实现点击 ID 为 qvkaidan 的按钮后跳转到 ticket_open 页面的功能：
document.addEventListener("DOMContentLoaded", function () { // 获取按钮元素 const button = document.getElementById("qvkaidan"); // 为按钮添加点击事件监听器 button.addEventListener("click", function () { // 跳转到 ticket_open 页面 window.location.href = "ticket_open.html"; // 假设页面文件名为 ticket_open.html }); });
说明：
-
DOMContentLoaded：确保代码在页面加载完成后执行。 -
getElementById：通过 ID 获取按钮元素。 -
addEventListener：为按钮添加点击事件监听器。 -
window.location.href：用于实现页面跳转，将页面地址设置为ticket_open.html。
注意事项：
-
确保按钮的 ID 是
qvkaidan，并且页面文件名是ticket_open.html，或者根据实际情况修改文件名。 -
如果
ticket_open页面在不同的目录下，需要调整路径，例如./pages/ticket_open.html或/ticket_open.html。
将这段代码放在页面的 <script> 标签中或外部 JavaScript 文件中即可。
你看看，你看看，这种牵扯的东西比较少的功能，复制粘贴到自己的项目里就好使了。
3、提交功能
用户跳转到开单页面之后，填入一些信息，点击提交，要把这些数据插入到开单表中的。
我对Kimi说：
（先把上面这张照片附上），我的前端页面如图所示，（再把对应的html表单代码粘贴给它，有点长，它会读的，你就别读了。）前端代码如下，我希望用户填写完信息之后，点击提交按钮，将这些信息收集，发送Ajax异步请求到后台，将这些数据插入到开单表里。（再把表结构或者表对应的实体类附给它）。
<div class="tpl-block "> <div class="am-g tpl-amazeui-form"> <div class="am-u-sm-12 am-u-md-6"> <form class="am-form am-form-horizontal"> <div class="am-form-group"> <label for="enterpriseId" class="am-u-sm-3 am-form-label star"> 开单企业</label> <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;"> <input disabled type="text" id="enterpriseId" placeholder="请输入企业"> </div> </div> </form> </div> <div class="am-u-sm-12 am-u-md-6"> <form class="am-form am-form-horizontal"> <div class="am-form-group"> <label for="socialUniformCode" class="am-u-sm-3 am-form-label">统一社会信用代码</label> <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;"> <input disabled type="text" id="socialUniformCode" placeholder="请输入社会信用代码"> </div> </div> </form> </div> <div class="am-u-sm-12 am-u-md-6"> <form class="am-form am-form-horizontal"> <div class="am-form-group"> <label for="receivingEnterprise" class="am-u-sm-3 am-form-label star"> 收单企业</label> <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;"> <select id="receivingEnterprise" data-am-selected> <option value="">请选择收单企业</option> <option value="百度科技有限公司">百度科技有限公司</option> <option value="京东集团">京东集团</option> <option value="小米">小米</option> <option value="腾讯科技有限公司">腾讯科技有限公司</option> <option value="隆基股份有限公司">隆基股份有限公司</option> </select> </div> </div> </form> </div> <div class="am-u-sm-12 am-u-md-6"> <form class="am-form am-form-horizontal"> <div class="am-form-group"> <label for="receivingEnterpriseCode" class="am-u-sm-3 am-form-label">统一社会信用代码</label> <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;"> <input disabled type="text" id="receivingEnterpriseCode" placeholder="请输入统一社会信用代码"> </div> </div> </form> </div> <div class="am-u-sm-12 am-u-md-6"> <form class="am-form am-form-horizontal"> <div class="am-form-group"> <label for="voucherAmount" class="am-u-sm-3 am-form-label star"> 凭证金额</label> <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;"> <input type="number" id="voucherAmount" placeholder="请输入凭证金额"> </div> </div> </form> </div> <div class="am-u-sm-12 am-u-md-6"> <form class="am-form am-form-horizontal"> <div class="am-form-group"> <label for="financialInstitution" class="am-u-sm-3 am-form-label star"> 金融机构</label> <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;"> <select id="financialInstitution" data-am-selected> <option value="">请选择金融机构</option> <option value="兴业银行">兴业银行</option> <option value="工商银行">工商银行</option> <option value="中国银行">中国银行</option> </select> </div> </div> </form> </div> <div class="am-u-sm-12 am-u-md-6"> <form class="am-form am-form-horizontal"> <div class="am-form-group"> <label for="voucherDate" class="am-u-sm-3 am-form-label star"> 开单日期</label> <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;"> <input disabled type="text" id="voucherDate" name="voucherDate" class="am-form-field" data-am-datepicker placeholder=" 请选择日期" style="border: 1px solid #c2cad8;width: 100%;border-radius: 3px;"> </div> </div> </form> </div> <div class="am-u-sm-12 am-u-md-6"> <form class="am-form am-form-horizontal"> <div class="am-form-group"> <label for="expiryDate" class="am-u-sm-3 am-form-label star"> 到期日期</label> <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;"> <input type="text" id="expiryDate" name="" class="am-form-field" data-am-datepicker placeholder=" 请选择日期" style="border: 1px solid #c2cad8;width: 100%;border-radius: 3px;"> </div> </div> </form> </div> <div class="am-u-sm-12 am-u-md-6"> <form class="am-form am-form-horizontal"> <div class="am-form-group"> <label for="paymentMethod" class="am-u-sm-3 am-form-label star"> 付息方式</label> <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;"> <select id="paymentMethod" placeholder="请选择付息方式" data-am-selected> <option value="融资方付息">融资方付息</option> <option value="核心企业付息">核心企业付息</option> </select> </div> </div> </form> </div> <div class="am-u-sm-12 am-u-md-6"> <form class="am-form am-form-horizontal"> <div class="am-form-group"> <label for="remarks" class="am-u-sm-3 am-form-label">备注</label> <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;"> <textarea class="" rows="4" id="remarks" placeholder="请输入备注"></textarea> </div> </div> </form> </div> <div class="am-u-sm-12 am-u-md-6"> </div> </div> <div style="text-align: center;margin-top:40px"> <a class="am-btn am-btn-default" href="open-list.html">取 消</a> <a id="submitBtn" class="am-btn am-btn-primary" style="margin-left:20px">提 交</a> </div> </div>
Kimi回答：
前端：
$('#submitBtn').click(function() { // 获取凭证金额 var voucherAmount = $('#voucherAmount').val(); // 校验凭证金额是否为数字 if (isNaN(voucherAmount) || voucherAmount.trim() === '') { alert('凭证金额字段只能输入数字,且不能为空'); return; } // 获取开单日期和到期日期 var voucherDate = $('#voucherDate').val(); var expiryDate = $('#expiryDate').val(); // 校验到期日期不能选择开单日期之前 if (expiryDate < voucherDate) { alert('到期日期不能选择开单日期之前'); return; } // 收集表单数据 var formData = { enterpriseId: $('#enterpriseId').val(), //socialUniformCode: $('#socialUniformCode').val(), receivingEnterprise: $('#receivingEnterprise').val(), //receivingEnterpriseCode: $('#receivingEnterpriseCode').val(), // 这是收单企业的统一社会信用代码 voucherAmount: $('#voucherAmount').val(), // 这是凭证金额 financialInstitution: $('#financialInstitution').val(), // 这是金融机构 voucherDate: $('#voucherDate').val(), // 开单日期 expiryDate: $('#expiryDate').val(), // 到期日期 paymentMethod: $('#paymentMethod').val(), // 这是付息方式 remarks: $('#remarks').val() // 备注 }; // 把用户输入的信息打包传到后台插入数据库 $.ajax({ url: 'to/insertTicketOpen', // 后台接口地址，根据实际情况修改 type: 'POST', // 请求方式 contentType: 'application/json', // 发送信息至服务器时内容编码类型 data: JSON.stringify(formData), // 发送的数据 dataType: 'json', // 预期服务器返回的数据类型 success: function(data) { if (data==1) { alert('提交成功'); // 可以根据需要跳转页面 // window.location.href = 'success.html'; $('#showDiv').hide(); $('#resultDiv').show(); } else { alert('提交失败：' + data); } }, error: function(xhr, status, error) { // 请求失败，处理错误 alert('请求失败：' + status + ', ' + error); } }); });
我自己略微修改了一点地方，比如url：我希望把数据发送到ticketOpenServlet的insertTicketOpen方法，我就把url改成了“to/insertTicketOpen”,后端就是获得这些数据并插入到数据库里，太简单了我就不写了。
4、多条件查询功能。
这里有六个查询条件，用户填入条件的时候，下面的数据要跟着变的。
我对Kimi说：
（先把上面这张图片附给它，再把html粘贴给它）我希望用户在填入条件的时候，收集这六个条件，和当前页码数，把这些条件用Ajax发送到后台，在后台从数据库往外查数据的时候用这些条件过滤一下，把查出来的数据返回到前端并渲染在前端页面，另外在前端渲染的时候，根据处理状态的不同，后面有不同的按钮，成功后面只有详情，开单中后面有详情和撤销，复核未通过和已撤销后面有详情和重新申请。
Kimi回答：（kimi给了我几个方法，我略微修改了一下便成功运行了）
前端三个方法。
第一个方法是收集那六个查询条件（六个红框）。
// 获取查询条件 function getQueryConditions() { const conditions = { no: $('.tpl-portlet-components .am-u-sm-6 .am-input-group input[type="text"]').eq(0).val().trim(), // 凭证编号 acquirerEnterpriseId: $('.tpl-portlet-components .am-u-sm-6 select').eq(0).val(), // 收单企业 enterpriseId: $('.tpl-portlet-components .am-u-sm-6 select').eq(1).val(), // 开单企业 createTime: $('.tpl-portlet-components .am-u-sm-6 .am-input-group input[type="text"]').eq(1).val(), // 开单日期 status: $('.tpl-portlet-components .status-type button.am-btn-primary').text().trim(), // 处理状态 amountMin: parseFloat($('.tpl-portlet-components .am-u-sm-6 .am-input-group input[type="text"]').eq(2).val().trim() || 0), // 最低金额 amountMax: parseFloat($('.tpl-portlet-components .am-u-sm-6 .am-input-group input[type="text"]').eq(3).val().trim() || 0) // 最高金额 }; console.log("Conditions:", conditions); return conditions; }
第二个方法是发Ajax请求到后台：
// 加载数据并传入查询条件和页码 function loadPageWithConditions(page, pageSize) { console.log("Loading page with conditions:", page, pageSize); // 获取查询条件 const conditions = getQueryConditions(); // 将查询条件和分页信息一起发送到后台 $.ajax({ url: 'to/getPageData', // 后端接口地址（需要后台支持接收查询条件和分页信息） type: 'GET', data: { page: page, pageSize: pageSize, no: conditions.no, // 对应后端的 no acquirerEnterpriseId: conditions.acquirerEnterpriseId, // 对应后端的 acquirerEnterpriseId enterpriseId: conditions.enterpriseId, // 对应后端的 enterpriseId createTime: conditions.createTime, // 对应后端的 createTime status: conditions.status, amountMin: conditions.amountMin, amountMax: conditions.amountMax }, dataType: 'json', success: function (data) { console.log("Received data:", data); if (Array.isArray(data)) { renderTable(data); // 渲染表格数据 $('#doc-modal-list').data('current-page', page); // 更新表格的当前页码数据属性 } else { console.error("Invalid data format:", data); renderTable([]); // 如果数据格式无效，渲染空表格 alert("数据格式无效"); } }, error: function (xhr, status, error) { console.error("请求失败：", status, error); } }); }
第三个方法是把从后台获得的数据渲染在前端：
function renderTable(data) { $('#doc-modal-list').empty(); // 清空表格内容 $.each(data, function (index, item) { let actionButtons = ''; switch (item.status) { case '成功': actionButtons = '<a href="open-detail.html?no=' + encodeURIComponent(item.no) + '"><span class="am-text-secondary" style="cursor:pointer">详情</span></a>'; break; case '开单中': actionButtons = '<a href="open-detail.html?no=' + encodeURIComponent(item.no) + '"><span class="am-text-secondary" style="cursor:pointer">详情</span></a>' + '<span class="am-text-secondary am-icon revoke-btn" style="cursor:pointer; margin-left: 10px;">撤销</span>'; break; case '复核未通过': case '已撤销': actionButtons = '<a href="open-detail.html?no=' + encodeURIComponent(item.no) + '"><span class="am-text-secondary" style="cursor:pointer">详情</span></a>' + '<a href="ticket-open.html?no=' + encodeURIComponent(item.no) + '"><span class="am-text-secondary" style="cursor:pointer; margin-left: 10px;">重新申请</span></a>'; break; default: actionButtons = '<a href="open-detail.html?no=' + encodeURIComponent(item.no) + '"><span class="am-text-secondary" style="cursor:pointer">详情</span></a>'; } $('#doc-modal-list').append( '<tr data-no="' + item.no + '">' + '<td class="am-hide-sm-only">' + item.no + '</td>' + '<td class="am-hide-sm-only">' + item.enterpriseId + '</td>' + '<td class="am-hide-sm-only">' + item.amount + '</td>' + '<td class="am-hide-sm-only">' + item.acquirerEnterpriseId + '</td>' + '<td class="am-hide-sm-only">' + item.institutyId + '</td>' + '<td class="am-hide-sm-only">' + formatDate(item.createTime) + '</td>' + // 格式化日期 '<td class="am-hide-sm-only">' + formatDate(item.expiryTime) + '</td>' + // 格式化日期 '<td class="am-hide-sm-only">' + item.uplinkAddress + '</td>' + '<td class="am-hide-sm-only 处理状态">' + item.status + '</td>' + '<td>' + '<div class="am-btn-toolbar">' + '<div class="am-btn-group am-btn-group-xs">' + actionButtons + '</div>' + '</div>' + '</td>' + '</tr>' ); }); }
后端dao层
@Override public JSONArray getVouchersByConditions(String no, String acquirerEnterpriseId, String enterpriseId, String createTime, String status, Double amountMin, Double amountMax, int page, int pageSize) throws SQLException { Connection con = null; PreparedStatement ps = null; ResultSet rs = null; try { con = db.getCon(); JSONArray resultArray = new JSONArray(); // 用于存储最终的 JSON 数据 StringBuilder sql = new StringBuilder("SELECT * FROM f_ticket_open WHERE 1=1");//无序，抽时间做成有序 // 动态拼接查询条件 int paramIndex = 1; if (no != null && !no.isEmpty()) { sql.append(" AND no LIKE ?"); } if (acquirerEnterpriseId != null && !acquirerEnterpriseId.isEmpty()) { sql.append(" AND acquirerEnterpriseId = ?"); } if (enterpriseId != null && !enterpriseId.isEmpty()) { sql.append(" AND enterpriseId = ?"); } if (createTime != null && !createTime.isEmpty()) { sql.append(" AND DATE(createTime) = ?"); } if (status != null && !status.isEmpty() && !status.equals("全部")) { sql.append(" AND status = ?"); } if (amountMin != null && amountMin > 0) { sql.append(" AND amount >= ?"); } if (amountMax != null && amountMax > 0) { sql.append(" AND amount <= ?"); } // 添加分页逻辑 sql.append(" LIMIT ? OFFSET ?"); ps = con.prepareStatement(sql.toString()); // 设置查询参数 if (no != null && !no.isEmpty()) { ps.setString(paramIndex++, "%" + no + "%"); } if (acquirerEnterpriseId != null && !acquirerEnterpriseId.isEmpty()) { ps.setString(paramIndex++, acquirerEnterpriseId); } if (enterpriseId != null && !enterpriseId.isEmpty()) { ps.setString(paramIndex++, enterpriseId); } if (createTime != null && !createTime.isEmpty()) { ps.setString(paramIndex++, createTime); } if (status != null && !status.isEmpty() && !status.equals("全部")) { ps.setString(paramIndex++, status); } if (amountMin != null && amountMin > 0) { ps.setDouble(paramIndex++, amountMin); } if (amountMax != null && amountMax > 0) { ps.setDouble(paramIndex++, amountMax); } ps.setInt(paramIndex++, pageSize); ps.setInt(paramIndex, (page - 1) * pageSize); rs = ps.executeQuery(); while (rs.next()) { JSONObject ticketOpenJson = new JSONObject(); ticketOpenJson.put("id", rs.getString("id")); ticketOpenJson.put("no", rs.getString("no")); ticketOpenJson.put("enterpriseId", rs.getString("enterpriseId")); ticketOpenJson.put("acquirerEnterpriseId", rs.getString("acquirerEnterpriseId")); ticketOpenJson.put("amount", rs.getDouble("amount")); ticketOpenJson.put("institutyId", rs.getString("institutyId")); ticketOpenJson.put("createTime", rs.getDate("createTime")); ticketOpenJson.put("expiryTime", rs.getDate("expiryTime")); ticketOpenJson.put("paymentInsterestType", rs.getString("paymentInsterestType")); ticketOpenJson.put("status", rs.getString("status")); ticketOpenJson.put("uplinkAddress", rs.getString("uplinkAddress")); resultArray.add(ticketOpenJson); // 将 JSON 对象添加到数组中 } return resultArray; // 返回 JSON 数组 } finally { // 关闭资源 if (rs != null) {rs.close();} if (ps != null) {ps.close();} if (con != null) {con.close();} } }
power，我感受到了强大的power。
5、结语
还有一些其他功能，我就不再赘述了，相信大家已经知道如何借助AI的力量了。项目做完了是要答辩的啊，ppt不用自己写哦，
把项目的功能文档附给Kimi，再说点自己的要求，再给点写的不错的代码，Kimi宝宝直接给你生成一个完美的ppt，拿着ppt直接答辩，你要做的只剩打游戏。
