Java后端开发——房贷计算器(Ajax版、Json版、等额本息+等额本金)

星川皆无恙2023-10-27 15:47

MVC房贷计算器（Ajax版）

1.新建一个JavaWeb项目hslcalweb，设置tomcat10。

2.创建房贷计算器JavaBean：HslCalBean.java，增加以下的属性，并生成Getter/Setter方法。

java 复制代码 
private double total;     //贷款额度
	private int loanyear;  //贷款年限
	private double rate;      //年利率
	
	private double interest;  //总利息
	private double repayment; //每月还款
	private int loanNumber; //贷款期数
	private double repayTotal; //还款总额
	private StringBuffer results;  //等额本金，还款列表字符串

3.生成默认和带三个已知参数的构造方法。

java 复制代码 
	public HslCalBean(double total, int loanyear, double rate) {
		super();
		this.total = total;
		this.loanyear = loanyear;
		this.rate = rate;
	}

	public HslCalBean() {
		super();
	}

4.增加计算器的计算方法cal()

java 复制代码 
public void cal() {
		double mrate=rate/12;            //月利率=年利率/12
		loanNumber=loanyear*12;          //贷款期数=年限*12
		
		//总利息＝贷款额＊贷款月数＊月利率＊（１＋月利率）贷款月数／［（１＋月利率）还款月数　－　１］－贷款额
		interest = (total*10000*loanNumber*mrate*Math.pow(mrate+1,loanNumber))/(Math.pow(mrate+1,loanNumber)-1)-total*10000; 
		
		//还款总额=还款月数＊贷款额＊月利率＊（１＋月利率）贷款月数／［（１＋月利率）还款月数　－　１］
		repayTotal=(loanNumber* total*10000*mrate*Math.pow(mrate+1,loanNumber))/(Math.pow(mrate+1,loanNumber)-1); 
		
		 //每月还款=贷款本金×[月利率×(1+月利率)^还款月数]÷{[(1+月利率)^还款月数]-1}
        repayment =total*10000*(mrate* Math.pow(mrate+1,loanNumber))/(Math.pow(mrate+1,loanNumber)-1);   
	}

5.增加一个测试类HslTest.java，对JavaBean测试，并对比结果是否正确。
public class HslTest {
	public static void main(String[] args) {
		DecimalFormat df=new DecimalFormat("#.00");
		HslCalBean hslCal= new HslCalBean(50,30, 0.043) ;
		hslCal.cal();
		System.out.println("贷款总额："+hslCal.getTotal()+"元");
		System.out.println("总利息："+df.format(hslCal.getInterest())+"元");
		System.out.println("还款总额："+df.format(hslCal.getRepayTotal())+"元");
		System.out.println("还款期数："+df.format(hslCal.getLoanNumber())+"月");
		System.out.println("月均还款："+df.format(hslCal.getRepayment())+"元");
		
	}
}

6.新建一个控制器Servlet：HslCalServlet.java,映射的URL：/hslcal，从浏览器输入参数调用房贷计算器JavaBean。

java 复制代码 
public class HslCalServlet extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		double total=Double.parseDouble(request.getParameter("total"));
		int loanyear=Integer.parseInt(request.getParameter("loanyear"));
		double rate=Double.parseDouble(request.getParameter("rate"));
		
		DecimalFormat df=new DecimalFormat("#.00");
		HslCalBean hslCal= new HslCalBean(total,loanyear, rate) ;
		hslCal.cal();
		response.setCharacterEncoding("UTF-8");
		response.setHeader("content-type","text/html;charset=UTF-8");
		PrintWriter out=response.getWriter();
		out.println("贷款总额："+hslCal.getTotal()+"元<hr>");
		out.println("总利息："+df.format(hslCal.getInterest())+"元<hr>");
		out.println("还款总额："+df.format(hslCal.getRepayTotal())+"元<hr>");
		out.println("还款期数："+df.format(hslCal.getLoanNumber())+"月<hr>");
		out.println("月均还款："+df.format(hslCal.getRepayment())+"元<hr>");
	}
}

7.引入JQuery库，存放在webapp/js/jquery-3.6.4.min.js路径下。

链接：https://pan.baidu.com/s/1_wOpxn6wUBDbGsqx0VSPpw?pwd=2023

提取码：2023

8.新建一个房贷计算器表单页面hslcal_ajax.html，完成表单设计，让用户从网页输入参数，并提交服务器端Servlet小程序计算结果。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>房贷计算器</title>
<script type="text/javascript" src="js/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#btn_cal').click(function(){
			  	$.ajax({
			 		url:"hslcal",
			 		type:"POST",
			 		data:$("#calform").serialize(),
			 		success:function(data){
			 			$('#result').val(data);
			 		},
			 		error:function(data){
			 			alert("error!")
			 		}	
			 	});   
	});
})
</script> 
</head>
<body>
<h3>房贷计算器2023</h3>
<form id="calform">
<table border=1>
<tr><td>贷款总额：</td><td><input id="total" name="total" type="text" ></td></tr>
<tr><td>按揭年数：</td><td>
  <select id="loanyear" name="loanyear">
  <option value="5">5年(50期)</option>
  <option value="10">10年(120期)</option>
  <option value="20">20年(240期)</option>
  <option value="30">30年(360期)</option>
</select></td></tr>
<tr><td>贷款利率：</td><td>
  <select id="rate" name="rate">
  <option value="0.0365">3.65%(5年及5年以内)</option>
  <option value="0.043">4.3%(5年以上)</option>
</select></td></tr>
<tr><td colspan="2" align="center">
<input type="button" id="btn_cal" value="开始计算"/>
</td></tr>
<tr><td colspan="2" align="center">
<textarea id="result" rows="8" cols="50"></textarea>
</td></tr>
</table>
</form>
</body>
</html>

9.运行效果

MVC房贷计算器（Json版）

1.引入Java的JSON的工具库jackson，存放于路径webapp/WEB-INF/lib下面。

所需要包链接：https://pan.baidu.com/s/1fPUCBotqCOwYnsUrTyiG8g?pwd=2023

提取码：2023

2.新建一个房贷计算器表单页面hslcal_json.html，完成表单设计，让用户从网页输入参数，并提交服务器端Servlet小程序计算结果。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>房贷计算器</title>
<script type="text/javascript" src="js/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#btn_cal').click(function(){
			  	$.ajax({
			 		url:"hslcaljackson",
			 		type:"POST",
			 		dataType:'json',
			 		data:$("#calform").serialize(),
			 		success:function(data){
			 			$('.total').val(data.total);
			 			$('.interest').val(data.interest);
			 			$('.repayTotal').val(data.repayTotal);
			 			$('.loanyear').val(data.loanyear);
			 			$('.repayment').val(data.repayment);
			 		},
			 		error:function(data){
			 			console.log(data);
			 		}	
			 	});   
	});
	
	$('#loanyear').change(function(){

		if($(this).val()>5)
			$('#rate').get(0).value = 0.043;
		else
			$('#rate').get(0).value = 0.0365;
	})
})
</script> 
</head>
<body>
<h3>房贷计算器2023</h3>
<form id="calform">
<table border=1>
<tr><td>贷款总额：</td><td><input id="total" name="total" type="text" ></td></tr>
<tr><td>按揭年数：</td><td>
  <select id="loanyear" name="loanyear">
  <option value="2">2年(24期)</option>
  <option value="5">5年(50期)</option>
  <option value="10">10年(120期)</option>
  <option value="20">20年(240期)</option>
  <option value="30">30年(360期)</option>
</select></td></tr>
<tr><td>贷款利率：</td><td>
  <select id="rate" name="rate">
  <option value="0.0365">3.65%(5年及5年以内)</option>
  <option value="0.043">4.3%(5年以上)</option>
</select></td></tr>
<tr><td colspan="2" align="center">
<input type="button" id="btn_cal" value="开始计算"/>
</td></tr>
<tr><td colspan="2">计算结果</td></tr>
<tr><td>贷款总额</td><td> <input class="total" type="text"></td></tr>
<tr><td>总利息</td><td> <input class="interest" type="text"></td></tr>
<tr><td>还款总额</td><td> <input class="repayTotal" type="text"></td></tr>
<tr><td>还款期数</td><td> <input class="loanyear" type="text"></td></tr>
<tr><td>月均还款</td><td> <input class="repayment" type="text"></td></tr>
</table>
</form>

</body>
</html>

10.新建一个控制器Servlet：HslCalJsonServlet.java,映射的URL：/hslcaljackson，从浏览器输入参数调用房贷计算器JavaBean，利用Jackson生成JSON结果返回。

java 复制代码 
public class HslCalJacksonServlet extends HttpServlet {

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		double total=Double.parseDouble(request.getParameter("total"));
		int loanyear=Integer.parseInt(request.getParameter("loanyear"));
		double rate=Double.parseDouble(request.getParameter("rate"));
		String repayType=request.getParameter("repayType");
		DecimalFormat df=new DecimalFormat("#.00");
		HslCalBean hslCal= new HslCalBean(total,loanyear, rate) ;
		hslCal.cal();
		response.setCharacterEncoding("UTF-8");
		response.setHeader("content-type","text/html;charset=UTF-8");
		PrintWriter out=response.getWriter();
		ObjectMapper objectMapper = new ObjectMapper();
		String json = objectMapper.writeValueAsString(hslCal);
		out.print(json);
	}
}

11.运行效果

MVC房贷计算器（等额本息+等额本金）

1.给房贷计算器JavaBean类HslCalBean.java增加等额本金的属性，并设置getter/setter。

java 复制代码 
private StringBuffer results;  //等额本金，还款列表字符串

2.给房贷计算器JavaBean类HslCalBean.java增加等额本金的计算方法cal2()。

java 复制代码 
public void cal2() {
		double mrate=rate/12;            //月利率=年利率/12
		loanNumber=loanyear*12;          //贷款期数=年限*12
		interest=  (loanNumber+1)*total*10000*mrate/2;          //总利息=（还款月数+1）×贷款额×月利率/2
		repayTotal=interest+total*10000;          //还款总额= 总利息 + 贷款额
		double totalm=total*10000/loanNumber;      // 每月本金=总本金/还款月数
		                                   
		double totalsum=0;
		results=new StringBuffer("\"");
		DecimalFormat df=new DecimalFormat("#.00");
		for(int i=1;i<=loanNumber;i++) {
			double repayment=totalm+(total*10000-totalsum)*mrate;    // 每月还款= 每月本金 +（本金-累计已还本金）×月利率
			totalsum+=totalm;                               //累计已还本金
			results.append(i+"月,"+df.format(repayment)+"\\n");
		}
		results.append("\"");
	}

3.修改控制器类HslCalServlet.java，通过repayType区分前端选择等额本息还是等额本金，执行相应处理逻辑代码。

java 复制代码 
String repayType=request.getParameter("repayType");
		if(repayType.equals("1")) {
			hslCal.cal();
			out.print("{");
			out.print("\"total\":"+df.format(hslCal.getTotal())+",");
			out.print("\"interest\":"+df.format(hslCal.getInterest())+",");
			out.print("\"repayTotal\":"+df.format(hslCal.getRepayTotal())+",");
			out.print("\"loanyear\":"+df.format(hslCal.getLoanyear())+",");
			out.print("\"repayment\":"+df.format(hslCal.getRepayment()));
			out.print("}");
		}else if(repayType.equals("2")) {
			hslCal.cal2();
			out.print("{");
			out.print("\"total\":"+df.format(hslCal.getTotal())+",");
			out.print("\"interest\":"+df.format(hslCal.getInterest())+",");
			out.print("\"repayTotal\":"+df.format(hslCal.getRepayTotal())+",");
			out.print("\"loanyear\":"+df.format(hslCal.getLoanyear())+",");
			out.print("\"results\":"+hslCal.getResults());
			out.print("}");
		}

4.修改房贷计算器表单页面hslcal_json.html

1）增加还款方式标记

java 复制代码 
<tr><td>月均还款</td><td>
<input class="repayment" type="text">
<textarea class="results" cols="20" rows="20" hidden="true"></textarea>
</td></tr>

3）在JQuery的入口函数$(function(){}中增加，两种还款方式的切换代码

java 复制代码 
$('.repayType').change(function(){
		var radioVal=$(this).val();
		if(radioVal=='1'){
			$('.repayment').show();
			$('.results').hide();
		}else if(radioVal=='2'){
			$('.repayment').hide();
			$('.results').show();
		}
	})

4）在$.ajax函数中的success:function(data){}中，增加对等额本金的标记设置。

java 复制代码 
$('.results').val(data.results);

6.运行效果

相关推荐
蜡笔小新星38 分钟前
Flask项目框架
开发语言·前端·经验分享·后端·python·学习·flask
夏天的味道٥4 小时前
使用 Java 执行 SQL 语句和存储过程
java·开发语言·sql
Fantasywt4 小时前
THREEJS 片元着色器实现更自然的呼吸灯效果
前端·javascript·着色器
IT、木易5 小时前
大白话JavaScript实现一个函数，将字符串中的每个单词首字母大写。
开发语言·前端·javascript·ecmascript
24k小善5 小时前
flink集成tidb cdc
大数据·flink·tidb
冰糖码奇朵5 小时前
大数据表高效导入导出解决方案，mysql数据库LOAD DATA命令和INTO OUTFILE命令详解
java·数据库·sql·mysql
好教员好5 小时前
【Spring】整合【SpringMVC】
java·spring
Mr.NickJJ6 小时前
JavaScript系列06-深入理解 JavaScript 事件系统：从原生事件到 React 合成事件
开发语言·javascript·react.js
浪九天6 小时前
Java直通车系列13【Spring MVC】（Spring MVC常用注解）
java·后端·spring
堕落年代7 小时前
Maven匹配机制和仓库库设置
java·maven
热门推荐
01DeepSeek各版本说明与优缺点分析02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03如何在WPS和Word/Excel中直接使用DeepSeek功能04苍穹外卖面试总结05DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具06本地部署DeepSeek教程（Mac版本）07Coze扣子平台完整体验和实践（附国内和国际版对比）08Windows 11 安装 Dify 完整指南 非docker环境09保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型10macOS 上部署 RAGFlow