个人练习前端技术使用Bootstrap、JQuery、thymeleaf

简介: 个人练习前端技术使用Bootstrap、JQuery、thymeleaf

说明:本代码只是为了本人练习前后端联动技术,包含html,jquery,thymeleaf模板、ajax请求及后端功能联动,方便自己查找及使用。

@[toc]

代码场景

场景1.table批量查询功能(有默认值),点击"查询最新数据"从后台查询覆盖默认显示的数据

默认table展示的数据

image.png

前端代吗

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <!--先加载css,再加载js,否则可能出错-->
    <link th:href="@{bootstrap-3.4.1-dist/css/bootstrap.css}" rel="stylesheet" />
    <link th:href="@{bootstrap-3.4.1-dist/css/bootstrap-theme.css}" rel="stylesheet" />
    <!--切记:先加载jquery的js,再加载bootstrap.js-->
    <script th:src="@{jquery/jquery3.6.0.js}"></script>
    <script th:src="@{bootstrap-3.4.1-dist/js/bootstrap.js}"></script>
</head>
<body>
    <div class="col-md-8">
        <button type="submit" id="getTeacherList" class="btn btn-default">查询最新的数据</button>
        <button type="button" id="addTeacher" class="btn btn-success">新建</button>
        <button type="button" id="updateTeacher" class="btn btn-info">修改</button>
        <button type="button" id="deleteTeacher" class="btn btn-warning">删除</button>
    </div>

    <!--表格-->
    <div id="myTable" class="bs-example col-md-8" data-example-id="hoverable-table">
        <table class="table table-hover" >
            <thead>
            <tr>
                <th><input type="checkbox" value="" id="mycheckbox"></th>
                <th>#</th>
                <th>姓名</th>
                <th>班级</th>
                <th>所属学院</th>
                <th>别名</th>
                <th>性别</th>
            </tr>
            </thead>
            <tbody id="myTbody1">
            <tr>
                <th><input type="checkbox" value=""></th>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
                <td>Otto</td>
                <td></td>
            </tr>
            <tr>
                <th><input type="checkbox" value=""></th>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td>Thornton</td>
                <td></td>
            </tr>
            <tr>
                <th><input type="checkbox" value=""></th>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>the Bird</td>
                <td></td>
            </tr>
            </tbody>
        </table>
        </table>
    </div>
</body>
<script type="text/javascript">
    //查询
    $("#getTeacherList").click(function () {
   
        var params = {
   };
        $.ajax({
   
            type:"GET",
            url:"/getTeacherList",
            async: true,
            dataType: "json",
            data: params,
            contentType: "application/json; charset=UTF-8",
            success : function (response) {
   
                if (response.code === 200) {
   
                    //清空table内容
                    $("#myTbody1").html("");
                    var tr;
                    $.each(response.info, function (index, value) {
   
                        tr = tr + [
                            "<tr>",
                            "<th><input type='checkbox' value=''></th>",
                            "<th scope='row'>"+ value.id +"</th>",
                            "<td>"+ value.name +"</td>",
                            "<td>"+ value.classes +"</td>",
                            "<td>"+ value.college +"</td>",
                            "<td>"+ value.alias +"</td>",
                        ];
                        if (value.sex === 0) {
   
                            tr = tr + "<td> 女 </td>";
                        } else {
   
                            tr = tr + "<td> 男</td>";
                        }
                        $("#myTbody1").append("</tr><tr>");
                    });
                    $("#myTbody1").append(tr);
                }
            }
        });
    });
</script>
</html>

后端代码

PracticeController

package com.example.demo.controller;

import com.example.demo.bean.Teacher;
import com.example.demo.response.Response;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.annotation.PostConstruct;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ConcurrentHashMap;

/**
 * @Author 211145187
 * @Date 2022/2/25 13:54
 **/
@Controller
public class PracticeController {
   
    private ConcurrentHashMap<String, List<Teacher>> cache = new ConcurrentHashMap<>();
    //首页
    @GetMapping(value = "")
    public String index() {
   
        return "index";
    }

    @PostConstruct
    public void initCache() {
   
        List<Teacher> teacherList = new ArrayList<>();
        Teacher teacher1 = new Teacher();
        teacher1.setId(1);
        teacher1.setName("周杰伦");
        teacher1.setClasses("三年二班");
        teacher1.setCollege("魔法学院");
        teacher1.setAlias("Jay Chou");
        teacher1.setSex(1);
        teacherList.add(teacher1);
        Teacher teacher2 = new Teacher();
        teacher2.setId(2);
        teacher2.setName("丽萨");
        teacher2.setClasses("三年二班");
        teacher2.setCollege("魔法学院");
        teacher2.setAlias("Lisa");
        teacher2.setSex(0);
        teacherList.add(teacher2);
        cache.put("list", teacherList);
    }

    //查询
    @GetMapping(value = "/getTeacherList")
    @ResponseBody
    public Response<List<Teacher>> getTeacherList(Model model) {
   
        List<Teacher> teacherList = cache.get("list");
        model.addAttribute("teacherList", teacherList);
        model.addAttribute("flag", true);
        teacherList.stream().forEach(System.out::println);
        return Response.success(teacherList);
    }
}   
-----------------------------------------------------------------------------------------------
Teacher

package com.example.demo.bean;

import lombok.Data;

/**
 * @Author 211145187
 * @Date 2022/2/23 09:32
 **/
@Data
public class Teacher {
   
    //id
    private Integer id;
    //姓名
    private String name;
    //班级
    private String classes;
    //所属学院
    private String college;
    //别名
    private String alias;
    //性别【0:女    1:男】
    private Integer sex;
}

点击后效果

image.png

场景2.新增,点击“新建”显示form表单,提交成功后隐藏form表单

点击“新建”弹窗form
说明:点击“新建”按钮,显示form表单且有默认值,提交成功后关闭form,内容为空提示错误提示

image.png

前端代吗

<div class="col-md-8">
        <!--表单-->
        <form id="myForm" style="display: none">
            <div class="form-group" style="display: none">
                <label for="name">id</label>
                <input type="text" class="form-control" id="id"  value="">
                <span id="errorId" style="color: orangered"></span>
            </div>
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" class="form-control" id="name" placeholder="please input name" value="测试姓名">
                <span id="errorName" style="color: orangered"></span>
            </div>
            <div class="form-group">
                <label for="classes">班级</label>
                <input type="text" class="form-control" id="classes" placeholder="please input classes" value="测试班级">
                <span id="errorClasses" style="color: orangered"></span>
            </div>
            <div class="form-group">
                <label for="college">所属学院</label>
                <input type="text" class="form-control" id="college" placeholder="please input college" value="测试所属学院">
                <span id="errorCollege" style="color: orangered"></span>
            </div>
            <div class="form-group">
                <label for="alias">别名</label>
                <input type="text" class="form-control" id="alias" placeholder="please input alias" value="测试别名">
                <span id="errorAlias" style="color: orangered"></span>
            </div>
            <div class="form-group">
                <label >性别</label>
            </div>
            <div class="checkbox">
                <label id="sex">
                    <input type="radio" name="sex" value=1>&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="sex" value=0 checked="checked"></label>
            </div>
            <span id="errorMyFormMessage" style="color: orangered"></span>
            <button type="button" id="myFormSubmit" class="btn btn-success">提交</button>
            <button type="button" id="myFormClose" class="btn btn-danger">关闭</button>
            <!--y隐藏域,用于判断执行的是【1:增、2:改、3:删】-->
            <input type="hidden" id="submitType" th:value=0>
        </form>
    </div>
----------------------------------------------------------------------------
//点击“关闭按钮”关闭窗口
    $("#myFormClose").click(function () {
   
        $("#myForm").hide();
    });
----------------------------------------------------------------------------
//校验form
var vertifyForm = function () {
   
    var flag = true;
    if ($("#name").val() == "") {
   
        $("#errorName").html("name 不能为空");
        flag = false;
    }
    if ($("#classes").val() == "") {
   
        $("#errorClasses").html("classes 不能为空");
        flag = false;
    }
    if ($("#college").val() == "") {
   
        $("#errorCollege").html("college 不能为空");
        flag = false;
    }
    if ($("#alias").val() == "") {
   
        $("#errorAlias").html("alias 不能为空");
        flag = false;
    }
    return flag;
}
----------------------------------------------------------------------------
//新增
$("#addTeacher").click(function () {
   
    $("#name").val("测试姓名");
    $("#classes").val("测试班级");
    $("#college").val("测试所属学院");
    $("#alias").val("测试别名");
    $("#myForm").show();
    $("#submitType").val(1);
});
----------------------------------------------------------------------------
 //新增/修改/删除-提交
$("#myFormSubmit").click(function () {
   
    flag = vertifyForm();
    //校验,成功则提交请求,失败则不提交并显示错误提示信息
    if (!flag) return;
    //判断【增加/修改】操作
    //新增
    if ($("#submitType").val() == 1) {
   
        var params = {
   
            "name":$("#name").val(),
            "classes":$("#classes").val(),
            "college":$("#college").val(),
            "alias":$("#alias").val(),
            "sex":$("#sex :radio").val()
        };

        $.ajax({
   
            type:"POST",
            url:"/addTeacher",
            async: true,
            dataType: "json",
            //注意:ajax提交post请求时,必须使用JSON.stringify(data) 序列化请求参数,否则报400
            data: JSON.stringify(params),
            contentType: "application/json; charset=UTF-8",
            success : function (response) {
   
                if (response.code === 200) {
   
                    var tr = [
                        "<tr>",
                        "<th><input type='checkbox' value=''></th>",
                        "<th scope='row'>" + response.info.id + "</th>",
                        "<td>"+ response.info.name +"</td>",
                        "<td>"+ response.info.classes +"</td>",
                        "<td>"+ response.info.college +"</td>",
                        "<td>"+ response.info.alias +"</td>",
                    ];
                    if (response.info.sex === 0) {
   
                        tr = tr + "<td> 女 </td>";
                    } else {
   
                        tr = tr + "<td> 男</td>";
                    }
                    $("#myTbody1").append("</tr><tr>").append(tr);
                    $("#myForm").hide();
                }
            }
        });
    }
    //修改
    else if ($("#submitType").val() == 2) {
   
        //$("#myTbody1 :input:checked").length 用于获取checkbox的选中条数
        if ($("#myTbody1 :input:checked").length == 1) {
   
            $("#errorMyFormMessage").html("")

            var params = {
   
                "id": $("#myTbody1 :input:checked").parent().parent().children().eq(1).html(),
                "name":$("#name").val(),
                "classes":$("#classes").val(),
                "college":$("#college").val(),
                "alias":$("#alias").val(),
                "sex":$("#sex :radio:checked").val()
            };
            $.ajax({
   
                type:"PUT",
                url:"/updateTeacher",
                async: true,
                dataType: "json",
                //注意:ajax提交post请求时,必须使用JSON.stringify(data) 序列化请求参数,否则报400
                data: JSON.stringify(params),
                contentType: "application/json; charset=UTF-8",
                success : function (response) {
   
                    if (response.code === 200) {
   
                        $("#myTbody1 :input:checked").parent().parent().children().eq(2).html(response.info.name)
                        $("#myTbody1 :input:checked").parent().parent().children().eq(3).html(response.info.classes)
                        $("#myTbody1 :input:checked").parent().parent().children().eq(4).html(response.info.college)
                        $("#myTbody1 :input:checked").parent().parent().children().eq(5).html(response.info.alias)
                        if (response.info.sex == 0) {
   
                            $("#myTbody1 :input:checked").parent().parent().children().eq(6).html("女")
                        } else {
   
                            $("#myTbody1 :input:checked").parent().parent().children().eq(6).html("男")
                        }
                        $("#myForm").hide();
                    }
                }
            });
        } else {
   
            $("#errorMyFormMessage").html("只能选中一条记录提交!")
            return;
        }
    }
});

后端代码

//新增
@PostMapping(value = "/addTeacher")
@ResponseBody
public Response<Teacher> addTeacher(@RequestBody Teacher teacher) {
   
    List<Teacher> teacherList = cache.get("list");
    Integer maxId = 0;
    for (Teacher item : teacherList) {
   
        if (item.getId() > maxId) maxId = item.getId();
    }
    //模拟id自增
    teacher.setId(++maxId);
    teacherList.add(teacher);
    cache.put("list", teacherList);
    cache.get("list").stream().forEach(System.out::println);
  return Response.success(teacher);
}

提交成功后

image.png

场景3.更新,单选一条数据->弹窗->更新值->提交->更新页面

说明:更新和删除都是只能选中一条记录进行操作,否则警告弹窗
说明:先点击左侧勾选框-》如果选中一条记录则可再点击“更新”,并显示弹窗,如果选中多条会弹出警告

前端代吗

//全选或者全不选
$("#mycheckbox").click(function () {
   
    //判断全选框是勾选还是非勾选
    if ($(this).prop('checked')) {
   
        $("#myTable input[type=checkbox]").prop("checked", true);
    } else {
   
        $("#myTable input[type=checkbox]").prop("checked", false);
    }
});
 ----------------------------------------------------------------------------
//修改
$("#updateTeacher").click(function () {
   
    if ($("#myTbody1 :input:checked").length != 1) {
   
        alert("请选则其中一条数据");
        return;
    }
    $("#name").val($("#myTbody1 :input:checked").parent().parent().children().eq(2).html());
    $("#classes").val($("#myTbody1 :input:checked").parent().parent().children().eq(3).html());
    $("#college").val($("#myTbody1 :input:checked").parent().parent().children().eq(4).html());
    $("#alias").val($("#myTbody1 :input:checked").parent().parent().children().eq(5).html());
    if ($("#myTbody1 :input:checked").parent().parent().children().eq(6).html() == "男") {
   
        $("#sex").children().eq(0).prop("checked", true);
    } else {
   
        $("#sex").children().eq(1).prop("checked", true);
    }
    $("#myForm").show();
    $("#submitType").val(2);
});

后端代码

//修改
    @PutMapping(value = "/updateTeacher")
    @ResponseBody
    public Response<Teacher> updateTeacher(@RequestBody Teacher teacher) {
   
        List<Teacher> teacherList = cache.get("list");
        List<Teacher> newTeacherList = new ArrayList<>();
        Teacher teacherNew = null;
        Iterator<Teacher> iterator = teacherList.iterator();
        while(iterator.hasNext()){
   
            Teacher item = iterator.next();
            if (item.getId() ==  teacher.getId()) {
   
                teacherNew = new Teacher();
                teacherNew.setId(teacher.getId());
                teacherNew.setName(teacher.getName());
                teacherNew.setClasses(teacher.getClasses());
                teacherNew.setCollege(teacher.getCollege());
                teacherNew.setAlias(teacher.getAlias());
                teacherNew.setSex(teacher.getSex());
                iterator.remove();
                newTeacherList.add(teacherNew);
                continue;    //跳过此次循环进入下一次循环中
            }
            newTeacherList.add(item);
        }
        cache.put("list", newTeacherList);
        cache.get("list").stream().forEach(System.out::println);
        return Response.success(teacherNew);
    }

场景4.删除功能

说明:更新和删除都是只能选中一条记录进行操作,否则警告弹窗

前端代码

//删除
$("#deleteTeacher").click(function () {
   
   console.log("***************");
   console.log($("#myTbody1 :input:checked").length)
   $("#submitType").val(3);
   //$("#myTbody1 :input:checked").length 用于获取checkbox的选中条数
   if ($("#myTbody1 :input:checked").length == 1) {
   
       $("#errorMyFormMessage").html("")

       var params = {
   
       };
       $.ajax({
   
           type:"DELETE",
           url:"/deleteTeacher?id=" + $("#myTbody1 :input:checked").parent().parent().children().eq(1).html(),
           async: true,
           dataType: "json",
           //注意:ajax提交post请求时,必须使用JSON.stringify(data) 序列化请求参数,否则报400
           data: params,
           contentType: "application/json; charset=UTF-8",
           success : function (response) {
   
               if (response.code === 200) {
   
                   $("#myTbody1 :input:checked").closest('tr').remove();
                   $("#myForm").hide();
               }
           }
       });
   } else {
   
       alert("请选则其中一条数据");
       return;
   }
});

后端代码

//删除
@DeleteMapping(value = "/deleteTeacher")
@ResponseBody
public Response<Teacher> deleteTeacher(@RequestParam Integer id) {
   
    List<Teacher> teacherList = cache.get("list");
    Iterator<Teacher> iterator = teacherList.iterator();
    while(iterator.hasNext()){
   
        Teacher item = iterator.next();
        if (item.getId() ==  id) {
   
            iterator.remove();  //注意这个地方
        }
    }
    cache.put("list", teacherList);
    cache.get("list").stream().forEach(System.out::println);
    return Response.success();
}

报错场景说明

1.jquery调用post请求,后台一直报400,显示:JSON Parse error: Unrecognized token

Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Unrecognized token 'name': was expecting (JSON String, Number, Array, Object or token 'null', 'true' or 'false'); nested exception is com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'name': was expecting (JSON String, Number, Array, Object or token 'null', 'true' or 'false')<EOL> at [Source: (PushbackInputStream); line: 1, column: 6]]

错误代码:

//新增
$("#addTeacher").click(function () {
   
     // $("#myForm").show()0987;
     flag = vertifyForm();
     var params = {
   
         "name":$("#name").val(),
         "classes":$("#classes").val(),
         "college":$("#college").val(),
         "alias":$("#alias").val(),
         "sex":$("#sex :checkbox").val()
     };
     $.ajax({
   
         type:"POST",
         url:"/addTeacher",
         async: true,
         dataType: "json",
         //ajax提交post请求时,必须使用JSON.stringify(data) 序列化请求参数,否则报400
         data: params,
         // data: JSON.stringify(params),
         contentType: "application/json; charset=UTF-8",
         success : function (response) {
   
             if (response.code === 200) {
   
                 console.log("***************");
                 console.log(response);
             }
         }
     });
 });

解决办法:ajax提交post请求时,使用JSON.stringify(data) 序列化请求参数(data为请求接口的数据)
正确代码:data: JSON.stringify(params),

2.清空form表单问题,例如input和checkbox标签

之前碰到的问题:标签checkbox一直无法清除

//清空form - 这里是正确的代吗
var emptyForm = function () {
   
    $("#name").val("");
    $("#classes").val("");
    $("#college").val("");
    $("#alias").val("");
    $("#sex :checkbox").removeAttr("checked");        //该方式可清楚选中
}

3.引入Bootstrap和Jquery显示404找不到文件

说明:引入css和第三方js顺序,先加载css,再加载jquery的js,最后加载bootstrap.js,否则加载顺序不对可能出错

发生错误原因:我写的绝对路径和相对路径都不对,另外我也不确信相对路径
究竟是从哪里开始算,所以一直报404

正确的图片路径及代吗如下
image.png

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <!--先加载css,再加载js,否则可能出错-->
    <link th:href="@{bootstrap-3.4.1-dist/css/bootstrap.css}" rel="stylesheet" />
    <link th:href="@{bootstrap-3.4.1-dist/css/bootstrap-theme.css}" rel="stylesheet" />
    <!--切记:先加载jquery的js,再加载bootstrap.js-->
    <script th:src="@{jquery/jquery3.6.0.js}"></script>
    <script th:src="@{bootstrap-3.4.1-dist/js/bootstrap.js}"></script>
</head>

会议详情

image.png

重要信息

大会介绍

第四届公共管理与大数据分析国际学术会议 (PMBDA 2024)将于2024年12月20-22日在中国青岛召开。会议主题主要围绕公共管理与大数据分析等相关研究领域展开讨论,旨在为相关研究方向的专家学者及企业发展人提供一个分享研究成果、讨论存在的问题与挑战、探索前沿科技的国际性合作交流平台。现诚邀国内外高校、科研机构专家、学者,企业界人士及其他相关人员踊跃投稿并参会交流。

image.png
image.png

4.radio对应的性别想实现,点击男,则女取消勾选,实际情况是取消勾选不了,且男女都会选中,具体如图

image.png

前端代吗如下

<div class="checkbox">
    <label id="sex">
        <input type="radio"  value=1>&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio"  value=0 checked="checked"></label>
</div>

问题产生原因: 没设置name属性造成
解决办法:两个input份别补充name属性即可默认实现每次只能选中一个,另外往后初始化标签栏,属性id和name最好默认都给上,防止莫名出错

<label id="sex">
    <input type="radio" name="sex" value=1>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" name="sex" value=0 checked="checked"></label>

5.删除功能报错 java.util.ConcurrentModificationException: null

出错场景描述:
后台模拟一个本地缓存ConcurrentHashMap来存放list信息,页面点击删除按钮时后台删除list里面的某个记录,举例代码如下,该问题报错点在于,当既遍历list,同时又想操作删除某个元素时,就会产生这个报错

private ConcurrentHashMap<String, List<Teacher>> cache = new ConcurrentHashMap<>();

@PostConstruct
public void initCache() {
   
    List<Teacher> teacherList = new ArrayList<>();
    Teacher teacher1 = new Teacher();
    teacher1.setId(1);
    teacher1.setName("周杰伦");
    teacher1.setClasses("三年二班");
    teacher1.setCollege("魔法学院");
    teacher1.setAlias("Jay Chou");
    teacher1.setSex(1);
    teacherList.add(teacher1);
    Teacher teacher2 = new Teacher();
    teacher2.setId(2);
    teacher2.setName("丽萨");
    teacher2.setClasses("三年二班");
    teacher2.setCollege("魔法学院");
    teacher2.setAlias("Lisa");
    teacher2.setSex(0);
    teacherList.add(teacher2);
    cache.put("list", teacherList);
}

//删除
 @DeleteMapping(value = "/deleteTeacher")
 @ResponseBody
 public Response<Teacher> deleteTeacher(@RequestParam Integer id) {
   
     List<Teacher> teacherList = cache.get("list");
     for (Teacher item : teacherList) {
   
         if (item.getId() ==  id) {
   
             teacherList.remove(item);
         }
     }
     cache.put("list", teacherList);
     cache.get("list").stream().forEach(System.out::println);
     return Response.success();
 }

解决办法,不使用teacherList.remove(item);方法,而使用迭代器的iterator.remove();

//删除
@DeleteMapping(value = "/deleteTeacher")
@ResponseBody
public Response<Teacher> deleteTeacher(@RequestParam Integer id) {
   
    List<Teacher> teacherList = cache.get("list");
    Iterator<Teacher> iterator = teacherList.iterator();
    while(iterator.hasNext()){
   
        Teacher item = iterator.next();
        if (item.getId() ==  id) {
   
            iterator.remove();  //注意这个地方
        }
    }
    cache.put("list", teacherList);
    cache.get("list").stream().forEach(System.out::println);
    return Response.success();
}

6.更新功能报错 java.util.ConcurrentModificationException: null

更新和删除功能类型,想遍历list进行删除或者添加操作,
思路:便利list碰到匹配的就删除,用form传过来的新值添加进list中,从而达到更新目的,
问题出在:如果操作同一个list,哪怕用迭代器也会报错,正确思路是,从新创建个list,便利碰到不同的直接添加,碰到匹配的就保存到新的实体对象中,再添加到list中

本人相关其他文章链接

1.JQuery选择器+DOM操作+事件+DOM与JQuery对象间的转化

2.个人练习前端技术使用Bootstrap、JQuery、thymeleaf

3.JavaScript入门及基础知识介绍

4.AJax(XHR+Get和Post+AJax的封装)

5.SpringBoot项目的html页面使用axios进行get post请求

目录
相关文章
|
25天前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
1月前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
116 29
|
18天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
28 5
|
25天前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
27 3
|
25天前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
1月前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
38 3
|
1月前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
67 4
|
1月前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
27 2
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
31 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
前端开发 JavaScript 开发者
惊!这些前端技术竟然能让你的网站在社交媒体上疯传!
【10月更文挑战第30天】在这个信息爆炸的时代,社交媒体成为内容传播的重要渠道。本文介绍了前端开发者如何利用技术让网站内容在社交媒体上疯传,包括优化分享链接、创建引人注目的标题和描述、利用Open Graph和Twitter Cards、实现一键分享功能以及创造交互式内容。通过这些方法,提升用户分享意愿,使网站成为社交媒体上的热门话题。
39 2

热门文章

最新文章