Springboot+html5+mysql的CRUD增删改查（基础版本详细，附带源码）（二）-阿里云开发者社区

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+html5+mysql的CRUD增删改查（基础版本详细，附带源码）（二）

热门文章

最新文章

相关课程

相关电子书

推荐镜像

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料