axios-身体质量测试

最新推荐文章于 2023-02-07 19:37:20 发布

新子-存在了

最新推荐文章于 2023-02-07 19:37:20 发布

阅读量179

点赞数

分类专栏： java异步文章标签： servlet java 前端

本文链接：https://blog.csdn.net/m0_69712602/article/details/126789359

版权

java异步专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.新建首页index.html

在 resources 目录下 static 中新建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>axios异步请求测试</h1>
    <div>
        <a href="/bmi.html">身体质量指数测试</a>
    </div>

2.新建 bmi.html

在 resources 目录下 static 中新建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>身体质量指数测试</h1>
    <!--form同步请求 submit 他俩结合使用的-->
    <input type="text" v-model="h" placeholder="请输入身高(米)">
    <input type="text" v-model="w" placeholder="请输入体重(公斤)">
    <input type="button" value="开始测试" @click="f()">
    <h2>测试结果:{{result}}</h2>
</div>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        let v = new Vue({
            el:"body>div",
            data:{
                result:"",h:"",w:""
            },
            methods:{
                f(){
                    axios.get("/bmi?h="+ v.h +"&w="+v.w).then(function (response) {
                        v.result = response.data;
                    })
                }
            }
        })
    </script>
</body>
</html>

3.新建BMIController

controller 包下新建 控制层

package cn.detu.boot07.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class BMIController {
    @RequestMapping("/bmi")
    public String bmi(Double h,Double w){
        double BMI= w / (h * h);
        if(BMI < 18.4){
            return "消瘦";
        }
        if(BMI < 23.9){
            return "正常";
        }
        if(BMI < 27.9){
            return "超重";
        }
        return "肥胖";
    }
}