HTML计算器与Spring Boot实战-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42915561/article/details/115857428

html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>cal</title>
        <link rel="stylesheet" href="../css/cal.css" type="text/css">
        <script src="../js/cal.js"></script>
    </head>

    <body>

    <div id="calculator">

        <div class="LOGO">
            <span class="name">
                Calulation
            </span>
        </div>

        <div>
            <!--计算器显示框 -->
            <input type="text" class="screen" disabled>
         </div>

        <div id="keys">
            <!-- 第1排 7 8 9 back C-->
            <button class="but" value="7">7</button>
            <button class="but" value="8">8</button>
            <button class="but" value="9">9</button>
            <button class="but" value="<—">Back</button>
            <button class="but" value="AC">AC</button>
            <!-- 第2排 4 5 6 X /-->
            <button class="but" value="4">4</button>
            <button class="but" value="5">5</button>
            <button class="but" value="6">6</button>
            <button class="but" value="*">*</button>
            <button class="but" value="/">/</button>
            <!-- 第3排 1 2 3 + - -->
            <button class="but" value="1">1</button>
            <button class="but" value="2">2</button>
            <button class="but" value="3">3</button>
            <button class="but" value="+">+</button>
            <button class="but" value="-">-</button>
            <!--第4排 0 00 . % = -->
            <button class="but" value="0">0</button>
            <button class="but" value="00">00</button>
            <button class="but" value=".">.</button>
            <button class="but" value="%">%</button>
            <button class="but" value="=">=</button>
        </div>

    </div>

</body>
</html>

CSS

html{
    /*页面铺满和页面背景*/
    height: 100%;
    background-color: rgba(255, 182, 193, 0.58);
    /*background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(rgba(220, 96, 237, 0.47)), to(#fafafa)); !* 渐变背景*!*/
}
*{
    /*页面边缘*/
    margin: 0;
    padding: 0;
    /*字体大小和字体*/
    font-size: 15px;
    font-family: Arial,sans-serif;
}
#calculator{
    /*边缘*/
    margin: 50px auto;
    /*盒子内边缘*/
    padding: 30px;
    /*盒子宽度和高度*/
    width: 300px;
    height: 240px;
    /*边框*/
    border: 1px solid #ffb6c1;
    /*盒子背景颜色*/
    background-color: #ffb6c1;
}
/*计算器LOGO样式*/
.LOGO{
    /*标题高度*/
    height: 20px;
    width: 300px;
    text-align: center;
}

input{
    text-align: left;
    margin-top: 10px;
    width: 99.4%;
    height: 30px;
    /*background-color: rgba(255, 182, 193, 0.41);*/
    border: 1px solid #ffffff;
}
#keys{
    border: 1px solid rgba(255, 255, 255, 0.98);
    text-align: center;
    background-image:url("../jpg/1.jpeg");
    background-repeat: round;
}
button{
    width: 50px;
    height: 40px;
    background-color: rgba(255, 182, 193, 0.47);
    border: 1px solid white;
    margin:1px auto;
}

JS

window.onload=function () {
    var num = document.getElementsByClassName("but"); //存放元素对象
    var scr = document.getElementsByClassName("screen")[0];//获取屏幕对象
    for(var i=0;i<num.length;i++){ //为每个按钮添加onclick事件
        num[i].onclick=function () {
            //如果点击AC，则清空屏幕
            if (this.value=="AC"){
                scr.value = "";
            }
            //当屏幕不为空时，判断点击的是不是退格键
            else if(this.value=="<—"){
                //将最后一个元素截掉
                scr.value=scr.value.substr(0,scr.value.length-1);
            }
            //当屏幕为空时判断是否点击的是小数点
            else if(this.value=="."&&scr.value==""){
                scr.value="0.";
            }
            //当点击等于号时，用eval函数计算表达式的结果并显示到屏幕上
            else if (this.value=="="){
                scr.value=eval(scr.value);
            }
            else {
                scr.value+=this.value;
            }
        }

    }

}

计算器实现：
在这里插入图片描述

搭建Spring Boot框架

打开IDEA File->New->Project
Spring initializr->一路next

Spring Boot的基础结构共有三个文件：
src/main/java 程序开发以及主程序入口
src/main/resources 配置文件
src/test/java 测试程序

建议分层架构：
1、Application.java 建议放到根目录下面,主要用于做一些框架配置
2、model 目录主要用于实体与数据访问层（Repository）
3、service 层主要是业务类代码
4、controller 负责页面访问控制

编写 Controller 内容：

@RestController
public class HelloWorldController {
    @RequestMapping("/hello")
    public String index() {
        return "Hello World";
    }
}

@RestController 的意思就是 Controller 里面的方法都以 json 格式输出，不用再写什么 jackjson 配置的了！

错误—ERROR 1440 — [ restartedMain] o.s.b.d.LoggingFailureAnalysisReporter :
Review your local configuration and make sure that the Spring AOT plugin is configured properly.

尝试一 -----@SpringBootApplication后添加(exclude = {DataSourceAutoConfiguration.class})
@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})
失败！

尝试二—修改服务器端口
失败！

尝试三—重新建立项目
成功从网上生成的项目在引入项目的时候，IDEA的maven环境使用内置，更改Maven目录等操作太麻烦了选择重建项目
在这里插入图片描述

单元测试

在这里插入图片描述
springboot 测试依赖包引用解决 status().isOk(), content().string(equalTo(“Hello World”))
如下引入三个依赖包：

import static org.hamcrest.Matchers.equalTo;
 
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.content;
 
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;

测试成功
在这里插入图片描述

开发环境的调试

热启动在正常开发项目中已经很常见了吧，虽然平时开发web项目过程中，改动项目启重启总是报错；但springBoot对调试支持很好，修改之后可以实时生效，需要添加以下的配置：

 <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
 </dependency>


       <plugin>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-maven-plugin</artifactId>
           <configuration>
               <fork>true</fork>
           </configuration>
       </plugin>