零基础学JavaWeb开发（二十四）之 springmvc入门到精通（4）

最新推荐文章于 2024-10-16 21:35:12 发布

出世&入世

最新推荐文章于 2024-10-16 21:35:12 发布

阅读量462

点赞数

分类专栏： JavaWeb Java 文章标签：前端 javascript vue.js layui 学习

本文链接：https://blog.csdn.net/weixin_54828627/article/details/128761376

版权

Java 同时被 2 个专栏收录

100 篇文章 6 订阅

订阅专栏

JavaWeb

29 篇文章 2 订阅

订阅专栏

三、整合前端layui

前后端分离架构模式

前端---页面编写好数据源来自于后端接口 layui或者vue等

将接口编写好即可（springmvc）

1、使用layui画出首页界面

html/js/css

表格 - 页面元素 - Layui

引入css

<!-- 引入layui css -->
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />
<!-- 引入layui js -->
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>开始使用 layui</title>
    <!-- 引入layui css -->
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />
    <!-- 引入layui js -->
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    
    
  </head>
  <body>
    
    <table class="layui-table">
      <colgroup>
        <col width="150">
        <col width="200">
        <col>
      </colgroup>
      <thead>
        <tr>
          <th>学生ID</th>
          <th>学生名称</th>
          <th>学生年龄</th>
          <th>学生地址</th>
          <th>操作</th>
        </tr> 
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>mayikt</td>
          <td>22</td>
          <td>湖北武汉市</td>
          <td><a>删除</a></td>  
        </tr>
      </tbody>
    </table>
    
  </body>
</html>

1.1、首页使用ajax调用后端接口读取数据

1.前端使用ajax技术调用后端接口获取到数据

2.jquery 解析数据并且渲染在页面中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <link href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 你的 HTML 代码 -->
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<table class="layui-table" id="userData">

</table>

<script src="http://static.mayikt.com/jquery-1.11.1.min.js?t=3fe80cb6-7883-4054-bb2d-714ba66c2887"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    initData();

    function initData() {

        axios({
            // 请求方式
            method: 'GET',
            // 请求的地址
            url: 'http://127.0.0.1/user/getUsersAll'
        }).then(function (result) {
            // 1. 调用 axios 方法得到的返回值是 Promise 对象
            var userHtml = "    <colgroup>\n" +
                "        <col width=\"150\">\n" +
                "        <col width=\"200\">\n" +
                "        <col>\n" +
                "    </colgroup>\n" +
                "    <thead>\n" +
                "    <tr>\n" +
                "        <th>用户ID</th>\n" +
                "        <th>用户名称</th>\n" +
                "        <th>用户年龄</th>\n" +
                "        <th>用户地址</th>\n" +
                "        <th>操作</th>\n" +
                "    </tr>\n" +
                "    </thead>\n" +
                "    <tbody>\n";
            var code = result.data.code;
            if (code == "200") {
                var data = result.data.data;
                for (var i = 0; i < data.length; i++) {
                    userHtml += "    <tr>\n" +
                        "        <td>" + data[i].id + "</td>\n" +
                        "        <td>" + data[i].name + "</td>\n" +
                        "        <td>23</td>\n" +
                        "        <td>湖北武汉</td>\n" +
                        "        <td><a>删除</a></td>\n" +
                        "    </tr>\n" +
                        "\n";
                }
            }
            userHtml += "    </tbody>";
            $("#userData").html(userHtml);

        })
    }
</script>
</body>
</html>

1.2、后端提供查询所有用户数据接口

/**
* 查询所有用户数据结构
*
* @return
*/
@GetMapping("/getUsersAll")
public Map<String, Object> getUsersAll() {
    List<UserEntity> listUsers = userService.getUsersAll();
    return setResult(200, "ok", listUsers);
}

1.3、前后端分离解决跨域问题

CORS全称Cross-Origin Resource Sharing，意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问的那个资源就会遇到跨域问题

跨域问题是浏览器的一种安全策略,访问需要遵循同源策略：

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://192.168.110.11/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

1.使用 jsonp 但是不支持post请求（不推荐使用）

2.使用SpringMVC @CrossOrigin 注解（推荐）

3.基于网关解决跨域的问题（推荐）

4.基于Nginx 根据不同项目访问（推荐）

5.使用SpringMVC @CrossOrigin 注解解决跨域问题

response.getHeaders().set("Access-Control-Allow-Origin","*");

1.4、根据选择id删除用户数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>开始使用 layui</title>
    <!-- 引入layui css -->
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
    <script src="http://static.mayikt.com/jquery-1.11.1.min.js?t=3fe80cb6-7883-4054-bb2d-714ba66c2887"></script>
    <!-- 引入layui js -->
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>

<table class="layui-table" id="userData">

</table>
<script>
    //初始化数据
    initData();

    function initData() {
        // 通过程序追加html
        // 利用ajax技术 调用到后端接口  拼接 table里面 html 元素
        var userListHtml = " <colgroup>\n" +
            "        <col width=\"150\">\n" +
            "        <col width=\"200\">\n" +
            "        <col>\n" +
            "    </colgroup>\n" +
            "    <thead>\n" +
            "    <tr >\n" +
            "        <th>学生ID</th>\n" +
            "        <th>学生名称</th>\n" +
            "        <th>学生年龄</th>\n" +
            "        <th>学生地址</th>\n" +
            "        <th>操作</th>\n" +
            "    </tr>\n" +
            "    </thead>\n" +
            "    <tbody>\n";


        axios({
            // 请求方式
            method: 'GET',
            // 请求的地址
            url: 'http://127.0.0.1/user/getUsersAll',
        }).then(function (result) {
            var code = result.data.code;
            var data = result.data.data;
            if (code == "200") {
                for (var i = 0; i < data.length; i++) {
                    userListHtml += "    <tr  id=" + data[i].id + ">\n" +
                        "        <td>" + data[i].id + "</td>\n" +
                        "        <td>" + data[i].name + "</td>\n" +
                        "        <td>" + data[i].age + "</td>\n" +
                        "        <td>" + data[i].addres + "</td>\n" +
                        "        <td><a href='#' onclick='deleteUserInfo(" + data[i].id + ")'>删除</a></td>\n" +
                        "    </tr>\n";
                }
            }
            userListHtml += "    </tbody>";
            $("#userData").html(userListHtml);
        });

    }

    function deleteUserInfo(id) {

        axios({
            // 请求方式
            method: 'delete',
            // 请求的地址
            url: 'http://127.0.0.1/user02/deleteById/' + id,
        }).then(function (result) {
            var code = result.data.code;
            if (code == "200") {
                alert('删除成功');
                $("#" + id).remove();
            }
        });

    }
</script>

</body>
</html>

function getUrlParam(name)
{
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r!=null) 
        return unescape(r[2]);
  return null; //返回参数值
  }

1.5、新增用户数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>新增用户数据</title>
    <!-- 引入layui css -->
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
    <script src="http://static.mayikt.com/jquery-1.11.1.min.js?t=3fe80cb6-7883-4054-bb2d-714ba66c2887"></script>
    <!-- 引入layui js -->
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">用户名称</label>
        <div class="layui-input-block">
          <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名称" autocomplete="off"
                 class="layui-input">
        </div>
      </div>
      
      <div class="layui-form-item">
        <label class="layui-form-label">用户年龄</label>
        <div class="layui-input-block">
          <input type="text" name="age" required lay-verify="required" placeholder="请输入用户年龄" autocomplete="off"
                 class="layui-input">
        </div>
      </div>
      
      
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">用户地址</label>
        <div class="layui-input-block">
          <textarea name="addres" placeholder="请输入地址" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
    
    <script>
      //Demo
      layui.use('form', function () {
        var form = layui.form;
        
        //提交
        form.on('submit(formDemo)', function (data) {
          layer.msg(JSON.stringify(data.field));
          axios({
            method: "POST",
            url: "http://127.0.0.1/user/insertUser/",
            data: JSON.stringify(data.field),
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            }
          }).then(resp => {
            var code = resp.data.code;
            if (code == "200") {
              alert("新增数据成功");
              window.location.href = "index.html";
            } else {
              alert("新增数据失败");
            }
            
          })
          
          return false;
        });
      });
    </script>
  </body>
</html>

1.6、修改数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改用户数据</title>
    <!-- 引入layui css -->
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
    <script src="http://static.mayikt.com/jquery-1.11.1.min.js?t=3fe80cb6-7883-4054-bb2d-714ba66c2887"></script>
    <!-- 引入layui js -->
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">用户ID</label>
        <div class="layui-input-block">
            <input type="text" name="id" id="id" required lay-verify="required"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" required lay-verify="required" placeholder="请输入用户名称"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">用户年龄</label>
        <div class="layui-input-block">
            <input type="text" name="age" id="age" required lay-verify="required" placeholder="请输入用户年龄"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>


    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">用户地址</label>
        <div class="layui-input-block">
            <textarea name="addres" id="addres" placeholder="请输入地址" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    getIdUserInfo();

    function getIdUserInfo() {
        //1.获取地址栏参数
        var id = getUrlParam("id");
        //2.发送ajax请求
        axios({
            // 请求方式
            method: 'get',
            // 请求的地址
            url: 'http://127.0.0.1/user/getById/' + id,
        }).then(function (result) {
            var code = result.data.code;
            if (code == "200") {
                var data = result.data.data;
                // 修改 input标签对应的value值
                $("#name").val(data.name);
                $("#age").val(data.age);
                $("#addres").val(data.addres);
                $("#id").val(data.id);
            } else {
                alert("查询用户信息数据失败!");
            }

        })
    }

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null)
            return unescape(r[2]);
        return null; //返回参数值
    }

</script>

<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
        //提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            axios({
                method: "PUT",
                url: "http://127.0.0.1/user/updateUser/",
                data: JSON.stringify(data.field),
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                }
            }).then(resp => {
                var code = resp.data.code;
                if (code == "200") {
                    alert("修改数据成功");
                    window.location.href = "index.html";
                } else {
                    alert("修改数据失败");
                }

            })

            return false;
        });
    });
</script>
</body>
</html>