Springboot+html5+mysql的CRUD增删改查（基础版本详细，附带源码）

原创 已于 2023-08-03 16:28:19 修改 · 2.6k 阅读 · 38 ·
CC 4.0 BY-SA版权
div class=creativecommons h1a href=https://devpress.csdn.net/beijing target=_blankstrong北京城市开发者社区主理人-默语 /strong/a/h1 /div
文章标签：

#java #springboot #spring

于 2021-05-24 17:25:17 首次发布
本文详细介绍了使用Spring Boot进行后台CRUD操作的代码实现，包括纯后台代码和前后端交互，并展示了如何在HTML页面上实现增删改查功能，配合MySQL数据库操作，适合初学者实践。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

后台写的总体分为两个部分
第一部分：纯后台的代码实现CRUD（增删改查）
第二部分：前后端交互实现CRUD（增删改查）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
先贴下公共的一些代码：
pom

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
<!--           maven 添加json-->
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
        </dependency>
        <!--jquery-webjar-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.0</version>
        </dependency>
        <!--bootstrap-webjar-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.0.0</version>
        </dependency>
        <!--配置文件注入时使用后会有提示-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.18</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.0.2</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
            <scope>provided</scope>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.2.6.RELEASE</version>
            </plugin>
        </plugins>
    </build>

</project>

application.yml 的数据库连接代码：

spring:
    datasource:
      name:
      url: jdbc:mysql://127.0.0.1:3306/login?useUnicode=true&characterEncoding=UTF-8&allowMultiQueries=true&serverTimezone=UTC
      username: root
      password: root
    messages:
      ##message.propertiesi是默认的国际化配置文件，不需要特别指定路径
      basename: i18n.login

  ##禁用thymeleaf的缓存
    thymeleaf:
      cache: false

mybatis-plus:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.example.demo.entity

server:
  port: 1234
  servlet:
    context-path: /

application.properties html的一些配置的代码

# thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.cache=false

sql的代码：

/*
 Navicat Premium Data Transfer

 Source Server         : bendi
 Source Server Type    : MySQL
 Source Server Version : 50732
 Source Host           : localhost:3306
 Source Schema         : login

 Target Server Type    : MySQL
 Target Server Version : 50732
 File Encoding         : 65001

 Date: 24/05/2021 16:32:11
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `ID` int(11) NOT NULL COMMENT 'ID',
  `NAME` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '名字',
  `LOGIN` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '账号',
  `PASSWORD` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '密码',
  PRIMARY KEY (`ID`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (2, '不知道', 'yan', '78578578');
INSERT INTO `user` VALUES (11, '11111', '555555', '44');
INSERT INTO `user` VALUES (22, '8861111', '33', '335');
INSERT INTO `user` VALUES (88, '88888888888', '33781', '335787');
INSERT INTO `user` VALUES (2054, '4524', '44444', '4242');
INSERT INTO `user` VALUES (8877, '888', '887', '878787');

SET FOREIGN_KEY_CHECKS = 1;

下面介绍第一部分无页面代码：

Controller

package com.example.demo.controller;


import com.example.demo.entity.UserEntity;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;


import java.util.List;

@RequestMapping("user")
@RestController
public class UserController {

    //todo    ====================================后台调用---》   每个控制台上面有  自己复制即可

    @Autowired
    private UserService userService;

    /**
     * 查询所有的数据
     * @return
     *
     * http://localhost:1234/user/list
     */
    @RequestMapping("list")
    public List<UserEntity> findall(){
        return userService.findall();
    }




    /** 当使用@RequestMapping URI id 样式映射时，
     * 即 someUrl/{paramId}, id @Pathvariable注解绑定它传过来的值到方法的参数上。
     *
     * 根据ID查询
     * @param id
     * @return
     *
     * http://localhost:1234/user/select/2
     */
    @RequestMapping("/select/{id}")
    public String selectId(@PathVariable int id){
            return userService.getselectId(id).toString();
    }


    /**
     *
     * 根据ID删除
     * @param id
     * @return
     *
     * http://localhost:1234/user/delect/2
     */
    @RequestMapping("/delect/{id}")
    public String delectId(@PathVariable int id){
      int result=userService.delectId(id);
        if (result>=1){
            return "删除成功";
        }else{
            return "删除失败";
        }
    }



    /**
     * http://localhost:1234/user/index
     * 展示页面
     * @return
     */
    @RequestMapping("/index")
    public ModelAndView index(){
        return new ModelAndView("index");

    }





    /**
     * http://localhost:1234/user/ahtml
     * 新增页面
     * @return
     */
    @RequestMapping("/ahtml")
    public ModelAndView adds(){
        return new ModelAndView("add");

    }





    /**
     *  新增数组
     * @param userEntity
     * @return
     *http://localhost:1234/user/adds
     *
     * http://localhost:1234/user/ahtml  用这个
     * 返回值是IdUserEntity(id=11, name=22, login=33, password=44)
     */

    @RequestMapping("/adds")
    public  String  add(UserEntity userEntity){

        String str = "返回值是"+"Id"+userEntity;
        System.out.println(str);

        int result=userService.addall(userEntity);
        if (result>=1){
            return "添加成功";
        }else{
            return "添加失败";
        }


    }

    /**
     *  修改
     * @param userEntity
     * @return
     *
     * http://localhost:1234/user/updatess
     */
        @RequestMapping("/updatess")
        public  String Upate(UserEntity userEntity){
            //这里是需要修改的数据  如果id么有就算新增
            userEntity.setId("2");
            userEntity.setName("不知道");
            userEntity.setLogin("yan");
            userEntity.setPassword("78578578");

          int results=userService.update(userEntity);

            if(results==1){
                return "更新成功";
            }
            return "更新失败";
        }





}

实体类 entity

package com.example.demo.entity;

import lombok.Data;

@Data  //这里引用了data 所以不需要 get/set的方法了
public class UserEntity {

    private String id;//id

    private  String name;//姓名

    private String login; //账号

    private String password;// 密码

}

Service

package com.example.demo.service;

import com.example.demo.entity.UserEntity;

import java.util.List;

public interface UserService {
    /**
     * 查询所有的数据
     * @return
     */
    List<UserEntity> findall();

    /**
     * 根据iD查询数据
     * @param id
     * @return
     */
    UserEntity getselectId(int id);

    /**
     * 根据id删除数据
     * @param id
     * @return
     */
    int delectId(int id);

    /**
     * 新增数据
     * @param userEntity
     * @return
     */
    int addall(UserEntity userEntity);

    /**
     * 修改数据
     * @param userEntity
     * @return
     */
    int update(UserEntity userEntity);
}

Serviceimpl 实现层

package com.example.demo.service.impl;

import com.example.demo.entity.UserEntity;
import com.example.demo.mapper.UserinfoMapper;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service  //。@Service用于标注业务层组件
public class UserinfoServiceImpl implements UserService {
  //引入dao接口
    @Autowired
    private UserinfoMapper userinfoMapper;

    /**
     * 调用finall 实现查询全部
     * @return
     */
    @Override
    public List<UserEntity> findall() {
        return userinfoMapper.findall();
    }

    /**
     * 调用getselectId 实现根据id查询
     * @param id
     * @return
     */
    @Override
    public UserEntity getselectId(int id) {
        return userinfoMapper.getselectId(id);
    }

    /**
     * 根据id 删除对应的数据
     * @param id
     * @return
     */
    @Override
    public int delectId(int id) {
        return userinfoMapper.delectId(id);
    }

    /**
     * 新增数据
     * @param userEntity
     * @return
     */
    @Override
    public int addall(UserEntity userEntity) {
        return userinfoMapper.addall(userEntity);
    }

    /**
     * 修改数据 根据id
     * @param userEntity
     * @return
     */
    @Override
    public int update(UserEntity userEntity) {
        return userinfoMapper.update(userEntity);
    }
}

Dao的接口层

package com.example.demo.mapper;


import com.example.demo.entity.UserEntity;

import java.util.List;

public interface UserinfoMapper {
    /**
     * 查询全部
     * @return
     */
    List<UserEntity> findall();

    /**
     * 根据id查询
     * @param id
     * @return
     */
    UserEntity getselectId(int id);

    /**
     * 根据id删除
     * @param id
     * @return
     */
    int delectId(int id);


    /**
     * 新增数据
     * @param userEntity
     * @return
     */
    int addall(UserEntity userEntity);

    /**
     * 修改数据id
     * @param userEntity
     * @return
     */
    int update(UserEntity userEntity);
}

启动类： 你们用自己默认的就行 我发出来是 怕你们手写的不会写

package com.example.demo;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan(basePackages = "com.example.demo.mapper")
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}

}

Mapper 层 sql 代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

    <!--数据源文件（告知程序着是数据源从这里拿数据Repository）-->
    <mapper namespace="com.example.demo.mapper.UserinfoMapper">

    <resultMap id="userMap" type="com.example.demo.entity.UserEntity">
        <id column="id" property="id" jdbcType="INTEGER"/>
        <result column="name" property="name"/>
        <result column="login" property="login"/>
        <result column="password" property="password"/>
    </resultMap>

<!--    把一些数据都在一起 调用的时候直接写Man_sql_name 即可-->
    <sql id="Man_sql_name">
        id,name,login,password
    </sql>


<!--     查询全部信息-->
    <select id="findall"  parameterType="com.example.demo.entity.UserEntity" resultMap="userMap">
        select
        <include refid="Man_sql_name"/>
        from user
    </select>


<!--     根据id查询数据-->
    <select id="getselectId"  parameterType="integer" resultMap="userMap">
        select
        <include refid="Man_sql_name"/>
        from user where id=#{id}
    </select>

    <!--     根据id删除数据-->
    <delete id="delectId"  parameterType="int">
        delete
        from user where id=#{id}
    </delete>

<!--     新增数据-->
    <insert id="addall"  parameterType="com.example.demo.entity.UserEntity">
        insert into user
<trim prefix="(" suffix=")" suffixOverrides="," >
        <if test="id != null" >
            id,
        </if>
        <if test="name != null" >
            name,
        </if>
        <if test="login != null" >
            login,
        </if>
        <if test="password != null" >
            password,
        </if>
    </trim>
        <trim prefix="values (" suffix=")" suffixOverrides="," >
        <if test="id != null" >
            #{id,jdbcType=VARCHAR},
        </if>
        <if test="name != null" >
            #{name,jdbcType=VARCHAR},
        </if>
         <if test="login != null" >
                #{login,jdbcType=VARCHAR},
          </if>
        <if test="password != null" >
            #{password,jdbcType=VARCHAR},
        </if>
        </trim>
    </insert>


<!--  修改数据-->
    <update id="update" parameterType="com.example.demo.entity.UserEntity">
        update  user
        <set>
        <if test="name !=null">
            name =#{name,jdbcType=VARCHAR},
        </if>
        <if test="login !=null">
            login=#{login,jdbcType=VARCHAR},
        </if>
        <if test="password !=null">
            password=#{password,jdbcType=VARCHAR},
        </if>
        </set>

        where id=#{id,jdbcType=VARCHAR}




    </update>





</mapper>

第一部分的代码就结束了

展示部分页面实现效果：

查询全部

http://localhost:1234/user/list在这里插入图片描述

其它的感兴趣的同学自己去操作吧我就不一一操作了

下面介绍第二部分 页面的CRUD

后端只有控制台不一样其他的都是一样的

Controllrt

package com.example.demo.controller;

import com.example.demo.entity.UserEntity;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import java.util.Collection;

@Controller
public class HtmlController {

//todo    ====================================页面调用---》  http://localhost:1234/emps
    @Autowired
    private UserService userService;

    /**
     *
     * //他的，@GetMapping是一个组合注解，是@RequestMapping(method = RequestMethod.GET)的缩写。
     * @param model
     * @return
     * http://localhost:1234/emps
     */

    @GetMapping("/emps")
    public String getEmps(Model model){
        Collection<UserEntity> entities =userService.findall();
        //放入域中
          model.addAttribute("entities",entities);
        System.out.println("entities//////////=="+entities);
        // thymeleaf默认就会拼串
        // classpath:/templates/xxxx.html
        return "index";
      //  return new ModelAndView("index");
    }

    //删除员工
    @RequestMapping (value = "/delect/{id}",method = RequestMethod.POST)
    public String deleteEmp(@PathVariable("id") Integer id) {
        //根据id删除员工
        userService.delectId(id);
        //删除后返回本页面 主页
        return "redirect:/emps";
    }


/**
 *
 */
    //回显页面
    @RequestMapping (value = "/selectUp/{id}")
    public String selectUp(@PathVariable("id") Integer id,Model model) {
        UserEntity userEntity = userService.getselectId(id);
        System.out.println("进来了update"+userEntity);
        model.addAttribute("userEntity",userEntity);

        //删除后返回本页面 主页
        return "update";
    }





    /**
     *  修改
     * @param userEntity
     * @return
     *
     * http://localhost:1234/user/updatess
     */
    @RequestMapping("/updatehtml")
    public String Upate(UserEntity userEntity){
        int results=userService.update(userEntity);

        if(results==1){
            System.out.println("更新成功");
        }else {
            System.out.println("更新失败");
        }

        return "index";
    }




}

页面代码

index.html

<!DOCTYPE html>
<!--<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 以下方式定时转到其他页面 -->
<!--    <meta http-equiv="refresh" content="5;url=add.html">-->
</head>

<!--  springboot-->
<script src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
<body>

<table border="1" style="border-collapse: collapse;">
    <caption>基本的联系</caption>
    <thead>
    <tr>
        <th>id</th>
        <th>名字</th>
        <th>登录账号</th>
        <th>密码</th>
    </tr>
    </thead>
   <tbody>
     <tr th:each="user:${entities}">
         <th th:text="${user.id}">id</th>
         <th th:text="${user.name}">name</th>
         <th th:text="${user.login}">login</th>
         <th th:text="${user.password}">password</th>

         <th>

             <a class="btn btn-sm btn-primary" th:href="@{/selectUp/}+${user.id}">编辑</a>

             <button th:attr="delete_uri=@{/delect/}+${user.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
         </th>
     </tr>




   </tbody>


</table>
<!--定义一个form表单，发送delete请求-->
<form id="deleteEmpForm" method="post">
    <input type="hidden" name="_method" value="DELETE">
</form>

<!--定义js方法，当点击删除按钮时，删除员工信息-->
<script>
    $(".deleteBtn").click(function(){
        //删除当前员工
        $("#deleteEmpForm").attr("action", $(this).attr("delete_uri")).submit();//action指定执行方法请求路径
        return false;
    })
</script>
<div>
  <div>================</div>
    <a  href = "/user/ahtml">
        <button>新增</button >
    </a>

</div>

</body>
</html>

add.html 新增代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
</head>
<body>
 <form method="post" onsubmit="return false" action="##" id="add">
     id:<input type="text" name="id"><br>
     name:<input type="text" name="name"><br>
     login:<input type="text" name="login"><br>
     password:<input type="password" name="password"><br>
     <input type="button" value="新增" onclick="loginsa()">

 </form>

<!--      html页面可用-->
<!--        <script type="text/javascript" src="../static/js/jquery.min.js"></script>-->
<!--         <script type="text/javascript" src="../static/js/jquery.easyui.min.js"></script>-->
<!--  springboot-->
 <script src="/js/jquery.min.js"></script>
 <script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
<script type="text/javascript">

    function loginsa(){
    $.ajax({
        type:"POST",//方法类型
        dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
    /*
    dataType:
        要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
        xml：返回XML文档，可用JQuery处理。
        html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
        script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
        json：返回JSON数据。
        jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
        text：返回纯文本字符串。
    */
        url:"/user/adds",
        data:$('#add').serialize(),
        success: function (result) {
            alert("成功")
            window.location.href="/emps"
            console.log(result);//打印服务端返回的数据(调试用)
            if (result.resultCode == 200) {
                alert("SUCCESS");
            };
        },
        error : function(s,s2,s3) {
            //数据成功传到后台 也有返回值 但就是报错 parsererror ：参考
            // https://blog.csdn.net/AinGates/article/details/75250223 /
            /*
                        写了一个ajax方法，后台一切正常，通过浏览器的F12工具查看XMLHttpRequest.status返回200，XMLHttpRequest.readyState返回4，也都没有问题。但是回调函数跳到error里，报parsererror的错误。经过排查，发现是因为后台返回时用了@ResponseBody注解（SpringMVC返回json格式的注解），但前台ajax提交没有定义dataType属性（定义服务器返回的数据类型）

                        还有一种情况是ajax方法中定义了 dataType:"json"属性，就一定要返回标准格式的json字符串，要不jQuery1.4+以上版本会报错的，因为不是用eval生成对象了，用的JSON.parse，如果字符串不标准就会报错。比如只返回一个简单的字符串“success”，“fail”， true，false，并不是标准的json字符串就会报错。

                               首先，jQuery 1.4版本之后对服务端返回的JSON 数据要求比较严格，必须严格按照JSON的标准来了。
                    */
            console.log(s)
            console.log(s2)
            console.log(s3)

            alert("异常！");
        }
    })

    }


</script>



</body>
</html>

update 修改代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>11111111111</div>

<form method="post" onsubmit="return false" action="##" id="update">
    id:<input type="text" name="id" th:value="${userEntity!=null}?${userEntity.id}"><br>
    name:<input type="text" name="name" th:value="${userEntity!=null}?${userEntity.name}"><br>
    login:<input type="text" name="login" th:value="${userEntity!=null}?${userEntity.login}"><br>
    password:<input type="text" name="password" th:value="${userEntity!=null}?${userEntity.password}"><br>
    <input type="button" value="修改" onclick="loginsa()">

</form>

<!--      html页面可用-->
<!--        <script type="text/javascript" src="../static/js/jquery.min.js"></script>-->
<!--         <script type="text/javascript" src="../static/js/jquery.easyui.min.js"></script>-->
<!--  springboot-->
<script src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
<script type="text/javascript">

    function loginsa(){
        $.ajax({
            type:"POST",//方法类型
            dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
            /*
            dataType:
                要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
                xml：返回XML文档，可用JQuery处理。
                html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
                script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
                json：返回JSON数据。
                jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
                text：返回纯文本字符串。
            */
            url:"/updatehtml",
            data:$('#update').serialize(),
            success: function (result) {
                alert("成功")
                window.location.href="/emps"
                console.log(result);//打印服务端返回的数据(调试用)
                if (result.resultCode == 200) {
                    alert("SUCCESS");
                };
            },
            error : function(s,s2,s3) {
                //数据成功传到后台 也有返回值 但就是报错 parsererror ：参考
                // https://blog.csdn.net/AinGates/article/details/75250223 /
                /*
                            写了一个ajax方法，后台一切正常，通过浏览器的F12工具查看XMLHttpRequest.status返回200，XMLHttpRequest.readyState返回4，也都没有问题。但是回调函数跳到error里，报parsererror的错误。经过排查，发现是因为后台返回时用了@ResponseBody注解（SpringMVC返回json格式的注解），但前台ajax提交没有定义dataType属性（定义服务器返回的数据类型）

                            还有一种情况是ajax方法中定义了 dataType:"json"属性，就一定要返回标准格式的json字符串，要不jQuery1.4+以上版本会报错的，因为不是用eval生成对象了，用的JSON.parse，如果字符串不标准就会报错。比如只返回一个简单的字符串“success”，“fail”， true，false，并不是标准的json字符串就会报错。

                                   首先，jQuery 1.4版本之后对服务端返回的JSON 数据要求比较严格，必须严格按照JSON的标准来了。
                        */
                console.log(s)
                console.log(s2)
                console.log(s3)

                alert("异常！");
            }
        })

    }


</script>







</body>
</html>

展示一部分效果给大家看看吧

在这里插入图片描述
http://localhost:1234/emps

编辑页面
在这里插入图片描述
新增页面

在这里插入图片描述
数据库展示图：

在这里插入图片描述

码云地址：https://gitee.com/yan_wen_chao/spring-boot-simple-crud.git
源码附上

希望大家先手动写 不要什么都不去学不去做；

到这里我就分享结束啦 希望可以帮助到大家；有任何问题可以联系我 看到我会及时回复；

Springboot+mysql+CRUD(增删改查)
Selenium的博客
05-24 2576
talk is cheap,show you my code 1.创建springboot项目 2.导入相关依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-...
springboot+hibernate+html增删改查demo
11-13
springboot+hibernate+html增删改查demo,可以运行，（包含运行帮助文档）
Springboot+jpa+MySQL+HTML之简单的增删改查Demo
01-15
利用jpa连接方式实现Springboot框架和MySQL的增删改查
用Springboot实现增删改查
最新发布
xxuan6001的博客
07-01 947
本文介绍了基于SpringBoot框架实现用户登录及增删改查功能的开发流程。系统采用MVC三层架构：表现层(Controller)处理前端请求，业务层(Service)实现业务逻辑，持久层(Mapper)操作数据库。通过MyBatis进行数据持久化，YML文件配置数据库连接。开发步骤包括：1)创建Maven项目并配置SpringBoot依赖；2)建立三层架构包结构；3)编写登录功能(前端表单、Controller、Service、Mapper及SQL)；4)扩展实现用户的增删改查功能；5)创建对应HTML页
springboot集成mybatis（code_generator.xml配置自动生成代码）
博客主要分享技术教程、工具教程、bug解决、前沿技术动态、编程经验、心得感悟等。 内容同步、干货获取、推广宣发请看侧栏推广信息
04-10 781
mybatis自动生成代码配置
SpringBoot管理系统的增删改查
Rk的博客
10-26 2063
一、环境配置 1、导入依赖 <!-- lombok --> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> <!-- 数据层 --> <dependency> <groupId>org.mybatis.spring..
springboot的增删改查
m0_65994896的博客
06-16 2257
教程：SpringBoot系列教材 （十七）- CRUD+分页 - Springboot使用Mybatis实现完整的 增删改查 CRUD和分页 (how2j.cn)。之前的练习只实现了查找功能，本次练习在上次练习的基础上增加了增删查找功能以及分页功能。@RequestMapping("/addCategory") #通过访问addcategory地址来实现增加操作。#调用categorymapper中的save()方法。CategoryController中主要是与其相对应的操作。
springboot+mybatis-plus+gradle+mysql+swagger基础增删改查、树形查询
02-20
本项目基于一系列技术栈，包括Spring Boot、MyBatis Plus、Gradle、MySQL和Swagger，实现了一个基础的增删改查（CRUD）功能，并提供了树形查询的能力。下面将详细介绍这些技术及其在项目中的应用。 **1. Spring ...
Springboot+MyBatis+MyBatisPlus+MySQL+Bootstrap增删改查登录分页源码+数据库
09-18
本项目结合这些技术，提供了完整的增删改查（CRUD）功能，以及登录和分页的实现，为初学者提供了一个良好的学习示例。 首先，SpringBoot是Spring框架的简化版，它集成了大量的常用组件，并且通过内嵌Tomcat服务器，...
SpringBoot+mybatis+增删改查完整源码
09-02
在本项目中，我们主要探讨的是如何利用SpringBoot框架与Mybatis进行数据库的增删改查操作。SpringBoot以其简洁的配置和快速的启动能力，成为现代Java开发中的热门选择，而Mybatis作为轻量级的持久层框架，提供灵活的...
Servlet+MySql+Web（HTML+CSS+JSP技术+EL表达式）通过IDEA来实现数据库的增删改查（crud)
06-22
Servlet通过JDBC（Java Database Connectivity）API与MySQL建立连接，执行SQL语句进行数据的增删改查。 3. **HTML**（超文本标记语言）：HTML是构成网页的基本元素，定义了页面的结构。在本项目中，HTML被用来创建...
基于springboot的增删改查
02-25
基于springboot的增删改查，适合初学springboot的小伙伴参考
SpringBoot整合MyBatis实现增删改查案例完整版（附源代码）
12-22
1.简介 Spring Boot是一个简化Spring开发的框架。用来监护spring应用开发，约定大于配置，去繁就简，just run 就能创建一个独立的，产品级的应用。 我们在使用Spring Boot时只需要配置相应的Spring Boot就可以用所有的Spring组件，简单的说，spring boot就是整合了很多优秀的框架，不用我们自己手动的去写一堆xml配置然后进行配置。从本质上来说，Spring Boot就是Spring,它做了那些没有它你也会去做的Spring Bean配置。 闲话少说，上图文： 2.开始 新建一个项目 com.example demo
springboot 增删改查-删除（省代码）
小白
06-05 533
Service层 //通过id直接进行删除 前提是id必循为主键 可通过@Id设置主键 public void doDelete(int id){ xxDao.deleteById(id); }//删除 Controller层 @RequestMapping("/doDelete")//删除 public String doDelete(HttpServletRequest request) { int id = Integer.parseI
springboot 增删改查 （不节省代码）
小白
06-04 877
1、创建包 1.Dao层：全称Data Access Object。Dao层比较底层，负责与数据库打交道具体到对某个表、某个实体的增删改查 2.Service层：又叫服务层或业务层，封装Dao层的操作，使一个方法对外表现为实现一种功能，例如：网购生成订单时，不仅要插入订单信息记录，还要查询商品库存是否充足，购买是否超过限制等等。 3.Controller层：业务控制层，负责接收数据和请求，并且调用Service层实现这个业务逻辑。 Controller层像是一个服务员，他把客人（前端）点的菜（数据、请求的
Springboot实现简单的登录增删改查最详细代码（idea）
qq771650656的博客
01-13 4545
Springboot实现简单的登录增删改查最详细代码（idea）1、使用idea创建springboot项目1.1导入web依赖和lombok，还有thymeleaf支持1.2静态资源的引入1.3application.properties文件内容1.4国际化设置2、配置完成后开始实现功能2.1在默认启动类同级下创建实体类的包（pojo）2.1.1创建部门实体类2.1.2创建员工实体类2.2创建dao层（没有关联数据库，模拟数据库中的数据）2.2.1创建部门dao,还有定义具体业务2.2.2创建员工dao
SpringBoot增删改查 -- 修改（省代码）
小白
06-08 752
根据id查询到数据库中的值之后的操作，直接更改保存 显示全部的页面 <td> <a th:href="@{/student/toUpdate(id=${student.id})}">修改</a> </td> controller层 删除线中是根据id查询中新加的，目的是获取id属性 @RequestMapping("/toUpdate")//id查询 public String toUpdate(HttpServletRequest reque
Spring boot链接表增删改查简便代码
Class_I_Love_you的博客
10-05 366
Spring boot 多表连接 增删改查代码简便* MYSQL当中的数据 在实体类当中，连接表 package com.demo12.demo.Ertity; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; import javax.persistence.*; @Table @Entity(name="student") public class Student { @Id @Generate.
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

默语佬

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值