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

news2025/2/27 0:32:11

三、整合前端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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/179054.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MySQL优化（1）执行计划explain中type属性详解

MySQL优化（1）执行计划explain中type属性详解

系列文章目录1.初始化测试数据1.初始化表格&#xff08;user表&#xff09;2.初始化表格&#xff08;product表&#xff09;3.初始化表格&#xff08;user表数据初始化&#xff09;4.初始化表格&#xff08;product表函数&#xff09;5.初始化表格&#xff08;product表数据初始…
阅读更多...
雷达编程实战之信号处理流程

雷达编程实战之信号处理流程

信号处理_MatlabAD数据幅相校准1DFFT2DFFT由射频前端发射、接收信号&#xff0c;至获得目标径向距离、径向速度、径向角度、RCS等目标属性信息&#xff0c;这个过程&#xff0c;我们谓之&#xff0c;FMCW毫米波雷达信号处理流程。 VCO为压控振荡器(Voltage Controlled Oscilla…
阅读更多...
从技术角度看Android大系统的构成

从技术角度看Android大系统的构成

最近因为工作需要&#xff0c;再次捡起了放下多年的Android开发。说起Android&#xff0c;还是要感谢这个时代&#xff0c;感谢开源。这个时代&#xff0c;让我们开发者&#xff0c;可以通过开源&#xff0c;通过开源的Android&#xff0c;学到很多东西。有如此感慨&#xff0c…
阅读更多...
基本二叉树

基本二叉树

文章目录接口实现三种基本遍历方式获取节点个数获取叶子节点个数获取树的高度返回第K层节点个数返回x所在节点二叉树的销毁OJ二叉树知识点及选择题N0 N2 1由中序和前序&#xff08;或后序&#xff09;确定结构的方法有N个元素的完全二叉树的深度是 logN 1选择题&#xff1a;…
阅读更多...
Linux常用命令——sftp命令

Linux常用命令——sftp命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) sftp 交互式的文件传输程序 补充说明 sftp命令是一款交互式的文件传输程序&#xff0c;命令的运行和使用方式与ftp命令相似&#xff0c;但是&#xff0c;sftp命令对传输的所有信息使用ssh加密&#xff0c;它还…
阅读更多...
预处理【详解】

预处理【详解】

本期介绍&#x1f356; 主要介绍&#xff1a;#define如何定义宏&#xff0c;宏替换的规则&#xff0c;为什么宏定义时不要吝啬我们的括号&#xff0c;为什么宏的参数不能带有副作用&#xff0c;宏和函数的区别。还讲解了预处理符号#和##&#xff0c;#undef指令&#xff0c;众多…
阅读更多...
Swift（4）

Swift（4）

目录 Dictionary集合 组合赋值符号 区间运算符 字符串字面量里的特殊字符 操作字符 Dictionary集合 相当于java中的Map集合 函数与闭包 函数也可以内嵌 函数其实就是闭包的一种特殊形式&#xff1a;一段可以被随后调用的代码块。闭包中的代码可以访问其生效范围内的变量和…
阅读更多...
SpringMVC的@RequestMapping注解

SpringMVC的@RequestMapping注解

SpringMVC的RequestMapping注解RequestMapping注解的功能RequestMapping注解的位置RequestMapping注解的value属性RequestMapping注解的method属性RequestMapping注解的params属性RequestMapping注解的headers属性什么是headers属性RequestMapping注解的功能 从注解名称上我们…
阅读更多...
二叉树23：验证二叉搜索树

二叉树23：验证二叉搜索树

主要是我自己刷题的一些记录过程。如果有错可以指出哦&#xff0c;大家一起进步。 转载代码随想录 原文链接&#xff1a; 代码随想录 leetcode链接&#xff1a;344. 反转字符串 题目&#xff1a; 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。…
阅读更多...
26. 命名空间

26. 命名空间

前言&#xff1a;如果你接触过c/c/c#/java&#xff0c;那么对于python中的命名空间也是如此&#xff0c;只不过在些许地方存在细微差异&#xff0c;不过倒无伤大雅。 1. 定义 命名空间(Namespace)是从名称到对象的映射&#xff0c;大部分的命名空间都是通过 python 字典来实现…
阅读更多...
lamda表达式

lamda表达式

lamda表达式可以看作是一个匿名函数。编译器在编译的时候&#xff0c;会将lamda表达式处理成一个仿函数类&#xff0c;类名是类名是不重复的随机名称&#xff08;因为一个作用域中可能存在多个仿函数&#xff09;&#xff0c;返回该仿函数的对象。 lamda既然可以看作是一个匿名…
阅读更多...
文件操作（C语言）

文件操作（C语言）

目录 1、为什么使用文件 2、什么是文件 程序文件 数据文件 文件名 3、文件的打开和关闭 文件指针 文件的打开和关闭 4、文件的顺序读写 文件读写介绍 文件读写函数 fputc&#xff08;字符 输出/写 函数&#xff09; fgetc&#xff08;字符 输入/读 函数&#xff09; fputs&…
阅读更多...
VMware Workstation安装：与 Device/Credential Guard 不兼容

VMware Workstation安装：与 Device/Credential Guard 不兼容

VMware Workstation安装&#xff1a;与 Device/Credential Guard 不兼容 1、快速解决 安装最新版VMware Workstation&#xff0c;例如我安装的是VMware Workstation Pro 17&#xff1a; 是的&#xff0c;解决报错的办法&#xff0c;就是安装/升级VMware Workstation版本。 参…
阅读更多...
Aspose.PDF 23.1.0 for .NET Crack

Aspose.PDF 23.1.0 for .NET Crack

Aspose.PDF for .NET可以在 .NET 程序中生成、屏蔽、编辑甚至将 PDF 文件转换为多种格式&#xff0c;而无需依赖 Adob​​e Acrobat。它是.Net核心对PDF的创新处理&#xff0c;可以在跨平台软件中执行文档操作甚至任务管理。借助 API&#xff0c;用户可以创建、更改、呈现、保护…
阅读更多...
Spring Cloud:网关Gateway

Spring Cloud:网关Gateway

✨ Spring Cloud:网关Gateway微服务网关概述为什么需要微服务网关服务网关的介绍Getway基本介绍微服务架构中网关所处位置三大核心概念工作流程入门案例搭建新建模块**cloud-gateway-gateway9527**导入依赖application.yml主启动类实现动态路由测试Predicate 断言基本介绍Route…
阅读更多...
详解信奥一本通1290：采药

详解信奥一本通1290：采药

1290&#xff1a;采药【题目描述】辰辰是个很有潜能、天资聪颖的孩子&#xff0c;他的梦想是称为世界上最伟大的医师。为此&#xff0c;他想拜附近最有威望的医师为师。医师为了判断他的资质&#xff0c;给他出了一个难题。医师把他带到个到处都是草药的山洞里对他说&#xff1…
阅读更多...
Fisco Bcos区块链三（webase中间件平台一键部署）

Fisco Bcos区块链三（webase中间件平台一键部署）

文章目录区块链开荒技术文档&#xff1a;https://fisco-bcos-documentation.readthedocs.io/zh_CN/latest/index.html4. Webase一键部署Java环境变量配置MySQL安装Ubuntu安装mysql数据库安装后设置密码&#xff1a;Python部署PyMySQL部署&#xff08;Python3.6&#xff09;拉取…
阅读更多...
SpringBoot-过滤器的使用（在访问页面时过滤掉未登录的用户使其不能访问相应页面）

SpringBoot-过滤器的使用（在访问页面时过滤掉未登录的用户使其不能访问相应页面）

目录 概述 前端编写 页面展示 后端编写 编写接口 过滤器的编写 过滤器功能实验 概述 解决需求&#xff1a;在用户未登录的情况下访问未登录不可访问的页面时&#xff0c;请求将被过滤到&#xff0c;将用户退回登录页面。 技术选型 前端&#xff1a;Vue ElementUI 后端…
阅读更多...
MySQL事务的四大特性以及并发事务问题

MySQL事务的四大特性以及并发事务问题

事务的四大特性ACID 【原子性&#xff08;Atomicity&#xff09;】&#xff1a;事务是不可分割的最小单元&#xff0c;要么全部成功&#xff0c;要么全部失败。&#xff08;eg&#xff1a;转账案例&#xff0c;转账过程中任何一步操作失败了&#xff0c;那么整个事务就失败了&a…
阅读更多...
Python装饰器使用方法详解

Python装饰器使用方法详解

文章目录1 装饰器背景知识1.1 基本概念1.2 应用场景2 简单的装饰器代码3 使用装饰器记录函数执行次数4 带参数的装饰器5 装饰器处理有返回值的函数1 装饰器背景知识 1.1 基本概念 装饰器&#xff08;Decorator&#xff09;是 Python 中一种函数或类&#xff0c;用来修饰其他函…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023