html css js原生前端+springboot实现前后端分离的计算器

1.git仓库链接和代码规范链接

2.psp表格

3.成品展示：

 4.设计实现过程：

5.代码说明：

         前端部分：

后端部分：

6.心路历程和收获

---

112100833_Calculator
这个作业属于哪个课程	https://bbs.csdn.net/forums/ssynkqtd-05
这个作业要求在哪里	https://bbs.csdn.net/topics/617377308
这个作业的目标	继续实现更完善的计算器功能并实现前后端分离
其他参考文献	无

1.git仓库链接和代码规范链接

前端：112100833黄咏清 / 112100833hyq_calculator_temp · GitCode

后端：112100833黄咏清 / 112100833hyq_cal_backport · GitCode

2.psp表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	35
• Estimate	• 估计这个任务需要多少时间	15	10
Development	开发	900	990
• Analysis	• 需求分析 (包括学习新技术）	30	30
• Design Spec	• 生成设计文档	60	75
• Design Review	• 设计复审	30	45
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	30	100
• Design	• 具体设计	60	100
• Coding	• 具体编码	900	970
• Code Review	• 代码复审	60	60
• Test	• 测试（自我测试，修改代码，提交修改）	70	50
Reporting	报告	90	60
• Test Repor	• 测试报告	30	20
• Size Measurement	• 计算工作量	15	10
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	45	30
	合计	3025	3375

3.成品展示：

功能1：四则运算、取余、括号

功能2：清零回退

 功能3：错误提示

 功能4：读取历史记录

 附加功能1：科学计算器

 页面原型设计：

 利率计算器：

 4.设计实现过程：

1.功能结构图

2.前端：html+css+js 原生写代码，直接用Fetch API、XMLHttpRequest（XHR）（原生请求库）发送请求，成功和后端对接

3.后端：用springboot作为开发框架，在orm层用mybatis框架

4.数据库：存历史记录以及数据，用了可视化工具navicat，共有三个表

5.代码说明：

 前端部分：

1.使用了js中的Fetch API ，向本地主机 http://localhost:8082/history 发送了一个 GET 请求，并且在响应返回后对数据进行处理。

1. function getHistory() {

2. fetch('http://localhost:8082/history')

3. .then(response => response.json())

4. .then(data => {

5. // 将数据传递给构建表格的函数

6. buildTable(data);

7. });

8. }

9. function buildTable(data) {

10. let table = document.getElementById('history');

11. // 创建表格行并添加到表格中

12. data.forEach(function(rowData) {

13. let row = table.insertRow();

14. Object.values(rowData).forEach(function(value) {

15. let cell = row.insertCell();

16. cell.innerHTML = value;

17. });

18. });

19. }

2.使用XMLHttpRequest（XHR）对象发送 GET 请求的 JavaScript 代码

1. function interfun(){

2. // 获取输入

3. var year=parseFloat(document.getElementById("caltype").value);

4. var xhr = new XMLHttpRequest();

5. var principal=parseFloat(document.getElementById("principal").value);

6. xhr.open('GET', `http://localhost:8082/interest?time=${year}`, true);

7. xhr.onload = function () {

8. if (xhr.status >= 200 && xhr.status < 300) {

9. var rate = xhr.responseText;

10. const interest=rate*principal*year/100;

11. document.getElementById("result").innerHTML=interest.toFixed(2);

12. } else {

13. console.error('Request failed with status', xhr.status);

15. }

16. };

17. xhr.onerror = function () {

18. console.error('Request failed due to a network error');

19. };

21. xhr.setRequestHeader('Content-Type', 'text/plain');

22. xhr.send();

23. }

26. function loanfun(){

27. // 获取输入

28. var year=parseFloat(document.getElementById("caltype").value);

29. var xhr = new XMLHttpRequest();

30. var principal=parseFloat(document.getElementById("principal").value);

31. xhr.open('GET', `http://localhost:8082/loan?time=${year}`, true);

32. xhr.onload = function () {

33. if (xhr.status >= 200 && xhr.status < 300) {

34. var rate = xhr.responseText;

35. const loan=rate*principal*year/100;

36. document.getElementById("result").innerHTML=loan.toFixed(2);

37. } else {

38. console.error('Request failed with status', xhr.status);

40. }

41. };

42. xhr.onerror = function () {

43. console.error('Request failed due to a network error');

44. };

46. xhr.setRequestHeader('Content-Type', 'text/plain');

47. xhr.send();

48. }

后端部分：

API代码（计算器部分）：

1. @Controller

2. public class calController {

4. @Resource

5. private ResultRepository ResultRepository;

6. @Resource

7. private ResultService ResultService;

9. @GetMapping("/test1")

10. @ResponseBody

11. public String test1(){

12. return ResultService.list().toString();

14. }

16. @GetMapping("/save")

17. @CrossOrigin(originPatterns = "*", methods = {RequestMethod.GET, RequestMethod.POST})

18. @ResponseBody

19. public void resSave(@RequestParam("formula") String formula,@RequestParam("result")String result){

20. ResultService.save(new Result(formula,result));

22. }

23. @GetMapping("/history")

24. @CrossOrigin(originPatterns = "*", methods = {RequestMethod.GET, RequestMethod.POST})

25. @ResponseBody

26. public List<Result> GetHistory(){

27. QueryWrapper<Result> resultQueryWrapper=new QueryWrapper<>();

28. return ResultService.list();

29. }

30. }

API代码（存款）：

1. public class InterestRateController {

3. @Resource

4. private rateServer rateserver;

5. @Resource

6. private InterestRateRepository rateRepository;

7. // @RequestMapping("/helloo")

8. // @ResponseBody

9. // public String hello(){return "Hello world!";}

10. @GetMapping("/interest")

11. @CrossOrigin(originPatterns = "*", methods = {RequestMethod.GET, RequestMethod.POST})

12. @ResponseBody

13. public String interestCal(@RequestParam("time") String time){

14. QueryWrapper<InterestRate> intQueWrapper=new QueryWrapper<>();

15. double year= Double.parseDouble(time);

16. if(year==0.25)

17. {

18. intQueWrapper.eq("rate_type","三个月");

19. }

20. else if(year==0.5)

21. {

22. intQueWrapper.eq("rate_type","半年");

23. }

24. else if(year==1)

25. {

26. intQueWrapper.eq("rate_type","一年");

27. }

28. else if(year==2)

29. {

30. intQueWrapper.eq("rate_type","二年");

31. }

32. else if(year==3)

33. {

34. intQueWrapper.eq("rate_type","三年");

35. }

36. else if(year==5)

37. {

38. intQueWrapper.eq("rate_type","五年");

39. }

40. else

41. {

42. intQueWrapper.eq("rate_type","活期存款");

43. }

44. InterestRate intRate=rateRepository.selectOne(intQueWrapper);

45. String result=Double.toString(intRate.getRate());

46. return result;

47. }

48. }

API代码（贷款）：

public class InterestRateController {

    @Resource
    private rateServer rateserver;
    @Resource
    private InterestRateRepository rateRepository;
//    @RequestMapping("/helloo")
//    @ResponseBody
//    public String hello(){return "Hello world!";}
    @GetMapping("/interest")
    @CrossOrigin(originPatterns = "*", methods = {RequestMethod.GET, RequestMethod.POST})
    @ResponseBody
    public String interestCal(@RequestParam("time") String time){
        QueryWrapper<InterestRate> intQueWrapper=new QueryWrapper<>();
        double year= Double.parseDouble(time);
        if(year==0.25)
        {
            intQueWrapper.eq("rate_type","三个月");
        }
        else if(year==0.5)
        {
            intQueWrapper.eq("rate_type","半年");
        }
        else if(year==1)
        {
            intQueWrapper.eq("rate_type","一年");
        }
        else if(year==2)
        {
            intQueWrapper.eq("rate_type","二年");
        }
        else if(year==3)
        {
            intQueWrapper.eq("rate_type","三年");
        }
        else if(year==5)
        {
            intQueWrapper.eq("rate_type","五年");
        }
        else
        {
            intQueWrapper.eq("rate_type","活期存款");
        }
        InterestRate intRate=rateRepository.selectOne(intQueWrapper);
        String result=Double.toString(intRate.getRate());
        return result;
    }
}

连接数据库

1. server:

2. port: 8082

3. spring:

4. datasource:

5. driver-class-name: com.mysql.cj.jdbc.Driver

6. url: jdbc:mysql://localhost:3306/calculator?serverTimezone=GMT%2b8

7. username: root

8. password: password

6.心路历程和收获

通过这次作业，我充分了解到了前后端开发的基本模式。我使用html，css，js原生来开发前端，遇到了响应式变量不便于管理的问题，在接口对接上，直接使用了原生请求库，成功与后端对接。后端经过了解，选用了springboot作为开发框架，在orm层一开始使用jpa。遇到一些问题后切换到了更合适的mybatis框架成功解决问题。也第一次的部署了自己的mysql数据库。总的来说这次作业收获很大，是一次完整的前后端分离开发体验，也学习到了许多新知识，接下来我会去了解vue框架，希望能在之后的项目中做得更好