实验目的
    1、熟悉 JavaSript 的使用方法
    2、熟悉 Spring boot 的使用步骤
    3、掌握 JavaSript 与 Springboot 的结合
    实验环境
    1、64 位电脑，8G 以上内存
    2、win10 系统
    3、IDEA2021 环境
    实验步骤：
    1. 下载 Echarts 库的最新本
    使用网址：https://echarts.apache.org/zh/index.html，下载 echarts 的最新版本，echarts.min.js
    2. 下载 jquery 库
    3. 打开 IDEA,生成基本的 Springboot 框架
    4. 将 js 放到 static 资源文件夹下
    image.png
    5. 修改 application.properties 的内容如下

    1. spring.thymeleaf.cache=false 
    2. spring.thymeleaf.prefix=classpath:/templates/ 
    3. spring.thymeleaf.suffix=.html

    6. 建立第一个前端页面模板，如下

    image.png

    1. <!DOCTYPE html>
    2. <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <script th:src="@{/jquery-3.5.1.min.js}"></script>
    6.     <script th:src="@{/echarts.min.js}"></script>
    7.     <title>Title</title>
    8. </head>
    9. <body>
    10.     <h1>测试<span th:text="${currentYear}"></span></h1>
    11.     <canvas id="myCanvas" width="200" height="200" style="border:solid 1px red;">
    12.     </canvas>
    13.     <script>
    14.         var c = document.getElementById("myCanvas");
    15.         var ctx = c.getContext("2d");
    16.         ctx.beginPath();
    17.         ctx.arc(100, 75, 50, 0, 2*Math.PI);
    18.         ctx.stroke();
    19.         ctx.strokeRect(30, 125, 150, 30);
    20.         ctx.strokeRect(30, 10, 20, 115);
    21.     </script>
    22. </body>
    23. </html>

    7. 建立 Controller,如下图，有一个测试方法
    image.png

    @Controller 
public class Echarts { 
    @GetMapping("/login1") 
    public String EchartTest1(Model model){ 
        model.addAttribute("currentYear",2014); 
        return "echarts1"; 
    }
}

    8. 运行，在浏览器端显示下图
    image.png
    9. 建立第二个前端页面模板，如下图所示。
    image.png

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询用户</title>
<!--    <script src="/jquery-3.5.1.min.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<script>
    function query() {
        $.ajax({
            url:"/index",
            type:"post",
            data:{id:$("#userId").val(),
            },
            success:function(data){
                console.log(data);
                $("#username").val(data.username);
            }
        })
    }

</script>
<body>
    <div id="app">
        <form action="/index" method="post">
            请输入 ID：<input type="text" name="id" id="userId"/>
            <input type="button" value="查询" onclick="query()" />
            您的用户名是：<input type="text" name="username" id="username"/>
        </form>
    </div>


</body>
</html>

    10.建立数据传递使用的类
    如下图，建立 Users 类
    image.png

    public class Users {
    private int userId;
    private String username;
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public int getUserId() {
        return userId;
    }
    public void setUserId(int userId) {
        this.userId = userId;
    }
    @Override
    public String toString() {
        return "Users{" +
                "userId=" + userId +
                ", username='" + username + '\'' +
                '}';
    }
}

    11.在 Controller 类中增加两个方法，用于打开页面和获取数据。

        @RequestMapping(value="/index",method= RequestMethod.POST)
    @ResponseBody
    public Users findUser(Users user) {
        try {
            //user= userService.findUserByUser(user);
            // 方便测试，不和数据库交互，前端拿 username 属性的值;
            user.setUsername("test");
            return user;
        } catch(Exception e) {
            return null;
        }
    }
    @GetMapping("/login2")
    public String EchartTest2(Model model){
//         model.addAttribute("currentYear",2014);
        return "echarts2";
    }

    12.重新运行程序，看前端页面是否获得数据，如下图所示。
    image.png