用SpringBoot技术对一张表进行增删改查来体验自动装配

今日目标

1.springboot自动装配原理

2.springboot整合定时器Quartz >

3.thymeleaf模板引擎

1.springboot自动装配原理

(1)默认自动扫描的包 【主启动类所在的包以及子包】
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
如果想扫描其他的包,则必须人为的指定。
在这里插入图片描述
(2)自动装配类。web—AutoConfigurtionDispactherServlet—自动装配DispatcherServlet类

// JDBC----->DataSOurceAutoConfiguration---->读取配置文件

//Druid—

在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述只要引入相关的启动类依赖,则会加载对于的自动装配类。

3.springboot整合定时器Quartz

使用步骤: 参考网站 https://cron.qqe2.com/
1.引入相关的依赖

 		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-quartz</artifactId>
        </dependency>

2.创建一个任务类以及任务功能

package com.yaokui.time;

import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;

@Component
public class TaskTime {
    @Scheduled(cron="0/3 * * * * ? ")
    public void task(){
        System.out.println("你若懂我该有多好!!");
    }
}

3.启动定时器的注解

package com.yaokui;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.scheduling.annotation.EnableScheduling;

@SpringBootApplication
@EnableScheduling
@ComponentScan(basePackages = {"com.yaokui.entry","com.yaokui.config"})
public class Maven {
    public static void main(String[] args) {
        SpringApplication.run(Maven.class,args);
    }
}

3. 分页插件PageHelper

(1)加入PageHelper的启动依赖

		<dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.13</version>
        </dependency>

(2)controller的代码

package com.yk.surshop.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.yk.surshop.entry.TabEmp;
import com.yk.surshop.mapper.EmpMapper;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import javax.annotation.Resource;
import java.util.List;

@RestController
public class EmpController {

    @Resource
    private EmpMapper empMapper;
    //查询信息
    @GetMapping("e")
    public ModelAndView emp(@RequestParam Integer currentPage, @RequestParam Integer pageSize){
        PageHelper.startPage(currentPage,pageSize);
        List<TabEmp> tabEmps= empMapper.selectEmp();
        PageInfo<TabEmp> pageInfo=new PageInfo<>(tabEmps);
        ModelAndView modelAndView=new ModelAndView("emp");
        modelAndView.addObject("pageInfo",pageInfo);
        return modelAndView;
    }
}

3. thymeleaf模板引擎—JSP在这里插入图片描述

如何使用thymeleaf

(1)引入相关的依赖

		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

(2)必须在网页中引入

<html xmlns:th="http://www.thymeleaf.org">

(3)可以使用thymeleaf标签库
在这里插入图片描述

下面对所学进行练习 已数据库中的tab_emp表为例进行增删改查

展示项目结构:
在这里插入图片描述
1.mapper层接口

package com.yk.empspringboot.mapper;

import org.springframework.stereotype.Component;
import java.util.List;
import java.util.Map;
@Component
public interface EmpMapper {
    List<Map> selectAll();
    List<Map> selectById(Integer id);
    int up(Map map);
    int ins(Map map);
    int delete(Integer id);
}

2.service层接口

package com.yk.empspringboot.service;

import com.yk.empspringboot.entry.LayUIEntry;
import com.yk.empspringboot.entry.ReturnData;
import java.util.Map;

public interface EmpService {
 LayUIEntry sel();
 Map selById(Integer id);
 ReturnData ins(Map map);
 ReturnData up(Map map);
 ReturnData del(Integer id);
}

service的实现类

package com.yk.empspringboot.service;

import com.yk.empspringboot.entry.LayUIEntry;
import com.yk.empspringboot.entry.ReturnData;
import com.yk.empspringboot.mapper.EmpMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Map;
@Service

public class EmpServiceImpl implements EmpService{
    @Autowired
    EmpMapper emp;
    @Override
    public LayUIEntry sel() {
        List<Map> list= emp.selectAll();
        return new LayUIEntry(0,"查询成功",list);
    }
    
    @Override
    public Map selById(Integer id) {
        return emp.selectById(id).get(0);
    }

    @Override
    public ReturnData ins(Map map) {
        int i= emp.ins(map);
        if (i>0){
            return new ReturnData(true,"新增成功");
        }
        return new ReturnData(false,"添加失败");
    }

    @Override
    public ReturnData up(Map map) {
        int i= emp.up(map);
        if (i>0){
            return new ReturnData(true,"修改成功");
        }
        return new ReturnData(false,"修改失败");
    }

    @Override
    public ReturnData del(Integer id) {
        int i= emp.delete(id);
        if (i>0){
            return new ReturnData(true,"删除成功");
        }
        return new ReturnData(false,"删除失败");
    }
}

3.controller层代码

package com.yk.empspringboot.controller;

import com.yk.empspringboot.entry.LayUIEntry;
import com.yk.empspringboot.entry.ReturnData;
import com.yk.empspringboot.service.EmpService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import java.util.Map;

@RestController
@RequestMapping("/ajax")

public class AjaxEmp {
    @RequestMapping("/xs")
    public ModelAndView insert1()
    {
        ModelAndView modelAndView = new ModelAndView("emp3");
        return modelAndView;
    }
    @Autowired
    EmpService empw;
    @RequestMapping("/sel")
    public LayUIEntry selAll(){
        return empw.sel();
    }
    @RequestMapping("/selId")
    public Map selId(@RequestParam Integer id){
        return empw.selById(id);
    }
    @RequestMapping("/ins")
    public ReturnData ins(@RequestBody Map map){
        return empw.ins(map);
    }
    @RequestMapping("/up")
    public ReturnData up(@RequestBody Map map){
        return empw.up(map);
    }
    @RequestMapping("/del")
    public ReturnData del(@RequestParam Integer id){
        return empw.del(id);
    }
}

4.书写sql语句层mapper.xml

<?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">
<mapper namespace="com.yk.empspringboot.mapper.EmpMapper">
    <select id="selectAll" resultType="map">
        select * from tab_emp
    </select>
    <select id="selectById" resultType="map">
        select * from tab_emp where emp_id=#{id}
    </select>
    <insert id="ins" parameterType="map">
        insert into tab_emp(emp_name,emp_age,emp_phone,emp_sex,emp_addr,emp_dist,emp_birth,emp_hiredate)
        values (#{emp_name},#{emp_age},#{emp_phone},#{emp_sex},#{emp_addr},#{emp_dist},#{emp_birth},#{emp_hiredate})
    </insert>
    <update id="up" parameterType="map">
        update tab_emp set emp_name=#{emp_name},
        emp_age=#{emp_age},emp_phone=#{emp_phone},emp_sex=#{emp_sex},emp_addr=#{emp_addr},emp_dist=#{emp_dist},
        emp_birth=#{emp_birth},emp_hiredate=#{emp_hiredate}
        where emp_id=#{emp_id}
    </update>
    <delete id="delete">
        delete from tab_emp where emp_id=#{id}
    </delete>
</mapper>

5.前端页面代码:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>
<table class="layui-hide" id="TestTable" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>

<div id="testDiv" style="display: none">
    <form class="layui-form" action="" id="TestForm" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <input  name="emp_id"  id="id" lay-verify="id" autocomplete="off" placeholder="id" class="layui-input" style="display: none">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="emp_name"  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="emp_sex"  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="emp_phone"  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="emp_age"  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="emp_addr"  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="date" name="emp_birth"  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="emp_dist"  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="date" name="emp_hiredate"  autocomplete="off"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="saveBtn">保存</button>
                <button type="reset" id="re" class="layui-btn"  lay-filter="saveBtn">重置</button>
            </div>
        </div>
    </form>
</div>

<script th:inline="none">
    //加载模块(从layui 2.6 开始,第一个参数不传即代表加载所有内置模块)
    layui.use(['layer', 'table','form'], function() {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        function  loadPage(){
            //执行一个 table 实例
            table.render({
                elem: '#TestTable'
                ,height: 620
                ,url: '/ajax/sel' //数据接口
                ,title: '员工管理'
                ,page: true //开启分页
                ,toolbar: "#toolbarDemo" //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
                ,cols: [[
                    , {field: 'emp_name', align: 'center', title: '员工姓名'}
                    , {
                        field: 'emp_sex', align: 'center', title: '性别', sort: true, templet: function (data) {
                            if (data.emp_sex == "男") {
                                return '男';
                            } else {
                                return '女';
                            }
                        }
                    }
                    , {field: 'emp_birth', align: 'center', title: '出生日期', sort: true, hide: true}
                    , {field: 'emp_phone', align: 'center', title: '手机号', sort: true}
                    , {field: 'emp_age', align: 'center', title: '年龄', sort: true}
                    , {field: 'emp_addr', align: 'center', title: '地址', sort: true}
                    , {field: 'emp_dist', align: 'center', title: '邮编', sort: true}
                    , {field: 'emp_hiredate', align: 'center', title: '入职时间'}
                    , {fixed: 'right', width: 300, align: 'center', title: "操作", toolbar: '#barDemo'}
                ]]
                ,id:"loadMoney"
            });
        }
        loadPage()
        //监听头
        table.on('toolbar(test)', function(obj){
            if(obj.event=='add'){
                layer.open({
                    title:"添加员工",
                    type: 1,
                    skin: 'layui-layer-demo', //样式类名
                    closeBtn: 1, //不显示关闭按钮
                    anim: 2,
                    area: ['620px', '440px'], //宽高
                    shadeClose: true, //开启遮罩关闭
                    content: $("#testDiv")
                });
            }
        })
//监听行工具事件
        table.on('tool(test)', function(obj){
            console.log(obj)
            if(obj.event=='edit'){
                $.ajax({
                    url:"/ajax/selId?id="+obj.data.emp_id,
                    data:{},
                    dataType:"json",
                    type:"get",
                    success:function (reData){
                        //回显:
                        console.log(reData)

                        layer.open({
                            title:"修改员工信息",
                            type: 1,
                            skin: 'layui-layer-demo', //样式类名
                            closeBtn: 1, //不显示关闭按钮
                            anim: 2,
                            area: ['620px', '440px'], //宽高
                            shadeClose: true, //开启遮罩关闭
                            content: $("#testDiv")
                        });
                        form.val('example', reData);
                    }
                })
            }else if(obj.event=='delete'){
                $.ajax({
                    url:"/ajax/del?id="+obj.data.emp_id,
                    data:{},
                    dataType:"json",
                    type:"delete",
                    success:function (reData){
                        layer.confirm('确认删除?', {
                            title:'提醒',
                            area:['240px','160px'], //弹框的大小
                            btn:['确认','取消'] //按钮
                        }, function(){
                            layer.closeAll('dialog');
                            layer.msg("删除成功")
                            loadPage();//加载查询列表
                        })
                    }
                })
            }
        })
        //监听提交
        form.on('submit(saveBtn)', function(data){
            var id=$("#id").val();
            if(id!=null&&id!=""){
                $.ajax({
                    url:"/ajax/up",
                    data:JSON.stringify(data.field),
                    dataType:"json",
                    contentType:"application/json",
                    type:"post",
                    success:function (redata){

                        if(redata.state){
                            layer.closeAll();//关闭弹出框
                            loadPage();//加载查询列表
                            layer.msg(redata.message)
                            $("#TestForm")[0].reset();//表单重置
                        }else{
                            layer.msg(redata.message)

                        }
                    }
                });
            }else{
                $.ajax({
                    url:"/ajax/ins",
                    data:JSON.stringify(data.field),
                    dataType:"json",
                    contentType:"application/json",
                    type:"post",
                    success:function (redata){
                        if(redata.state){
                            layer.msg(redata.message)
                            loadPage();//加载查询列表
                            layer.closeAll();//关闭弹出框
                            $("#TestForm")[0].reset();//表单重置
                        }else{

                            layer.msg(redata.message)
                            location.reload()
                        }
                    }
                });
            }

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

以上为全部代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值